giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: replace all primary (blue) with contextual colors across entire theme

Browse Source 
Eliminate monotonous blue by replacing ~290 primary- references in 60 files
with semantically appropriate colors:

- accent (teal): links, CTAs, buttons, tabs, focus rings, spinners
- purple: Funkwhale/music, photos, Mastodon/fediverse
- surface (neutral): GitHub, dates/metadata, info boxes
- amber: bookmarks, blogroll categories
- red: likes
- green: reposts
- sky: replies
- orange: RSS/feeds, podcasts
- #0085ff: Bluesky brand
- #a730b8: Mastodon brand

Also updates prose link colors in tailwind.config.js, pagefind UI
primary color to teal, and client-side JS color references.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
This commit is contained in:
Ricardo
2026-03-04 12:50:19 +01:00
parent 2ca3e047a4
commit 155816a0bc
60 changed files with 298 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
404.njk
View File

@@ -8,7 +8,7 @@ pagefindIgnore: true
<h1 class="text-4xl sm:text-6xl font-bold text-surface-300 dark:text-surface-700 mb-4">404</h1>
<h2 class="text-xl sm:text-2xl font-semibold text-surface-900 dark:text-surface-100 mb-4">Page Not Found</h2>
<p class="text-surface-600 dark:text-surface-400 mb-8">Sorry, the page you're looking for doesn't exist. Try searching for it below.</p>
<a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors mb-8">
<a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white font-medium rounded-lg transition-colors mb-8">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
Go back home
</a>

10
_includes/components/cv-builder.njk
View File

@@ -37,7 +37,7 @@
{{ authorName }}
</h1>
{% if authorTitle %}
<p class="text-lg sm:text-xl text-primary-600 dark:text-primary-400 mb-3 sm:mb-4">
<p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
{{ authorTitle }}
</p>
{% endif %}
@@ -48,7 +48,7 @@
{% endif %}
{% if authorDescription %}
<details class="mb-4 sm:mb-6">
<summary class="text-sm font-medium text-primary-600 dark:text-primary-400 cursor-pointer hover:underline list-none">
<summary class="text-sm font-medium text-accent-600 dark:text-accent-400 cursor-pointer hover:underline list-none">
More about me &darr;
</summary>
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mt-3">
@@ -82,13 +82,13 @@
<span>{{ cvOrg }}</span>
{% endif %}
{% if cvUrl %}
<span><a href="{{ cvUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
<span><a href="{{ cvUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
{% endif %}
{% if cvEmail %}
<span><a href="mailto:{{ cvEmail }}" class="text-primary-600 dark:text-primary-400 hover:underline">{{ cvEmail }}</a></span>
<span><a href="mailto:{{ cvEmail }}" class="text-accent-600 dark:text-accent-400 hover:underline">{{ cvEmail }}</a></span>
{% endif %}
{% if cvKeyUrl %}
<span><a href="{{ cvKeyUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
<span><a href="{{ cvKeyUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
{% endif %}
</div>
{% endif %}

2
_includes/components/empty-collection.njk
View File

@@ -17,7 +17,7 @@
</p>
{% if typeInfo %}
<a href="{{ typeInfo.createUrl }}"
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors text-sm font-medium">
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-600 text-white hover:bg-accent-700 transition-colors text-sm font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>

8
_includes/components/funkwhale-stats-content.njk
View File

@@ -2,19 +2,19 @@
{% if summary %}
<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-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block">{{ summary.totalPlays or 0 }}</span>
<span class="text-2xl font-bold 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>
</div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block">{{ summary.uniqueTracks or 0 }}</span>
<span class="text-2xl font-bold 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>
</div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block">{{ summary.uniqueArtists or 0 }}</span>
<span class="text-2xl font-bold 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>
</div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block">{{ summary.totalDurationFormatted or '0m' }}</span>
<span class="text-2xl font-bold 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>
</div>
</div>

6
_includes/components/h-card.njk
View File

@@ -35,7 +35,7 @@
>
</a>
<div>
<a href="{{ authorUrl }}" class="u-url p-name font-bold text-lg block hover:text-primary-600 dark:hover:text-primary-400" itemprop="name">
<a href="{{ authorUrl }}" class="u-url p-name font-bold text-lg block hover:text-accent-600 dark:hover:text-accent-400" itemprop="name">
{{ authorName }}
</a>
{% if authorPronoun %}
@@ -72,7 +72,7 @@
<div class="mt-2 flex flex-wrap gap-3 text-sm">
{% if authorEmail %}
{# Display text obfuscated to deter spam harvesters; href kept plain for browser compatibility #}
<a href="mailto:{{ authorEmail }}" class="u-email text-primary-600 dark:text-primary-400 hover:underline" itemprop="email">
<a href="mailto:{{ authorEmail }}" class="u-email text-accent-600 dark:text-accent-400 hover:underline" itemprop="email">
✉️ {{ authorEmail | obfuscateEmail | safe }}
</a>
{% endif %}
@@ -100,7 +100,7 @@
<a
href="{{ link.url }}"
rel="{{ link.rel }} noopener"
class="u-url text-surface-500 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="u-url text-surface-500 hover:text-accent-600 dark:hover:text-accent-400 transition-colors"
aria-label="{{ link.name }}"
target="_blank">
{{ socialIcon(link.icon, "w-5 h-5") }}

8
_includes/components/post-navigation.njk
View File

@@ -14,7 +14,7 @@
{% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
{% set _prevOgSlug = _prevPost.url | ogSlug %}
{% set _prevHasOg = _prevOgSlug | hasOgImage %}
<a href="{{ _prevPost.url }}" class="group flex items-start gap-3 text-sm text-primary-600 dark:text-primary-400 hover:underline">
<a href="{{ _prevPost.url }}" class="group flex items-start gap-3 text-sm text-accent-600 dark:text-accent-400 hover:underline">
{% if _prevHasOg %}
<img src="/og/{{ _prevOgSlug }}.png" alt="" class="w-20 h-[42px] object-cover rounded flex-shrink-0 opacity-80 group-hover:opacity-100 transition-opacity" loading="lazy" eleventy:ignore>
{% endif %}
@@ -29,7 +29,7 @@
<svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %}
<svg class="w-3.5 h-3.5 text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-3.5 h-3.5 text-accent-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %}
{{ _prevPost.data.title or _prevPost.data.name or (_prevPost.templateContent | striptags | truncate(50)) or "Note" }}
@@ -49,7 +49,7 @@
{% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
{% set _nextOgSlug = _nextPost.url | ogSlug %}
{% set _nextHasOg = _nextOgSlug | hasOgImage %}
<a href="{{ _nextPost.url }}" class="group flex items-start gap-3 text-sm text-primary-600 dark:text-primary-400 hover:underline {% if _prevPost %}justify-end{% endif %}">
<a href="{{ _nextPost.url }}" class="group flex items-start gap-3 text-sm text-accent-600 dark:text-accent-400 hover:underline {% if _prevPost %}justify-end{% endif %}">
<span class="line-clamp-2 flex items-center gap-1.5 {% if _prevPost %}justify-end{% endif %}">
{% if _likedUrl %}
<svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
@@ -61,7 +61,7 @@
<svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %}
<svg class="w-3.5 h-3.5 text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-3.5 h-3.5 text-accent-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %}
{{ _nextPost.data.title or _nextPost.data.name or (_nextPost.templateContent | striptags | truncate(50)) or "Note" }}

4
_includes/components/sections/cv-experience.njk
View File

@@ -16,8 +16,8 @@
<div class="space-y-4">
{% for item in cv.experience | head(maxItems) %}
{% if not filterType or item.experienceType == filterType or not item.experienceType %}
<div class="relative pl-6 border-l-2 border-primary-300 dark:border-primary-700">
<div class="absolute -left-[7px] top-1 w-3 h-3 rounded-full bg-primary-500"></div>
<div class="relative pl-6 border-l-2 border-accent-300 dark:border-accent-700">
<div class="absolute -left-[7px] top-1 w-3 h-3 rounded-full bg-accent-500"></div>
<h3 class="font-semibold text-surface-900 dark:text-surface-100">{{ item.title }}</h3>
<p class="text-sm text-surface-600 dark:text-surface-400">
{{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}

2
_includes/components/sections/cv-interests.njk
View File

@@ -18,7 +18,7 @@
</h3>
<div class="flex flex-wrap gap-1.5">
{% for interest in items %}
<span class="text-xs px-2 py-1 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
<span class="text-xs px-2 py-1 bg-accent-50 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 rounded-full">
{{ interest }}
</span>
{% endfor %}

4
_includes/components/sections/cv-projects-personal.njk
View File

@@ -25,7 +25,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in personalProjects | head(maxItems) %}
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors overflow-hidden">
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
{# Summary row — always visible, clickable #}
<button
class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -35,7 +35,7 @@
<div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %}
<a href="{{ item.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" @click.stop>{{ item.name }}</a>
<a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
{% else %}
{{ item.name }}
{% endif %}

4
_includes/components/sections/cv-projects-work.njk
View File

@@ -25,7 +25,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in workProjects | head(maxItems) %}
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors overflow-hidden">
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
{# Summary row — always visible, clickable #}
<button
class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -35,7 +35,7 @@
<div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %}
<a href="{{ item.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" @click.stop>{{ item.name }}</a>
<a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
{% else %}
{{ item.name }}
{% endif %}

4
_includes/components/sections/cv-projects.njk
View File

@@ -15,7 +15,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in cv.projects | head(maxItems) %}
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors overflow-hidden">
<div class="bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors overflow-hidden">
{# Summary row — always visible, clickable #}
<button
class="w-full p-4 flex items-center justify-between gap-2 cursor-pointer text-left hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors"
@@ -25,7 +25,7 @@
<div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %}
<a href="{{ item.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" @click.stop>{{ item.name }}</a>
<a href="{{ item.url }}" class="hover:text-accent-600 dark:hover:text-accent-400" @click.stop>{{ item.name }}</a>
{% else %}
{{ item.name }}
{% endif %}

2
_includes/components/sections/cv-skills.njk
View File

@@ -18,7 +18,7 @@
</h3>
<div class="flex flex-wrap gap-1.5">
{% for skill in items %}
<span class="text-xs px-2 py-1 bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
<span class="text-xs px-2 py-1 bg-accent-50 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 rounded-full">
{{ skill }}
</span>
{% endfor %}

2
_includes/components/sections/hero.njk
View File

@@ -40,7 +40,7 @@
{% if siteDescription %}
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
{{ siteDescription }}
<a href="/about/" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">Read more &rarr;</a>
<a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
</p>
{% endif %}

20
_includes/components/sections/recent-posts.njk
View File

@@ -65,7 +65,7 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -86,7 +86,7 @@
</div>
{% if post.data.title %}
<h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mt-1">
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
<a class="hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h3>
{% endif %}
{{ bookmarkedUrl | unfurlCard | safe }}
@@ -98,7 +98,7 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -126,7 +126,7 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -154,7 +154,7 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -190,14 +190,14 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
{% elif post.data.title %}
{# ── Article card ── #}
<h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ post.url }}" class="u-url hover:text-primary-600 dark:hover:text-primary-400">
<a href="{{ post.url }}" class="u-url hover:text-accent-600 dark:hover:text-accent-400">
{{ post.data.title }}
</a>
</h3>
@@ -221,7 +221,7 @@
{# ── Note card ── #}
<div class="flex items-center gap-3 text-xs text-surface-500 mb-2">
<a class="u-url" href="{{ post.url }}">
<time class="dt-published font-medium text-primary-600 dark:text-primary-400" datetime="{{ post.date | isoDate }}">
<time class="dt-published font-medium text-surface-500 dark:text-surface-400" datetime="{{ post.date | isoDate }}">
{{ post.date | dateDisplay }}
</time>
</a>
@@ -236,7 +236,7 @@
{{ post.templateContent | safe }}
</div>
{% endif %}
<a href="{{ post.url }}" class="text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2 inline-block">
<a href="{{ post.url }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline mt-2 inline-block">
Permalink
</a>
{% endif %}
@@ -246,7 +246,7 @@
</div>
{% if sectionConfig.showViewAll != false %}
<a href="{{ sectionConfig.viewAllUrl or '/blog/' }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-4 inline-flex items-center gap-1">
<a href="{{ sectionConfig.viewAllUrl or '/blog/' }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
{{ sectionConfig.viewAllText or "View all posts" }}
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>

4
_includes/components/webmentions.njk
View File

@@ -162,7 +162,7 @@
{% for mention in otherMentions %}
<li>
<a href="{{ mention.url }}"
class="text-primary-600 dark:text-primary-400 hover:underline"
class="text-accent-600 dark:text-accent-400 hover:underline"
target="_blank"
rel="noopener">
{{ mention.author.name }} mentioned this on {{ mention.published | date("MMM d, yyyy") }}
@@ -190,7 +190,7 @@
name="source"
placeholder="https://your-site.com/response"
required
class="flex-1 px-3 py-2 text-sm bg-white dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
class="flex-1 px-3 py-2 text-sm bg-white dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<button
type="submit"

2
_includes/components/widgets/author-card-compact.njk
View File

@@ -13,7 +13,7 @@
>
</a>
<div>
<a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
<a href="{{ site.author.url }}" class="u-url p-name font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
{{ site.author.name }}
</a>
<p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p>

12
_includes/components/widgets/blogroll.njk
View File

@@ -2,10 +2,10 @@
<is-land on:visible>
<div class="widget" x-data="blogrollWidget()" x-init="init()">
<h3 class="widget-title flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
<a href="/blogroll/" class="hover:text-primary-600 dark:hover:text-primary-400">Blogroll</a>
<a href="/blogroll/" class="hover:text-accent-600 dark:hover:text-accent-400">Blogroll</a>
</h3>
{# Source tabs - only shown when multiple sources exist #}
@@ -14,7 +14,7 @@
<button
@click="activeTab = tab.key"
:class="activeTab === tab.key
? 'border-b-2 border-primary-600 text-primary-600 dark:text-primary-400 dark:border-primary-400'
? 'border-b-2 border-accent-600 text-accent-600 dark:text-accent-400 dark:border-accent-400'
: 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-2 py-1 text-xs font-medium transition-colors -mb-px"
x-text="tab.label + ' (' + tab.count + ')'"
@@ -27,11 +27,11 @@
<li>
<a
:href="blog.siteUrl || blog.feedUrl"
class="flex items-center gap-2 text-sm text-surface-700 dark:text-surface-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
class="flex items-center gap-2 text-sm text-surface-700 dark:text-surface-300 hover:text-accent-600 dark:hover:text-accent-400 transition-colors"
target="_blank"
rel="noopener"
>
<span class="w-5 h-5 rounded bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center flex-shrink-0">
<span class="w-5 h-5 rounded bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center flex-shrink-0">
<span class="text-white text-xs font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
</span>
<span class="truncate" x-text="blog.title"></span>
@@ -44,7 +44,7 @@
No blogs loaded yet.
</div>
<a x-show="allBlogs.length > 0" href="/blogroll/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-flex items-center gap-1">
<a x-show="allBlogs.length > 0" href="/blogroll/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-flex items-center gap-1">
View all <span x-text="allBlogs.length"></span> blogs
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>

4
_includes/components/widgets/funkwhale.njk
View File

@@ -35,7 +35,7 @@
<div class="min-w-0 flex-1">
<p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
{% if np.trackUrl %}
<a href="{{ np.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ np.track }}</a>
<a href="{{ np.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ np.track }}</a>
{% else %}
{{ np.track }}
{% endif %}
@@ -106,7 +106,7 @@
{% endif %}
</ul>
<a href="/listening/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1 mt-3">
<a href="/listening/" class="text-sm text-purple-600 dark:text-purple-400 hover:underline flex items-center gap-1 mt-3">
View full listening history
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>

18
_includes/components/widgets/github-repos.njk
View File

@@ -12,28 +12,28 @@
<div class="flex gap-1 mb-4 border-b border-surface-200 dark:border-surface-700">
<button
@click="activeTab = 'commits'"
:class="activeTab === 'commits' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'commits' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
Commits
</button>
<button
@click="activeTab = 'repos'"
:class="activeTab === 'repos' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'repos' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
Repos
</button>
<button
@click="activeTab = 'featured'"
:class="activeTab === 'featured' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'featured' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
Featured
</button>
<button
@click="activeTab = 'prs'"
:class="activeTab === 'prs' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'prs' ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
>
PRs
@@ -54,7 +54,7 @@
<template x-for="commit in commits.slice(0, 5)" :key="commit.sha">
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="commit.url" target="_blank" rel="noopener" class="block group">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors line-clamp-2" x-text="commit.message"></p>
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors line-clamp-2" x-text="commit.message"></p>
<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>
<span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span>
@@ -74,7 +74,7 @@
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="repo.html_url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2">
<span class="font-medium text-sm text-primary-600 dark:text-primary-400 group-hover:underline truncate" x-text="repo.name"></span>
<span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
<span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
</div>
<p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
@@ -99,7 +99,7 @@
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a :href="repo.url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2">
<span class="font-medium text-sm text-primary-600 dark:text-primary-400 group-hover:underline truncate" x-text="repo.name"></span>
<span class="font-medium text-sm text-surface-700 dark:text-surface-300 group-hover:underline truncate" x-text="repo.name"></span>
<span x-show="repo.language" class="text-xs px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 flex-shrink-0" x-text="repo.language"></span>
</div>
<p x-show="repo.description" class="text-xs text-surface-600 dark:text-surface-400 mt-1 line-clamp-2" x-text="repo.description"></p>
@@ -134,7 +134,7 @@
<svg x-show="item.type === 'pr'" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<svg x-show="item.type === 'issue'" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><line x1="12" y1="8" x2="12" y2="12" stroke-width="2"/><line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2"/></svg>
</span>
<span class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate" x-text="item.title"></span>
<span class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-surface-900 dark:group-hover:text-surface-100 transition-colors truncate" x-text="item.title"></span>
</div>
<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>
@@ -152,7 +152,7 @@
{# Footer link #}
{% if site.feeds.github %}
<a href="https://github.com/{{ site.feeds.github }}" target="_blank" rel="noopener" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-flex items-center gap-1">
<a href="https://github.com/{{ site.feeds.github }}" target="_blank" rel="noopener" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-flex items-center gap-1">
View on GitHub
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>

4
_includes/components/widgets/post-categories.njk
View File

@@ -5,12 +5,12 @@
<h3 class="widget-title">Categories</h3>
<div class="flex flex-wrap gap-2">
{% if category is string %}
<a href="/categories/{{ category | slugify }}/" class="p-category text-xs px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors">
<a href="/categories/{{ category | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
{{ category }}
</a>
{% else %}
{% for cat in category %}
<a href="/categories/{{ cat | slugify }}/" class="p-category text-xs px-2 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full hover:bg-primary-200 dark:hover:bg-primary-800 transition-colors">
<a href="/categories/{{ cat | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
{{ cat }}
</a>
{% endfor %}

8
_includes/components/widgets/post-navigation.njk
View File

@@ -15,7 +15,7 @@
{% set _bookmarkedUrl = _prevPost.data.bookmarkOf or _prevPost.data.bookmark_of %}
{% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %}
{% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
<a href="{{ _prevPost.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-2 flex items-center gap-1.5">
<a href="{{ _prevPost.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2 flex items-center gap-1.5">
{% if _likedUrl %}
<svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
Liked {{ _likedUrl | replace("https://", "") | truncate(35) }}
@@ -26,7 +26,7 @@
<svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %}
<svg class="w-3.5 h-3.5 text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-3.5 h-3.5 text-sky-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %}
{{ _prevPost.data.title or _prevPost.data.name or (_prevPost.templateContent | striptags | truncate(50)) or "Note" }}
@@ -41,7 +41,7 @@
{% set _bookmarkedUrl = _nextPost.data.bookmarkOf or _nextPost.data.bookmark_of %}
{% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %}
{% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
<a href="{{ _nextPost.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-2 flex items-center gap-1.5">
<a href="{{ _nextPost.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2 flex items-center gap-1.5">
{% if _likedUrl %}
<svg class="w-3.5 h-3.5 text-red-500 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
Liked {{ _likedUrl | replace("https://", "") | truncate(35) }}
@@ -52,7 +52,7 @@
<svg class="w-3.5 h-3.5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %}
<svg class="w-3.5 h-3.5 text-primary-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-3.5 h-3.5 text-sky-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %}
{{ _nextPost.data.title or _nextPost.data.name or (_nextPost.templateContent | striptags | truncate(50)) or "Note" }}

2
_includes/components/widgets/recent-comments.njk
View File

@@ -15,7 +15,7 @@
<span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>
<p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
{% if comment["comment-target"] %}
<a href="{{ comment['comment-target'] }}" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">View post</a>
<a href="{{ comment['comment-target'] }}" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">View post</a>
{% endif %}
</div>
</div>

14
_includes/components/widgets/recent-posts-blog.njk
View File

@@ -17,7 +17,7 @@
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
Liked {{ _likedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -30,7 +30,7 @@
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
{{ post.data.title or ("Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35))) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -43,7 +43,7 @@
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
Reposted {{ _repostedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -54,9 +54,9 @@
{% elif _replyToUrl %}
<div class="flex items-start gap-2">
<svg class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-sky-600 dark:text-sky-400 hover:underline line-clamp-1">
Reply to {{ _replyToUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -66,7 +66,7 @@
</div>
{% else %}
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-2">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-2">
{{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -77,7 +77,7 @@
{% endif %}
{% endfor %}
</ul>
<a href="/blog/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block">
<a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
View all posts
</a>
</div>

10
_includes/components/widgets/recent-posts.njk
View File

@@ -19,7 +19,7 @@
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline break-all line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
Liked {{ likedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -34,7 +34,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
{{ post.data.title or ("Bookmarked " + (bookmarkedUrl | replace("https://", "") | truncate(35))) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -49,7 +49,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
<div class="min-w-0">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline break-all line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
Reposted {{ repostedUrl | replace("https://", "") | truncate(40) }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -75,7 +75,7 @@
{% else %}
{# Article / Note / other #}
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline line-clamp-1">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
{{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
</a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -85,7 +85,7 @@
</li>
{% endfor %}
</ul>
<a href="/blog/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 block">
<a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 block">
View all posts
</a>
</div>

12
_includes/components/widgets/social-activity.njk
View File

@@ -9,7 +9,7 @@
{% if blueskyFeed and blueskyFeed.length %}
<button
@click="activeTab = 'bluesky'"
:class="activeTab === 'bluesky' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'bluesky' ? 'border-b-2 border-[#0085ff] text-[#0085ff]' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
>
<svg class="w-4 h-4 text-[#0085ff]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -21,7 +21,7 @@
{% if mastodonFeed and mastodonFeed.length %}
<button
@click="activeTab = 'mastodon'"
:class="activeTab === 'mastodon' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'mastodon' ? 'border-b-2 border-[#a730b8] text-[#a730b8]' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px"
>
<svg class="w-4 h-4 text-[#6364ff]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
@@ -39,7 +39,7 @@
{% for post in blueskyFeed | head(5) %}
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a href="{{ post.url }}" target="_blank" rel="noopener" class="block group">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-[#0085ff] transition-colors">
{{ post.text | truncate(140) }}
</p>
<div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
@@ -55,7 +55,7 @@
</li>
{% endfor %}
</ul>
<a href="https://bsky.app/profile/{{ site.feeds.bluesky }}" target="_blank" rel="noopener" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-flex items-center gap-1">
<a href="https://bsky.app/profile/{{ site.feeds.bluesky }}" target="_blank" rel="noopener" class="text-sm text-[#0085ff] hover:underline mt-3 inline-flex items-center gap-1">
View on Bluesky
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>
@@ -69,7 +69,7 @@
{% for post in mastodonFeed | head(5) %}
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0">
<a href="{{ post.url }}" target="_blank" rel="noopener" class="block group">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
<p class="text-sm text-surface-700 dark:text-surface-300 group-hover:text-[#a730b8] transition-colors">
{{ post.text | truncate(140) }}
</p>
<div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
@@ -85,7 +85,7 @@
</li>
{% endfor %}
</ul>
<a href="https://{{ site.feeds.mastodon.instance }}/@{{ site.feeds.mastodon.username }}" target="_blank" rel="noopener" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-flex items-center gap-1">
<a href="https://{{ site.feeds.mastodon.instance }}/@{{ site.feeds.mastodon.username }}" target="_blank" rel="noopener" class="text-sm text-[#a730b8] hover:underline mt-3 inline-flex items-center gap-1">
View on Mastodon
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>

4
_includes/components/widgets/subscribe.njk
View File

@@ -3,13 +3,13 @@
<div class="widget">
<h3 class="widget-title">Subscribe</h3>
<div class="space-y-2">
<a href="/feed.xml" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
<a href="/feed.xml" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors">
<svg class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
</svg>
RSS Feed
</a>
<a href="/feed.json" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
<a href="/feed.json" class="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors">
<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m3 12h2v2H8v-2m4-8h2v10h-2V7m4 4h2v6h-2v-6Z"/>
</svg>

2
_includes/components/widgets/toc.njk
View File

@@ -7,7 +7,7 @@
<ul class="space-y-1 text-sm">
{% for item in toc %}
<li class="{% if item.level > 2 %}ml-{{ (item.level - 2) * 3 }}{% endif %}">
<a href="#{{ item.slug }}" class="text-surface-600 dark:text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
<a href="#{{ item.slug }}" class="text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400 transition-colors">
{{ item.text }}
</a>
</li>

14
_includes/components/widgets/webmentions.njk
View File

@@ -14,14 +14,14 @@
<div class="flex border-b border-surface-200 dark:border-surface-700 mb-3">
<button
@click="tab = 'inbound'"
:class="tab === 'inbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="tab === 'inbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
Received
<span x-show="mentions.length" x-text="mentions.length" class="ml-0.5 text-xs opacity-75"></span>
</button>
<button
@click="tab = 'outbound'"
:class="tab === 'outbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="tab === 'outbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
Sent
</button>
@@ -31,7 +31,7 @@
<div x-show="tab === 'inbound'" x-transition>
{# Loading #}
<div x-show="loading" class="text-center py-3">
<div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-primary-500"></div>
<div class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-accent-500"></div>
</div>
{# Mentions list #}
@@ -49,7 +49,7 @@
<span class="font-medium text-surface-900 dark:text-surface-100" x-text="wm.author?.name || 'Anonymous'"></span>
<span x-show="wm['wm-property'] === 'like-of'" class="text-red-500"> liked</span>
<span x-show="wm['wm-property'] === 'repost-of'" class="text-green-500"> reposted</span>
<span x-show="wm['wm-property'] === 'in-reply-to'" class="text-primary-500"> replied to</span>
<span x-show="wm['wm-property'] === 'in-reply-to'" class="text-sky-500"> replied to</span>
<span x-show="wm['wm-property'] === 'mention-of'" class="text-amber-500"> mentioned</span>
<span x-show="wm['wm-property'] === 'bookmark-of'" class="text-purple-500"> bookmarked</span>
<a :href="wm['wm-target']" class="text-surface-500 hover:underline block truncate" x-text="formatPath(wm['wm-target'])"></a>
@@ -66,7 +66,7 @@
{# Link to full interactions page #}
<div x-show="mentions.length > 0" class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700">
<a href="/interactions/" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">
<a href="/interactions/" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">
View all &rarr;
</a>
</div>
@@ -89,7 +89,7 @@
{% endfor %}
{% for item in collections.replies | head(2) %}
<div class="flex items-start gap-2 text-xs">
<svg class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<svg class="w-4 h-4 text-sky-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
<div class="min-w-0">
<a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:underline block truncate">
{% set _replyToUrl = item.data.inReplyTo or item.data.in_reply_to %}
@@ -111,7 +111,7 @@
{% endfor %}
</div>
<div class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700">
<a href="/interactions/" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">
<a href="/interactions/" class="text-xs text-accent-600 dark:text-accent-400 hover:underline">
View all &rarr;
</a>
</div>

6
_includes/layouts/home.njk
View File

@@ -35,7 +35,7 @@ withSidebar: true
{% if site.description %}
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
{{ site.description }}
<a href="/about/" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">Read more &rarr;</a>
<a href="/about/" class="text-accent-600 dark:text-accent-400 hover:underline font-medium">Read more &rarr;</a>
</p>
{% endif %}
@@ -81,7 +81,7 @@ withSidebar: true
{% for post in collections.posts | head(10) %}
<article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ post.url }}" class="hover:text-primary-600 dark:hover:text-primary-400">
<a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400">
{{ post.data.title or post.data.name or "Untitled" }}
</a>
</h3>
@@ -99,7 +99,7 @@ withSidebar: true
</article>
{% endfor %}
</div>
<a href="/blog/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-4 inline-flex items-center gap-1">
<a href="/blog/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-4 inline-flex items-center gap-1">
View all posts
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>

2
about.njk
View File

@@ -17,7 +17,7 @@ eleventyExcludeFromCollections: true
{{ site.author.name }}
</h1>
{% if site.author.title %}
<p class="p-job-title text-xl text-primary-600 dark:text-primary-400 mb-2">
<p class="p-job-title text-xl text-accent-600 dark:text-accent-400 mb-2">
{{ site.author.title }}
</p>
{% endif %}

4
articles.njk
View File

@@ -28,7 +28,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
<li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
<div class="post-header">
<h2 class="text-xl font-semibold mb-1 flex-1">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
{{ post.data.title or "Untitled" }}
</a>
</h2>
@@ -52,7 +52,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }}
</p>
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
Read more &rarr;
</a>
</li>

26
blog.njk
View File

@@ -96,7 +96,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -128,7 +128,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
</div>
{% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2">
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
<a class="hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h2>
{% endif %}
{% unfurl bookmarkedUrl %}
@@ -140,7 +140,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -179,7 +179,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -216,7 +216,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{{ post.templateContent | safe }}
</div>
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -263,7 +263,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
@@ -271,7 +271,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{# ── Article card (unchanged) ── #}
<div class="post-header">
<h2 class="text-xl font-semibold mb-1">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
{{ post.data.title }}
</a>
</h2>
@@ -295,7 +295,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }}
</p>
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
Read more &rarr;
</a>
@@ -303,7 +303,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{# ── Note card (unchanged) ── #}
<div class="post-header">
<a class="u-url" href="{{ post.url }}">
<time-difference><time class="dt-published text-sm text-primary-600 dark:text-primary-400 font-medium" datetime="{{ post.date | isoDate }}">
<time-difference><time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">
{{ post.date | dateDisplay }}
</time></time-difference>
</a>
@@ -323,7 +323,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }}
</div>
<div class="post-footer mt-3">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">
Permalink
</a>
</div>
@@ -381,9 +381,9 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
<p class="text-surface-600 dark:text-surface-400">No posts yet. Create your first post using a Micropub client!</p>
<p class="mt-4 text-surface-600 dark:text-surface-400">Some popular Micropub clients:</p>
<ul class="list-disc list-inside mt-2 text-surface-700 dark:text-surface-300 space-y-1">
<li><a href="https://quill.p3k.io" class="text-primary-600 dark:text-primary-400 hover:underline">Quill</a> - Web-based</li>
<li><a href="https://indiepass.app" class="text-primary-600 dark:text-primary-400 hover:underline">IndiePass</a> - Mobile app</li>
<li><a href="https://micropublish.net" class="text-primary-600 dark:text-primary-400 hover:underline">Micropublish</a> - Web-based</li>
<li><a href="https://quill.p3k.io" class="text-accent-600 dark:text-accent-400 hover:underline">Quill</a> - Web-based</li>
<li><a href="https://indiepass.app" class="text-accent-600 dark:text-accent-400 hover:underline">IndiePass</a> - Mobile app</li>
<li><a href="https://micropublish.net" class="text-accent-600 dark:text-accent-400 hover:underline">Micropublish</a> - Web-based</li>
</ul>
{% endif %}
</div>

32
blogroll.njk
View File

@@ -6,7 +6,7 @@ permalink: /blogroll/
<div class="blogroll-page" x-data="blogrollApp()" x-init="init()">
<header class="mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
<svg class="w-8 h-8 inline-block mr-2 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 inline-block mr-2 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
Blogroll
@@ -24,7 +24,7 @@ permalink: /blogroll/
<nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs">
<button
@click="switchTab('blogs')"
:class="activeTab === 'blogs' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'blogs' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
>
All Blogs
@@ -32,7 +32,7 @@ permalink: /blogroll/
<template x-for="cat in categories" :key="cat.name">
<button
@click="switchTab('category:' + cat.name)"
:class="activeTab === 'category:' + cat.name ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'category:' + cat.name ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
>
<span x-text="cat.name"></span>
@@ -47,7 +47,7 @@ permalink: /blogroll/
<div class="main-content">
{# Loading State #}
<div x-show="loading" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -65,17 +65,17 @@ permalink: /blogroll/
<template x-for="blog in blogs" :key="blog.id">
<a
:href="blog.siteUrl || blog.feedUrl"
class="block bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-primary-400 dark:hover:border-primary-600 transition-colors group"
class="block bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-accent-400 dark:hover:border-accent-600 transition-colors group"
target="_blank"
rel="noopener"
>
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center flex-shrink-0 overflow-hidden">
<img x-show="blog.photo" :src="blog.photo" class="w-10 h-10 object-cover" loading="lazy" />
<span x-show="!blog.photo" class="text-white text-sm font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
</div>
<div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors" x-text="blog.title"></h3>
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate group-hover:text-accent-600 dark:group-hover:text-accent-400 transition-colors" x-text="blog.title"></h3>
<p x-show="blog.category" class="text-xs text-surface-500 truncate" x-text="blog.category"></p>
</div>
</div>
@@ -109,12 +109,12 @@ permalink: /blogroll/
{# Category Items Tab (one for each category) #}
<div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
<template x-for="item in categoryItems" :key="item.id">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<div class="flex items-start gap-4">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100">
<a :href="item.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="item.title"></a>
<a :href="item.url" class="hover:text-accent-600 dark:hover:text-accent-400" target="_blank" rel="noopener" x-text="item.title"></a>
</h2>
<span
x-show="item.isFuture"
@@ -129,7 +129,7 @@ permalink: /blogroll/
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500 mb-3">
<a
:href="item.blog?.siteUrl || '#'"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-colors"
target="_blank"
rel="noopener"
>
@@ -155,7 +155,7 @@ permalink: /blogroll/
<div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a
:href="item.url"
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400"
class="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 dark:text-accent-400"
target="_blank"
rel="noopener"
>
@@ -206,7 +206,7 @@ permalink: /blogroll/
<button
@click="loadMoreCategory()"
:disabled="loadingMore"
class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
class="px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
>
<span x-show="!loadingMore">Load More</span>
<span x-show="loadingMore" class="flex items-center gap-2">
@@ -255,11 +255,11 @@ permalink: /blogroll/
<h3 class="widget-title">Stats</h3>
<div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="status?.blogs?.count || 0"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="status?.blogs?.count || 0"></span>
<span class="text-xs text-surface-500 uppercase">Blogs</span>
</div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="status?.items?.count || 0"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="status?.items?.count || 0"></span>
<span class="text-xs text-surface-500 uppercase">Posts</span>
</div>
</div>
@@ -268,7 +268,7 @@ permalink: /blogroll/
{# Category Quick Links (for when on blogs tab) #}
<div class="widget" x-show="categories.length > 0">
<h3 class="widget-title flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-accent-600" fill="currentColor" viewBox="0 0 24 24">
<circle cx="6.18" cy="17.82" r="2.18"/>
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
</svg>
@@ -279,7 +279,7 @@ permalink: /blogroll/
<li>
<button
@click="switchTab('category:' + cat.name)"
:class="activeTab === 'category:' + cat.name ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
:class="activeTab === 'category:' + cat.name ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
>
<span x-text="cat.name"></span>

2
bookmarks.njk
View File

@@ -29,7 +29,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
<div class="post-header">
{% if post.data.title %}
<h2 class="text-xl font-semibold mb-1 flex-1">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-amber-600 dark:hover:text-amber-400" href="{{ post.url }}">
{{ post.data.title }}
</a>
</h2>

2
categories-index.njk
View File

@@ -18,7 +18,7 @@ eleventyImport:
<ul class="flex flex-wrap gap-3">
{% for cat in collections.categories %}
<li>
<a href="/categories/{{ cat | slugify }}/" class="inline-block px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 rounded-lg hover:bg-primary-100 dark:hover:bg-primary-900 hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
<a href="/categories/{{ cat | slugify }}/" class="inline-block px-4 py-2 bg-surface-100 dark:bg-surface-800 text-surface-900 dark:text-surface-100 rounded-lg hover:bg-accent-100 dark:hover:bg-accent-900 hover:text-accent-700 dark:hover:text-accent-300 transition-colors">
{{ cat }}
</a>
</li>

8
categories.njk
View File

@@ -44,7 +44,7 @@ eleventyComputed:
{% elif postType == "reposts" %}
{% set borderClass = "border-l-[3px] border-l-green-400 dark:border-l-green-500" %}
{% elif postType == "replies" %}
{% set borderClass = "border-l-[3px] border-l-primary-400 dark:border-l-primary-500" %}
{% set borderClass = "border-l-[3px] border-l-accent-400 dark:border-l-accent-500" %}
{% elif postType == "photos" %}
{% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
{% else %}
@@ -53,7 +53,7 @@ eleventyComputed:
<li class="h-entry post-card {{ borderClass }}">
<div class="post-header">
<h2 class="text-xl font-semibold mb-1 flex-1">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">
<a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400" href="{{ post.url }}">
{{ post.data.title or post.templateContent | striptags | truncate(60) or "Untitled" }}
</a>
</h2>
@@ -67,7 +67,7 @@ eleventyComputed:
<p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }}
</p>
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline mt-3 inline-block">
View &rarr;
</a>
</li>
@@ -78,6 +78,6 @@ eleventyComputed:
{% endif %}
<div class="mt-8">
<a href="/categories/" class="text-primary-600 dark:text-primary-400 hover:underline">&larr; All categories</a>
<a href="/categories/" class="text-accent-600 dark:text-accent-400 hover:underline">&larr; All categories</a>
</div>
</div>

8
changelog.njk
View File

@@ -18,7 +18,7 @@ withSidebar: false
<template x-for="tab in tabs" :key="tab.key">
<button
@click="activeTab = tab.key"
:class="activeTab === tab.key ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === tab.key ? 'border-b-2 border-accent-500 text-accent-600 dark:text-accent-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="flex items-center gap-1.5 px-3 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap flex-shrink-0"
>
<span x-text="tab.label"></span>
@@ -33,7 +33,7 @@ withSidebar: false
{# Loading state #}
<div x-show="loading" class="flex items-center justify-center py-12">
<svg class="animate-spin h-6 w-6 text-primary-500" viewBox="0 0 24 24" fill="none">
<svg class="animate-spin h-6 w-6 text-accent-500" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg>
@@ -51,7 +51,7 @@ withSidebar: false
<li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4">
<div class="flex items-start gap-3">
<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-primary-600 dark:text-primary-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"
x-text="commit.sha"></a>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-surface-900 dark:text-surface-100 break-words" x-text="commit.title"></p>
@@ -62,7 +62,7 @@ withSidebar: false
x-text="categoryLabels[commit.category] || commit.category"
></span>
<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-primary-600 dark:hover:text-primary-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>
<span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span>
<span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span>

10
css/tailwind.css
View File

@@ -83,7 +83,7 @@
}
.skip-link {
@apply absolute -top-full left-0 z-50 bg-primary-600 text-white px-4 py-2;
@apply absolute -top-full left-0 z-50 bg-accent-600 text-white px-4 py-2;
}
.skip-link:focus {
@@ -260,7 +260,7 @@
}
.site-footer a {
@apply text-primary-600 dark:text-primary-400 hover:underline;
@apply text-accent-600 dark:text-accent-400 hover:underline;
}
/* Layout with sidebar - mobile-first with responsive grid */
@@ -462,7 +462,7 @@
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
@apply outline-2 outline-offset-2 outline-primary-500;
@apply outline-2 outline-offset-2 outline-accent-500;
}
}
@@ -625,7 +625,7 @@
/* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
#search .pagefind-ui {
--pagefind-ui-scale: 1;
--pagefind-ui-primary: #2563eb;
--pagefind-ui-primary: #0d9488;
--pagefind-ui-text: #18181b;
--pagefind-ui-background: #ffffff;
--pagefind-ui-border: #e4e4e7;
@@ -637,7 +637,7 @@
}
.dark #search .pagefind-ui {
--pagefind-ui-primary: #60a5fa;
--pagefind-ui-primary: #2dd4bf;
--pagefind-ui-text: #f4f4f5;
--pagefind-ui-background: #09090b;
--pagefind-ui-border: #3f3f46;

10
cv.njk
View File

@@ -51,7 +51,7 @@ pagefindIgnore: true
{{ authorName }}
</h1>
{% if authorTitle %}
<p class="text-lg sm:text-xl text-primary-600 dark:text-primary-400 mb-3 sm:mb-4">
<p class="text-lg sm:text-xl text-accent-600 dark:text-accent-400 mb-3 sm:mb-4">
{{ authorTitle }}
</p>
{% endif %}
@@ -86,13 +86,13 @@ pagefindIgnore: true
<span>{{ cvOrg }}</span>
{% endif %}
{% if cvUrl %}
<span><a href="{{ cvUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
<span><a href="{{ cvUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">{{ cvUrl | replace("https://", "") | replace("http://", "") }}</a></span>
{% endif %}
{% if cvEmail %}
<span><a href="mailto:{{ cvEmail }}" class="text-primary-600 dark:text-primary-400 hover:underline">{{ cvEmail }}</a></span>
<span><a href="mailto:{{ cvEmail }}" class="text-accent-600 dark:text-accent-400 hover:underline">{{ cvEmail }}</a></span>
{% endif %}
{% if cvKeyUrl %}
<span><a href="{{ cvKeyUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
<span><a href="{{ cvKeyUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">PGP Key</a></span>
{% endif %}
</div>
{% endif %}
@@ -139,7 +139,7 @@ pagefindIgnore: true
<h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">CV</h1>
<p class="text-surface-600 dark:text-surface-400">
No CV data available yet. Add your experience, projects, and skills via the
<a href="/dashboard" class="text-primary-600 dark:text-primary-400 hover:underline">admin dashboard</a>.
<a href="/dashboard" class="text-accent-600 dark:text-accent-400 hover:underline">admin dashboard</a>.
</p>
</div>

6
digest-index.njk
View File

@@ -15,15 +15,15 @@ permalink: "digest/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
<div>
<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">
A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-primary-600 dark:text-primary-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-orange-600 dark:text-orange-400 hover:underline">RSS</a> for one update per week.
</p>
{% if paginatedDigests.length > 0 %}
<ul class="space-y-4">
{% for d in paginatedDigests %}
<li class="p-4 bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-primary-300 dark:hover:border-primary-600 transition-colors">
<li class="p-4 bg-white 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">
<a href="/digest/{{ d.slug }}/" class="block">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
{{ d.label }}
</h2>
<p class="text-sm text-surface-500 dark:text-surface-400 mt-1">

16
digest.njk
View File

@@ -48,7 +48,7 @@ permalink: "digest/{{ digest.slug }}/"
<div class="flex items-start gap-2">
<span class="text-red-500 flex-shrink-0">&#x2764;</span>
<div>
<a href="{{ targetUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline break-all">{{ targetUrl }}</a>
<a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
<div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
<time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
&middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
@@ -62,9 +62,9 @@ permalink: "digest/{{ digest.slug }}/"
<span class="text-amber-500 flex-shrink-0">&#x1F516;</span>
<div>
{% if post.data.title %}
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">{{ post.data.title }}</a>
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">{{ post.data.title }}</a>
{% else %}
<a href="{{ targetUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline break-all">{{ targetUrl }}</a>
<a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
{% endif %}
<div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
<time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
@@ -78,7 +78,7 @@ permalink: "digest/{{ digest.slug }}/"
<div class="flex items-start gap-2">
<span class="text-green-500 flex-shrink-0">&#x1F501;</span>
<div>
<a href="{{ targetUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline break-all">{{ targetUrl }}</a>
<a href="{{ targetUrl }}" class="text-accent-600 dark:text-accent-400 hover:underline break-all">{{ targetUrl }}</a>
<div class="text-sm text-surface-500 dark:text-surface-400 mt-1">
<time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
&middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
@@ -98,7 +98,7 @@ permalink: "digest/{{ digest.slug }}/"
</a>
{% endif %}
{% if post.data.title %}
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">{{ post.data.title }}</a>
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">{{ post.data.title }}</a>
{% elif post.templateContent %}
<p class="text-surface-700 dark:text-surface-300 text-sm">{{ post.templateContent | striptags | truncate(120) }}</p>
{% endif %}
@@ -110,7 +110,7 @@ permalink: "digest/{{ digest.slug }}/"
{% elif typeInfo.key == "articles" %}
<div>
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
<a href="{{ post.url }}" class="font-medium text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
{{ post.data.title | default("Untitled") }}
</a>
{% if post.templateContent %}
@@ -150,7 +150,7 @@ permalink: "digest/{{ digest.slug }}/"
<nav class="flex justify-between items-center mt-8 pt-6 border-t border-surface-200 dark:border-surface-700" aria-label="Digest navigation">
{% if currentIndex > 0 %}
{% set newer = allDigests[currentIndex - 1] %}
<a href="/digest/{{ newer.slug }}/" class="text-primary-600 dark:text-primary-400 hover:underline">
<a href="/digest/{{ newer.slug }}/" class="text-accent-600 dark:text-accent-400 hover:underline">
&larr; {{ newer.label }}
</a>
{% else %}
@@ -158,7 +158,7 @@ permalink: "digest/{{ digest.slug }}/"
{% endif %}
{% if currentIndex < allDigests.length - 1 %}
{% set older = allDigests[currentIndex + 1] %}
<a href="/digest/{{ older.slug }}/" class="text-primary-600 dark:text-primary-400 hover:underline">
<a href="/digest/{{ older.slug }}/" class="text-accent-600 dark:text-accent-400 hover:underline">
{{ older.label }} &rarr;
</a>
{% else %}

26
funkwhale.njk
View File

@@ -9,7 +9,7 @@ withSidebar: true
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Listening Activity</h1>
<p class="text-surface-600 dark:text-surface-400">
What I've been listening to on
<a href="{{ funkwhaleActivity.instanceUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">
<a href="{{ funkwhaleActivity.instanceUrl }}" class="text-purple-600 dark:text-purple-400 hover:underline" target="_blank" rel="noopener">
Funkwhale
</a>
</p>
@@ -18,7 +18,7 @@ withSidebar: true
{# Now Playing / Recently Played Hero #}
{% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %}
<section class="mb-12">
<div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-primary-500/10 to-primary-600/5 border border-primary-500/20{% endif %}">
<div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
{% if funkwhaleActivity.nowPlaying.coverUrl %}
<img
@@ -48,7 +48,7 @@ withSidebar: true
Now Playing
</span>
{% else %}
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-primary-500/20 text-primary-700 dark:text-primary-400 rounded-full">
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Recently Played
</span>
@@ -57,7 +57,7 @@ withSidebar: true
<h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
{% if funkwhaleActivity.nowPlaying.trackUrl %}
<a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
{{ funkwhaleActivity.nowPlaying.track }}
</a>
{% else %}
@@ -79,7 +79,7 @@ withSidebar: true
{% if funkwhaleActivity.stats %}
<section class="mb-12">
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
<svg class="w-6 h-6 text-primary-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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
Listening Statistics
@@ -89,28 +89,28 @@ withSidebar: true
<div class="flex gap-1 mb-6 border-b border-surface-200 dark:border-surface-700 overflow-x-auto">
<button
@click="activeTab = 'all'"
:class="activeTab === 'all' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'all' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
>
All Time
</button>
<button
@click="activeTab = 'month'"
:class="activeTab === 'month' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'month' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
>
This Month
</button>
<button
@click="activeTab = 'week'"
:class="activeTab === 'week' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'week' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
>
This Week
</button>
<button
@click="activeTab = 'trends'"
:class="activeTab === 'trends' ? 'border-b-2 border-primary-500 text-primary-600 dark:text-primary-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'trends' ? 'border-b-2 border-purple-500 text-purple-600 dark:text-purple-400' : 'text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
>
Trends
@@ -155,7 +155,7 @@ withSidebar: true
{% endfor %}
{% for day in funkwhaleActivity.stats.trends %}
<div
class="flex-1 bg-primary-500 hover:bg-primary-600 rounded-t transition-colors cursor-pointer"
class="flex-1 bg-purple-500 hover:bg-purple-600 rounded-t transition-colors cursor-pointer"
style="height: {{ (day.count / maxCount * 100) if maxCount > 0 else 0 }}%; min-height: 2px;"
title="{{ day.date }}: {{ day.count }} plays"
></div>
@@ -185,7 +185,7 @@ withSidebar: true
{% if funkwhaleActivity.listenings.length %}
<div class="space-y-3">
{% for listening in funkwhaleActivity.listenings | head(15) %}
<div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<div class="flex items-center gap-4 p-3 bg-white 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">
{% if listening.coverUrl %}
<img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %}
@@ -199,7 +199,7 @@ withSidebar: true
<div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
{% if listening.trackUrl %}
<a href="{{ listening.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ listening.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
{{ listening.track }}
</a>
{% else %}
@@ -249,7 +249,7 @@ withSidebar: true
<div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
{% if favorite.trackUrl %}
<a href="{{ favorite.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ favorite.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">
{{ favorite.track }}
</a>
{% else %}

34
github.njk
View File

@@ -9,7 +9,7 @@ withSidebar: true
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">GitHub Activity</h1>
<p class="text-surface-600 dark:text-surface-400">
My open source contributions and starred repositories.
<a href="https://github.com/{{ site.feeds.github }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">
<a href="https://github.com/{{ site.feeds.github }}" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">
Follow me on GitHub
</a>
</p>
@@ -27,10 +27,10 @@ withSidebar: true
<div class="grid gap-4 sm:gap-6 md:grid-cols-2">
{% for repo in githubActivity.featured %}
<article class="p-5 bg-gradient-to-br from-primary-50 to-white dark:from-surface-800 dark:to-surface-800 rounded-xl border-2 border-primary-200 dark:border-primary-800 shadow-sm">
<article class="p-5 bg-gradient-to-br from-surface-50 to-white dark:from-surface-800 dark:to-surface-800 rounded-xl border-2 border-surface-200 dark:border-surface-700 shadow-sm">
<div class="flex items-start justify-between mb-3">
<h3 class="font-bold text-lg text-surface-900 dark:text-surface-100">
<a href="{{ repo.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ repo.url }}" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener">
{{ repo.fullName }}
</a>
</h3>
@@ -46,7 +46,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500 mb-4">
{% if repo.language %}
<span class="flex items-center gap-1">
<span class="w-3 h-3 rounded-full bg-primary-500"></span>
<span class="w-3 h-3 rounded-full bg-surface-500"></span>
{{ repo.language }}
</span>
{% endif %}
@@ -67,15 +67,15 @@ withSidebar: true
</div>
{% if repo.commits and repo.commits.length %}
<details class="border-t border-primary-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden">
<summary class="cursor-pointer text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">
<details class="border-t border-surface-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden">
<summary class="cursor-pointer text-sm font-medium text-surface-600 dark:text-surface-400 hover:underline">
Recent commits ({{ repo.commits.length }})
</summary>
<ul class="mt-3 space-y-2 overflow-hidden">
{% for commit in repo.commits %}
<li class="flex items-start gap-2 text-sm min-w-0">
<code class="flex-shrink-0 text-xs font-mono bg-surface-100 dark:bg-surface-700 px-1.5 py-0.5 rounded">
<a href="{{ commit.url }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">{{ commit.sha }}</a>
<a href="{{ commit.url }}" class="text-surface-600 dark:text-surface-400 hover:underline" target="_blank" rel="noopener">{{ commit.sha }}</a>
</code>
<span class="text-surface-700 dark:text-surface-300 truncate min-w-0 flex-1">{{ commit.message }}</span>
</li>
@@ -106,7 +106,7 @@ withSidebar: true
{{ commit.sha }}
</code>
<div class="flex-1 min-w-0">
<a href="{{ commit.url }}" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ commit.url }}" class="text-surface-900 dark:text-surface-100 hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener">
{{ commit.message }}
</a>
<p class="text-xs text-surface-500 mt-1">
@@ -141,7 +141,7 @@ withSidebar: true
<span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded">Issue</span>
{% endif %}
<div class="flex-1 min-w-0">
<a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener">
{{ item.title }}
</a>
<p class="text-xs text-surface-500 mt-1">
@@ -170,7 +170,7 @@ withSidebar: true
{% for repo in githubRepos | head(6) %}
<article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ repo.html_url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ repo.html_url }}" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener">
{{ repo.name }}
</a>
</h3>
@@ -182,7 +182,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
{% if repo.language %}
<span class="flex items-center gap-1">
<span class="w-3 h-3 rounded-full bg-primary-500"></span>
<span class="w-3 h-3 rounded-full bg-surface-500"></span>
{{ repo.language }}
</span>
{% endif %}
@@ -203,7 +203,7 @@ withSidebar: true
{% endfor %}
</div>
<a href="https://github.com/{{ site.feeds.github }}?tab=repositories" class="inline-block mt-4 text-primary-600 dark:text-primary-400 hover:underline">
<a href="https://github.com/{{ site.feeds.github }}?tab=repositories" class="inline-block mt-4 text-accent-600 dark:text-accent-400 hover:underline">
View all repositories &rarr;
</a>
{% else %}
@@ -223,9 +223,9 @@ withSidebar: true
{% if githubActivity.stars.length %}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for repo in githubActivity.stars | head(10) %}
<article class="p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="p-4 bg-white 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">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ repo.url }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
<a href="{{ repo.url }}" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener">
{{ repo.name }}
</a>
</h3>
@@ -236,7 +236,7 @@ withSidebar: true
<div class="flex flex-wrap gap-2 mb-3">
{% for topic in repo.topics %}
<span class="text-xs px-2 py-0.5 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded">
<span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded">
{{ topic }}
</span>
{% endfor %}
@@ -245,7 +245,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
{% if repo.language %}
<span class="flex items-center gap-1">
<span class="w-3 h-3 rounded-full bg-primary-500"></span>
<span class="w-3 h-3 rounded-full bg-surface-500"></span>
{{ repo.language }}
</span>
{% endif %}
@@ -260,7 +260,7 @@ withSidebar: true
{% endfor %}
</div>
<a href="/github/starred/" class="inline-block mt-4 text-primary-600 dark:text-primary-400 hover:underline">
<a href="/github/starred/" class="inline-block mt-4 text-accent-600 dark:text-accent-400 hover:underline">
View all {{ githubStarred.totalCount | default(githubActivity.stars | length) }} starred repos &rarr;
</a>
{% else %}

34
interactions.njk
View File

@@ -20,18 +20,18 @@ permalink: /interactions/
<div class="flex border-b border-surface-200 dark:border-surface-700 mb-6">
<button
@click="activeTab = 'outbound'"
:class="activeTab === 'outbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'outbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
My Activity
<span class="ml-1 text-xs text-surface-400">(outbound)</span>
</button>
<button
@click="activeTab = 'inbound'"
:class="activeTab === 'inbound' ? 'border-primary-500 text-primary-600 dark:text-primary-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
:class="activeTab === 'inbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
Received
<span class="ml-1 text-xs text-surface-400">(inbound)</span>
<span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full"></span>
<span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full"></span>
</button>
</div>
@@ -49,7 +49,7 @@ permalink: /interactions/
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Likes</h2>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-red-600 dark:group-hover:text-red-400">Likes</h2>
<p class="text-sm text-surface-500">{{ collections.likes.length }} item{% if collections.likes.length != 1 %}s{% endif %}</p>
</div>
</div>
@@ -59,13 +59,13 @@ permalink: /interactions/
{# 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">
<div class="flex items-center gap-4 mb-4">
<div class="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-full">
<svg class="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="p-3 bg-sky-100 dark:bg-sky-900/30 rounded-full">
<svg class="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Replies</h2>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-sky-600 dark:group-hover:text-sky-400">Replies</h2>
<p class="text-sm text-surface-500">{{ collections.replies.length }} item{% if collections.replies.length != 1 %}s{% endif %}</p>
</div>
</div>
@@ -81,7 +81,7 @@ permalink: /interactions/
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Bookmarks</h2>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-amber-600 dark:group-hover:text-amber-400">Bookmarks</h2>
<p class="text-sm text-surface-500">{{ collections.bookmarks.length }} item{% if collections.bookmarks.length != 1 %}s{% endif %}</p>
</div>
</div>
@@ -97,7 +97,7 @@ permalink: /interactions/
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Reposts</h2>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-green-600 dark:group-hover:text-green-400">Reposts</h2>
<p class="text-sm text-surface-500">{{ collections.reposts.length }} item{% if collections.reposts.length != 1 %}s{% endif %}</p>
</div>
</div>
@@ -113,7 +113,7 @@ permalink: /interactions/
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-primary-600 dark:group-hover:text-primary-400">Photos</h2>
<h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Photos</h2>
<p class="text-sm text-surface-500">{{ collections.photos.length }} item{% if collections.photos.length != 1 %}s{% endif %}</p>
</div>
</div>
@@ -121,7 +121,7 @@ permalink: /interactions/
</a>
</div>
<div class="mt-12 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
<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">
These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
@@ -153,7 +153,7 @@ permalink: /interactions/
{# Loading state #}
<div x-show="loading && !webmentions.length" class="text-center py-12">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500"></div>
<p class="mt-4 text-surface-500">Loading webmentions...</p>
</div>
@@ -181,7 +181,7 @@ permalink: /interactions/
<div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6">
<button
@click="filterType = 'all'"
:class="filterType === 'all' ? 'bg-primary-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
:class="filterType === 'all' ? 'bg-accent-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
class="px-3 py-1.5 text-sm rounded-full transition-colors">
All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span>
</button>
@@ -199,7 +199,7 @@ permalink: /interactions/
</button>
<button
@click="filterType = 'in-reply-to'"
:class="filterType === 'in-reply-to' ? 'bg-primary-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
:class="filterType === 'in-reply-to' ? 'bg-sky-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
class="px-3 py-1.5 text-sm rounded-full transition-colors">
💬 Replies <span x-text="'(' + replies.length + ')'" class="text-xs opacity-75"></span>
</button>
@@ -239,7 +239,7 @@ permalink: /interactions/
<span x-show="wm['wm-property'] === 'repost-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full">
🔄 reposted
</span>
<span x-show="wm['wm-property'] === 'in-reply-to'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
<span x-show="wm['wm-property'] === 'in-reply-to'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-sky-100 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 rounded-full">
💬 replied
</span>
<span x-show="wm['wm-property'] === 'mention-of'" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 rounded-full">
@@ -271,7 +271,7 @@ permalink: /interactions/
{# Target URL - which of my posts this is about #}
<div class="mt-2 text-xs text-surface-500">
<span>on </span>
<a :href="wm['wm-target']" class="text-primary-600 dark:text-primary-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
<a :href="wm['wm-target']" class="text-accent-600 dark:text-accent-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
</div>
</div>
</div>
@@ -295,7 +295,7 @@ permalink: /interactions/
</div>
{# Info box #}
<div class="mt-12 p-6 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
<div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
<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">
Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content

8
js/webmentions.js
View File

@@ -241,7 +241,7 @@
const published = item.published || item['wm-received'];
const li = document.createElement('li');
li.className = 'p-4 bg-surface-100 dark:bg-surface-800 rounded-lg ring-2 ring-primary-500';
li.className = 'p-4 bg-surface-100 dark:bg-surface-800 rounded-lg ring-2 ring-accent-500';
li.dataset.new = 'true';
// Build reply card using DOM methods
@@ -288,7 +288,7 @@
dateLink.appendChild(timeEl);
const newBadge = document.createElement('span');
newBadge.className = 'text-xs text-primary-600 dark:text-primary-400 font-medium';
newBadge.className = 'text-xs text-accent-600 dark:text-accent-400 font-medium';
newBadge.textContent = 'NEW';
headerDiv.appendChild(authorLink);
@@ -339,13 +339,13 @@
const link = document.createElement('a');
link.href = item.url || '#';
link.className = 'text-primary-600 dark:text-primary-400 hover:underline';
link.className = 'text-accent-600 dark:text-accent-400 hover:underline';
link.target = '_blank';
link.rel = 'noopener';
link.textContent = `${author.name || 'Someone'} mentioned this on ${formatDate(published)}`;
const badge = document.createElement('span');
badge.className = 'text-xs text-primary-600 dark:text-primary-400 font-medium ml-1';
badge.className = 'text-xs text-accent-600 dark:text-accent-400 font-medium ml-1';
badge.textContent = 'NEW';
li.appendChild(link);

2
lib/unfurl-shortcode.js
View File

@@ -105,7 +105,7 @@ export function renderCard(url, metadata) {
? `<img src="${escapeHtml(favicon)}" alt="" class="inline-block w-4 h-4 mr-1 align-text-bottom" loading="lazy" />`
: "";
return `<div class="unfurl-card not-prose my-4 rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 overflow-hidden hover:border-primary-300 dark:hover:border-primary-600 transition-colors">
return `<div class="unfurl-card not-prose my-4 rounded-lg border border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800 overflow-hidden hover:border-accent-300 dark:hover:border-accent-600 transition-colors">
<a href="${escapeHtml(url)}" rel="noopener" target="_blank" class="flex no-underline text-inherit hover:text-inherit">
<div class="flex-1 p-3 sm:p-4 min-w-0">
<p class="font-semibold text-sm sm:text-base text-surface-900 dark:text-surface-100 truncate m-0">${escapeHtml(title)}</p>

2
likes.njk
View File

@@ -62,7 +62,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-red-600 dark:text-red-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
</li>

12
listening.njk
View File

@@ -10,7 +10,7 @@ withSidebar: true
<p class="text-surface-600 dark:text-surface-400">
What I've been listening to on
{% if funkwhaleActivity.instanceUrl %}
<a href="{{ funkwhaleActivity.instanceUrl }}" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">Funkwhale</a>
<a href="{{ funkwhaleActivity.instanceUrl }}" class="text-purple-600 dark:text-purple-400 hover:underline" target="_blank" rel="noopener">Funkwhale</a>
{% endif %}
{% if funkwhaleActivity.instanceUrl and lastfmActivity.profileUrl %} and {% endif %}
{% if lastfmActivity.profileUrl %}
@@ -23,7 +23,7 @@ withSidebar: true
<div class="flex gap-2 mb-8 flex-wrap">
<button
@click="activeSource = 'all'"
:class="activeSource === 'all' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="activeSource === 'all' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
>
All Sources
@@ -84,7 +84,7 @@ withSidebar: true
Now Playing
</span>
{% else %}
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-primary-500/20 text-primary-700 dark:text-primary-400 rounded-full">
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
Recently Played
</span>
{% endif %}
@@ -92,7 +92,7 @@ withSidebar: true
<h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
{% if fwNowPlaying.trackUrl %}
<a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a>
<a href="{{ fwNowPlaying.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ fwNowPlaying.track }}</a>
{% else %}
{{ fwNowPlaying.track }}
{% endif %}
@@ -136,7 +136,7 @@ withSidebar: true
Now Playing
</span>
{% else %}
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-primary-500/20 text-primary-700 dark:text-primary-400 rounded-full">
<span class="inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium bg-purple-500/20 text-purple-700 dark:text-purple-400 rounded-full">
Recently Played
</span>
{% endif %}
@@ -169,7 +169,7 @@ withSidebar: true
{% if funkwhaleActivity.stats or lastfmActivity.stats %}
<section class="mb-12">
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6 flex items-center gap-2">
<svg class="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-6 h-6 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
Listening Statistics

28
news.njk
View File

@@ -12,7 +12,7 @@ withSidebar: true
</p>
<p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span>
<button @click="refresh()" class="ml-2 text-primary-600 hover:text-primary-700 dark:text-primary-400" :disabled="loading">
<button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading">
<svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
@@ -22,7 +22,7 @@ withSidebar: true
{# Loading State #}
<div x-show="loading && items.length === 0" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -44,7 +44,7 @@ withSidebar: true
<div class="flex gap-2">
<button
@click="viewMode = 'list'"
:class="viewMode === 'list' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="List view"
>
@@ -55,7 +55,7 @@ withSidebar: true
</button>
<button
@click="viewMode = 'card'"
:class="viewMode === 'card' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Card view"
>
@@ -66,7 +66,7 @@ withSidebar: true
</button>
<button
@click="viewMode = 'full'"
:class="viewMode === 'full' ? 'bg-primary-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
:class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Expanded view"
>
@@ -81,7 +81,7 @@ withSidebar: true
<div class="relative" x-show="feeds.length > 1">
<select
x-model="filterFeed"
class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
<template x-for="feed in feeds" :key="feed.id">
@@ -111,7 +111,7 @@ withSidebar: true
</svg>
Syncing...
</div>
<div x-show="loading && items.length > 0" class="flex items-center gap-2 text-primary-600 dark:text-primary-400 ml-auto">
<div x-show="loading && items.length > 0" class="flex items-center gap-2 text-accent-600 dark:text-accent-400 ml-auto">
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -125,7 +125,7 @@ withSidebar: true
{# List View #}
<div x-show="viewMode === 'list'" class="space-y-3">
<template x-for="item in filteredItems" :key="item.id">
<article class="flex items-start gap-4 p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="flex items-start gap-4 p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<img
x-show="item.imageUrl"
:src="item.imageUrl"
@@ -137,7 +137,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -157,7 +157,7 @@ withSidebar: true
<time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
<span class="hidden sm:inline" x-show="item.categories?.length">
<template x-for="cat in item.categories.slice(0, 3)" :key="cat">
<span class="text-primary-600 dark:text-primary-400" x-text="'#' + cat"></span>
<span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span>
</template>
</span>
<button
@@ -203,7 +203,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-2 line-clamp-2">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -270,7 +270,7 @@ withSidebar: true
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
<a
:href="item.link"
class="hover:text-primary-600 dark:hover:text-primary-400"
class="hover:text-accent-600 dark:hover:text-accent-400"
target="_blank"
rel="noopener"
x-text="item.title"
@@ -282,7 +282,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3">
<a
:href="item.link"
class="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors"
class="inline-flex items-center gap-2 px-4 py-2 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors"
target="_blank"
rel="noopener"
>
@@ -314,7 +314,7 @@ withSidebar: true
</button>
<div x-show="item.categories?.length" class="flex flex-wrap gap-2">
<template x-for="cat in item.categories" :key="cat">
<span class="px-2 py-1 text-xs bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full" x-text="cat"></span>
<span class="px-2 py-1 text-xs bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400 rounded-full" x-text="cat"></span>
</template>
</div>
</div>

4
notes.njk
View File

@@ -28,7 +28,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
<li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
<div class="post-header">
<a class="u-url" href="{{ post.url }}">
<time class="dt-published text-sm text-primary-600 dark:text-primary-400 font-medium" datetime="{{ post.date | isoDate }}">
<time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium" datetime="{{ post.date | isoDate }}">
{{ post.date | dateDisplay }}
</time>
</a>
@@ -48,7 +48,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{{ post.templateContent | safe }}
</div>
<div class="post-footer mt-3">
<a href="{{ post.url }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">
<a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">
Permalink
</a>
</div>

2
photos.njk
View File

@@ -59,7 +59,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
{% if post.templateContent %}
<div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-purple-600 dark:text-purple-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</li>
{% endfor %}
</ul>

24
podroll.njk
View File

@@ -6,7 +6,7 @@ permalink: /podroll/
<div class="podroll-page" x-data="podrollApp()" x-init="init()">
<header class="mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
<svg class="w-8 h-8 inline-block mr-2 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
<circle cx="12" cy="12" r="3"/>
<path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
@@ -19,7 +19,7 @@ permalink: /podroll/
</p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
Last synced: <span x-text="formatDate(status?.episodes?.lastSync, 'full')"></span>
<button @click="refresh()" class="ml-2 text-primary-600 hover:text-primary-700 dark:text-primary-400" :disabled="loading">
<button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading">
<svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
@@ -32,7 +32,7 @@ permalink: /podroll/
<div class="main-content">
{# Loading State #}
<div x-show="loading && episodes.length === 0" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -50,7 +50,7 @@ permalink: /podroll/
<div class="relative">
<select
x-model="filterPodcast"
class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
class="w-full sm:w-auto appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-10 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="all">All Podcasts</option>
<template x-for="source in sortedSources" :key="source.title">
@@ -66,18 +66,18 @@ permalink: /podroll/
{# Episodes List #}
<div x-show="episodes.length > 0" class="space-y-4">
<template x-for="episode in filteredEpisodes" :key="episode.id">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
{# Episode Header #}
<div class="flex items-start gap-4 mb-4">
<div class="flex-1 min-w-0">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1">
<a :href="episode.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="episode.title"></a>
<a :href="episode.url" class="hover:text-accent-600 dark:hover:text-accent-400" target="_blank" rel="noopener" x-text="episode.title"></a>
</h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<a
x-show="episode.podcast"
:href="episode.podcast?.url || '#'"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 rounded-full hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
class="inline-flex items-center gap-1 px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-full hover:bg-orange-200 dark:hover:bg-orange-900/50 transition-colors"
target="_blank"
rel="noopener"
>
@@ -121,7 +121,7 @@ permalink: /podroll/
<div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a
:href="episode.url"
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400"
class="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 dark:text-accent-400"
target="_blank"
rel="noopener"
>
@@ -175,7 +175,7 @@ permalink: /podroll/
<button
@click="loadMore()"
:disabled="loadingMore"
class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
class="px-6 py-3 bg-accent-600 hover:bg-accent-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
>
<span x-show="!loadingMore">Load More Episodes</span>
<span x-show="loadingMore" class="flex items-center gap-2">
@@ -202,7 +202,7 @@ permalink: /podroll/
<aside class="sidebar">
<div class="widget">
<h3 class="widget-title flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
<circle cx="6.18" cy="17.82" r="2.18"/>
<path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
</svg>
@@ -223,7 +223,7 @@ permalink: /podroll/
target="_blank"
rel="noopener"
>
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center flex-shrink-0">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center flex-shrink-0">
<span class="text-white text-xs font-bold" x-text="source.title.charAt(0).toUpperCase()"></span>
</div>
<div class="flex-1 min-w-0">
@@ -232,7 +232,7 @@ permalink: /podroll/
</div>
<a
:href="source.xmlUrl"
class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-primary-600 transition-opacity"
class="opacity-0 group-hover:opacity-100 text-surface-400 hover:text-accent-600 transition-opacity"
target="_blank"
rel="noopener"
title="RSS Feed"

26
readlater.njk
View File

@@ -6,7 +6,7 @@ permalink: /readlater/
<div class="readlater-page" x-data="readlaterApp()" x-init="init()">
<header class="mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
<svg class="w-8 h-8 inline-block mr-2 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 inline-block mr-2 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
Reading List
@@ -21,7 +21,7 @@ permalink: /readlater/
<div class="main-content">
{# Loading State #}
<div x-show="loading" class="text-center py-12">
<svg class="w-8 h-8 mx-auto text-primary-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<svg class="w-8 h-8 mx-auto text-accent-600 animate-spin mb-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -41,7 +41,7 @@ permalink: /readlater/
<select
x-model="selectedSource"
@change="fetchData()"
class="appearance-none bg-white 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-primary-500 focus:border-primary-500"
class="appearance-none bg-white 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-accent-500 focus:border-accent-500"
>
<option value="">All sources</option>
<template x-for="src in sources" :key="src">
@@ -58,7 +58,7 @@ permalink: /readlater/
x-model.debounce.300ms="searchQuery"
@input="fetchData()"
placeholder="Search..."
class="w-full bg-white 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-primary-500 focus:border-primary-500"
class="w-full bg-white 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-accent-500 focus:border-accent-500"
/>
<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"/>
@@ -80,16 +80,16 @@ permalink: /readlater/
{# Items List #}
<div x-show="!loading" class="space-y-4">
<template x-for="item in items" :key="item.id">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
<div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
</svg>
</div>
<div class="flex-1 min-w-0">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a :href="item.url" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors" target="_blank" rel="noopener" x-text="item.title"></a>
<a :href="item.url" class="hover:text-accent-600 dark:hover:text-accent-400 transition-colors" target="_blank" rel="noopener" x-text="item.title"></a>
</h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<span
@@ -106,7 +106,7 @@ permalink: /readlater/
<div class="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-surface-200 dark:border-surface-700">
<a
:href="item.url"
class="inline-flex items-center gap-2 text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400"
class="inline-flex items-center gap-2 text-sm text-accent-600 hover:text-accent-700 dark:text-accent-400"
target="_blank"
rel="noopener"
>
@@ -147,11 +147,11 @@ permalink: /readlater/
<h3 class="widget-title">Stats</h3>
<div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="items.length"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="items.length"></span>
<span class="text-xs text-surface-500 uppercase">Saved</span>
</div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg">
<span class="text-2xl font-bold text-primary-600 dark:text-primary-400 block" x-text="sources.length"></span>
<span class="text-2xl font-bold text-accent-600 dark:text-accent-400 block" x-text="sources.length"></span>
<span class="text-xs text-surface-500 uppercase">Sources</span>
</div>
</div>
@@ -160,7 +160,7 @@ permalink: /readlater/
{# Sources Quick Filter #}
<div class="widget" x-show="sources.length > 0">
<h3 class="widget-title flex items-center gap-2">
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-5 h-5 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
</svg>
Sources
@@ -169,7 +169,7 @@ permalink: /readlater/
<li>
<button
@click="selectedSource = ''; fetchData()"
:class="selectedSource === '' ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
:class="selectedSource === '' ? 'bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
>
All
@@ -179,7 +179,7 @@ permalink: /readlater/
<li>
<button
@click="selectedSource = src; fetchData()"
:class="selectedSource === src ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
:class="selectedSource === src ? 'bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-400' : 'hover:bg-surface-100 dark:hover:bg-surface-700'"
class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
x-text="src"
></button>

8
replies.njk
View File

@@ -25,17 +25,17 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{% if paginatedReplies.length > 0 %}
<ul class="post-list">
{% for post in paginatedReplies %}
<li class="h-entry post-card border-l-[3px] border-l-primary-400 dark:border-l-primary-500">
<li class="h-entry post-card border-l-[3px] border-l-sky-400 dark:border-l-sky-500">
<div class="post-header flex items-start gap-3">
<div class="flex-shrink-0 mt-1">
<svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<svg class="w-5 h-5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg>
</div>
<div class="flex-1 min-w-0">
{% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
<a class="hover:text-sky-600 dark:hover:text-sky-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h2>
{% endif %}
<div class="post-meta">
@@ -91,7 +91,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
<div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{{ post.templateContent | safe }}
</div>
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-sky-600 dark:text-sky-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
</li>

4
reposts.njk
View File

@@ -35,7 +35,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
<div class="flex-1 min-w-0">
{% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">
<a class="hover:text-primary-600 dark:hover:text-primary-400" href="{{ post.url }}">{{ post.data.title }}</a>
<a class="hover:text-green-600 dark:hover:text-green-400" href="{{ post.url }}">{{ post.data.title }}</a>
</h2>
{% endif %}
<div class="post-meta">
@@ -67,7 +67,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{{ post.templateContent | safe }}
</div>
{% endif %}
<a class="u-url text-sm text-primary-600 dark:text-primary-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
<a class="u-url text-sm text-green-600 dark:text-green-400 hover:underline mt-3 inline-block" href="{{ post.url }}">Permalink</a>
</div>
</div>
</li>

2
search.njk
View File

@@ -14,7 +14,7 @@ pagefindIgnore: true
<noscript>
<div class="p-6 bg-surface-100 dark:bg-surface-800 rounded-lg mt-4">
<p class="text-surface-700 dark:text-surface-300">Search requires JavaScript to be enabled. Please enable JavaScript in your browser settings to use the search feature.</p>
<p class="text-surface-500 text-sm mt-2">Alternatively, you can browse content via the <a href="/blog/" class="text-primary-600 dark:text-primary-400 hover:underline">blog archive</a> or <a href="/categories/" class="text-primary-600 dark:text-primary-400 hover:underline">categories</a>.</p>
<p class="text-surface-500 text-sm mt-2">Alternatively, you can browse content via the <a href="/blog/" class="text-accent-600 dark:text-accent-400 hover:underline">blog archive</a> or <a href="/categories/" class="text-accent-600 dark:text-accent-400 hover:underline">categories</a>.</p>
</div>
</noscript>

20
slashes.njk
View File

@@ -10,7 +10,7 @@ eleventyImport:
<div class="h-feed">
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Slash Pages</h1>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
Root-level pages on this site. Inspired by <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>.
</p>
{# Dynamic pages (created via Indiekit) #}
@@ -22,7 +22,7 @@ eleventyImport:
<li class="h-entry post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">
<a href="{{ page.url }}" class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
/{{ page.fileSlug }}
</a>
</h3>
@@ -72,7 +72,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/blogroll</a>
<a href="/blogroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/blogroll</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
@@ -82,7 +82,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/funkwhale</a>
<a href="/funkwhale/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/funkwhale</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
@@ -92,7 +92,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/github</a>
<a href="/github/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/github</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
@@ -102,7 +102,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/listening</a>
<a href="/listening/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/listening</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
@@ -112,7 +112,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/news</a>
<a href="/news/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/news</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
@@ -122,7 +122,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/podroll</a>
<a href="/podroll/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/podroll</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p>
@@ -132,7 +132,7 @@ eleventyImport:
<li class="post-card">
<div class="post-header">
<h3 class="text-xl font-semibold">
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-primary-600 dark:hover:text-primary-400">/youtube</a>
<a href="/youtube/" class="text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">/youtube</a>
</h3>
</div>
<p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p>
@@ -146,7 +146,7 @@ eleventyImport:
<div class="mt-8 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
<h2 class="text-lg font-semibold text-surface-800 dark:text-surface-200 mb-2">Want more slash pages?</h2>
<p class="text-surface-600 dark:text-surface-400 text-sm">
Check out <a href="https://slashpages.net" class="text-primary-600 dark:text-primary-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
Check out <a href="https://slashpages.net" class="text-accent-600 dark:text-accent-400 hover:underline" target="_blank" rel="noopener">slashpages.net</a>
for inspiration on pages like <code>/now</code>, <code>/uses</code>, <code>/colophon</code>, <code>/blogroll</code>, and more.
</p>
</div>

34
starred.njk
View File

@@ -8,7 +8,7 @@ eleventyExcludeFromCollections: true
<div class="starred-page" x-data="starredPage" x-cloak>
<header class="mb-6 sm:mb-8">
<div class="flex items-center gap-2 mb-4">
<a href="/github/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">&larr; GitHub Activity</a>
<a href="/github/" class="text-sm text-accent-600 dark:text-accent-400 hover:underline">&larr; GitHub Activity</a>
</div>
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2 flex items-center gap-3">
<svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
@@ -37,7 +37,7 @@ eleventyExcludeFromCollections: true
{# Loading state #}
<template x-if="loading">
<div class="text-center py-12">
<div class="inline-block w-8 h-8 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
<div class="inline-block w-8 h-8 border-4 border-accent-200 border-t-accent-600 rounded-full animate-spin"></div>
<p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
</div>
</template>
@@ -58,7 +58,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = 'all'; resetView()"
:class="activeTab === 'all'
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: '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"
>
@@ -71,7 +71,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = list.slug; resetView()"
:class="activeTab === list.slug
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: '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"
>
@@ -84,7 +84,7 @@ eleventyExcludeFromCollections: true
<button
@click="activeTab = 'uncategorized'; resetView()"
:class="activeTab === 'uncategorized'
? 'border-primary-600 text-primary-700 dark:text-primary-400'
? 'border-accent-600 text-accent-700 dark:text-accent-400'
: '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"
>
@@ -108,7 +108,7 @@ eleventyExcludeFromCollections: true
x-model="searchQuery"
@input="resetView()"
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-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white 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"
>
<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">
@@ -123,7 +123,7 @@ eleventyExcludeFromCollections: true
<select
x-model="sortBy"
@change="resetView()"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="stars">Sort: Stars</option>
<option value="starredAt">Sort: Recently Starred</option>
@@ -138,7 +138,7 @@ eleventyExcludeFromCollections: true
<select
x-model="languageFilter"
@change="resetView()"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-primary-500"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-accent-500"
>
<option value="">All Languages</option>
<template x-for="lang in availableLanguages" :key="lang">
@@ -152,7 +152,7 @@ eleventyExcludeFromCollections: true
<button
@click="starCountMin = opt.value; resetView()"
:class="starCountMin === opt.value
? 'bg-primary-600 text-white'
? 'bg-accent-600 text-white'
: 'bg-white 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"
x-text="opt.label"
@@ -162,7 +162,7 @@ eleventyExcludeFromCollections: true
{# Archived toggle #}
<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-primary-600 focus:ring-primary-500">
<input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-accent-600 focus:ring-accent-500">
Show archived
</label>
@@ -170,7 +170,7 @@ eleventyExcludeFromCollections: true
<template x-if="hasActiveFilters">
<button
@click="clearFilters()"
class="text-xs text-primary-600 dark:text-primary-400 hover:underline"
class="text-xs text-accent-600 dark:text-accent-400 hover:underline"
>Clear filters</button>
</template>
</div>
@@ -184,13 +184,13 @@ eleventyExcludeFromCollections: true
{# ===== REPO 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">
<article class="starred-card p-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
<article class="starred-card p-4 bg-white 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">
<div class="flex items-center gap-2 mb-1">
<template x-if="repo.ownerAvatar">
<img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
</template>
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
<a :href="repo.url" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener" x-text="repo.fullName"></a>
<a :href="repo.url" class="hover:text-surface-600 dark:hover:text-surface-400" target="_blank" rel="noopener" x-text="repo.fullName"></a>
</h3>
<template x-if="repo.archived">
<span class="text-xs px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded">Archived</span>
@@ -204,7 +204,7 @@ eleventyExcludeFromCollections: true
<template x-if="repo.topics && repo.topics.length">
<div class="flex flex-wrap gap-1.5 mb-2">
<template x-for="topic in repo.topics.slice(0, 5)" :key="topic">
<span class="text-xs px-2 py-0.5 bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 rounded" x-text="topic"></span>
<span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded" x-text="topic"></span>
</template>
<template x-if="repo.topics.length > 5">
<span class="text-xs px-2 py-0.5 bg-surface-100 dark:bg-surface-700 text-surface-500 rounded" x-text="'+' + (repo.topics.length - 5)"></span>
@@ -244,7 +244,7 @@ eleventyExcludeFromCollections: true
<template x-if="sortedStars.length === 0">
<div class="text-center py-12">
<p class="text-surface-500">No repos match your current filters.</p>
<button @click="clearFilters()" class="mt-2 text-sm text-primary-600 dark:text-primary-400 hover:underline">Clear all filters</button>
<button @click="clearFilters()" class="mt-2 text-sm text-accent-600 dark:text-accent-400 hover:underline">Clear all filters</button>
</div>
</template>
@@ -253,10 +253,10 @@ eleventyExcludeFromCollections: true
<div class="mt-6 text-center">
<button
@click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
class="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-lg transition-colors"
class="px-6 py-2.5 bg-accent-600 hover:bg-accent-700 text-white rounded-lg transition-colors"
>
Load More
<span class="text-primary-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
<span class="text-accent-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
</button>
</div>
</template>

4
tailwind.config.js
View File

@@ -78,13 +78,13 @@ export default {
typography: (theme) => ({
DEFAULT: {
css: {
"--tw-prose-links": theme("colors.primary.600"),
"--tw-prose-links": theme("colors.accent.600"),
maxWidth: "none",
},
},
invert: {
css: {
"--tw-prose-links": theme("colors.primary.400"),
"--tw-prose-links": theme("colors.accent.400"),
},
},
}),

2
webmention-debug.njk
View File

@@ -48,7 +48,7 @@ pagefindIgnore: true
{% if allMentions.length > 0 or legacyUrls.length > 0 %}
<tr class="hover:bg-surface-50 dark:hover:bg-surface-800/50">
<td class="p-2">
<a href="{{ post.url }}" class="text-primary-600 dark:text-primary-400 hover:underline">
<a href="{{ post.url }}" class="text-accent-600 dark:text-accent-400 hover:underline">
{{ post.url }}
</a>
</td>