fix: multiple frontend issues

- Add Alpine.js Collapse plugin for x-collapse directive
- Create favicon.svg and favicon.ico with proper linking
- Fix default-avatar references (use existing .svg instead of .png)
- Add favicon.ico to passthrough copy

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

_includes/components/webmentions.njk

@@ -35,7 +35,7 @@
          target="_blank"
          rel="noopener">
         <img
-          src="{{ like.author.photo or '/images/default-avatar.png' }}"
+          src="{{ like.author.photo or '/images/default-avatar.svg' }}"
           alt="{{ like.author.name }}"
           class="w-8 h-8 rounded-full"
           loading="lazy"
@@ -61,7 +61,7 @@
          target="_blank"
          rel="noopener">
         <img
-          src="{{ repost.author.photo or '/images/default-avatar.png' }}"
+          src="{{ repost.author.photo or '/images/default-avatar.svg' }}"
           alt="{{ repost.author.name }}"
           class="w-8 h-8 rounded-full"
           loading="lazy"
@@ -85,7 +85,7 @@
         <div class="flex gap-3">
           <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
             <img
-              src="{{ reply.author.photo or '/images/default-avatar.png' }}"
+              src="{{ reply.author.photo or '/images/default-avatar.svg' }}"
               alt="{{ reply.author.name }}"
               class="w-10 h-10 rounded-full"
               loading="lazy"

_includes/layouts/base.njk

@@ -41,9 +41,14 @@
   <meta name="twitter:image" content="{% if contentImage.startsWith('http') %}{{ contentImage }}{% else %}{{ site.url }}/{{ contentImage }}{% endif %}">
   {% endif %}
 
+  {# Favicon #}
+  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+  <link rel="icon" type="image/x-icon" href="/favicon.ico">
+
   <link rel="stylesheet" href="/css/style.css?v={{ '/css/style.css' | hash }}">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.css">
   <script src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.js" defer></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   <style>[x-cloak] { display: none !important; }</style>
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">

eleventy.config.js

@@ -122,6 +122,7 @@ export default function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("css");
   eleventyConfig.addPassthroughCopy("images");
   eleventyConfig.addPassthroughCopy("js");
+  eleventyConfig.addPassthroughCopy("favicon.ico");
 
   // Watch for content changes
   eleventyConfig.addWatchTarget("./content/");

images/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" fill="#3b82f6"/>
+  <text x="50" y="70" font-family="Arial, sans-serif" font-size="60" font-weight="bold" text-anchor="middle" fill="white">i</text>
+</svg>

interactions.njk

@@ -198,11 +198,11 @@ permalink: /interactions/
             {# Author avatar #}
             <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0">
               <img
-                :src="wm.author?.photo || '/images/default-avatar.png'"
+                :src="wm.author?.photo || '/images/default-avatar.svg'"
                 :alt="wm.author?.name || 'Anonymous'"
                 class="w-10 h-10 rounded-full"
                 loading="lazy"
-                onerror="this.src='/images/default-avatar.png'"
+                onerror="this.src='/images/default-avatar.svg'"
               >
             </a>
 

js/webmentions.js

@@ -100,7 +100,7 @@
       link.dataset.new = 'true';
 
       const img = document.createElement('img');
-      img.src = author.photo || '/images/default-avatar.png';
+      img.src = author.photo || '/images/default-avatar.svg';
       img.alt = author.name || 'Anonymous';
       img.className = 'w-8 h-8 rounded-full ring-2 ring-primary-500';
       img.loading = 'lazy';
@@ -148,7 +148,7 @@
       avatarLink.rel = 'noopener';
 
       const avatarImg = document.createElement('img');
-      avatarImg.src = author.photo || '/images/default-avatar.png';
+      avatarImg.src = author.photo || '/images/default-avatar.svg';
       avatarImg.alt = author.name || 'Anonymous';
       avatarImg.className = 'w-10 h-10 rounded-full';
       avatarImg.loading = 'lazy';