svemagie.net/blog-eleventy-indiekit
1
0
Fork 0
mirror of https://github.com/svemagie/blog-eleventy-indiekit.git synced 2026-05-14 22:48:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(cards): add shadow-sm to all card elements across 24 files

Browse Source 
Design system requires shadow-sm + border on all cards.
Also fixes bg-white -> bg-surface-50 and bg-surface-100 -> bg-surface-50
where card backgrounds used wrong tokens.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
Ricardo
2026-03-07 15:58:48 +01:00
parent 2f442862af
commit 0f843e7ce1
24 changed files with 121 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/components/comments.njk
+4 -4
View File
@@ -36,7 +36,7 @@
<label for="comment-me" class="block text-sm font-medium mb-1">Your website</label> <label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
<input id="comment-me" type="url" x-model="meUrl" <input id="comment-me" type="url" x-model="meUrl"
placeholder="https://yourdomain.com" required placeholder="https://yourdomain.com" required
class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-600"> class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100">
</div> </div>
<button type="submit" class="button" x-bind:disabled="authLoading"> <button type="submit" class="button" x-bind:disabled="authLoading">
<span x-show="!authLoading">Sign In</span> <span x-show="!authLoading">Sign In</span>
@@ -56,7 +56,7 @@
<form x-on:submit.prevent="submitComment()"> <form x-on:submit.prevent="submitComment()">
<textarea x-model="commentText" rows="4" required <textarea x-model="commentText" rows="4" required
placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))" placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-600" class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100"
x-bind:maxlength="maxLength"></textarea> x-bind:maxlength="maxLength"></textarea>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span> <span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span>
@@ -75,7 +75,7 @@
</template> </template>
<template x-for="comment in comments" x-bind:key="comment.published"> <template x-for="comment in comments" x-bind:key="comment.published">
<div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<template x-if="comment.author?.photo"> <template x-if="comment.author?.photo">
<img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name" <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
@@ -90,7 +90,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener" <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
x-text="comment.author?.name || comment.author?.url"></a> x-text="comment.author?.name || comment.author?.url"></a>
<time class="text-xs text-surface-500" x-bind:datetime="comment.published" <time class="text-xs text-surface-500 font-mono" x-bind:datetime="comment.published"
x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time> x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
</div> </div>
<div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div> <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
_includes/components/fediverse-modal.njk
+4 -4
View File
@@ -29,7 +29,7 @@
<div> <div>
<div class="flex flex-col gap-2 mb-3"> <div class="flex flex-col gap-2 mb-3">
<template x-for="item in savedDomains" :key="item.domain"> <template x-for="item in savedDomains" :key="item.domain">
<div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-700 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors"> <div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-800 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors">
<button class="flex-1 px-3 py-2.5 text-left text-sm font-medium text-surface-900 dark:text-surface-100 cursor-pointer" <button class="flex-1 px-3 py-2.5 text-left text-sm font-medium text-surface-900 dark:text-surface-100 cursor-pointer"
@click="useSaved(item.domain)" @click="useSaved(item.domain)"
x-text="item.domain"></button> x-text="item.domain"></button>
@@ -45,7 +45,7 @@
@click="showAddNew()">Use a different instance</button> @click="showAddNew()">Use a different instance</button>
<div class="flex mt-3"> <div class="flex mt-3">
<button @click="showModal = false" <button @click="showModal = false"
class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"> class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
Cancel Cancel
</button> </button>
</div> </div>
@@ -60,13 +60,13 @@
@keydown.enter.prevent="confirm()" @keydown.enter.prevent="confirm()"
type="text" type="text"
placeholder="mastodon.social" placeholder="mastodon.social"
class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm"> class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm">
<template x-if="error"> <template x-if="error">
<p class="text-xs text-red-500 mt-1" x-text="error"></p> <p class="text-xs text-red-500 mt-1" x-text="error"></p>
</template> </template>
<div class="flex gap-3 mt-4"> <div class="flex gap-3 mt-4">
<button @click="showInput ? (showInput = false) : (showModal = false)" <button @click="showInput ? (showInput = false) : (showModal = false)"
class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors" class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"
x-text="showInput && savedDomains.length > 0 ? 'Back' : 'Cancel'"> x-text="showInput && savedDomains.length > 0 ? 'Back' : 'Cancel'">
</button> </button>
<button @click="confirm()" <button @click="confirm()"
_includes/components/funkwhale-stats-content.njk
+10 -10
View File
@@ -1,20 +1,20 @@
{# Stats Summary Cards #} {# Stats Summary Cards #}
{% if summary %} {% if summary %}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalPlays or 0 }}</span> <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.totalPlays or 0 }}</span>
<span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span> <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
</div> </div>
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueTracks or 0 }}</span> <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.uniqueTracks or 0 }}</span>
<span class="text-xs text-surface-500 uppercase tracking-wide">Tracks</span> <span class="text-xs text-surface-500 uppercase tracking-wide">Tracks</span>
</div> </div>
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueArtists or 0 }}</span> <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.uniqueArtists or 0 }}</span>
<span class="text-xs text-surface-500 uppercase tracking-wide">Artists</span> <span class="text-xs text-surface-500 uppercase tracking-wide">Artists</span>
</div> </div>
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalDurationFormatted or '0m' }}</span> <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.totalDurationFormatted or '0m' }}</span>
<span class="text-xs text-surface-500 uppercase tracking-wide">Listened</span> <span class="text-xs text-surface-500 uppercase tracking-wide">Listened</span>
</div> </div>
</div> </div>
@@ -26,7 +26,7 @@
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Artists</h3> <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Artists</h3>
<div class="space-y-2"> <div class="space-y-2">
{% for artist in topArtists | head(5) %} {% for artist in topArtists | head(5) %}
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<span class="w-6 h-6 flex items-center justify-center text-sm font-bold text-surface-400 bg-surface-100 dark:bg-surface-700 rounded-full">{{ loop.index }}</span> <span class="w-6 h-6 flex items-center justify-center text-sm font-bold text-surface-400 bg-surface-100 dark:bg-surface-700 rounded-full">{{ loop.index }}</span>
<span class="flex-1 font-medium text-surface-900 dark:text-surface-100">{{ artist.name }}</span> <span class="flex-1 font-medium text-surface-900 dark:text-surface-100">{{ artist.name }}</span>
<span class="text-sm text-surface-500">{{ artist.playCount }} plays</span> <span class="text-sm text-surface-500">{{ artist.playCount }} plays</span>
@@ -44,7 +44,7 @@
{% for album in topAlbums | head(5) %} {% for album in topAlbums | head(5) %}
<div class="text-center"> <div class="text-center">
{% if album.coverUrl %} {% if album.coverUrl %}
<img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2" loading="lazy" eleventy:ignore> <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2 shadow-lg" loading="lazy" eleventy:ignore>
{% else %} {% else %}
<div class="w-full aspect-square bg-surface-200 dark:bg-surface-700 rounded-lg mb-2 flex items-center justify-center"> <div class="w-full aspect-square bg-surface-200 dark:bg-surface-700 rounded-lg mb-2 flex items-center justify-center">
<svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
_includes/components/post-navigation.njk
+4 -4
View File
@@ -31,7 +31,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
<a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors"> <a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
{% if _prevHasOg %} {% if _prevHasOg %}
<img src="/og/{{ _prevOgSlug }}.png" alt="{{ _prevTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore> <img src="/og/{{ _prevOgSlug }}.png" alt="{{ _prevTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
<span class="absolute top-2 left-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded"> <span class="absolute top-2 left-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
@@ -43,7 +43,7 @@
<span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors"> <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
{{ _prevTitle }} {{ _prevTitle }}
</span> </span>
<time class="text-xs text-surface-500 mt-1 block" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time> <time class="text-xs text-surface-500 mt-1 block font-mono" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time>
</div> </div>
{% endif %} {% endif %}
</a> </a>
@@ -77,7 +77,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
<a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors"> <a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
{% if _nextHasOg %} {% if _nextHasOg %}
<img src="/og/{{ _nextOgSlug }}.png" alt="{{ _nextTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore> <img src="/og/{{ _nextOgSlug }}.png" alt="{{ _nextTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
<span class="absolute top-2 right-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded"> <span class="absolute top-2 right-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
@@ -89,7 +89,7 @@
<span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors"> <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
{{ _nextTitle }} {{ _nextTitle }}
</span> </span>
<time class="text-xs text-surface-500 mt-1 block" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time> <time class="text-xs text-surface-500 mt-1 block font-mono" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time>
</div> </div>
{% endif %} {% endif %}
</a> </a>
_includes/components/sections/ai-usage.njk
+9 -9
View File
@@ -10,23 +10,23 @@
{{ sectionTitle }} {{ sectionTitle }}
</h2> </h2>
<div class="p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700"> <div class="p-6 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
{# Stats grid — 4 columns #} {# Stats grid — 4 columns #}
<div class="grid gap-4 sm:grid-cols-4 mb-6"> <div class="grid gap-4 sm:grid-cols-4 mb-6">
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div> <div class="text-2xl font-bold font-mono text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div> <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div> <div class="text-2xl font-bold font-mono text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div> <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div> <div class="text-2xl font-bold font-mono text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div> <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div> <div class="text-2xl font-bold font-mono text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div> <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
</div> </div>
</div> </div>
_includes/components/sections/cv-education.njk
+5 -5
View File
@@ -16,7 +16,7 @@
{% for item in cv.education %} {% for item in cv.education %}
{% if not filterType or item.educationType == filterType or not item.educationType %} {% if not filterType or item.educationType == filterType or not item.educationType %}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px] <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
{% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500 {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
{% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500 {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
{% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500 {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -40,11 +40,11 @@
</div> </div>
<div class="flex items-center gap-2 shrink-0"> <div class="flex items-center gap-2 shrink-0">
{% if item.startDate %} {% if item.startDate %}
<span class="text-xs text-surface-500 hidden sm:inline"> <span class="text-xs text-surface-500 hidden sm:inline font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</span> </span>
{% elif item.year %} {% elif item.year %}
<span class="text-xs text-surface-500 hidden sm:inline">{{ item.year }}</span> <span class="text-xs text-surface-500 hidden sm:inline font-mono">{{ item.year }}</span>
{% endif %} {% endif %}
<svg <svg
class="w-4 h-4 text-surface-400 transition-transform duration-200" class="w-4 h-4 text-surface-400 transition-transform duration-200"
@@ -69,11 +69,11 @@
class="px-4 pb-4" class="px-4 pb-4"
> >
{% if item.startDate %} {% if item.startDate %}
<p class="text-xs text-surface-500 mb-1 sm:hidden"> <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</p> </p>
{% elif item.year %} {% elif item.year %}
<p class="text-xs text-surface-500 mb-1 sm:hidden">{{ item.year }}</p> <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">{{ item.year }}</p>
{% endif %} {% endif %}
{% if item.description %} {% if item.description %}
_includes/components/sections/cv-interests.njk
+1 -1
View File
@@ -15,7 +15,7 @@
{% if not filterType or (cv.interestTypes and cv.interestTypes[category] == filterType) or not cv.interestTypes or not cv.interestTypes[category] %} {% if not filterType or (cv.interestTypes and cv.interestTypes[category] == filterType) or not cv.interestTypes or not cv.interestTypes[category] %}
{# Cycle through 8 distinct colors per family using loop.index0 #} {# Cycle through 8 distinct colors per family using loop.index0 #}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2"> <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
{{ category }} {{ category }}
</h3> </h3>
_includes/components/sections/cv-projects-personal.njk
+4 -4
View File
@@ -26,7 +26,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
{% for item in personalProjects | head(maxItems) %} {% for item in personalProjects | head(maxItems) %}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px] <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
{% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500 {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
{% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500 {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
{% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500 {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -62,7 +62,7 @@
</div> </div>
<div class="flex items-center gap-2 shrink-0"> <div class="flex items-center gap-2 shrink-0">
{% if item.startDate %} {% if item.startDate %}
<span class="text-xs text-surface-500 hidden sm:inline"> <span class="text-xs text-surface-500 hidden sm:inline font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</span> </span>
{% endif %} {% endif %}
@@ -89,7 +89,7 @@
class="px-4 pb-4" class="px-4 pb-4"
> >
{% if item.startDate %} {% if item.startDate %}
<p class="text-xs text-surface-500 mb-1 sm:hidden"> <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</p> </p>
{% endif %} {% endif %}
@@ -101,7 +101,7 @@
{% if showTechnologies and item.technologies and item.technologies.length %} {% if showTechnologies and item.technologies and item.technologies.length %}
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
{% for tech in item.technologies %} {% for tech in item.technologies %}
<span class="text-xs px-2 py-0.5 rounded <span class="text-xs px-2 py-0.5 rounded-full
{% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
{% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
{% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
_includes/components/sections/cv-projects-work.njk
+4 -4
View File
@@ -26,7 +26,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
{% for item in workProjects | head(maxItems) %} {% for item in workProjects | head(maxItems) %}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px] <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
{% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500 {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
{% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500 {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
{% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500 {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -62,7 +62,7 @@
</div> </div>
<div class="flex items-center gap-2 shrink-0"> <div class="flex items-center gap-2 shrink-0">
{% if item.startDate %} {% if item.startDate %}
<span class="text-xs text-surface-500 hidden sm:inline"> <span class="text-xs text-surface-500 hidden sm:inline font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</span> </span>
{% endif %} {% endif %}
@@ -89,7 +89,7 @@
class="px-4 pb-4" class="px-4 pb-4"
> >
{% if item.startDate %} {% if item.startDate %}
<p class="text-xs text-surface-500 mb-1 sm:hidden"> <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</p> </p>
{% endif %} {% endif %}
@@ -101,7 +101,7 @@
{% if showTechnologies and item.technologies and item.technologies.length %} {% if showTechnologies and item.technologies and item.technologies.length %}
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
{% for tech in item.technologies %} {% for tech in item.technologies %}
<span class="text-xs px-2 py-0.5 rounded <span class="text-xs px-2 py-0.5 rounded-full
{% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
{% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
{% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
_includes/components/sections/cv-projects.njk
+4 -4
View File
@@ -16,7 +16,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
{% for item in cv.projects | head(maxItems) %} {% for item in cv.projects | head(maxItems) %}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px] <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
{% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500 {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
{% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500 {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
{% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500 {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -52,7 +52,7 @@
</div> </div>
<div class="flex items-center gap-2 shrink-0"> <div class="flex items-center gap-2 shrink-0">
{% if item.startDate %} {% if item.startDate %}
<span class="text-xs text-surface-500 hidden sm:inline"> <span class="text-xs text-surface-500 hidden sm:inline font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</span> </span>
{% endif %} {% endif %}
@@ -79,7 +79,7 @@
class="px-4 pb-4" class="px-4 pb-4"
> >
{% if item.startDate %} {% if item.startDate %}
<p class="text-xs text-surface-500 mb-1 sm:hidden"> <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
{{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %} {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
</p> </p>
{% endif %} {% endif %}
@@ -91,7 +91,7 @@
{% if showTechnologies and item.technologies and item.technologies.length %} {% if showTechnologies and item.technologies and item.technologies.length %}
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
{% for tech in item.technologies %} {% for tech in item.technologies %}
<span class="text-xs px-2 py-0.5 rounded <span class="text-xs px-2 py-0.5 rounded-full
{% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
{% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
{% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
_includes/components/sections/cv-skills.njk
+1 -1
View File
@@ -15,7 +15,7 @@
{% if not filterType or (cv.skillTypes and cv.skillTypes[category] == filterType) or not cv.skillTypes or not cv.skillTypes[category] %} {% if not filterType or (cv.skillTypes and cv.skillTypes[category] == filterType) or not cv.skillTypes or not cv.skillTypes[category] %}
{# Cycle through 8 distinct colors per family using loop.index0 #} {# Cycle through 8 distinct colors per family using loop.index0 #}
{% set ci = loop.index0 % 8 %} {% set ci = loop.index0 % 8 %}
<div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2"> <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
{{ category }} {{ category }}
</h3> </h3>
_includes/components/webmentions.njk
+6 -6
View File
@@ -113,7 +113,7 @@
</h3> </h3>
<ul class="space-y-4"> <ul class="space-y-4">
{% for reply in replies %} {% for reply in replies %}
<li class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg"> <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="flex gap-3"> <div class="flex gap-3">
<a href="{{ reply.author.url }}" target="_blank" rel="noopener"> <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
<img <img
@@ -135,7 +135,7 @@
class="text-xs text-surface-500 hover:underline" class="text-xs text-surface-500 hover:underline"
target="_blank" target="_blank"
rel="noopener"> rel="noopener">
<time datetime="{{ reply.published }}"> <time class="font-mono" datetime="{{ reply.published }}">
{{ reply.published | date("MMM d, yyyy") }} {{ reply.published | date("MMM d, yyyy") }}
</time> </time>
</a> </a>
@@ -165,7 +165,7 @@
class="text-accent-600 dark:text-accent-400 hover:underline" class="text-accent-600 dark:text-accent-400 hover:underline"
target="_blank" target="_blank"
rel="noopener"> rel="noopener">
{{ mention.author.name }} mentioned this on <time datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time> {{ mention.author.name }} mentioned this on <time class="font-mono" datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
@@ -177,13 +177,13 @@
{# Webmention send form — collapsed by default #} {# Webmention send form — collapsed by default #}
<details class="mt-8"> <details class="mt-8">
<summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5"> <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 transition-colors list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
<svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg> </svg>
Send a Webmention Send a Webmention
</summary> </summary>
<div class="mt-3 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg"> <div class="mt-3 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<p class="text-xs text-surface-600 dark:text-surface-400 mb-3"> <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
Have you written a response to this post? Send a webmention by entering your post URL below. Have you written a response to this post? Send a webmention by entering your post URL below.
</p> </p>
@@ -194,7 +194,7 @@
name="source" name="source"
placeholder="https://your-site.com/response" placeholder="https://your-site.com/response"
required required
class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500" class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded"
> >
<button <button
type="submit" type="submit"
_includes/layouts/home.njk
+1 -1
View File
@@ -91,7 +91,7 @@ withSidebar: true
<p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p> <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p>
{% endif %} {% endif %}
<div class="flex items-center gap-3 text-xs text-surface-500"> <div class="flex items-center gap-3 text-xs text-surface-500">
<time datetime="{{ post.data.published or post.date }}"> <time class="font-mono" datetime="{{ post.data.published or post.date }}">
{{ (post.data.published or post.date) | date("MMM d, yyyy") }} {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
</time> </time>
{% if post.data.postType %} {% if post.data.postType %}
_includes/layouts/page.njk
+10 -10
View File
@@ -17,7 +17,7 @@ withSidebar: true
{% endif %} {% endif %}
{% if updated %} {% if updated %}
<p class="text-sm text-surface-500 dark:text-surface-400 mt-2"> <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
Last updated: <time class="dt-updated" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time> Last updated: <time class="dt-updated font-mono text-sm" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
</p> </p>
{% endif %} {% endif %}
</header> </header>
@@ -30,22 +30,22 @@ withSidebar: true
{% if page.url == "/ai/" and collections.posts %} {% if page.url == "/ai/" and collections.posts %}
{% set stats = collections.posts | aiStats %} {% set stats = collections.posts | aiStats %}
{% set aiPostsList = collections.posts | aiPosts %} {% set aiPostsList = collections.posts | aiPosts %}
<section class="mt-8 sm:mt-12 p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700"> <section class="mt-8 sm:mt-12 p-6 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700 shadow-sm">
<h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2> <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2>
<div class="grid gap-4 sm:grid-cols-4 mb-6"> <div class="grid gap-4 sm:grid-cols-4 mb-6">
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div> <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div> <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div> <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div> <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div> <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
<div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div> <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
</div> </div>
<div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700"> <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div> <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
<div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div> <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
</div> </div>
@@ -80,7 +80,7 @@ withSidebar: true
{% set aiTools = aiTools or ai_tools %} {% set aiTools = aiTools or ai_tools %}
{% set aiDescription = aiDescription or ai_description %} {% set aiDescription = aiDescription or ai_description %}
{% if aiTextLevel or aiCodeLevel or aiTools %} {% if aiTextLevel or aiCodeLevel or aiTools %}
<aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700"> <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
@@ -89,17 +89,17 @@ withSidebar: true
</div> </div>
<div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400"> <div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400">
{% if aiTextLevel %} {% if aiTextLevel %}
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700"> <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %} Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}
</span> </span>
{% endif %} {% endif %}
{% if aiCodeLevel %} {% if aiCodeLevel %}
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700"> <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %} Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}
</span> </span>
{% endif %} {% endif %}
{% if aiTools %} {% if aiTools %}
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700"> <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
Tools: {{ aiTools }} Tools: {{ aiTools }}
</span> </span>
{% endif %} {% endif %}
blogroll.njk
+4 -4
View File
@@ -15,7 +15,7 @@ permalink: /blogroll/
Blogs I follow - <span x-text="blogs.length" class="font-medium"></span> feeds Blogs I follow - <span x-text="blogs.length" class="font-medium"></span> feeds
</p> </p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.lastSync"> <p class="text-xs text-surface-500 mt-2" x-show="status?.lastSync">
Last synced: <span x-text="formatDate(status?.lastSync, 'full')"></span> Last synced: <span class="font-mono" x-text="formatDate(status?.lastSync, 'full')"></span>
</p> </p>
</header> </header>
@@ -65,7 +65,7 @@ permalink: /blogroll/
<template x-for="blog in blogs" :key="blog.id"> <template x-for="blog in blogs" :key="blog.id">
<a <a
:href="blog.siteUrl || blog.feedUrl" :href="blog.siteUrl || blog.feedUrl"
class="block bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group" class="block bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group shadow-sm"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -109,7 +109,7 @@ permalink: /blogroll/
{# Category Items Tab (one for each category) #} {# Category Items Tab (one for each category) #}
<div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4"> <div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
<template x-for="item in categoryItems" :key="item.id"> <template x-for="item in categoryItems" :key="item.id">
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors"> <article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors shadow-sm">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
@@ -139,7 +139,7 @@ permalink: /blogroll/
</svg> </svg>
<span x-text="item.blog?.title || 'Unknown'"></span> <span x-text="item.blog?.title || 'Unknown'"></span>
</a> </a>
<time :datetime="item.published" x-text="formatDate(item.published)"></time> <time class="font-mono text-sm" :datetime="item.published" x-text="formatDate(item.published)"></time>
</div> </div>
<p x-show="item.summary" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3" x-text="item.summary"></p> <p x-show="item.summary" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3" x-text="item.summary"></p>
</div> </div>
changelog.njk
+2 -2
View File
@@ -48,7 +48,7 @@ withSidebar: false
<ul class="space-y-4"> <ul class="space-y-4">
<template x-for="commit in filteredCommits()" :key="commit.fullSha"> <template x-for="commit in filteredCommits()" :key="commit.fullSha">
<li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4"> <li class="bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg p-4 shadow-sm">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<a :href="commit.url" target="_blank" rel="noopener" <a :href="commit.url" target="_blank" rel="noopener"
class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-accent-600 dark:text-accent-400 hover:underline flex-shrink-0 mt-0.5" class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-accent-600 dark:text-accent-400 hover:underline flex-shrink-0 mt-0.5"
@@ -64,7 +64,7 @@ withSidebar: false
<a :href="commit.repoUrl" target="_blank" rel="noopener" <a :href="commit.repoUrl" target="_blank" rel="noopener"
class="text-xs px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400" class="text-xs px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400"
x-text="commit.repoName"></a> x-text="commit.repoName"></a>
<span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span> <span class="text-xs text-surface-500 font-mono" x-text="formatDate(commit.date)"></span>
<span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span> <span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span>
</div> </div>
<template x-if="commit.body"> <template x-if="commit.body">
digest-index.njk
+3 -3
View File
@@ -16,19 +16,19 @@ permalink: "digest/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
<div> <div>
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-orange-600 dark:text-orange-400 hover:underline">RSS</a> for one update per week. A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-amber-600 dark:text-amber-400 hover:underline">RSS</a> for one update per week.
</p> </p>
{% if paginatedDigests.length > 0 %} {% if paginatedDigests.length > 0 %}
<ul class="space-y-4"> <ul class="space-y-4">
{% for d in paginatedDigests %} {% for d in paginatedDigests %}
<li class="p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-accent-300 dark:hover:border-accent-600 transition-colors"> <li class="p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-amber-400 dark:hover:border-amber-600 transition-colors shadow-sm">
<a href="/digest/{{ d.slug }}/" class="block"> <a href="/digest/{{ d.slug }}/" class="block">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400"> <h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
{{ d.label }} {{ d.label }}
</h2> </h2>
<p class="text-sm text-surface-500 dark:text-surface-400 mt-1"> <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
<time datetime="{{ d.startDate | isoDate }}">{{ d.startDate | dateDisplay }}</time> &ndash; <time datetime="{{ d.endDate | isoDate }}">{{ d.endDate | dateDisplay }}</time> <time class="font-mono" datetime="{{ d.startDate | isoDate }}">{{ d.startDate | dateDisplay }}</time> &ndash; <time class="font-mono" datetime="{{ d.endDate | isoDate }}">{{ d.endDate | dateDisplay }}</time>
&middot; {{ d.posts.length }} post{% if d.posts.length != 1 %}s{% endif %} &middot; {{ d.posts.length }} post{% if d.posts.length != 1 %}s{% endif %}
</p> </p>
{% set typeLabels = [] %} {% set typeLabels = [] %}
funkwhale.njk
+3 -3
View File
@@ -144,7 +144,7 @@ withSidebar: true
{# Trends Tab #} {# Trends Tab #}
<div x-show="activeTab === 'trends'" x-cloak> <div x-show="activeTab === 'trends'" x-cloak>
{% if funkwhaleActivity.stats.trends and funkwhaleActivity.stats.trends.length %} {% if funkwhaleActivity.stats.trends and funkwhaleActivity.stats.trends.length %}
<div class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-surface-200 dark:border-surface-700"> <div class="bg-surface-50 dark:bg-surface-800 rounded-lg p-6 border border-surface-200 dark:border-surface-700 shadow-sm">
<h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Daily Listening (Last 30 Days)</h3> <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Daily Listening (Last 30 Days)</h3>
<div class="flex items-end gap-1 h-32"> <div class="flex items-end gap-1 h-32">
{% set maxCount = 1 %} {% set maxCount = 1 %}
@@ -185,7 +185,7 @@ withSidebar: true
{% if funkwhaleActivity.listenings.length %} {% if funkwhaleActivity.listenings.length %}
<div class="space-y-3"> <div class="space-y-3">
{% for listening in funkwhaleActivity.listenings | head(15) %} {% for listening in funkwhaleActivity.listenings | head(15) %}
<div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors"> <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors shadow-sm">
{% if listening.coverUrl %} {% if listening.coverUrl %}
<img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
@@ -235,7 +235,7 @@ withSidebar: true
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for favorite in funkwhaleActivity.favorites | head(10) %} {% for favorite in funkwhaleActivity.favorites | head(10) %}
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
{% if favorite.coverUrl %} {% if favorite.coverUrl %}
<img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
github.njk
+6 -6
View File
@@ -101,7 +101,7 @@ withSidebar: true
{% if githubActivity.commits.length %} {% if githubActivity.commits.length %}
<div class="space-y-3"> <div class="space-y-3">
{% for commit in githubActivity.commits %} {% for commit in githubActivity.commits %}
<div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<code class="text-xs font-mono bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded"> <code class="text-xs font-mono bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">
{{ commit.sha }} {{ commit.sha }}
</code> </code>
@@ -111,7 +111,7 @@ withSidebar: true
</a> </a>
<p class="text-xs text-surface-500 mt-1"> <p class="text-xs text-surface-500 mt-1">
<a href="{{ commit.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ commit.repo }}</a> <a href="{{ commit.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ commit.repo }}</a>
· <time datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time> · <time class="font-mono" datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time>
</p> </p>
</div> </div>
</div> </div>
@@ -134,7 +134,7 @@ withSidebar: true
<div class="space-y-3"> <div class="space-y-3">
{% for item in githubActivity.contributions %} {% for item in githubActivity.contributions %}
<div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
{% if item.type == "pr" %} {% if item.type == "pr" %}
<span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 rounded">PR</span> <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 rounded">PR</span>
{% else %} {% else %}
@@ -147,7 +147,7 @@ withSidebar: true
<p class="text-xs text-surface-500 mt-1"> <p class="text-xs text-surface-500 mt-1">
<a href="{{ item.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ item.repo }}</a> <a href="{{ item.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ item.repo }}</a>
#{{ item.number }} #{{ item.number }}
· <time datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time> · <time class="font-mono" datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time>
</p> </p>
</div> </div>
</div> </div>
@@ -168,7 +168,7 @@ withSidebar: true
{% if githubRepos.length %} {% if githubRepos.length %}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for repo in githubRepos | head(6) %} {% for repo in githubRepos | head(6) %}
<article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ repo.html_url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener"> <a href="{{ repo.html_url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
{{ repo.name }} {{ repo.name }}
@@ -223,7 +223,7 @@ withSidebar: true
{% if githubActivity.stars.length %} {% if githubActivity.stars.length %}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for repo in githubActivity.stars | head(10) %} {% for repo in githubActivity.stars | head(10) %}
<article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-600 transition-colors"> <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-emerald-400 dark:hover:border-emerald-600 transition-colors shadow-sm">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener"> <a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
{{ repo.name }} {{ repo.name }}
interactions.njk
+9 -9
View File
@@ -41,7 +41,7 @@ permalink: /interactions/
<div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
{# Likes #} {# Likes #}
<a href="/likes/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/likes/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full"> <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
<svg class="w-6 h-6 text-rose-500" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-rose-500" fill="currentColor" viewBox="0 0 24 24">
@@ -57,7 +57,7 @@ permalink: /interactions/
</a> </a>
{# Replies #} {# Replies #}
<a href="/replies/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/replies/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full"> <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -73,7 +73,7 @@ permalink: /interactions/
</a> </a>
{# Bookmarks #} {# Bookmarks #}
<a href="/bookmarks/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/bookmarks/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-yellow-100 dark:bg-yellow-900/30 rounded-full"> <div class="p-3 bg-yellow-100 dark:bg-yellow-900/30 rounded-full">
<svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
@@ -89,7 +89,7 @@ permalink: /interactions/
</a> </a>
{# Reposts #} {# Reposts #}
<a href="/reposts/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/reposts/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full"> <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -105,7 +105,7 @@ permalink: /interactions/
</a> </a>
{# Photos #} {# Photos #}
<a href="/photos/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/photos/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
<div class="flex items-center gap-4 mb-4"> <div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-full"> <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-full">
<svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -121,7 +121,7 @@ permalink: /interactions/
</a> </a>
</div> </div>
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg"> <div class="mt-12 p-6 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2> <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2>
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4"> <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
@@ -214,7 +214,7 @@ permalink: /interactions/
{# Webmentions list #} {# Webmentions list #}
<div x-show="!notConfigured && (!loading || webmentions.length)" class="space-y-4"> <div x-show="!notConfigured && (!loading || webmentions.length)" class="space-y-4">
<template x-for="wm in paginatedWebmentions" :key="wm['wm-id']"> <template x-for="wm in paginatedWebmentions" :key="wm['wm-id']">
<div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg"> <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<div class="flex gap-3"> <div class="flex gap-3">
{# Author avatar #} {# Author avatar #}
<a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0"> <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0">
@@ -261,7 +261,7 @@ permalink: /interactions/
</span> </span>
<a :href="wm.url || '#'" target="_blank" rel="noopener" class="text-xs text-surface-500 hover:underline"> <a :href="wm.url || '#'" target="_blank" rel="noopener" class="text-xs text-surface-500 hover:underline">
<time :datetime="wm.published || wm['wm-received']" x-text="formatDate(wm.published || wm['wm-received'])"></time> <time class="font-mono text-sm" :datetime="wm.published || wm['wm-received']" x-text="formatDate(wm.published || wm['wm-received'])"></time>
</a> </a>
</div> </div>
@@ -324,7 +324,7 @@ permalink: /interactions/
</div> </div>
{# Info box #} {# Info box #}
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg"> <div class="mt-12 p-6 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2> <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2>
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4"> <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content
listening.njk
+6 -6
View File
@@ -179,7 +179,7 @@ withSidebar: true
<div class="grid gap-4 sm:gap-6 md:grid-cols-2"> <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
{# Funkwhale Stats #} {# Funkwhale Stats #}
{% if funkwhaleActivity.stats %} {% if funkwhaleActivity.stats %}
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800"> <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800 shadow-sm">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500"></span> <span class="w-3 h-3 rounded-full bg-purple-500"></span>
Funkwhale Funkwhale
@@ -217,7 +217,7 @@ withSidebar: true
{# Last.fm Stats #} {# Last.fm Stats #}
{% if lastfmActivity.stats %} {% if lastfmActivity.stats %}
<div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800"> <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800 shadow-sm">
<h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500"></span> <span class="w-3 h-3 rounded-full bg-purple-500"></span>
Last.fm Last.fm
@@ -270,7 +270,7 @@ withSidebar: true
{% if funkwhaleActivity.listenings.length %} {% if funkwhaleActivity.listenings.length %}
<div x-show="activeSource === 'all' || activeSource === 'funkwhale'"> <div x-show="activeSource === 'all' || activeSource === 'funkwhale'">
{% for listening in funkwhaleActivity.listenings | head(10) %} {% for listening in funkwhaleActivity.listenings | head(10) %}
<div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2"> <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2 shadow-sm">
{% if listening.coverUrl %} {% if listening.coverUrl %}
<img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
@@ -324,7 +324,7 @@ withSidebar: true
{% if lastfmActivity.scrobbles.length %} {% if lastfmActivity.scrobbles.length %}
<div x-show="activeSource === 'all' || activeSource === 'lastfm'"> <div x-show="activeSource === 'all' || activeSource === 'lastfm'">
{% for scrobble in lastfmActivity.scrobbles | head(10) %} {% for scrobble in lastfmActivity.scrobbles | head(10) %}
<div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2"> <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2 shadow-sm">
{% if scrobble.coverUrl %} {% if scrobble.coverUrl %}
<img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
@@ -396,7 +396,7 @@ withSidebar: true
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for track in lastfmActivity.loved | head(10) %} {% for track in lastfmActivity.loved | head(10) %}
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
{% if track.coverUrl %} {% if track.coverUrl %}
<img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
@@ -457,7 +457,7 @@ withSidebar: true
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for favorite in funkwhaleActivity.favorites | head(10) %} {% for favorite in funkwhaleActivity.favorites | head(10) %}
<div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700"> <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
{% if favorite.coverUrl %} {% if favorite.coverUrl %}
<img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
readlater.njk
+4 -4
View File
@@ -41,7 +41,7 @@ permalink: /readlater/
<select <select
x-model="selectedSource" x-model="selectedSource"
@change="fetchData()" @change="fetchData()"
class="appearance-none bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500" class="appearance-none bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm"
> >
<option value="">All sources</option> <option value="">All sources</option>
<template x-for="src in sources" :key="src"> <template x-for="src in sources" :key="src">
@@ -58,7 +58,7 @@ permalink: /readlater/
x-model.debounce.300ms="searchQuery" x-model.debounce.300ms="searchQuery"
@input="fetchData()" @input="fetchData()"
placeholder="Search..." placeholder="Search..."
class="w-full bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500" class="w-full bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm"
/> />
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
@@ -80,7 +80,7 @@ permalink: /readlater/
{# Items List #} {# Items List #}
<div x-show="!loading" class="space-y-4"> <div x-show="!loading" class="space-y-4">
<template x-for="item in items" :key="item.id"> <template x-for="item in items" :key="item.id">
<article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-orange-400 dark:hover:border-orange-600 transition-colors"> <article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-orange-400 dark:hover:border-orange-600 transition-colors shadow-sm">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center"> <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -96,7 +96,7 @@ permalink: /readlater/
class="inline-flex items-center px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full text-xs" class="inline-flex items-center px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full text-xs"
x-text="item.source" x-text="item.source"
></span> ></span>
<time :datetime="item.savedAt" x-text="formatDate(item.savedAt)"></time> <time class="font-mono text-sm" :datetime="item.savedAt" x-text="formatDate(item.savedAt)"></time>
</div> </div>
<p class="text-xs text-surface-400 mt-1 truncate" x-text="item.url"></p> <p class="text-xs text-surface-400 mt-1 truncate" x-text="item.url"></p>
</div> </div>
starred.njk
+16 -16
View File
@@ -24,7 +24,7 @@ eleventyExcludeFromCollections: true
<span> <span>
<span x-text="totalCount"></span> repos starred on GitHub. <span x-text="totalCount"></span> repos starred on GitHub.
<template x-if="lastSync"> <template x-if="lastSync">
<span>Last synced <span x-text="formatDate(lastSync)"></span>.</span> <span>Last synced <span class="font-mono" x-text="formatDate(lastSync)"></span>.</span>
</template> </template>
</span> </span>
</template> </template>
@@ -37,7 +37,7 @@ eleventyExcludeFromCollections: true
{# Loading state #} {# Loading state #}
<template x-if="loading"> <template x-if="loading">
<div class="text-center py-12"> <div class="text-center py-12">
<div class="inline-block w-8 h-8 border-4 border-accent-200 border-t-accent-600 rounded-full animate-spin"></div> <div class="inline-block w-8 h-8 border-4 border-emerald-200 border-t-emerald-600 rounded-full animate-spin"></div>
<p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p> <p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
</div> </div>
</template> </template>
@@ -58,7 +58,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = 'all'; resetView()" @click="activeTab = 'all'; resetView()"
:class="activeTab === 'all' :class="activeTab === 'all'
? 'border-accent-600 text-accent-700 dark:text-accent-400' ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -71,7 +71,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = list.slug; resetView()" @click="activeTab = list.slug; resetView()"
:class="activeTab === list.slug :class="activeTab === list.slug
? 'border-accent-600 text-accent-700 dark:text-accent-400' ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -84,7 +84,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = 'uncategorized'; resetView()" @click="activeTab = 'uncategorized'; resetView()"
:class="activeTab === 'uncategorized' :class="activeTab === 'uncategorized'
? 'border-accent-600 text-accent-700 dark:text-accent-400' ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
: 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -108,7 +108,7 @@ eleventyExcludeFromCollections: true
x-model="searchQuery" x-model="searchQuery"
@input="resetView()" @input="resetView()"
placeholder="Search by name, description, topic, or language..." placeholder="Search by name, description, topic, or language..."
class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent" class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm"
> >
<template x-if="searchQuery"> <template x-if="searchQuery">
<button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600"> <button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600">
@@ -123,7 +123,7 @@ eleventyExcludeFromCollections: true
<select <select
x-model="sortBy" x-model="sortBy"
@change="resetView()" @change="resetView()"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500" class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm"
> >
<option value="stars">Sort: Stars</option> <option value="stars">Sort: Stars</option>
<option value="starredAt">Sort: Recently Starred</option> <option value="starredAt">Sort: Recently Starred</option>
@@ -138,7 +138,7 @@ eleventyExcludeFromCollections: true
<select <select
x-model="languageFilter" x-model="languageFilter"
@change="resetView()" @change="resetView()"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-accent-500" class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs"
> >
<option value="">All Languages</option> <option value="">All Languages</option>
<template x-for="lang in availableLanguages" :key="lang"> <template x-for="lang in availableLanguages" :key="lang">
@@ -152,7 +152,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="starCountMin = opt.value; resetView()" @click="starCountMin = opt.value; resetView()"
:class="starCountMin === opt.value :class="starCountMin === opt.value
? 'bg-accent-600 text-white' ? 'bg-emerald-600 text-white'
: 'bg-surface-50 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700'" : 'bg-surface-50 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700'"
class="px-2.5 py-1 text-xs font-medium transition-colors" class="px-2.5 py-1 text-xs font-medium transition-colors"
x-text="opt.label" x-text="opt.label"
@@ -162,7 +162,7 @@ eleventyExcludeFromCollections: true
{# Archived toggle #} {# Archived toggle #}
<label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer"> <label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer">
<input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-accent-600 focus:ring-accent-500"> <input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-emerald-600">
Show archived Show archived
</label> </label>
@@ -170,7 +170,7 @@ eleventyExcludeFromCollections: true
<template x-if="hasActiveFilters"> <template x-if="hasActiveFilters">
<button <button
@click="clearFilters()" @click="clearFilters()"
class="text-xs text-accent-600 dark:text-accent-400 hover:underline" class="text-xs text-emerald-600 dark:text-emerald-400 hover:underline"
>Clear filters</button> >Clear filters</button>
</template> </template>
</div> </div>
@@ -184,7 +184,7 @@ eleventyExcludeFromCollections: true
{# ===== REPO GRID ===== #} {# ===== REPO GRID ===== #}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid">
<template x-for="repo in visibleStars" :key="repo.fullName"> <template x-for="repo in visibleStars" :key="repo.fullName">
<article class="starred-card p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors"> <article class="starred-card p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-emerald-400 dark:hover:border-emerald-600 transition-colors shadow-sm">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<template x-if="repo.ownerAvatar"> <template x-if="repo.ownerAvatar">
<img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy"> <img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
@@ -233,7 +233,7 @@ eleventyExcludeFromCollections: true
<span x-text="repo.license"></span> <span x-text="repo.license"></span>
</template> </template>
<template x-if="repo.starredAt"> <template x-if="repo.starredAt">
<span x-text="'Starred ' + formatDate(repo.starredAt)"></span> <span class="font-mono" x-text="'Starred ' + formatDate(repo.starredAt)"></span>
</template> </template>
</div> </div>
</article> </article>
@@ -244,7 +244,7 @@ eleventyExcludeFromCollections: true
<template x-if="sortedStars.length === 0"> <template x-if="sortedStars.length === 0">
<div class="text-center py-12"> <div class="text-center py-12">
<p class="text-surface-500">No repos match your current filters.</p> <p class="text-surface-500">No repos match your current filters.</p>
<button @click="clearFilters()" class="mt-2 text-sm text-accent-600 dark:text-accent-400 hover:underline">Clear all filters</button> <button @click="clearFilters()" class="mt-2 text-sm text-emerald-600 dark:text-emerald-400 hover:underline">Clear all filters</button>
</div> </div>
</template> </template>
@@ -253,10 +253,10 @@ eleventyExcludeFromCollections: true
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<button <button
@click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)" @click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
class="px-6 py-2.5 bg-accent-600 hover:bg-accent-700 text-white rounded-lg transition-colors" class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors"
> >
Load More Load More
<span class="text-accent-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span> <span class="text-emerald-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
</button> </button>
</div> </div>
</template> </template>
youtube.njk
+1 -1
View File
@@ -173,7 +173,7 @@ withSidebar: true
{% if channelVideos and channelVideos.length %} {% if channelVideos and channelVideos.length %}
<div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
{% for video in channelVideos | head(9) %} {% for video in channelVideos | head(9) %}
<article class="group bg-surface-50 dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors"> <article class="group bg-surface-50 dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors shadow-sm">
<a href="{{ video.url }}" class="block" target="_blank" rel="noopener"> <a href="{{ video.url }}" class="block" target="_blank" rel="noopener">
<div class="relative aspect-video"> <div class="relative aspect-video">
{% if video.thumbnail %} {% if video.thumbnail %}