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> <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> <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> <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> <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 Go back home
</a> </a>

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

@@ -37,7 +37,7 @@
{{ authorName }} {{ authorName }}
</h1> </h1>
{% if authorTitle %} {% 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 }} {{ authorTitle }}
</p> </p>
{% endif %} {% endif %}
@@ -48,7 +48,7 @@
{% endif %} {% endif %}
{% if authorDescription %} {% if authorDescription %}
<details class="mb-4 sm:mb-6"> <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; More about me &darr;
</summary> </summary>
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mt-3"> <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mt-3">
@@ -82,13 +82,13 @@
<span>{{ cvOrg }}</span> <span>{{ cvOrg }}</span>
{% endif %} {% endif %}
{% if cvUrl %} {% 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 %} {% endif %}
{% if cvEmail %} {% 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 %} {% endif %}
{% if cvKeyUrl %} {% 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 %} {% endif %}
</div> </div>
{% endif %} {% endif %}

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

@@ -17,7 +17,7 @@
</p> </p>
{% if typeInfo %} {% if typeInfo %}
<a href="{{ typeInfo.createUrl }}" <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"> <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"/> <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg> </svg>

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

@@ -2,19 +2,19 @@
{% if summary %} {% if summary %}
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <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> <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
</div> </div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <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> <span class="text-xs text-surface-500 uppercase tracking-wide">Tracks</span>
</div> </div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <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> <span class="text-xs text-surface-500 uppercase tracking-wide">Artists</span>
</div> </div>
<div class="p-4 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center"> <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> <span class="text-xs text-surface-500 uppercase tracking-wide">Listened</span>
</div> </div>
</div> </div>

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

@@ -35,7 +35,7 @@
> >
</a> </a>
<div> <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 }} {{ authorName }}
</a> </a>
{% if authorPronoun %} {% if authorPronoun %}
@@ -72,7 +72,7 @@
<div class="mt-2 flex flex-wrap gap-3 text-sm"> <div class="mt-2 flex flex-wrap gap-3 text-sm">
{% if authorEmail %} {% if authorEmail %}
{# Display text obfuscated to deter spam harvesters; href kept plain for browser compatibility #} {# 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 }} ✉️ {{ authorEmail | obfuscateEmail | safe }}
</a> </a>
{% endif %} {% endif %}
@@ -100,7 +100,7 @@
<a <a
href="{{ link.url }}" href="{{ link.url }}"
rel="{{ link.rel }} noopener" 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 }}" aria-label="{{ link.name }}"
target="_blank"> target="_blank">
{{ socialIcon(link.icon, "w-5 h-5") }} {{ 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 _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %}
{% set _prevOgSlug = _prevPost.url | ogSlug %} {% set _prevOgSlug = _prevPost.url | ogSlug %}
{% set _prevHasOg = _prevOgSlug | hasOgImage %} {% 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 %} {% 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> <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 %} {% 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> <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) }} Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %} {% 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) }} Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %} {% else %}
{{ _prevPost.data.title or _prevPost.data.name or (_prevPost.templateContent | striptags | truncate(50)) or "Note" }} {{ _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 _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %}
{% set _nextOgSlug = _nextPost.url | ogSlug %} {% set _nextOgSlug = _nextPost.url | ogSlug %}
{% set _nextHasOg = _nextOgSlug | hasOgImage %} {% 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 %}"> <span class="line-clamp-2 flex items-center gap-1.5 {% if _prevPost %}justify-end{% endif %}">
{% if _likedUrl %} {% 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> <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> <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) }} Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %} {% 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) }} Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %} {% else %}
{{ _nextPost.data.title or _nextPost.data.name or (_nextPost.templateContent | striptags | truncate(50)) or "Note" }} {{ _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"> <div class="space-y-4">
{% for item in cv.experience | head(maxItems) %} {% for item in cv.experience | head(maxItems) %}
{% if not filterType or item.experienceType == filterType or not item.experienceType %} {% 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="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-primary-500"></div> <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> <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"> <p class="text-sm text-surface-600 dark:text-surface-400">
{{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %} {{ item.company }}{% if item.location %} &middot; {{ item.location }}{% endif %}

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

@@ -18,7 +18,7 @@
</h3> </h3>
<div class="flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5">
{% for interest in items %} {% 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 }} {{ interest }}
</span> </span>
{% endfor %} {% 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in personalProjects | head(maxItems) %} {% 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 #} {# Summary row — always visible, clickable #}
<button <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" 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"> <div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %} {% 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 %} {% else %}
{{ item.name }} {{ item.name }}
{% endif %} {% 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in workProjects | head(maxItems) %} {% 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 #} {# Summary row — always visible, clickable #}
<button <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" 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"> <div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %} {% 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 %} {% else %}
{{ item.name }} {{ item.name }}
{% endif %} {% 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"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for item in cv.projects | head(maxItems) %} {% 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 #} {# Summary row — always visible, clickable #}
<button <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" 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"> <div class="flex items-center gap-2 min-w-0 flex-1">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate"> <h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate">
{% if item.url %} {% 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 %} {% else %}
{{ item.name }} {{ item.name }}
{% endif %} {% endif %}

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

@@ -18,7 +18,7 @@
</h3> </h3>
<div class="flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5">
{% for skill in items %} {% 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 }} {{ skill }}
</span> </span>
{% endfor %} {% endfor %}

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

@@ -40,7 +40,7 @@
{% if siteDescription %} {% if siteDescription %}
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6"> <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
{{ siteDescription }} {{ 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> </p>
{% endif %} {% endif %}

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

@@ -65,7 +65,7 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -86,7 +86,7 @@
</div> </div>
{% if post.data.title %} {% if post.data.title %}
<h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mt-1"> <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> </h3>
{% endif %} {% endif %}
{{ bookmarkedUrl | unfurlCard | safe }} {{ bookmarkedUrl | unfurlCard | safe }}
@@ -98,7 +98,7 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -126,7 +126,7 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -154,7 +154,7 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -190,14 +190,14 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
{% elif post.data.title %} {% elif post.data.title %}
{# ── Article card ── #} {# ── Article card ── #}
<h3 class="p-name font-semibold text-surface-900 dark:text-surface-100 mb-1"> <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 }} {{ post.data.title }}
</a> </a>
</h3> </h3>
@@ -221,7 +221,7 @@
{# ── Note card ── #} {# ── Note card ── #}
<div class="flex items-center gap-3 text-xs text-surface-500 mb-2"> <div class="flex items-center gap-3 text-xs text-surface-500 mb-2">
<a class="u-url" href="{{ post.url }}"> <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 }} {{ post.date | dateDisplay }}
</time> </time>
</a> </a>
@@ -236,7 +236,7 @@
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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 Permalink
</a> </a>
{% endif %} {% endif %}
@@ -246,7 +246,7 @@
</div> </div>
{% if sectionConfig.showViewAll != false %} {% 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" }} {{ sectionConfig.viewAllText or "View all posts" }}
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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"/> <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 %} {% for mention in otherMentions %}
<li> <li>
<a href="{{ mention.url }}" <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" target="_blank"
rel="noopener"> rel="noopener">
{{ mention.author.name }} mentioned this on {{ mention.published | date("MMM d, yyyy") }} {{ mention.author.name }} mentioned this on {{ mention.published | date("MMM d, yyyy") }}
@@ -190,7 +190,7 @@
name="source" name="source"
placeholder="https://your-site.com/response" placeholder="https://your-site.com/response"
required required
class="flex-1 px-3 py-2 text-sm bg-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 <button
type="submit" type="submit"

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

@@ -13,7 +13,7 @@
> >
</a> </a>
<div> <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 }} {{ site.author.name }}
</a> </a>
<p class="p-job-title text-xs text-surface-500">{{ site.author.title }}</p> <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> <is-land on:visible>
<div class="widget" x-data="blogrollWidget()" x-init="init()"> <div class="widget" x-data="blogrollWidget()" x-init="init()">
<h3 class="widget-title flex items-center gap-2"> <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"/> <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> </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> </h3>
{# Source tabs - only shown when multiple sources exist #} {# Source tabs - only shown when multiple sources exist #}
@@ -14,7 +14,7 @@
<button <button
@click="activeTab = tab.key" @click="activeTab = tab.key"
:class="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'" : '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" class="px-2 py-1 text-xs font-medium transition-colors -mb-px"
x-text="tab.label + ' (' + tab.count + ')'" x-text="tab.label + ' (' + tab.count + ')'"
@@ -27,11 +27,11 @@
<li> <li>
<a <a
:href="blog.siteUrl || blog.feedUrl" :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" target="_blank"
rel="noopener" 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 class="text-white text-xs font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
</span> </span>
<span class="truncate" x-text="blog.title"></span> <span class="truncate" x-text="blog.title"></span>
@@ -44,7 +44,7 @@
No blogs loaded yet. No blogs loaded yet.
</div> </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 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> <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> </a>

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

@@ -35,7 +35,7 @@
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate"> <p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
{% if np.trackUrl %} {% 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 %} {% else %}
{{ np.track }} {{ np.track }}
{% endif %} {% endif %}
@@ -106,7 +106,7 @@
{% endif %} {% endif %}
</ul> </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 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> <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> </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"> <div class="flex gap-1 mb-4 border-b border-surface-200 dark:border-surface-700">
<button <button
@click="activeTab = 'commits'" @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" class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
> >
Commits Commits
</button> </button>
<button <button
@click="activeTab = 'repos'" @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" class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
> >
Repos Repos
</button> </button>
<button <button
@click="activeTab = 'featured'" @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" class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
> >
Featured Featured
</button> </button>
<button <button
@click="activeTab = 'prs'" @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" class="flex items-center gap-1.5 px-2 py-2 text-xs font-medium transition-colors -mb-px"
> >
PRs PRs
@@ -54,7 +54,7 @@
<template x-for="commit in commits.slice(0, 5)" :key="commit.sha"> <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"> <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"> <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"> <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500">
<code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code> <code class="text-xs font-mono bg-surface-100 dark:bg-surface-800 px-1 py-0.5 rounded" x-text="commit.sha"></code>
<span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span> <span class="truncate" x-text="commit.repo?.split('/')[1] || commit.repo"></span>
@@ -74,7 +74,7 @@
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0"> <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"> <a :href="repo.html_url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2"> <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> <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> </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> <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"> <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"> <a :href="repo.url" target="_blank" rel="noopener" class="block group">
<div class="flex items-center gap-2"> <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> <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> </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> <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 === '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> <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>
<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>
<div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500 pl-6"> <div class="flex items-center gap-2 mt-1.5 text-xs text-surface-500 pl-6">
<span x-text="item.repo?.split('/')[1] || item.repo"></span> <span x-text="item.repo?.split('/')[1] || item.repo"></span>
@@ -152,7 +152,7 @@
{# Footer link #} {# Footer link #}
{% if site.feeds.github %} {% 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 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> <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> </a>

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

@@ -5,12 +5,12 @@
<h3 class="widget-title">Categories</h3> <h3 class="widget-title">Categories</h3>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
{% if category is string %} {% 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 }} {{ category }}
</a> </a>
{% else %} {% else %}
{% for cat in category %} {% 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 }} {{ cat }}
</a> </a>
{% endfor %} {% 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 _bookmarkedUrl = _prevPost.data.bookmarkOf or _prevPost.data.bookmark_of %}
{% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %} {% set _repostedUrl = _prevPost.data.repostOf or _prevPost.data.repost_of %}
{% set _replyToUrl = _prevPost.data.inReplyTo or _prevPost.data.in_reply_to %} {% 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 %} {% 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> <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) }} 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> <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) }} Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %} {% 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) }} Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %} {% else %}
{{ _prevPost.data.title or _prevPost.data.name or (_prevPost.templateContent | striptags | truncate(50)) or "Note" }} {{ _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 _bookmarkedUrl = _nextPost.data.bookmarkOf or _nextPost.data.bookmark_of %}
{% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %} {% set _repostedUrl = _nextPost.data.repostOf or _nextPost.data.repost_of %}
{% set _replyToUrl = _nextPost.data.inReplyTo or _nextPost.data.in_reply_to %} {% 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 %} {% 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> <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) }} 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> <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) }} Reposted {{ _repostedUrl | replace("https://", "") | truncate(35) }}
{% elif _replyToUrl %} {% 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) }} Reply to {{ _replyToUrl | replace("https://", "") | truncate(35) }}
{% else %} {% else %}
{{ _nextPost.data.title or _nextPost.data.name or (_nextPost.templateContent | striptags | truncate(50)) or "Note" }} {{ _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> <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> <p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
{% if comment["comment-target"] %} {% 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 %} {% endif %}
</div> </div>
</div> </div>

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

@@ -17,7 +17,7 @@
<div class="flex items-start gap-2"> <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> <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"> <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) }} Liked {{ _likedUrl | replace("https://", "") | truncate(40) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}"> <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"> <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> <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"> <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))) }} {{ post.data.title or ("Bookmarked " + (_bookmarkedUrl | replace("https://", "") | truncate(35))) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}"> <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"> <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> <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"> <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) }} Reposted {{ _repostedUrl | replace("https://", "") | truncate(40) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}"> <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -54,9 +54,9 @@
{% elif _replyToUrl %} {% elif _replyToUrl %}
<div class="flex items-start gap-2"> <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"> <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) }} Reply to {{ _replyToUrl | replace("https://", "") | truncate(40) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}"> <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -66,7 +66,7 @@
</div> </div>
{% else %} {% 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" }} {{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}"> <time class="text-xs text-surface-500 block" datetime="{{ post.data.published or post.date }}">
@@ -77,7 +77,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</ul> </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 View all posts
</a> </a>
</div> </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"/> <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> </svg>
<div class="min-w-0"> <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) }} Liked {{ likedUrl | replace("https://", "") | truncate(40) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}"> <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"/> <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> </svg>
<div class="min-w-0"> <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))) }} {{ post.data.title or ("Bookmarked " + (bookmarkedUrl | replace("https://", "") | truncate(35))) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}"> <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"/> <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>
<div class="min-w-0"> <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) }} Reposted {{ repostedUrl | replace("https://", "") | truncate(40) }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}"> <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -75,7 +75,7 @@
{% else %} {% else %}
{# Article / Note / other #} {# 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" }} {{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
</a> </a>
<time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}"> <time class="text-xs text-surface-500 block" datetime="{{ post.data.published }}">
@@ -85,7 +85,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </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 View all posts
</a> </a>
</div> </div>

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

@@ -9,7 +9,7 @@
{% if blueskyFeed and blueskyFeed.length %} {% if blueskyFeed and blueskyFeed.length %}
<button <button
@click="activeTab = 'bluesky'" @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" 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"> <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 %} {% if mastodonFeed and mastodonFeed.length %}
<button <button
@click="activeTab = 'mastodon'" @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" 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"> <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) %} {% for post in blueskyFeed | head(5) %}
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0"> <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"> <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) }} {{ post.text | truncate(140) }}
</p> </p>
<div class="flex items-center gap-3 mt-2 text-xs text-surface-500"> <div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
@@ -55,7 +55,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </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 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> <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> </a>
@@ -69,7 +69,7 @@
{% for post in mastodonFeed | head(5) %} {% for post in mastodonFeed | head(5) %}
<li class="border-b border-surface-200 dark:border-surface-700 pb-3 last:border-0"> <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"> <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) }} {{ post.text | truncate(140) }}
</p> </p>
<div class="flex items-center gap-3 mt-2 text-xs text-surface-500"> <div class="flex items-center gap-3 mt-2 text-xs text-surface-500">
@@ -85,7 +85,7 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </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 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> <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> </a>

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

@@ -3,13 +3,13 @@
<div class="widget"> <div class="widget">
<h3 class="widget-title">Subscribe</h3> <h3 class="widget-title">Subscribe</h3>
<div class="space-y-2"> <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"> <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"/> <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> </svg>
RSS Feed RSS Feed
</a> </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"> <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"/> <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> </svg>

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

@@ -7,7 +7,7 @@
<ul class="space-y-1 text-sm"> <ul class="space-y-1 text-sm">
{% for item in toc %} {% for item in toc %}
<li class="{% if item.level > 2 %}ml-{{ (item.level - 2) * 3 }}{% endif %}"> <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 }} {{ item.text }}
</a> </a>
</li> </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"> <div class="flex border-b border-surface-200 dark:border-surface-700 mb-3">
<button <button
@click="tab = 'inbound'" @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"> class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
Received Received
<span x-show="mentions.length" x-text="mentions.length" class="ml-0.5 text-xs opacity-75"></span> <span x-show="mentions.length" x-text="mentions.length" class="ml-0.5 text-xs opacity-75"></span>
</button> </button>
<button <button
@click="tab = 'outbound'" @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"> class="px-2 py-1.5 text-xs font-medium border-b-2 -mb-px transition-colors">
Sent Sent
</button> </button>
@@ -31,7 +31,7 @@
<div x-show="tab === 'inbound'" x-transition> <div x-show="tab === 'inbound'" x-transition>
{# Loading #} {# Loading #}
<div x-show="loading" class="text-center py-3"> <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> </div>
{# Mentions list #} {# 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 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'] === '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'] === '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'] === 'mention-of'" class="text-amber-500"> mentioned</span>
<span x-show="wm['wm-property'] === 'bookmark-of'" class="text-purple-500"> bookmarked</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> <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 #} {# 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"> <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; View all &rarr;
</a> </a>
</div> </div>
@@ -89,7 +89,7 @@
{% endfor %} {% endfor %}
{% for item in collections.replies | head(2) %} {% for item in collections.replies | head(2) %}
<div class="flex items-start gap-2 text-xs"> <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"> <div class="min-w-0">
<a href="{{ item.url }}" class="text-surface-900 dark:text-surface-100 hover:underline block truncate"> <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 %} {% set _replyToUrl = item.data.inReplyTo or item.data.in_reply_to %}
@@ -111,7 +111,7 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="mt-2 pt-2 border-t border-surface-200 dark:border-surface-700"> <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; View all &rarr;
</a> </a>
</div> </div>

6
_includes/layouts/home.njk
View File

@@ -35,7 +35,7 @@ withSidebar: true
{% if site.description %} {% if site.description %}
<p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6"> <p class="text-base sm:text-lg text-surface-700 dark:text-surface-300 mb-4 sm:mb-6">
{{ site.description }} {{ 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> </p>
{% endif %} {% endif %}
@@ -81,7 +81,7 @@ withSidebar: true
{% for post in collections.posts | head(10) %} {% 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"> <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"> <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" }} {{ post.data.title or post.data.name or "Untitled" }}
</a> </a>
</h3> </h3>
@@ -99,7 +99,7 @@ withSidebar: true
</article> </article>
{% endfor %} {% endfor %}
</div> </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 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> <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> </a>

2
about.njk
View File

@@ -17,7 +17,7 @@ eleventyExcludeFromCollections: true
{{ site.author.name }} {{ site.author.name }}
</h1> </h1>
{% if site.author.title %} {% 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 }} {{ site.author.title }}
</p> </p>
{% endif %} {% 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"> <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
<div class="post-header"> <div class="post-header">
<h2 class="text-xl font-semibold mb-1 flex-1"> <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" }} {{ post.data.title or "Untitled" }}
</a> </a>
</h2> </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"> <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }} {{ post.templateContent | striptags | truncate(250) }}
</p> </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; Read more &rarr;
</a> </a>
</li> </li>

26
blog.njk
View File

@@ -96,7 +96,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -128,7 +128,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
</div> </div>
{% if post.data.title %} {% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mt-2"> <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> </h2>
{% endif %} {% endif %}
{% unfurl bookmarkedUrl %} {% unfurl bookmarkedUrl %}
@@ -140,7 +140,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -179,7 +179,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</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"> <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </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>
</div> </div>
@@ -263,7 +263,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
@@ -271,7 +271,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{# ── Article card (unchanged) ── #} {# ── Article card (unchanged) ── #}
<div class="post-header"> <div class="post-header">
<h2 class="text-xl font-semibold mb-1"> <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 }} {{ post.data.title }}
</a> </a>
</h2> </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"> <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
{{ post.templateContent | striptags | truncate(250) }} {{ post.templateContent | striptags | truncate(250) }}
</p> </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; Read more &rarr;
</a> </a>
@@ -303,7 +303,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{# ── Note card (unchanged) ── #} {# ── Note card (unchanged) ── #}
<div class="post-header"> <div class="post-header">
<a class="u-url" href="{{ post.url }}"> <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 }} {{ post.date | dateDisplay }}
</time></time-difference> </time></time-difference>
</a> </a>
@@ -323,7 +323,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
<div class="post-footer mt-3"> <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 Permalink
</a> </a>
</div> </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="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> <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"> <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://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-primary-600 dark:text-primary-400 hover:underline">IndiePass</a> - Mobile app</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-primary-600 dark:text-primary-400 hover:underline">Micropublish</a> - Web-based</li> <li><a href="https://micropublish.net" class="text-accent-600 dark:text-accent-400 hover:underline">Micropublish</a> - Web-based</li>
</ul> </ul>
{% endif %} {% endif %}
</div> </div>

32
blogroll.njk
View File

@@ -6,7 +6,7 @@ permalink: /blogroll/
<div class="blogroll-page" x-data="blogrollApp()" x-init="init()"> <div class="blogroll-page" x-data="blogrollApp()" x-init="init()">
<header class="mb-6 sm:mb-8"> <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"> <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"/> <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> </svg>
Blogroll Blogroll
@@ -24,7 +24,7 @@ permalink: /blogroll/
<nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs"> <nav class="flex gap-1 overflow-x-auto -mb-px" aria-label="Tabs">
<button <button
@click="switchTab('blogs')" @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" class="pb-3 px-3 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex-shrink-0"
> >
All Blogs All Blogs
@@ -32,7 +32,7 @@ permalink: /blogroll/
<template x-for="cat in categories" :key="cat.name"> <template x-for="cat in categories" :key="cat.name">
<button <button
@click="switchTab('category:' + cat.name)" @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" 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> <span x-text="cat.name"></span>
@@ -47,7 +47,7 @@ permalink: /blogroll/
<div class="main-content"> <div class="main-content">
{# Loading State #} {# Loading State #}
<div x-show="loading" class="text-center py-12"> <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> <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> <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> </svg>
@@ -65,17 +65,17 @@ permalink: /blogroll/
<template x-for="blog in blogs" :key="blog.id"> <template x-for="blog in blogs" :key="blog.id">
<a <a
:href="blog.siteUrl || blog.feedUrl" :href="blog.siteUrl || blog.feedUrl"
class="block bg-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" target="_blank"
rel="noopener" rel="noopener"
> >
<div class="flex items-center gap-3 mb-2"> <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" /> <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> <span x-show="!blog.photo" class="text-white text-sm font-bold" x-text="blog.title?.charAt(0)?.toUpperCase()"></span>
</div> </div>
<div class="flex-1 min-w-0"> <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> <p x-show="blog.category" class="text-xs text-surface-500 truncate" x-text="blog.category"></p>
</div> </div>
</div> </div>
@@ -109,12 +109,12 @@ permalink: /blogroll/
{# Category Items Tab (one for each category) #} {# Category Items Tab (one for each category) #}
<div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4"> <div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
<template x-for="item in categoryItems" :key="item.id"> <template x-for="item in categoryItems" :key="item.id">
<article class="bg-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 items-start gap-4">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100"> <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> </h2>
<span <span
x-show="item.isFuture" 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"> <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500 mb-3">
<a <a
:href="item.blog?.siteUrl || '#'" :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" target="_blank"
rel="noopener" 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"> <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a <a
:href="item.url" :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" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -206,7 +206,7 @@ permalink: /blogroll/
<button <button
@click="loadMoreCategory()" @click="loadMoreCategory()"
:disabled="loadingMore" :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">Load More</span>
<span x-show="loadingMore" class="flex items-center gap-2"> <span x-show="loadingMore" class="flex items-center gap-2">
@@ -255,11 +255,11 @@ permalink: /blogroll/
<h3 class="widget-title">Stats</h3> <h3 class="widget-title">Stats</h3>
<div class="grid grid-cols-2 gap-3 text-center"> <div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg"> <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> <span class="text-xs text-surface-500 uppercase">Blogs</span>
</div> </div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg"> <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> <span class="text-xs text-surface-500 uppercase">Posts</span>
</div> </div>
</div> </div>
@@ -268,7 +268,7 @@ permalink: /blogroll/
{# Category Quick Links (for when on blogs tab) #} {# Category Quick Links (for when on blogs tab) #}
<div class="widget" x-show="categories.length > 0"> <div class="widget" x-show="categories.length > 0">
<h3 class="widget-title flex items-center gap-2"> <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"/> <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"/> <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> </svg>
@@ -279,7 +279,7 @@ permalink: /blogroll/
<li> <li>
<button <button
@click="switchTab('category:' + cat.name)" @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" class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
> >
<span x-text="cat.name"></span> <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"> <div class="post-header">
{% if post.data.title %} {% if post.data.title %}
<h2 class="text-xl font-semibold mb-1 flex-1"> <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 }} {{ post.data.title }}
</a> </a>
</h2> </h2>

2
categories-index.njk
View File

@@ -18,7 +18,7 @@ eleventyImport:
<ul class="flex flex-wrap gap-3"> <ul class="flex flex-wrap gap-3">
{% for cat in collections.categories %} {% for cat in collections.categories %}
<li> <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 }} {{ cat }}
</a> </a>
</li> </li>

8
categories.njk
View File

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

8
changelog.njk
View File

@@ -18,7 +18,7 @@ withSidebar: false
<template x-for="tab in tabs" :key="tab.key"> <template x-for="tab in tabs" :key="tab.key">
<button <button
@click="activeTab = tab.key" @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" 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> <span x-text="tab.label"></span>
@@ -33,7 +33,7 @@ withSidebar: false
{# Loading state #} {# Loading state #}
<div x-show="loading" class="flex items-center justify-center py-12"> <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> <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> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
</svg> </svg>
@@ -51,7 +51,7 @@ withSidebar: false
<li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4"> <li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<a :href="commit.url" target="_blank" rel="noopener" <a :href="commit.url" target="_blank" rel="noopener"
class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-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> x-text="commit.sha"></a>
<div class="min-w-0 flex-1"> <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> <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" x-text="categoryLabels[commit.category] || commit.category"
></span> ></span>
<a :href="commit.repoUrl" target="_blank" rel="noopener" <a :href="commit.repoUrl" target="_blank" rel="noopener"
class="text-xs px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:text-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> x-text="commit.repoName"></a>
<span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span> <span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span>
<span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span> <span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span>

10
css/tailwind.css
View File

@@ -83,7 +83,7 @@
} }
.skip-link { .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 { .skip-link:focus {
@@ -260,7 +260,7 @@
} }
.site-footer a { .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 */ /* Layout with sidebar - mobile-first with responsive grid */
@@ -462,7 +462,7 @@
input:focus-visible, input:focus-visible,
textarea:focus-visible, textarea:focus-visible,
select: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 */ /* Pagefind UI theme overrides — outside @layer for higher specificity over Pagefind's :root defaults */
#search .pagefind-ui { #search .pagefind-ui {
--pagefind-ui-scale: 1; --pagefind-ui-scale: 1;
--pagefind-ui-primary: #2563eb; --pagefind-ui-primary: #0d9488;
--pagefind-ui-text: #18181b; --pagefind-ui-text: #18181b;
--pagefind-ui-background: #ffffff; --pagefind-ui-background: #ffffff;
--pagefind-ui-border: #e4e4e7; --pagefind-ui-border: #e4e4e7;
@@ -637,7 +637,7 @@
} }
.dark #search .pagefind-ui { .dark #search .pagefind-ui {
--pagefind-ui-primary: #60a5fa; --pagefind-ui-primary: #2dd4bf;
--pagefind-ui-text: #f4f4f5; --pagefind-ui-text: #f4f4f5;
--pagefind-ui-background: #09090b; --pagefind-ui-background: #09090b;
--pagefind-ui-border: #3f3f46; --pagefind-ui-border: #3f3f46;

10
cv.njk
View File

@@ -51,7 +51,7 @@ pagefindIgnore: true
{{ authorName }} {{ authorName }}
</h1> </h1>
{% if authorTitle %} {% 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 }} {{ authorTitle }}
</p> </p>
{% endif %} {% endif %}
@@ -86,13 +86,13 @@ pagefindIgnore: true
<span>{{ cvOrg }}</span> <span>{{ cvOrg }}</span>
{% endif %} {% endif %}
{% if cvUrl %} {% 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 %} {% endif %}
{% if cvEmail %} {% 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 %} {% endif %}
{% if cvKeyUrl %} {% 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 %} {% endif %}
</div> </div>
{% endif %} {% endif %}
@@ -139,7 +139,7 @@ pagefindIgnore: true
<h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">CV</h1> <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"> <p class="text-surface-600 dark:text-surface-400">
No CV data available yet. Add your experience, projects, and skills via the 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> </p>
</div> </div>

6
digest-index.njk
View File

@@ -15,15 +15,15 @@ permalink: "digest/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
<div> <div>
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1> <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1>
<p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8"> <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-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> </p>
{% if paginatedDigests.length > 0 %} {% if paginatedDigests.length > 0 %}
<ul class="space-y-4"> <ul class="space-y-4">
{% for d in paginatedDigests %} {% for d in paginatedDigests %}
<li class="p-4 bg-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"> <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 }} {{ d.label }}
</h2> </h2>
<p class="text-sm text-surface-500 dark:text-surface-400 mt-1"> <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">

16
digest.njk
View File

@@ -48,7 +48,7 @@ permalink: "digest/{{ digest.slug }}/"
<div class="flex items-start gap-2"> <div class="flex items-start gap-2">
<span class="text-red-500 flex-shrink-0">&#x2764;</span> <span class="text-red-500 flex-shrink-0">&#x2764;</span>
<div> <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"> <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> <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
&middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a> &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> <span class="text-amber-500 flex-shrink-0">&#x1F516;</span>
<div> <div>
{% if post.data.title %} {% 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 %} {% 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 %} {% endif %}
<div class="text-sm text-surface-500 dark:text-surface-400 mt-1"> <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> <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"> <div class="flex items-start gap-2">
<span class="text-green-500 flex-shrink-0">&#x1F501;</span> <span class="text-green-500 flex-shrink-0">&#x1F501;</span>
<div> <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"> <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> <time class="dt-published" datetime="{{ post.date | isoDate }}">{{ post.date | dateDisplay }}</time>
&middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a> &middot; <a href="{{ post.url }}" class="hover:underline">Permalink</a>
@@ -98,7 +98,7 @@ permalink: "digest/{{ digest.slug }}/"
</a> </a>
{% endif %} {% endif %}
{% if post.data.title %} {% 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 %} {% elif post.templateContent %}
<p class="text-surface-700 dark:text-surface-300 text-sm">{{ post.templateContent | striptags | truncate(120) }}</p> <p class="text-surface-700 dark:text-surface-300 text-sm">{{ post.templateContent | striptags | truncate(120) }}</p>
{% endif %} {% endif %}
@@ -110,7 +110,7 @@ permalink: "digest/{{ digest.slug }}/"
{% elif typeInfo.key == "articles" %} {% elif typeInfo.key == "articles" %}
<div> <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") }} {{ post.data.title | default("Untitled") }}
</a> </a>
{% if post.templateContent %} {% 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"> <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 %} {% if currentIndex > 0 %}
{% set newer = allDigests[currentIndex - 1] %} {% 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 }} &larr; {{ newer.label }}
</a> </a>
{% else %} {% else %}
@@ -158,7 +158,7 @@ permalink: "digest/{{ digest.slug }}/"
{% endif %} {% endif %}
{% if currentIndex < allDigests.length - 1 %} {% if currentIndex < allDigests.length - 1 %}
{% set older = allDigests[currentIndex + 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; {{ older.label }} &rarr;
</a> </a>
{% else %} {% 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> <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"> <p class="text-surface-600 dark:text-surface-400">
What I've been listening to on 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 Funkwhale
</a> </a>
</p> </p>
@@ -18,7 +18,7 @@ withSidebar: true
{# Now Playing / Recently Played Hero #} {# Now Playing / Recently Played Hero #}
{% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %} {% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status %}
<section class="mb-12"> <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"> <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
{% if funkwhaleActivity.nowPlaying.coverUrl %} {% if funkwhaleActivity.nowPlaying.coverUrl %}
<img <img
@@ -48,7 +48,7 @@ withSidebar: true
Now Playing Now Playing
</span> </span>
{% else %} {% 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> <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 Recently Played
</span> </span>
@@ -57,7 +57,7 @@ withSidebar: true
<h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate"> <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
{% if funkwhaleActivity.nowPlaying.trackUrl %} {% 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 }} {{ funkwhaleActivity.nowPlaying.track }}
</a> </a>
{% else %} {% else %}
@@ -79,7 +79,7 @@ withSidebar: true
{% if funkwhaleActivity.stats %} {% if funkwhaleActivity.stats %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
Listening Statistics 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"> <div class="flex gap-1 mb-6 border-b border-surface-200 dark:border-surface-700 overflow-x-auto">
<button <button
@click="activeTab = 'all'" @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" class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
> >
All Time All Time
</button> </button>
<button <button
@click="activeTab = 'month'" @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" class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
> >
This Month This Month
</button> </button>
<button <button
@click="activeTab = 'week'" @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" class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
> >
This Week This Week
</button> </button>
<button <button
@click="activeTab = 'trends'" @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" class="px-4 py-2 text-sm font-medium transition-colors -mb-px whitespace-nowrap"
> >
Trends Trends
@@ -155,7 +155,7 @@ withSidebar: true
{% endfor %} {% endfor %}
{% for day in funkwhaleActivity.stats.trends %} {% for day in funkwhaleActivity.stats.trends %}
<div <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;" style="height: {{ (day.count / maxCount * 100) if maxCount > 0 else 0 }}%; min-height: 2px;"
title="{{ day.date }}: {{ day.count }} plays" title="{{ day.date }}: {{ day.count }} plays"
></div> ></div>
@@ -185,7 +185,7 @@ withSidebar: true
{% if funkwhaleActivity.listenings.length %} {% if funkwhaleActivity.listenings.length %}
<div class="space-y-3"> <div class="space-y-3">
{% for listening in funkwhaleActivity.listenings | head(15) %} {% for listening in funkwhaleActivity.listenings | head(15) %}
<div class="flex items-center gap-4 p-3 bg-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 %} {% if listening.coverUrl %}
<img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore> <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
{% else %} {% else %}
@@ -199,7 +199,7 @@ withSidebar: true
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate"> <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
{% if listening.trackUrl %} {% 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 }} {{ listening.track }}
</a> </a>
{% else %} {% else %}
@@ -249,7 +249,7 @@ withSidebar: true
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h3 class="font-medium text-surface-900 dark:text-surface-100 truncate"> <h3 class="font-medium text-surface-900 dark:text-surface-100 truncate">
{% if favorite.trackUrl %} {% 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 }} {{ favorite.track }}
</a> </a>
{% else %} {% 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> <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"> <p class="text-surface-600 dark:text-surface-400">
My open source contributions and starred repositories. 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 Follow me on GitHub
</a> </a>
</p> </p>
@@ -27,10 +27,10 @@ withSidebar: true
<div class="grid gap-4 sm:gap-6 md:grid-cols-2"> <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
{% for repo in githubActivity.featured %} {% 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"> <div class="flex items-start justify-between mb-3">
<h3 class="font-bold text-lg text-surface-900 dark:text-surface-100"> <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 }} {{ repo.fullName }}
</a> </a>
</h3> </h3>
@@ -46,7 +46,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500 mb-4"> <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500 mb-4">
{% if repo.language %} {% if repo.language %}
<span class="flex items-center gap-1"> <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 }} {{ repo.language }}
</span> </span>
{% endif %} {% endif %}
@@ -67,15 +67,15 @@ withSidebar: true
</div> </div>
{% if repo.commits and repo.commits.length %} {% if repo.commits and repo.commits.length %}
<details class="border-t border-primary-200 dark:border-surface-700 pt-3 mt-3 overflow-hidden"> <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-primary-600 dark:text-primary-400 hover:underline"> <summary class="cursor-pointer text-sm font-medium text-surface-600 dark:text-surface-400 hover:underline">
Recent commits ({{ repo.commits.length }}) Recent commits ({{ repo.commits.length }})
</summary> </summary>
<ul class="mt-3 space-y-2 overflow-hidden"> <ul class="mt-3 space-y-2 overflow-hidden">
{% for commit in repo.commits %} {% for commit in repo.commits %}
<li class="flex items-start gap-2 text-sm min-w-0"> <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"> <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> </code>
<span class="text-surface-700 dark:text-surface-300 truncate min-w-0 flex-1">{{ commit.message }}</span> <span class="text-surface-700 dark:text-surface-300 truncate min-w-0 flex-1">{{ commit.message }}</span>
</li> </li>
@@ -106,7 +106,7 @@ withSidebar: true
{{ commit.sha }} {{ commit.sha }}
</code> </code>
<div class="flex-1 min-w-0"> <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 }} {{ commit.message }}
</a> </a>
<p class="text-xs text-surface-500 mt-1"> <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> <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 %} {% endif %}
<div class="flex-1 min-w-0"> <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 }} {{ item.title }}
</a> </a>
<p class="text-xs text-surface-500 mt-1"> <p class="text-xs text-surface-500 mt-1">
@@ -170,7 +170,7 @@ withSidebar: true
{% for repo in githubRepos | head(6) %} {% 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"> <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"> <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 }} {{ repo.name }}
</a> </a>
</h3> </h3>
@@ -182,7 +182,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500"> <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
{% if repo.language %} {% if repo.language %}
<span class="flex items-center gap-1"> <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 }} {{ repo.language }}
</span> </span>
{% endif %} {% endif %}
@@ -203,7 +203,7 @@ withSidebar: true
{% endfor %} {% endfor %}
</div> </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; View all repositories &rarr;
</a> </a>
{% else %} {% else %}
@@ -223,9 +223,9 @@ withSidebar: true
{% if githubActivity.stars.length %} {% if githubActivity.stars.length %}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
{% for repo in githubActivity.stars | head(10) %} {% for repo in githubActivity.stars | head(10) %}
<article class="p-4 bg-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"> <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 }} {{ repo.name }}
</a> </a>
</h3> </h3>
@@ -236,7 +236,7 @@ withSidebar: true
<div class="flex flex-wrap gap-2 mb-3"> <div class="flex flex-wrap gap-2 mb-3">
{% for topic in repo.topics %} {% 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 }} {{ topic }}
</span> </span>
{% endfor %} {% endfor %}
@@ -245,7 +245,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3 text-sm text-surface-500"> <div class="flex flex-wrap items-center gap-3 text-sm text-surface-500">
{% if repo.language %} {% if repo.language %}
<span class="flex items-center gap-1"> <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 }} {{ repo.language }}
</span> </span>
{% endif %} {% endif %}
@@ -260,7 +260,7 @@ withSidebar: true
{% endfor %} {% endfor %}
</div> </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; View all {{ githubStarred.totalCount | default(githubActivity.stars | length) }} starred repos &rarr;
</a> </a>
{% else %} {% 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"> <div class="flex border-b border-surface-200 dark:border-surface-700 mb-6">
<button <button
@click="activeTab = 'outbound'" @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"> class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
My Activity My Activity
<span class="ml-1 text-xs text-surface-400">(outbound)</span> <span class="ml-1 text-xs text-surface-400">(outbound)</span>
</button> </button>
<button <button
@click="activeTab = 'inbound'" @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"> class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
Received Received
<span class="ml-1 text-xs text-surface-400">(inbound)</span> <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> </button>
</div> </div>
@@ -49,7 +49,7 @@ permalink: /interactions/
</svg> </svg>
</div> </div>
<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> <p class="text-sm text-surface-500">{{ collections.likes.length }} item{% if collections.likes.length != 1 %}s{% endif %}</p>
</div> </div>
</div> </div>
@@ -59,13 +59,13 @@ permalink: /interactions/
{# Replies #} {# Replies #}
<a href="/replies/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group"> <a href="/replies/" class="block p-6 bg-surface-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="flex items-center gap-4 mb-4">
<div class="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-full"> <div class="p-3 bg-sky-100 dark:bg-sky-900/30 rounded-full">
<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-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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg> </svg>
</div> </div>
<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> <p class="text-sm text-surface-500">{{ collections.replies.length }} item{% if collections.replies.length != 1 %}s{% endif %}</p>
</div> </div>
</div> </div>
@@ -81,7 +81,7 @@ permalink: /interactions/
</svg> </svg>
</div> </div>
<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> <p class="text-sm text-surface-500">{{ collections.bookmarks.length }} item{% if collections.bookmarks.length != 1 %}s{% endif %}</p>
</div> </div>
</div> </div>
@@ -97,7 +97,7 @@ permalink: /interactions/
</svg> </svg>
</div> </div>
<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> <p class="text-sm text-surface-500">{{ collections.reposts.length }} item{% if collections.reposts.length != 1 %}s{% endif %}</p>
</div> </div>
</div> </div>
@@ -113,7 +113,7 @@ permalink: /interactions/
</svg> </svg>
</div> </div>
<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> <p class="text-sm text-surface-500">{{ collections.photos.length }} item{% if collections.photos.length != 1 %}s{% endif %}</p>
</div> </div>
</div> </div>
@@ -121,7 +121,7 @@ permalink: /interactions/
</a> </a>
</div> </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> <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2>
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4"> <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
@@ -153,7 +153,7 @@ permalink: /interactions/
{# Loading state #} {# Loading state #}
<div x-show="loading && !webmentions.length" class="text-center py-12"> <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> <p class="mt-4 text-surface-500">Loading webmentions...</p>
</div> </div>
@@ -181,7 +181,7 @@ permalink: /interactions/
<div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6"> <div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6">
<button <button
@click="filterType = 'all'" @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"> class="px-3 py-1.5 text-sm rounded-full transition-colors">
All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span> All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span>
</button> </button>
@@ -199,7 +199,7 @@ permalink: /interactions/
</button> </button>
<button <button
@click="filterType = 'in-reply-to'" @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"> class="px-3 py-1.5 text-sm rounded-full transition-colors">
💬 Replies <span x-text="'(' + replies.length + ')'" class="text-xs opacity-75"></span> 💬 Replies <span x-text="'(' + replies.length + ')'" class="text-xs opacity-75"></span>
</button> </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"> <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 🔄 reposted
</span> </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 💬 replied
</span> </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"> <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 #} {# Target URL - which of my posts this is about #}
<div class="mt-2 text-xs text-surface-500"> <div class="mt-2 text-xs text-surface-500">
<span>on </span> <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> </div>
</div> </div>
@@ -295,7 +295,7 @@ permalink: /interactions/
</div> </div>
{# Info box #} {# 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> <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2>
<p class="text-surface-600 dark:text-surface-400 text-sm mb-4"> <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content

8
js/webmentions.js
View File

@@ -241,7 +241,7 @@
const published = item.published || item['wm-received']; const published = item.published || item['wm-received'];
const li = document.createElement('li'); 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'; li.dataset.new = 'true';
// Build reply card using DOM methods // Build reply card using DOM methods
@@ -288,7 +288,7 @@
dateLink.appendChild(timeEl); dateLink.appendChild(timeEl);
const newBadge = document.createElement('span'); 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'; newBadge.textContent = 'NEW';
headerDiv.appendChild(authorLink); headerDiv.appendChild(authorLink);
@@ -339,13 +339,13 @@
const link = document.createElement('a'); const link = document.createElement('a');
link.href = item.url || '#'; 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.target = '_blank';
link.rel = 'noopener'; link.rel = 'noopener';
link.textContent = `${author.name || 'Someone'} mentioned this on ${formatDate(published)}`; link.textContent = `${author.name || 'Someone'} mentioned this on ${formatDate(published)}`;
const badge = document.createElement('span'); 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'; badge.textContent = 'NEW';
li.appendChild(link); 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" />` ? `<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"> <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"> <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> <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 }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
</li> </li>

12
listening.njk
View File

@@ -10,7 +10,7 @@ withSidebar: true
<p class="text-surface-600 dark:text-surface-400"> <p class="text-surface-600 dark:text-surface-400">
What I've been listening to on What I've been listening to on
{% if funkwhaleActivity.instanceUrl %} {% 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 %} {% endif %}
{% if funkwhaleActivity.instanceUrl and lastfmActivity.profileUrl %} and {% endif %} {% if funkwhaleActivity.instanceUrl and lastfmActivity.profileUrl %} and {% endif %}
{% if lastfmActivity.profileUrl %} {% if lastfmActivity.profileUrl %}
@@ -23,7 +23,7 @@ withSidebar: true
<div class="flex gap-2 mb-8 flex-wrap"> <div class="flex gap-2 mb-8 flex-wrap">
<button <button
@click="activeSource = 'all'" @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" class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
> >
All Sources All Sources
@@ -84,7 +84,7 @@ withSidebar: true
Now Playing Now Playing
</span> </span>
{% else %} {% 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 Recently Played
</span> </span>
{% endif %} {% endif %}
@@ -92,7 +92,7 @@ withSidebar: true
<h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate"> <h2 class="text-lg sm:text-xl font-bold text-surface-900 dark:text-surface-100 truncate">
{% if fwNowPlaying.trackUrl %} {% 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 %} {% else %}
{{ fwNowPlaying.track }} {{ fwNowPlaying.track }}
{% endif %} {% endif %}
@@ -136,7 +136,7 @@ withSidebar: true
Now Playing Now Playing
</span> </span>
{% else %} {% 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 Recently Played
</span> </span>
{% endif %} {% endif %}
@@ -169,7 +169,7 @@ withSidebar: true
{% if funkwhaleActivity.stats or lastfmActivity.stats %} {% if funkwhaleActivity.stats or lastfmActivity.stats %}
<section class="mb-12"> <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"> <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"/> <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> </svg>
Listening Statistics Listening Statistics

28
news.njk
View File

@@ -12,7 +12,7 @@ withSidebar: true
</p> </p>
<p class="text-xs text-surface-500 mt-2" x-show="lastUpdated"> <p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span> 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"> <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"/> <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>
@@ -22,7 +22,7 @@ withSidebar: true
{# Loading State #} {# Loading State #}
<div x-show="loading && items.length === 0" class="text-center py-12"> <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> <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> <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> </svg>
@@ -44,7 +44,7 @@ withSidebar: true
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
@click="viewMode = 'list'" @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" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="List view" title="List view"
> >
@@ -55,7 +55,7 @@ withSidebar: true
</button> </button>
<button <button
@click="viewMode = 'card'" @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" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Card view" title="Card view"
> >
@@ -66,7 +66,7 @@ withSidebar: true
</button> </button>
<button <button
@click="viewMode = 'full'" @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" class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
title="Expanded view" title="Expanded view"
> >
@@ -81,7 +81,7 @@ withSidebar: true
<div class="relative" x-show="feeds.length > 1"> <div class="relative" x-show="feeds.length > 1">
<select <select
x-model="filterFeed" 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> <option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
<template x-for="feed in feeds" :key="feed.id"> <template x-for="feed in feeds" :key="feed.id">
@@ -111,7 +111,7 @@ withSidebar: true
</svg> </svg>
Syncing... Syncing...
</div> </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"> <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> <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> <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 #} {# List View #}
<div x-show="viewMode === 'list'" class="space-y-3"> <div x-show="viewMode === 'list'" class="space-y-3">
<template x-for="item in filteredItems" :key="item.id"> <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 <img
x-show="item.imageUrl" x-show="item.imageUrl"
:src="item.imageUrl" :src="item.imageUrl"
@@ -137,7 +137,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a <a
:href="item.link" :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" target="_blank"
rel="noopener" rel="noopener"
x-text="item.title" x-text="item.title"
@@ -157,7 +157,7 @@ withSidebar: true
<time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time> <time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
<span class="hidden sm:inline" x-show="item.categories?.length"> <span class="hidden sm:inline" x-show="item.categories?.length">
<template x-for="cat in item.categories.slice(0, 3)" :key="cat"> <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> </template>
</span> </span>
<button <button
@@ -203,7 +203,7 @@ withSidebar: true
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-2 line-clamp-2"> <h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-2 line-clamp-2">
<a <a
:href="item.link" :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" target="_blank"
rel="noopener" rel="noopener"
x-text="item.title" 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"> <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
<a <a
:href="item.link" :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" target="_blank"
rel="noopener" rel="noopener"
x-text="item.title" x-text="item.title"
@@ -282,7 +282,7 @@ withSidebar: true
<div class="flex flex-wrap items-center gap-3"> <div class="flex flex-wrap items-center gap-3">
<a <a
:href="item.link" :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" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -314,7 +314,7 @@ withSidebar: true
</button> </button>
<div x-show="item.categories?.length" class="flex flex-wrap gap-2"> <div x-show="item.categories?.length" class="flex flex-wrap gap-2">
<template x-for="cat in item.categories" :key="cat"> <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> </template>
</div> </div>
</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"> <li class="h-entry post-card border-l-[3px] border-l-surface-300 dark:border-l-surface-600">
<div class="post-header"> <div class="post-header">
<a class="u-url" href="{{ post.url }}"> <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 }} {{ post.date | dateDisplay }}
</time> </time>
</a> </a>
@@ -48,7 +48,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
<div class="post-footer mt-3"> <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 Permalink
</a> </a>
</div> </div>

2
photos.njk
View File

@@ -59,7 +59,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
{% if post.templateContent %} {% if post.templateContent %}
<div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div> <div class="e-content photo-caption prose dark:prose-invert prose-sm mt-3 max-w-none">{{ post.templateContent | safe }}</div>
{% endif %} {% 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> </li>
{% endfor %} {% endfor %}
</ul> </ul>

24
podroll.njk
View File

@@ -6,7 +6,7 @@ permalink: /podroll/
<div class="podroll-page" x-data="podrollApp()" x-init="init()"> <div class="podroll-page" x-data="podrollApp()" x-init="init()">
<header class="mb-6 sm:mb-8"> <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"> <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"/> <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"/> <circle cx="12" cy="12" r="3"/>
<path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/> <path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
@@ -19,7 +19,7 @@ permalink: /podroll/
</p> </p>
<p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync"> <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> 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"> <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"/> <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>
@@ -32,7 +32,7 @@ permalink: /podroll/
<div class="main-content"> <div class="main-content">
{# Loading State #} {# Loading State #}
<div x-show="loading && episodes.length === 0" class="text-center py-12"> <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> <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> <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> </svg>
@@ -50,7 +50,7 @@ permalink: /podroll/
<div class="relative"> <div class="relative">
<select <select
x-model="filterPodcast" 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> <option value="all">All Podcasts</option>
<template x-for="source in sortedSources" :key="source.title"> <template x-for="source in sortedSources" :key="source.title">
@@ -66,18 +66,18 @@ permalink: /podroll/
{# Episodes List #} {# Episodes List #}
<div x-show="episodes.length > 0" class="space-y-4"> <div x-show="episodes.length > 0" class="space-y-4">
<template x-for="episode in filteredEpisodes" :key="episode.id"> <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 #} {# Episode Header #}
<div class="flex items-start gap-4 mb-4"> <div class="flex items-start gap-4 mb-4">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h2 class="font-semibold text-lg text-surface-900 dark:text-surface-100 mb-1"> <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> </h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500"> <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<a <a
x-show="episode.podcast" x-show="episode.podcast"
:href="episode.podcast?.url || '#'" :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" target="_blank"
rel="noopener" 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"> <div class="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
<a <a
:href="episode.url" :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" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -175,7 +175,7 @@ permalink: /podroll/
<button <button
@click="loadMore()" @click="loadMore()"
:disabled="loadingMore" :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">Load More Episodes</span>
<span x-show="loadingMore" class="flex items-center gap-2"> <span x-show="loadingMore" class="flex items-center gap-2">
@@ -202,7 +202,7 @@ permalink: /podroll/
<aside class="sidebar"> <aside class="sidebar">
<div class="widget"> <div class="widget">
<h3 class="widget-title flex items-center gap-2"> <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"/> <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"/> <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> </svg>
@@ -223,7 +223,7 @@ permalink: /podroll/
target="_blank" target="_blank"
rel="noopener" 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> <span class="text-white text-xs font-bold" x-text="source.title.charAt(0).toUpperCase()"></span>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
@@ -232,7 +232,7 @@ permalink: /podroll/
</div> </div>
<a <a
:href="source.xmlUrl" :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" target="_blank"
rel="noopener" rel="noopener"
title="RSS Feed" title="RSS Feed"

26
readlater.njk
View File

@@ -6,7 +6,7 @@ permalink: /readlater/
<div class="readlater-page" x-data="readlaterApp()" x-init="init()"> <div class="readlater-page" x-data="readlaterApp()" x-init="init()">
<header class="mb-6 sm:mb-8"> <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"> <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"/> <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> </svg>
Reading List Reading List
@@ -21,7 +21,7 @@ permalink: /readlater/
<div class="main-content"> <div class="main-content">
{# Loading State #} {# Loading State #}
<div x-show="loading" class="text-center py-12"> <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> <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> <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> </svg>
@@ -41,7 +41,7 @@ permalink: /readlater/
<select <select
x-model="selectedSource" x-model="selectedSource"
@change="fetchData()" @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> <option value="">All sources</option>
<template x-for="src in sources" :key="src"> <template x-for="src in sources" :key="src">
@@ -58,7 +58,7 @@ permalink: /readlater/
x-model.debounce.300ms="searchQuery" x-model.debounce.300ms="searchQuery"
@input="fetchData()" @input="fetchData()"
placeholder="Search..." placeholder="Search..."
class="w-full bg-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"> <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
@@ -80,16 +80,16 @@ permalink: /readlater/
{# Items List #} {# Items List #}
<div x-show="!loading" class="space-y-4"> <div x-show="!loading" class="space-y-4">
<template x-for="item in items" :key="item.id"> <template x-for="item in items" :key="item.id">
<article class="bg-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 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"> <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"/> <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> </svg>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<h2 class="font-semibold text-surface-900 dark:text-surface-100 mb-1"> <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> </h2>
<div class="flex flex-wrap items-center gap-2 text-sm text-surface-500"> <div class="flex flex-wrap items-center gap-2 text-sm text-surface-500">
<span <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"> <div class="flex flex-wrap items-center gap-3 mt-3 pt-3 border-t border-surface-200 dark:border-surface-700">
<a <a
:href="item.url" :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" target="_blank"
rel="noopener" rel="noopener"
> >
@@ -147,11 +147,11 @@ permalink: /readlater/
<h3 class="widget-title">Stats</h3> <h3 class="widget-title">Stats</h3>
<div class="grid grid-cols-2 gap-3 text-center"> <div class="grid grid-cols-2 gap-3 text-center">
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg"> <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> <span class="text-xs text-surface-500 uppercase">Saved</span>
</div> </div>
<div class="p-3 bg-surface-50 dark:bg-surface-800 rounded-lg"> <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> <span class="text-xs text-surface-500 uppercase">Sources</span>
</div> </div>
</div> </div>
@@ -160,7 +160,7 @@ permalink: /readlater/
{# Sources Quick Filter #} {# Sources Quick Filter #}
<div class="widget" x-show="sources.length > 0"> <div class="widget" x-show="sources.length > 0">
<h3 class="widget-title flex items-center gap-2"> <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"/> <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> </svg>
Sources Sources
@@ -169,7 +169,7 @@ permalink: /readlater/
<li> <li>
<button <button
@click="selectedSource = ''; fetchData()" @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" class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
> >
All All
@@ -179,7 +179,7 @@ permalink: /readlater/
<li> <li>
<button <button
@click="selectedSource = src; fetchData()" @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" class="w-full text-left px-3 py-2 rounded-lg text-sm transition-colors"
x-text="src" x-text="src"
></button> ></button>

8
replies.njk
View File

@@ -25,17 +25,17 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{% if paginatedReplies.length > 0 %} {% if paginatedReplies.length > 0 %}
<ul class="post-list"> <ul class="post-list">
{% for post in paginatedReplies %} {% 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="post-header flex items-start gap-3">
<div class="flex-shrink-0 mt-1"> <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"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
</svg> </svg>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
{% if post.data.title %} {% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2"> <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> </h2>
{% endif %} {% endif %}
<div class="post-meta"> <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"> <div class="e-content prose dark:prose-invert prose-sm mt-3 max-w-none">
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </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>
</div> </div>
</li> </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"> <div class="flex-1 min-w-0">
{% if post.data.title %} {% if post.data.title %}
<h2 class="p-name text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2"> <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> </h2>
{% endif %} {% endif %}
<div class="post-meta"> <div class="post-meta">
@@ -67,7 +67,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
{{ post.templateContent | safe }} {{ post.templateContent | safe }}
</div> </div>
{% endif %} {% 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>
</div> </div>
</li> </li>

2
search.njk
View File

@@ -14,7 +14,7 @@ pagefindIgnore: true
<noscript> <noscript>
<div class="p-6 bg-surface-100 dark:bg-surface-800 rounded-lg mt-4"> <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-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> </div>
</noscript> </noscript>

20
slashes.njk
View File

@@ -10,7 +10,7 @@ eleventyImport:
<div class="h-feed"> <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> <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"> <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> </p>
{# Dynamic pages (created via Indiekit) #} {# Dynamic pages (created via Indiekit) #}
@@ -22,7 +22,7 @@ eleventyImport:
<li class="h-entry post-card"> <li class="h-entry post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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 }} /{{ page.fileSlug }}
</a> </a>
</h3> </h3>
@@ -72,7 +72,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p> <p class="text-surface-600 dark:text-surface-400 mt-2">Sites I follow</p>
@@ -82,7 +82,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p> <p class="text-surface-600 dark:text-surface-400 mt-2">Funkwhale activity</p>
@@ -92,7 +92,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p> <p class="text-surface-600 dark:text-surface-400 mt-2">GitHub activity</p>
@@ -102,7 +102,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p> <p class="text-surface-600 dark:text-surface-400 mt-2">Last.fm scrobbles</p>
@@ -112,7 +112,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p> <p class="text-surface-600 dark:text-surface-400 mt-2">RSS feed aggregator</p>
@@ -122,7 +122,7 @@ eleventyImport:
<li class="post-card"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">Podcasts I listen to</p> <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"> <li class="post-card">
<div class="post-header"> <div class="post-header">
<h3 class="text-xl font-semibold"> <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> </h3>
</div> </div>
<p class="text-surface-600 dark:text-surface-400 mt-2">YouTube channel</p> <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"> <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> <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"> <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. for inspiration on pages like <code>/now</code>, <code>/uses</code>, <code>/colophon</code>, <code>/blogroll</code>, and more.
</p> </p>
</div> </div>

34
starred.njk
View File

@@ -8,7 +8,7 @@ eleventyExcludeFromCollections: true
<div class="starred-page" x-data="starredPage" x-cloak> <div class="starred-page" x-data="starredPage" x-cloak>
<header class="mb-6 sm:mb-8"> <header class="mb-6 sm:mb-8">
<div class="flex items-center gap-2 mb-4"> <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> </div>
<h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2 flex items-center gap-3"> <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"> <svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
@@ -37,7 +37,7 @@ eleventyExcludeFromCollections: true
{# Loading state #} {# Loading state #}
<template x-if="loading"> <template x-if="loading">
<div class="text-center py-12"> <div class="text-center py-12">
<div class="inline-block w-8 h-8 border-4 border-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> <p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
</div> </div>
</template> </template>
@@ -58,7 +58,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = 'all'; resetView()" @click="activeTab = 'all'; resetView()"
:class="activeTab === 'all' :class="activeTab === 'all'
? 'border-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'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -71,7 +71,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = list.slug; resetView()" @click="activeTab = list.slug; resetView()"
:class="activeTab === list.slug :class="activeTab === list.slug
? 'border-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'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -84,7 +84,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="activeTab = 'uncategorized'; resetView()" @click="activeTab = 'uncategorized'; resetView()"
:class="activeTab === 'uncategorized' :class="activeTab === 'uncategorized'
? 'border-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'" : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors" class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
> >
@@ -108,7 +108,7 @@ eleventyExcludeFromCollections: true
x-model="searchQuery" x-model="searchQuery"
@input="resetView()" @input="resetView()"
placeholder="Search by name, description, topic, or language..." placeholder="Search by name, description, topic, or language..."
class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-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"> <template x-if="searchQuery">
<button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600"> <button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600">
@@ -123,7 +123,7 @@ eleventyExcludeFromCollections: true
<select <select
x-model="sortBy" x-model="sortBy"
@change="resetView()" @change="resetView()"
class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-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="stars">Sort: Stars</option>
<option value="starredAt">Sort: Recently Starred</option> <option value="starredAt">Sort: Recently Starred</option>
@@ -138,7 +138,7 @@ eleventyExcludeFromCollections: true
<select <select
x-model="languageFilter" x-model="languageFilter"
@change="resetView()" @change="resetView()"
class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-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> <option value="">All Languages</option>
<template x-for="lang in availableLanguages" :key="lang"> <template x-for="lang in availableLanguages" :key="lang">
@@ -152,7 +152,7 @@ eleventyExcludeFromCollections: true
<button <button
@click="starCountMin = opt.value; resetView()" @click="starCountMin = opt.value; resetView()"
:class="starCountMin === opt.value :class="starCountMin === opt.value
? 'bg-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'" : '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" class="px-2.5 py-1 text-xs font-medium transition-colors"
x-text="opt.label" x-text="opt.label"
@@ -162,7 +162,7 @@ eleventyExcludeFromCollections: true
{# Archived toggle #} {# Archived toggle #}
<label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer"> <label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer">
<input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-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 Show archived
</label> </label>
@@ -170,7 +170,7 @@ eleventyExcludeFromCollections: true
<template x-if="hasActiveFilters"> <template x-if="hasActiveFilters">
<button <button
@click="clearFilters()" @click="clearFilters()"
class="text-xs text-primary-600 dark:text-primary-400 hover:underline" class="text-xs text-accent-600 dark:text-accent-400 hover:underline"
>Clear filters</button> >Clear filters</button>
</template> </template>
</div> </div>
@@ -184,13 +184,13 @@ eleventyExcludeFromCollections: true
{# ===== REPO GRID ===== #} {# ===== REPO GRID ===== #}
<div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid"> <div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid">
<template x-for="repo in visibleStars" :key="repo.fullName"> <template x-for="repo in visibleStars" :key="repo.fullName">
<article class="starred-card p-4 bg-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"> <div class="flex items-center gap-2 mb-1">
<template x-if="repo.ownerAvatar"> <template x-if="repo.ownerAvatar">
<img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy"> <img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
</template> </template>
<h3 class="font-semibold text-surface-900 dark:text-surface-100 truncate"> <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> </h3>
<template x-if="repo.archived"> <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> <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"> <template x-if="repo.topics && repo.topics.length">
<div class="flex flex-wrap gap-1.5 mb-2"> <div class="flex flex-wrap gap-1.5 mb-2">
<template x-for="topic in repo.topics.slice(0, 5)" :key="topic"> <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>
<template x-if="repo.topics.length > 5"> <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> <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"> <template x-if="sortedStars.length === 0">
<div class="text-center py-12"> <div class="text-center py-12">
<p class="text-surface-500">No repos match your current filters.</p> <p class="text-surface-500">No repos match your current filters.</p>
<button @click="clearFilters()" class="mt-2 text-sm text-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> </div>
</template> </template>
@@ -253,10 +253,10 @@ eleventyExcludeFromCollections: true
<div class="mt-6 text-center"> <div class="mt-6 text-center">
<button <button
@click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)" @click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
class="px-6 py-2.5 bg-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 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> </button>
</div> </div>
</template> </template>

4
tailwind.config.js
View File

@@ -78,13 +78,13 @@ export default {
typography: (theme) => ({ typography: (theme) => ({
DEFAULT: { DEFAULT: {
css: { css: {
"--tw-prose-links": theme("colors.primary.600"), "--tw-prose-links": theme("colors.accent.600"),
maxWidth: "none", maxWidth: "none",
}, },
}, },
invert: { invert: {
css: { 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 %} {% if allMentions.length > 0 or legacyUrls.length > 0 %}
<tr class="hover:bg-surface-50 dark:hover:bg-surface-800/50"> <tr class="hover:bg-surface-50 dark:hover:bg-surface-800/50">
<td class="p-2"> <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 }} {{ post.url }}
</a> </a>
</td> </td>