@rmdes/indiekit-endpoint-activitypub 2.4.5 → 2.5.4

package/README.md

@@ -14,13 +14,23 @@ ActivityPub federation endpoint for [Indiekit](https://getindiekit.com), built o
 - Configurable actor type (Person, Service, Organization, Group)
 
 **Reader**
-- Timeline view showing posts from followed accounts
+- Timeline view showing posts from followed accounts with tab filtering (notes, articles, replies, boosts, media)
+- Explore view — browse public timelines from any Mastodon-compatible instance
+- Cross-instance hashtag search — search a hashtag across multiple fediverse instances
+- Tag timeline — view and follow/unfollow specific hashtags
+- Post detail view with threaded context
+- Quote post embeds — quoted posts render as inline cards with author, content, and timestamp (FEP-044f, Misskey, Fedibird formats)
+- Link preview cards via Open Graph metadata unfurling
 - Notifications for likes, boosts, follows, mentions, and replies
 - Compose form with dual-path posting (quick AP reply or Micropub blog post)
 - Native interactions (like, boost, reply, follow/unfollow from the reader)
 - Remote actor profile pages
 - Content warnings and sensitive content handling
 - Media display (images, video, audio)
+- Infinite scroll with IntersectionObserver-based auto-loading
+- New post banner — polls for new items and offers one-click loading
+- Read tracking — marks posts as read on scroll, with unread filter toggle
+- Popular accounts autocomplete in the fediverse lookup bar
 - Configurable timeline retention
 
 **Moderation**
@@ -220,7 +230,11 @@ All admin pages are behind IndieAuth authentication:
 | Page | Path | Description |
 |---|---|---|
 | Dashboard | `/activitypub` | Overview with follower/following counts, recent activity |
-| Reader | `/activitypub/admin/reader` | Timeline from followed accounts |
+| Reader | `/activitypub/admin/reader` | Timeline from followed accounts (tabbed: notes, articles, replies, boosts, media) |
+| Explore | `/activitypub/admin/reader/explore` | Browse public timelines from Mastodon-compatible instances |
+| Hashtag Explore | `/activitypub/admin/reader/explore/hashtag` | Search a hashtag across multiple fediverse instances |
+| Tag Timeline | `/activitypub/admin/reader/tag?tag=name` | Posts filtered by a specific hashtag, with follow/unfollow |
+| Post Detail | `/activitypub/admin/reader/post?url=...` | Single post view with quote embeds and link previews |
 | Notifications | `/activitypub/admin/reader/notifications` | Likes, boosts, follows, mentions, replies |
 | Compose | `/activitypub/admin/reader/compose` | Reply composer (quick AP or Micropub) |
 | Moderation | `/activitypub/admin/reader/moderation` | Muted/blocked accounts and keywords |
@@ -329,6 +343,7 @@ This is not a bug — Fedify requires explicit opt-in for signed fetches. But it
 - **Single actor** — One fediverse identity per Indiekit instance
 - **No Authorized Fetch enforcement** — `.authorize()` disabled on actor dispatcher (see workarounds above)
 - **No image upload in reader** — Compose form is text-only
+- **No custom emoji rendering** — Custom emoji shortcodes display as text
 - **In-process queue without Redis** — Activities may be lost on restart
 
 ## License

package/assets/reader-infinite-scroll.js

@@ -1,121 +1,55 @@
 /**
- * Infinite scroll — AlpineJS component for AJAX load-more on the timeline
- * Registers the `apInfiniteScroll` Alpine data component.
+ * Infinite scroll — unified AlpineJS component for AJAX load-more.
+ * Works for both reader timeline and explore view via data attributes.
+ *
+ * Required data attributes on the component element:
+ *   data-cursor        — initial pagination cursor value
+ *   data-api-url       — API endpoint URL (e.g., /activitypub/admin/reader/api/timeline)
+ *   data-cursor-param  — query param name for the cursor (e.g., "before" or "max_id")
+ *   data-cursor-field  — response JSON field for the next cursor (e.g., "before" or "maxId")
+ *   data-timeline-id   — DOM ID of the timeline container to append HTML into
+ *
+ * Optional:
+ *   data-extra-params  — JSON-encoded object of additional query params
+ *   data-hide-pagination — CSS selector of no-JS pagination to hide
  */
 
 document.addEventListener("alpine:init", () => {
   // eslint-disable-next-line no-undef
-  Alpine.data("apExploreScroll", () => ({
+  Alpine.data("apInfiniteScroll", () => ({
     loading: false,
     done: false,
-    maxId: null,
-    instance: "",
-    scope: "local",
-    hashtag: "",
+    cursor: null,
+    apiUrl: "",
+    cursorParam: "before",
+    cursorField: "before",
+    timelineId: "",
+    extraParams: {},
     observer: null,
 
     init() {
       const el = this.$el;
-      this.maxId = el.dataset.maxId || null;
-      this.instance = el.dataset.instance || "";
-      this.scope = el.dataset.scope || "local";
-      this.hashtag = el.dataset.hashtag || "";
-
-      if (!this.maxId) {
-        this.done = true;
-        return;
-      }
-
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting && !this.loading && !this.done) {
-              this.loadMore();
-            }
-          }
-        },
-        { rootMargin: "200px" }
-      );
-
-      if (this.$refs.sentinel) {
-        this.observer.observe(this.$refs.sentinel);
-      }
-    },
-
-    async loadMore() {
-      if (this.loading || this.done || !this.maxId) return;
-
-      this.loading = true;
-
-      const timeline = document.getElementById("ap-explore-timeline");
-      const mountPath = timeline ? timeline.dataset.mountPath : "";
-
-      const params = new URLSearchParams({
-        instance: this.instance,
-        scope: this.scope,
-        max_id: this.maxId,
-      });
-      // Pass hashtag when in hashtag mode so infinite scroll stays on tag timeline
-      if (this.hashtag) {
-        params.set("hashtag", this.hashtag);
-      }
+      this.cursor = el.dataset.cursor || null;
+      this.apiUrl = el.dataset.apiUrl || "";
+      this.cursorParam = el.dataset.cursorParam || "before";
+      this.cursorField = el.dataset.cursorField || "before";
+      this.timelineId = el.dataset.timelineId || "";
 
+      // Parse extra params from JSON data attribute
       try {
-        const res = await fetch(
-          `${mountPath}/admin/reader/api/explore?${params.toString()}`,
-          { headers: { Accept: "application/json" } }
-        );
-
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-        const data = await res.json();
-
-        if (data.html && timeline) {
-          timeline.insertAdjacentHTML("beforeend", data.html);
-        }
-
-        if (data.maxId) {
-          this.maxId = data.maxId;
-        } else {
-          this.done = true;
-          if (this.observer) this.observer.disconnect();
-        }
-      } catch (err) {
-        console.error("[ap-explore-scroll] load failed:", err.message);
-      } finally {
-        this.loading = false;
+        this.extraParams = JSON.parse(el.dataset.extraParams || "{}");
+      } catch {
+        this.extraParams = {};
       }
-    },
-
-    destroy() {
-      if (this.observer) this.observer.disconnect();
-    },
-  }));
-
-  // eslint-disable-next-line no-undef
-  Alpine.data("apInfiniteScroll", () => ({
-    loading: false,
-    done: false,
-    before: null,
-    tab: "",
-    tag: "",
-    observer: null,
-
-    init() {
-      const el = this.$el;
-      this.before = el.dataset.before || null;
-      this.tab = el.dataset.tab || "";
-      this.tag = el.dataset.tag || "";
 
       // Hide the no-JS pagination fallback now that JS is active
-      const paginationEl =
-        document.getElementById("ap-reader-pagination") ||
-        document.getElementById("ap-tag-pagination");
-      if (paginationEl) {
-        paginationEl.style.display = "none";
+      const hideSel = el.dataset.hidePagination;
+      if (hideSel) {
+        const paginationEl = document.getElementById(hideSel);
+        if (paginationEl) paginationEl.style.display = "none";
       }
 
-      if (!this.before) {
+      if (!this.cursor) {
         this.done = true;
         return;
       }
@@ -129,7 +63,7 @@ document.addEventListener("alpine:init", () => {
             }
           }
         },
-        { rootMargin: "200px" }
+        { rootMargin: "200px" },
       );
 
       if (this.$refs.sentinel) {
@@ -138,36 +72,36 @@ document.addEventListener("alpine:init", () => {
     },
 
     async loadMore() {
-      if (this.loading || this.done || !this.before) return;
+      if (this.loading || this.done || !this.cursor) return;
 
       this.loading = true;
 
-      const timeline = document.getElementById("ap-timeline");
-      const mountPath = timeline ? timeline.dataset.mountPath : "";
-
-      const params = new URLSearchParams({ before: this.before });
-      if (this.tab) params.set("tab", this.tab);
-      if (this.tag) params.set("tag", this.tag);
+      const params = new URLSearchParams({
+        [this.cursorParam]: this.cursor,
+        ...this.extraParams,
+      });
 
       try {
         const res = await fetch(
-          `${mountPath}/admin/reader/api/timeline?${params.toString()}`,
-          { headers: { Accept: "application/json" } }
+          `${this.apiUrl}?${params.toString()}`,
+          { headers: { Accept: "application/json" } },
         );
 
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
         const data = await res.json();
 
+        const timeline = this.timelineId
+          ? document.getElementById(this.timelineId)
+          : null;
+
         if (data.html && timeline) {
-          // Append the returned pre-rendered HTML
           timeline.insertAdjacentHTML("beforeend", data.html);
         }
 
-        if (data.before) {
-          this.before = data.before;
+        if (data[this.cursorField]) {
+          this.cursor = data[this.cursorField];
         } else {
-          // No more items
           this.done = true;
           if (this.observer) this.observer.disconnect();
         }
@@ -178,10 +112,6 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
-    appendItems(/* detail */) {
-      // Custom event hook — not used in this implementation but kept for extensibility
-    },
-
     destroy() {
       if (this.observer) this.observer.disconnect();
     },

package/assets/reader-relative-time.js

@@ -0,0 +1,87 @@
+/**
+ * Relative timestamps — Alpine.js directive that converts absolute
+ * datetime attributes to human-friendly relative strings.
+ *
+ * Usage: <time datetime="2026-03-03T12:00:00Z" x-data x-relative-time>...</time>
+ *
+ * The server-rendered absolute time stays as fallback for no-JS clients.
+ * Alpine enhances it to relative on hydration, updates every 60s for
+ * recent posts, and shows the absolute time on hover via title attribute.
+ *
+ * Format rules (matching Mastodon/Elk conventions):
+ *   < 1 minute:   "just now"
+ *   < 60 minutes: "Xm"  (e.g. "5m")
+ *   < 24 hours:   "Xh"  (e.g. "3h")
+ *   < 7 days:     "Xd"  (e.g. "2d")
+ *   same year:    "Mar 3"
+ *   older:        "Mar 3, 2025"
+ */
+
+document.addEventListener("alpine:init", () => {
+  // eslint-disable-next-line no-undef
+  Alpine.directive("relative-time", (el) => {
+    const iso = el.getAttribute("datetime");
+    if (!iso) return;
+
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return;
+
+    // Store the original formatted text as the title (hover tooltip)
+    const original = el.textContent.trim();
+    if (original && !el.getAttribute("title")) {
+      el.setAttribute("title", original);
+    }
+
+    function update() {
+      el.textContent = formatRelative(date);
+    }
+
+    update();
+
+    // Only set up interval for recent posts (< 24h old)
+    const ageMs = Date.now() - date.getTime();
+    if (ageMs < 86_400_000) {
+      const interval = setInterval(() => {
+        update();
+        // Stop updating once older than 24h
+        if (Date.now() - date.getTime() >= 86_400_000) {
+          clearInterval(interval);
+        }
+      }, 60_000);
+    }
+  });
+});
+
+/**
+ * Format a Date as a relative time string.
+ * @param {Date} date
+ * @returns {string}
+ */
+function formatRelative(date) {
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 60) return "just now";
+
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m`;
+
+  const diffHour = Math.floor(diffMin / 60);
+  if (diffHour < 24) return `${diffHour}h`;
+
+  const diffDay = Math.floor(diffHour / 24);
+  if (diffDay < 7) return `${diffDay}d`;
+
+  // Older than 7 days — use formatted date
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+
+  if (date.getFullYear() === new Date().getFullYear()) {
+    return `${month} ${day}`;
+  }
+
+  return `${month} ${day}, ${date.getFullYear()}`;
+}

package/assets/reader.css

@@ -763,6 +763,14 @@
   opacity: 0.6;
 }
 
+/* Interaction counts */
+.ap-card__count {
+  font-size: var(--font-size-xs);
+  color: var(--color-on-offset);
+  margin-left: 0.25rem;
+  font-variant-numeric: tabular-nums;
+}
+
 /* Error message */
 .ap-card__action-error {
   color: var(--color-error);
@@ -2528,3 +2536,54 @@
   padding: var(--space-s) 0 var(--space-xs);
 }
 
+/* Custom emoji */
+.ap-custom-emoji {
+  height: 1.2em;
+  width: auto;
+  vertical-align: middle;
+  display: inline;
+  margin: 0 0.05em;
+}
+
+/* Gallery items — positioned for ALT badge overlay */
+.ap-card__gallery-item {
+  position: relative;
+}
+
+/* ALT text badges */
+.ap-media__alt-badge {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 700;
+  padding: 0.15rem 0.35rem;
+  border-radius: var(--border-radius-small);
+  border: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  z-index: 1;
+}
+
+.ap-media__alt-badge:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.ap-media__alt-text {
+  position: absolute;
+  bottom: 2.2rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  background: rgba(0, 0, 0, 0.85);
+  color: white;
+  font-size: var(--font-size-s);
+  padding: 0.5rem;
+  border-radius: var(--border-radius-small);
+  max-height: 8rem;
+  overflow-y: auto;
+  z-index: 2;
+}
+

package/lib/controllers/api-timeline.js

@@ -4,13 +4,7 @@
 
 import { getTimelineItems, countNewItems, markItemsRead } from "../storage/timeline.js";
 import { getToken, validateToken } from "../csrf.js";
-import {
-  getMutedUrls,
-  getMutedKeywords,
-  getBlockedUrls,
-  getFilterMode,
-} from "../storage/moderation.js";
-import { stripQuoteReferenceHtml } from "../og-unfurl.js";
+import { postProcessItems, applyTabFilter, loadModerationData, renderItemCards } from "../item-processing.js";
 
 export function apiTimelineController(mountPath) {
   return async (request, response, next) => {
@@ -26,7 +20,7 @@ export function apiTimelineController(mountPath) {
       const before = request.query.before;
       const limit = 20;
 
-      // Build storage query options (same logic as readerController)
+      // Build storage query options
       const unread = request.query.unread === "1";
       const options = { before, limit, unread };
 
@@ -45,132 +39,32 @@ export function apiTimelineController(mountPath) {
 
       const result = await getTimelineItems(collections, options);
 
-      // Client-side tab filtering for types not supported by storage
-      let items = result.items;
-      if (!tag) {
-        if (tab === "replies") {
-          items = items.filter((item) => item.inReplyTo);
-        } else if (tab === "media") {
-          items = items.filter(
-            (item) =>
-              (item.photo && item.photo.length > 0) ||
-              (item.video && item.video.length > 0) ||
-              (item.audio && item.audio.length > 0)
-          );
-        }
-      }
+      // Tab filtering for types not supported by storage layer
+      const tabFiltered = tag ? result.items : applyTabFilter(result.items, tab);
 
-      // Apply moderation filters
+      // Shared processing pipeline: moderation, quote stripping, interactions
       const modCollections = {
         ap_muted: application?.collections?.get("ap_muted"),
         ap_blocked: application?.collections?.get("ap_blocked"),
         ap_profile: application?.collections?.get("ap_profile"),
       };
-      const [mutedUrls, mutedKeywords, blockedUrls, filterMode] =
-        await Promise.all([
-          getMutedUrls(modCollections),
-          getMutedKeywords(modCollections),
-          getBlockedUrls(modCollections),
-          getFilterMode(modCollections),
-        ]);
-      const blockedSet = new Set(blockedUrls);
-      const mutedSet = new Set(mutedUrls);
-
-      if (blockedSet.size > 0 || mutedSet.size > 0 || mutedKeywords.length > 0) {
-        items = items.filter((item) => {
-          if (item.author?.url && blockedSet.has(item.author.url)) {
-            return false;
-          }
-
-          const isMutedActor = item.author?.url && mutedSet.has(item.author.url);
-          let matchedKeyword = null;
-          if (mutedKeywords.length > 0) {
-            const searchable = [item.content?.text, item.name, item.summary]
-              .filter(Boolean)
-              .join(" ")
-              .toLowerCase();
-            if (searchable) {
-              matchedKeyword = mutedKeywords.find((kw) =>
-                searchable.includes(kw.toLowerCase())
-              );
-            }
-          }
-
-          if (isMutedActor || matchedKeyword) {
-            if (filterMode === "warn") {
-              item._moderated = true;
-              item._moderationReason = isMutedActor ? "muted_account" : "muted_keyword";
-              if (matchedKeyword) item._moderationKeyword = matchedKeyword;
-              return true;
-            }
-            return false;
-          }
-
-          return true;
-        });
-      }
-
-      // Get interaction state
-      const interactionsCol = application?.collections?.get("ap_interactions");
-      const interactionMap = {};
-
-      if (interactionsCol) {
-        const lookupUrls = new Set();
-        const objectUrlToUid = new Map();
-        for (const item of items) {
-          const uid = item.uid;
-          const displayUrl = item.url || item.originalUrl;
-          if (uid) { lookupUrls.add(uid); objectUrlToUid.set(uid, uid); }
-          if (displayUrl) { lookupUrls.add(displayUrl); objectUrlToUid.set(displayUrl, uid || displayUrl); }
-        }
-        if (lookupUrls.size > 0) {
-          const interactions = await interactionsCol
-            .find({ objectUrl: { $in: [...lookupUrls] } })
-            .toArray();
-          for (const interaction of interactions) {
-            const key = objectUrlToUid.get(interaction.objectUrl) || interaction.objectUrl;
-            if (!interactionMap[key]) interactionMap[key] = {};
-            interactionMap[key][interaction.type] = true;
-          }
-        }
-      }
+      const moderation = await loadModerationData(modCollections);
 
-      // Strip "RE:" paragraphs from items that have quote embeds
-      for (const item of items) {
-        const quoteRef = item.quoteUrl || item.quote?.url || item.quote?.uid;
-        if (item.quote && quoteRef && item.content?.html) {
-          item.content.html = stripQuoteReferenceHtml(item.content.html, quoteRef);
-        }
-      }
+      const { items, interactionMap } = await postProcessItems(tabFiltered, {
+        moderation,
+        interactionsCol: application?.collections?.get("ap_interactions"),
+      });
 
       const csrfToken = getToken(request.session);
-
-      // Render each card server-side using the same Nunjucks template
-      // Merge response.locals so that i18n (__), mountPath, etc. are available
-      const templateData = {
+      const html = await renderItemCards(items, request, {
         ...response.locals,
         mountPath,
         csrfToken,
         interactionMap,
-      };
-
-      const htmlParts = await Promise.all(
-        items.map((item) => {
-          return new Promise((resolve, reject) => {
-            request.app.render(
-              "partials/ap-item-card.njk",
-              { ...templateData, item },
-              (err, html) => {
-                if (err) reject(err);
-                else resolve(html);
-              }
-            );
-          });
-        })
-      );
+      });
 
       response.json({
-        html: htmlParts.join(""),
+        html,
         before: result.before,
       });
     } catch (error) {

package/lib/controllers/explore-utils.js

@@ -84,7 +84,14 @@ export function mapMastodonStatusToItem(status, instance) {
     const url = att.url || att.remote_url || "";
     if (!url) continue;
     if (att.type === "image" || att.type === "gifv") {
-      photo.push(url);
+      photo.push({
+        url,
+        alt: att.description || "",
+        width: att.meta?.original?.width || null,
+        height: att.meta?.original?.height || null,
+        blurhash: att.blurhash || "",
+        focus: att.meta?.focus || null,
+      });
     } else if (att.type === "video") {
       video.push(url);
     } else if (att.type === "audio") {
@@ -92,6 +99,14 @@ export function mapMastodonStatusToItem(status, instance) {
     }
   }
 
+  // Extract custom emoji — Mastodon API provides emojis on both status and account
+  const emojis = (status.emojis || [])
+    .filter((e) => e.shortcode && e.url)
+    .map((e) => ({ shortcode: e.shortcode, url: e.url }));
+  const authorEmojis = (account.emojis || [])
+    .filter((e) => e.shortcode && e.url)
+    .map((e) => ({ shortcode: e.shortcode, url: e.url }));
+
   const item = {
     uid: status.url || status.uri || "",
     url: status.url || status.uri || "",
@@ -109,13 +124,20 @@ export function mapMastodonStatusToItem(status, instance) {
       url: account.url || "",
       photo: account.avatar || account.avatar_static || "",
       handle,
+      emojis: authorEmojis,
     },
     category,
     mentions,
+    emojis,
     photo,
     video,
     audio,
     inReplyTo: status.in_reply_to_id ? `https://${instance}/web/statuses/${status.in_reply_to_id}` : "",
+    counts: {
+      replies: status.replies_count ?? null,
+      boosts: status.reblogs_count ?? null,
+      likes: status.favourites_count ?? null,
+    },
     createdAt: new Date().toISOString(),
     _explore: true,
   };
@@ -134,7 +156,12 @@ export function mapMastodonStatusToItem(status, instance) {
     for (const att of q.media_attachments || []) {
       const attUrl = att.url || att.remote_url || "";
       if (attUrl && (att.type === "image" || att.type === "gifv")) {
-        qPhoto.push(attUrl);
+        qPhoto.push({
+          url: attUrl,
+          alt: att.description || "",
+          width: att.meta?.original?.width || null,
+          height: att.meta?.original?.height || null,
+        });
       }
     }