feat: image rendering, link preview CSS, lightbox swipe, URL linkification (v2.8.0)

- Gallery photos: 220px → 280px height, 180px on mobile (≤480px)
- Link preview cards: full CSS for horizontal card layout (text left, image right)
- Lightbox: touch/swipe support for mobile (50px threshold)
- URL linkification: bare URLs in content auto-wrapped in <a> tags before AP delivery

Confab-Link: http://localhost:8080/sessions/c5b1471e-b046-44d9-b94f-ab5e68fae7cc

assets/reader.css

@@ -528,12 +528,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);
 }
@@ -668,6 +674,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: var(--font-weight-bold);
+  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
    ========================================================================== */

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.json

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

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>