@rmdes/indiekit-endpoint-activitypub 2.7.1 → 2.8.1

package/assets/reader-links.css

@@ -15,8 +15,8 @@
 .ap-link-preview {
   display: flex;
   overflow: hidden;
-  border-radius: 8px;
-  border: 1px solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  border: var(--border-width-thin) solid var(--color-outline);
   background-color: var(--color-offset);
   text-decoration: none;
   color: inherit;
@@ -121,7 +121,7 @@
   letter-spacing: 0.05em;
   margin: var(--space-l) 0 var(--space-s);
   padding-bottom: var(--space-xs);
-  border-bottom: 1px solid var(--color-outline);
+  border-bottom: var(--border-width-thin) solid var(--color-outline);
 }
 
 .ap-post-detail__main {

package/assets/reader.css

@@ -32,7 +32,7 @@
 
 .ap-breadcrumb__current {
   color: var(--color-on-background);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }
 
 /* ==========================================================================
@@ -151,10 +151,10 @@
   background: var(--color-offset);
   border: var(--border-width-thin) solid var(--color-outline);
   border-left: 3px solid var(--color-outline);
-  border-radius: 8px;
+  border-radius: var(--border-radius-small);
   overflow: hidden;
   padding: var(--space-m);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 1px 2px hsl(var(--tint-neutral) 10% / 0.04);
   transition:
     box-shadow 0.2s ease,
     border-color 0.2s ease;
@@ -163,7 +163,7 @@
 .ap-card:hover {
   border-color: var(--color-outline-variant);
   border-left-color: var(--color-outline-variant);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px hsl(var(--tint-neutral) 10% / 0.08);
 }
 
 /* ==========================================================================
@@ -261,15 +261,27 @@
   margin-bottom: var(--space-s);
 }
 
+.ap-card__avatar-wrap {
+  flex-shrink: 0;
+  height: 44px;
+  position: relative;
+  width: 44px;
+}
+
 .ap-card__avatar {
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: 50%;
-  flex-shrink: 0;
   height: 44px;
   object-fit: cover;
   width: 44px;
 }
 
+.ap-card__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .ap-card__avatar--default {
   align-items: center;
   background: var(--color-offset-variant);
@@ -411,7 +423,7 @@
 
 .ap-card__content code {
   background: var(--color-offset-variant);
-  border-radius: 3px;
+  border-radius: var(--border-radius-small);
   font-size: 0.9em;
   padding: 1px 4px;
 }
@@ -508,7 +520,7 @@
    ========================================================================== */
 
 .ap-card__gallery {
-  border-radius: 6px;
+  border-radius: var(--border-radius-small);
   display: grid;
   gap: 2px;
   margin-bottom: var(--space-s);
@@ -528,12 +540,18 @@
 .ap-card__gallery img {
   background: var(--color-offset-variant);
   display: block;
-  height: 220px;
+  height: 280px;
   object-fit: cover;
   width: 100%;
   transition: filter 0.2s ease;
 }
 
+@media (max-width: 480px) {
+  .ap-card__gallery img {
+    height: 180px;
+  }
+}
+
 .ap-card__gallery-link:hover img {
   filter: brightness(0.92);
 }
@@ -601,7 +619,7 @@
 
 .ap-lightbox {
   align-items: center;
-  background: rgba(0, 0, 0, 0.92);
+  background: hsl(var(--tint-neutral) 10% / 0.92);
   display: flex;
   inset: 0;
   justify-content: center;
@@ -668,6 +686,83 @@
   transform: translateX(-50%);
 }
 
+/* ==========================================================================
+   Link Preview Card
+   ========================================================================== */
+
+.ap-link-previews {
+  margin-bottom: var(--space-s);
+}
+
+.ap-link-preview {
+  display: flex;
+  border: var(--border-width-thin) solid var(--color-outline);
+  border-radius: var(--border-radius-small);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.ap-link-preview:hover {
+  border-color: var(--color-primary);
+}
+
+.ap-link-preview__text {
+  flex: 1;
+  min-width: 0;
+  padding: var(--space-s) var(--space-m);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.2em;
+}
+
+.ap-link-preview__title {
+  font-weight: 600;
+  font-size: var(--font-size-s);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ap-link-preview__desc {
+  font-size: var(--font-size-s);
+  color: var(--color-on-offset);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ap-link-preview__domain {
+  font-size: var(--font-size-xs);
+  color: var(--color-on-offset);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+.ap-link-preview__favicon {
+  width: 14px;
+  height: 14px;
+}
+
+.ap-link-preview__image {
+  flex-shrink: 0;
+  width: 120px;
+}
+
+.ap-link-preview__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 /* ==========================================================================
    Video Embed
    ========================================================================== */
@@ -778,7 +873,7 @@
   align-items: center;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--border-radius-small);
   color: var(--color-on-offset);
   cursor: pointer;
   display: inline-flex;
@@ -1105,6 +1200,11 @@
   position: relative;
 }
 
+.ap-notification__avatar-wrap {
+  height: 40px;
+  width: 40px;
+}
+
 .ap-notification__avatar {
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: 50%;
@@ -1113,6 +1213,12 @@
   width: 40px;
 }
 
+.ap-notification__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
 .ap-notification__avatar--default {
   align-items: center;
   background: var(--color-offset-variant);
@@ -1236,7 +1342,16 @@
 }
 
 .ap-profile__avatar-wrap {
+  height: 80px;
   margin-bottom: var(--space-s);
+  position: relative;
+  width: 80px;
+}
+
+.ap-profile__avatar-wrap > img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
 }
 
 .ap-profile__avatar {
@@ -1818,7 +1933,7 @@
 
 .ap-tag-header__title {
   font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   margin: 0 0 var(--space-xs);
 }
 
@@ -1945,7 +2060,7 @@
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: var(--border-radius-small);
   box-sizing: border-box;
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-m);
   min-width: 0;
   padding: var(--space-xs) var(--space-s);
   width: 100%;
@@ -2011,7 +2126,7 @@
   background: var(--color-background);
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: var(--border-radius-small);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px hsl(var(--tint-neutral) 10% / 0.15);
   left: 0;
   max-height: 320px;
   overflow-y: auto;
@@ -2088,7 +2203,7 @@
   background: var(--color-background);
   border: var(--border-width-thin) solid var(--color-outline);
   border-radius: var(--border-radius-small);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px hsl(var(--tint-neutral) 10% / 0.15);
   left: 0;
   max-height: 320px;
   overflow-y: auto;
@@ -2198,7 +2313,7 @@
 }
 
 .ap-explore-tabs-nav::after {
-  background: linear-gradient(to right, transparent, var(--color-background, #fff) 80%);
+  background: linear-gradient(to right, transparent, var(--color-background) 80%);
   content: "";
   height: 100%;
   pointer-events: none;
@@ -2267,7 +2382,7 @@
 
 /* Scope badges on instance tabs */
 .ap-tab__badge {
-  border-radius: 3px;
+  border-radius: var(--border-radius-small);
   font-size: 0.65em;
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -2439,7 +2554,7 @@
 
 .ap-explore-tab-error__retry {
   background: none;
-  border: 1px solid var(--color-primary-on-background);
+  border: var(--border-width-thin) solid var(--color-primary-on-background);
   border-radius: var(--border-radius-small);
   color: var(--color-primary-on-background);
   cursor: pointer;
@@ -2519,7 +2634,7 @@
 
 .ap-unread-toggle--active {
   background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
 }
 
 /* ==========================================================================
@@ -2528,7 +2643,7 @@
 
 .ap-quote-embed {
   border: var(--border-width-thin) solid var(--color-outline);
-  border-radius: 8px;
+  border-radius: var(--border-radius-small);
   margin-top: var(--space-s);
   overflow: hidden;
   transition: border-color 0.15s ease;
@@ -2574,7 +2689,7 @@
   color: var(--color-on-offset);
   display: inline-flex;
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   justify-content: center;
 }
 
@@ -2585,7 +2700,7 @@
 
 .ap-quote-embed__name {
   font-size: var(--font-size-s);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2608,7 +2723,7 @@
 
 .ap-quote-embed__title {
   font-size: var(--font-size-s);
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
   margin: 0 0 var(--space-xs);
 }
 
@@ -2674,8 +2789,8 @@
   position: absolute;
   bottom: 0.5rem;
   left: 0.5rem;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
+  background: hsl(var(--tint-neutral) 10% / 0.7);
+  color: var(--color-neutral99);
   font-size: 0.65rem;
   font-weight: 700;
   padding: 0.15rem 0.35rem;
@@ -2688,7 +2803,7 @@
 }
 
 .ap-media__alt-badge:hover {
-  background: rgba(0, 0, 0, 0.9);
+  background: hsl(var(--tint-neutral) 10% / 0.9);
 }
 
 .ap-media__alt-text {
@@ -2696,8 +2811,8 @@
   bottom: 2.2rem;
   left: 0.5rem;
   right: 0.5rem;
-  background: rgba(0, 0, 0, 0.85);
-  color: white;
+  background: hsl(var(--tint-neutral) 10% / 0.85);
+  color: var(--color-neutral99);
   font-size: var(--font-size-s);
   padding: 0.5rem;
   border-radius: var(--border-radius-small);
@@ -2787,11 +2902,11 @@
 
   /* --- Card shadows: use light tint instead of black --- */
   .ap-card {
-    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.04);
+    box-shadow: 0 1px 2px hsl(var(--tint-neutral) 90% / 0.04);
   }
 
   .ap-card:hover {
-    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);
+    box-shadow: 0 2px 8px hsl(var(--tint-neutral) 90% / 0.06);
   }
 
   /* --- Tab badge federated: soften purple --- */

package/lib/jf2-to-as2.js

@@ -20,6 +20,22 @@ import {
   Video,
 } from "@fedify/fedify/vocab";
 
+// ---------------------------------------------------------------------------
+// Content helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert bare URLs in HTML content to clickable links.
+ * Skips URLs already inside href attributes or anchor tag text.
+ */
+function linkifyUrls(html) {
+  if (!html) return html;
+  return html.replace(
+    /(?<![=">])(https?:\/\/[^\s<"]+)/g,
+    '<a href="$1">$1</a>',
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Plain JSON-LD (content negotiation on individual post URLs)
 // ---------------------------------------------------------------------------
@@ -68,7 +84,7 @@ export function jf2ToActivityStreams(properties, actorUrl, publicationUrl) {
 
   if (postType === "bookmark") {
     const bookmarkUrl = properties["bookmark-of"];
-    const commentary = properties.content?.html || properties.content || "";
+    const commentary = linkifyUrls(properties.content?.html || properties.content || "");
     object.content = commentary
       ? `${commentary}<br><br>\u{1F516} <a href="${bookmarkUrl}">${bookmarkUrl}</a>`
       : `\u{1F516} <a href="${bookmarkUrl}">${bookmarkUrl}</a>`;
@@ -80,7 +96,7 @@ export function jf2ToActivityStreams(properties, actorUrl, publicationUrl) {
       },
     ];
   } else {
-    object.content = properties.content?.html || properties.content || "";
+    object.content = linkifyUrls(properties.content?.html || properties.content || "");
   }
 
   // Append permalink to content so fediverse clients show a clickable link
@@ -193,12 +209,12 @@ export function jf2ToAS2Activity(properties, actorUrl, publicationUrl, options =
   // Content
   if (postType === "bookmark") {
     const bookmarkUrl = properties["bookmark-of"];
-    const commentary = properties.content?.html || properties.content || "";
+    const commentary = linkifyUrls(properties.content?.html || properties.content || "");
     noteOptions.content = commentary
       ? `${commentary}<br><br>\u{1F516} <a href="${bookmarkUrl}">${bookmarkUrl}</a>`
       : `\u{1F516} <a href="${bookmarkUrl}">${bookmarkUrl}</a>`;
   } else {
-    noteOptions.content = properties.content?.html || properties.content || "";
+    noteOptions.content = linkifyUrls(properties.content?.html || properties.content || "");
   }
 
   // Append permalink to content so fediverse clients show a clickable link

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.7.1",
+  "version": "2.8.1",
   "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
   "keywords": [
     "indiekit",

package/views/activitypub-profile.njk

@@ -91,7 +91,7 @@
                 <label class="label" for="link_value_{{ loop.index }}">{{ __("activitypub.profile.linkValueLabel") }}</label>
                 <input class="input" type="url" id="link_value_{{ loop.index }}" name="link_value[]" value="{{ att.value }}" placeholder="https://example.com">
               </div>
-              <button type="button" class="button button--small" onclick="this.closest('.profile-link-row').remove()" style="margin-block-end: 4px;">{{ __("activitypub.profile.removeLink") }}</button>
+              <button type="button" class="button button--small profile-link-remove" style="margin-block-end: 4px;">{{ __("activitypub.profile.removeLink") }}</button>
             </div>
           {% endfor %}
         {% endif %}
@@ -129,6 +129,11 @@
 
   <script>
     (function() {
+      document.getElementById('profile-links').addEventListener('click', function(e) {
+        var btn = e.target.closest('.profile-link-remove');
+        if (btn) btn.closest('.profile-link-row').remove();
+      });
+
       var linkCount = {{ (profile.attachments.length if profile.attachments) or 0 }};
       document.getElementById('add-link-btn').addEventListener('click', function() {
         linkCount++;
@@ -167,10 +172,9 @@
 
         var removeBtn = document.createElement('button');
         removeBtn.type = 'button';
-        removeBtn.className = 'button button--small';
+        removeBtn.className = 'button button--small profile-link-remove';
         removeBtn.style.cssText = 'margin-block-end: 4px;';
         removeBtn.textContent = 'Remove';
-        removeBtn.addEventListener('click', function() { row.remove(); });
 
         row.appendChild(nameDiv);
         row.appendChild(valueDiv);

package/views/activitypub-reader.njk

@@ -47,8 +47,7 @@
             :class="{ 'ap-lookup-autocomplete__item--highlighted': index === highlighted }"
             @click="selectItem(item)"
             @mouseenter="highlighted = index">
-            <img :src="item.avatar" :alt="item.name" class="ap-lookup-autocomplete__avatar"
-              onerror="this.style.display='none'">
+            <img :src="item.avatar" :alt="item.name" class="ap-lookup-autocomplete__avatar">
             <span class="ap-lookup-autocomplete__info">
               <span class="ap-lookup-autocomplete__name" x-text="item.name"></span>
               <span class="ap-lookup-autocomplete__handle" x-text="item.handle"></span>

package/views/activitypub-remote-profile.njk

@@ -38,13 +38,11 @@
 
     {# Profile info #}
     <div class="ap-profile__info">
-      <div class="ap-profile__avatar-wrap">
+      <div class="ap-profile__avatar-wrap" data-avatar-fallback>
         {% if icon %}
-          <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar"
-            onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'ap-profile__avatar ap-profile__avatar--placeholder',textContent:'{{ name[0] }}'}))">
-        {% else %}
-          <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
+        <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar">
         {% endif %}
+        <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
       </div>
 
       <div class="ap-profile__details">

package/views/layouts/ap-reader.njk

@@ -10,8 +10,10 @@
   {# Relative timestamps — converts absolute dates to "5m", "3h", "2d" etc. #}
   <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-relative-time.js"></script>
 
-  {# Alpine.js for client-side reactivity (CW toggles, interaction buttons, infinite scroll) #}
-  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
+  {# Avatar fallback — remove broken images to reveal initials fallback underneath #}
+  <script>document.addEventListener("error",function(e){var t=e.target;if(t.tagName==="IMG"&&t.closest("[data-avatar-fallback]"))t.remove()},true)</script>
+
+  {# Alpine.js loaded by default.njk — AP scripts register via alpine:init before it initializes #}
 
   {# Reader stylesheet — loaded in body is fine for modern browsers #}
   <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader.css">

package/views/partials/ap-item-card.njk

@@ -39,13 +39,12 @@
 
   {# Author header #}
   <header class="ap-card__author">
-    {% if item.author.photo %}
-      <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar" loading="lazy" crossorigin="anonymous"
-        onerror="this.style.display='none';this.nextElementSibling.style.display=''">
-      <span class="ap-card__avatar ap-card__avatar--default" style="display:none" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
-    {% else %}
+    <div class="ap-card__avatar-wrap" data-avatar-fallback>
+      {% if item.author.photo %}
+      <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar" loading="lazy" crossorigin="anonymous">
+      {% endif %}
       <span class="ap-card__avatar ap-card__avatar--default" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
-    {% endif %}
+    </div>
     <div class="ap-card__author-info">
       <div class="ap-card__author-name">
         {% if item.author.url %}

package/views/partials/ap-item-media.njk

@@ -5,7 +5,7 @@
   {% set displayCount = item.photo.length if item.photo.length < 4 else 4 %}
   {% set extraCount = item.photo.length - 4 %}
   {% set totalPhotos = item.photo.length %}
-  <div x-data="{ lightbox: false, idx: 0 }" class="ap-card__gallery ap-card__gallery--{{ displayCount }}">
+  <div x-data="{ lightbox: false, idx: 0, touchX: 0 }" class="ap-card__gallery ap-card__gallery--{{ displayCount }}">
     {% for photo in item.photo %}
       {# Support both old string format and new object format #}
       {% set photoSrc = photo.url if photo.url else photo %}
@@ -36,7 +36,7 @@
 
     {# Lightbox modal — teleported to body to prevent overflow clipping #}
     <template x-teleport="body">
-      <div x-show="lightbox" x-cloak @keydown.escape.window="lightbox = false" @click.self="lightbox = false" class="ap-lightbox" role="dialog" aria-modal="true">
+      <div x-show="lightbox" x-cloak @keydown.escape.window="lightbox = false" @click.self="lightbox = false" @touchstart="touchX = $event.changedTouches[0].clientX" @touchend="let dx = $event.changedTouches[0].clientX - touchX; if (dx < -50) idx = (idx + 1) % {{ totalPhotos }}; else if (dx > 50) idx = (idx - 1 + {{ totalPhotos }}) % {{ totalPhotos }}" class="ap-lightbox" role="dialog" aria-modal="true">
         <button type="button" @click="lightbox = false" class="ap-lightbox__close" aria-label="Close">&times;</button>
         {% if totalPhotos > 1 %}
           <button type="button" @click="idx = (idx - 1 + {{ totalPhotos }}) % {{ totalPhotos }}" class="ap-lightbox__prev" aria-label="Previous image">&lsaquo;</button>

package/views/partials/ap-notification-card.njk

@@ -9,14 +9,11 @@
   </form>
 
   {# Actor avatar with type badge #}
-  <div class="ap-notification__avatar-wrap">
+  <div class="ap-notification__avatar-wrap" data-avatar-fallback>
     {% if item.actorPhoto %}
-      <img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous"
-        onerror="this.style.display='none';this.nextElementSibling.style.display=''">
-      <span class="ap-notification__avatar ap-notification__avatar--default" style="display:none" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
-    {% else %}
-      <span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
+    <img src="{{ item.actorPhoto }}" alt="{{ item.actorName }}" class="ap-notification__avatar" loading="lazy" crossorigin="anonymous">
     {% endif %}
+    <span class="ap-notification__avatar ap-notification__avatar--default" aria-hidden="true">{{ item.actorName[0] | upper if item.actorName else "?" }}</span>
     <span class="ap-notification__type-badge">
       {% if item.type == "like" %}❤{% elif item.type == "boost" %}🔁{% elif item.type == "follow" %}👤{% elif item.type == "reply" %}💬{% elif item.type == "mention" %}@{% endif %}
     </span>