@rmdes/indiekit-endpoint-activitypub 2.7.0 → 2.8.0

package/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
    ========================================================================== */

package/lib/inbox-listeners.js

@@ -431,6 +431,7 @@ export function registerInboxListeners(inboxChain, options) {
 
           await addNotification(collections, {
             uid: object.id?.href || `reply:${actorUrl}:${inReplyTo}`,
+            url: object.url?.href || object.id?.href || "",
             type: "reply",
             actorUrl: actorInfo.url,
             actorName: actorInfo.name,
@@ -462,6 +463,7 @@ export function registerInboxListeners(inboxChain, options) {
 
             await addNotification(collections, {
               uid: object.id?.href || `mention:${actorUrl}:${object.id?.href}`,
+              url: object.url?.href || object.id?.href || "",
               type: "mention",
               actorUrl: actorInfo.url,
               actorName: actorInfo.name,

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.0",
+  "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",

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

@@ -230,7 +230,7 @@
         if (this.error) setTimeout(() => this.error = '', 3000);
       }
     }">
-    <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ itemUid | urlencode }}"
+    <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ (itemUrl or itemUid) | urlencode }}"
        class="ap-card__action ap-card__action--reply"
        title="{{ __('activitypub.reader.actions.reply') }}">
       ↩ {{ __("activitypub.reader.actions.reply") }}{% if replyCount != null %}<span class="ap-card__count">{{ replyCount }}</span>{% endif %}

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

@@ -56,10 +56,10 @@
 
     {% if item.type == "reply" or item.type == "mention" %}
       <div class="ap-notification__actions">
-        <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ item.uid | urlencode }}" class="ap-notification__reply-btn" title="{{ __('activitypub.reader.actions.reply') }}">
+        <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ (item.url or item.uid) | urlencode }}" class="ap-notification__reply-btn" title="{{ __('activitypub.reader.actions.reply') }}">
           ↩ {{ __("activitypub.reader.actions.reply") }}
         </a>
-        <a href="{{ mountPath }}/admin/reader/post?url={{ item.uid | urlencode }}" class="ap-notification__thread-btn" title="{{ __('activitypub.reader.post.title') }}">
+        <a href="{{ mountPath }}/admin/reader/post?url={{ (item.url or item.uid) | urlencode }}" class="ap-notification__thread-btn" title="{{ __('activitypub.reader.post.title') }}">
           💬 {{ __("activitypub.notifications.viewThread") }}
         </a>
       </div>