svemagie.net/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix(dates): add font-mono to Alpine.js-rendered date spans

Browse Source 
CSS base layer covers <time> elements automatically, but dates
rendered via x-text into <span> elements need explicit font-mono.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 15:59:10 +01:00
parent d8032ccfd2
commit 4945a6f1e6
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/widgets/github-repos.njk
+3 -3
View File
@@ -58,7 +58,7 @@
<div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500"> <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500">
<code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code> <code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code>
<span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span> <span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span>
<span x-text="formatDate(commit.date)"></span> <span class="font-mono" x-text="formatDate(commit.date)"></span>
</div> </div>
</a> </a>
</li> </li>
@@ -83,7 +83,7 @@
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg> <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<span x-text="repo.stargazers_count"></span> <span x-text="repo.stargazers_count"></span>
</span> </span>
<span x-text="formatDate(repo.updated_at)"></span> <span class="font-mono" x-text="formatDate(repo.updated_at)"></span>
</div> </div>
</a> </a>
</li> </li>
@@ -139,7 +139,7 @@
<div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500 pl-6"> <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500 pl-6">
<span x-text="item.repo?.split('/')[1] || item.repo"></span> <span x-text="item.repo?.split('/')[1] || item.repo"></span>
<span x-show="item.number" x-text="'#' + item.number"></span> <span x-show="item.number" x-text="'#' + item.number"></span>
<span x-text="formatDate(item.date)"></span> <span class="font-mono" x-text="formatDate(item.date)"></span>
</div> </div>
</a> </a>
</li> </li>