From f5e6dfbc8ae86a7db1342d72e573d9e05fa4eb6c Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 16:31:30 +0100
Subject: [PATCH] fix: sparkline width regression, dark mode pill contrast,
 interaction icons

- Sparkline: change from fixed 120/180px to fluid width (flex-1 min-w-0)
  filling the content area next to page titles across all 8 post type pages
- Blog filter: fix dark mode active pill contrast (dark:bg-accent-700)
- Interactions: replace wrong share icon with correct ActivityPub logo
- Interactions: add IndieWeb webmention provenance badge (globe icon)
- Interactions: improve platform detection (Bridgy Fed, more Fediverse instances)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 articles.njk     |  2 +-
 blog.njk         |  4 ++--
 bookmarks.njk    |  2 +-
 css/tailwind.css |  3 +--
 interactions.njk | 12 +++++++++---
 likes.njk        |  2 +-
 notes.njk        |  2 +-
 photos.njk       |  2 +-
 replies.njk      |  2 +-
 reposts.njk      |  2 +-
 10 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/articles.njk b/articles.njk
index caa3e48..fa1aff4 100644
--- a/articles.njk
+++ b/articles.njk
@@ -14,7 +14,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
     {% set sparklineSvg = collections.articles | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/blog.njk b/blog.njk
index 4a717c8..3656bea 100644
--- a/blog.njk
+++ b/blog.njk
@@ -13,7 +13,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Blog</h1>
     {% set sparklineSvg = collections.posts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
@@ -23,7 +23,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
 
   {% if paginatedPosts.length > 0 %}
   <nav class="flex flex-wrap gap-2 mb-6" aria-label="Filter by post type">
-    <a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full bg-accent-600 text-white dark:bg-accent-500">All Posts <span class="opacity-75">({{ collections.posts.length }})</span></a>
+    <a href="/blog/" class="px-3 py-1.5 text-sm font-medium rounded-full bg-accent-600 text-white dark:bg-accent-700">All Posts <span class="opacity-75">({{ collections.posts.length }})</span></a>
     {% for pt in enabledPostTypes %}
     {% set collName = pt.label | lower %}
     <a href="{{ pt.path }}" class="px-3 py-1.5 text-sm font-medium rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700 border border-surface-200 dark:border-surface-700 transition-colors">{{ pt.label }}{% if collections[collName] %} <span class="text-surface-400 dark:text-surface-500">({{ collections[collName].length }})</span>{% endif %}</a>
diff --git a/bookmarks.njk b/bookmarks.njk
index 06b8968..7374d95 100644
--- a/bookmarks.njk
+++ b/bookmarks.njk
@@ -14,7 +14,7 @@ permalink: "bookmarks/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageN
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Bookmarks</h1>
     {% set sparklineSvg = collections.bookmarks | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/css/tailwind.css b/css/tailwind.css
index 8b34c53..f718a61 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -847,14 +847,13 @@
 
 /* Sparkline — inline SVG posting frequency chart */
 .sparkline {
-  width: 120px;
+  width: 100%;
   height: 28px;
   display: block;
 }
 
 @media (min-width: 640px) {
   .sparkline {
-    width: 180px;
     height: 32px;
   }
 }
diff --git a/interactions.njk b/interactions.njk
index 9c272a0..c0d215d 100644
--- a/interactions.njk
+++ b/interactions.njk
@@ -257,7 +257,10 @@ permalink: /interactions/
                   <svg class="w-3 h-3" viewBox="0 0 568 501" fill="currentColor"><path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/></svg>
                 </span>
                 <span x-show="wm.platform === 'activitypub'" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full" title="Fediverse (ActivityPub)">
-                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.09 4.43L24 10.73v2.51L13.09 19.58v-2.51L21.83 12 13.09 6.98v-2.55zM13.09 9.49L17.44 12l-4.35 2.51V9.49z"/><path d="M10.91 4.43L0 10.73v2.51l8.74-5.03v10.09l2.18 1.28V4.43zM6.56 12L2.18 14.51l4.35 2.51V12z"/></svg>
+                </span>
+                <span x-show="wm.platform === 'webmention' || !wm.platform" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 rounded-full" title="IndieWeb (Webmention)">
+                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
                 </span>
 
                 <a :href="wm.url || '#'" target="_blank" rel="noopener" class="text-xs text-surface-500 hover:underline">
@@ -497,9 +500,12 @@ function interactionsApp() {
       const authorUrl = item.author?.url || '';
       if (source.includes('brid.gy/') && source.includes('/mastodon/')) return 'mastodon';
       if (source.includes('brid.gy/') && source.includes('/bluesky/')) return 'bluesky';
+      if (source.includes('fed.brid.gy')) return 'activitypub';
       if (authorUrl.includes('bsky.app')) return 'bluesky';
-      if (authorUrl.includes('mstdn') || authorUrl.includes('mastodon') || authorUrl.includes('social.')) return 'mastodon';
-      return null;
+      if (authorUrl.includes('mstdn') || authorUrl.includes('mastodon') || authorUrl.includes('social.') ||
+          authorUrl.includes('fosstodon.') || authorUrl.includes('hachyderm.') || authorUrl.includes('infosec.exchange') ||
+          authorUrl.includes('pleroma.') || authorUrl.includes('misskey.') || authorUrl.includes('pixelfed.')) return 'mastodon';
+      return 'webmention';
     },
 
     mergeAndDeduplicate(wmItems, convItems) {
diff --git a/likes.njk b/likes.njk
index e1978ad..ac001e8 100644
--- a/likes.njk
+++ b/likes.njk
@@ -14,7 +14,7 @@ permalink: "likes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Likes</h1>
     {% set sparklineSvg = collections.likes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/notes.njk b/notes.njk
index 41824f7..01f9e89 100644
--- a/notes.njk
+++ b/notes.njk
@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
     {% set sparklineSvg = collections.notes | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/photos.njk b/photos.njk
index 0b7f91a..e74919b 100644
--- a/photos.njk
+++ b/photos.njk
@@ -14,7 +14,7 @@ permalink: "photos/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Photos</h1>
     {% set sparklineSvg = collections.photos | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/replies.njk b/replies.njk
index ed35ca3..0717ee0 100644
--- a/replies.njk
+++ b/replies.njk
@@ -14,7 +14,7 @@ permalink: "replies/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Replies</h1>
     {% set sparklineSvg = collections.replies | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
diff --git a/reposts.njk b/reposts.njk
index 2688e2b..07c6585 100644
--- a/reposts.njk
+++ b/reposts.njk
@@ -14,7 +14,7 @@ permalink: "reposts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNum
     <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Reposts</h1>
     {% set sparklineSvg = collections.reposts | postingFrequency %}
     {% if sparklineSvg %}
-    <span class="text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
+    <span class="flex-1 min-w-0 text-rose-600 dark:text-rose-400">{{ sparklineSvg | safe }}</span>
     {% endif %}
   </div>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">