@rmdes/indiekit-endpoint-activitypub 2.5.0 → 2.5.5

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-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);
@@ -1587,6 +1595,81 @@
   cursor: pointer;
 }
 
+/* ==========================================================================
+   Skeleton Loaders
+   ========================================================================== */
+
+@keyframes ap-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.ap-skeleton {
+  background: linear-gradient(90deg,
+    var(--color-offset) 25%,
+    var(--color-background) 50%,
+    var(--color-offset) 75%);
+  background-size: 200% 100%;
+  animation: ap-skeleton-shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--border-radius-small);
+}
+
+.ap-card--skeleton {
+  pointer-events: none;
+}
+
+.ap-card--skeleton .ap-card__author {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+}
+
+.ap-skeleton--avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.ap-skeleton-lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.ap-skeleton--name {
+  height: 0.85rem;
+  width: 40%;
+}
+
+.ap-skeleton--handle {
+  height: 0.7rem;
+  width: 25%;
+}
+
+.ap-skeleton-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: var(--space-s);
+}
+
+.ap-skeleton--line {
+  height: 0.75rem;
+  width: 100%;
+}
+
+.ap-skeleton--short {
+  width: 60%;
+}
+
+.ap-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+}
+
 /* ==========================================================================
    Responsive
    ========================================================================== */
@@ -2528,3 +2611,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/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,
+        });
       }
     }
 

package/lib/emoji-utils.js

@@ -0,0 +1,38 @@
+/**
+ * Custom emoji replacement for fediverse content.
+ *
+ * Replaces :shortcode: patterns with <img> tags for custom emoji.
+ * Must be called AFTER sanitizeContent() — the inserted <img> tags
+ * would be stripped if run through the sanitizer.
+ */
+
+/**
+ * Escape special regex characters in a string.
+ * @param {string} str
+ * @returns {string}
+ */
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Replace :shortcode: patterns in HTML with custom emoji <img> tags.
+ *
+ * @param {string} html - HTML string (already sanitized)
+ * @param {Array<{shortcode: string, url: string}>} emojis - Custom emoji list
+ * @returns {string} HTML with emoji shortcodes replaced by img tags
+ */
+export function replaceCustomEmoji(html, emojis) {
+  if (!html || !emojis?.length) return html;
+
+  for (const emoji of emojis) {
+    if (!emoji.shortcode || !emoji.url) continue;
+    const pattern = new RegExp(`:${escapeRegex(emoji.shortcode)}:`, "g");
+    html = html.replace(
+      pattern,
+      `<img src="${emoji.url}" alt=":${emoji.shortcode}:" title=":${emoji.shortcode}:" class="ap-custom-emoji" loading="lazy">`,
+    );
+  }
+
+  return html;
+}

package/lib/item-processing.js

@@ -7,6 +7,7 @@
  */
 
 import { stripQuoteReferenceHtml } from "./og-unfurl.js";
+import { replaceCustomEmoji } from "./emoji-utils.js";
 
 /**
  * Post-process timeline items for rendering.
@@ -27,7 +28,10 @@ export async function postProcessItems(items, options = {}) {
   // 2. Strip "RE:" paragraphs from items with quote embeds
   stripQuoteReferences(items);
 
-  // 3. Build interaction map (likes/boosts) — empty when no collection
+  // 3. Replace custom emoji shortcodes with <img> tags
+  applyCustomEmoji(items);
+
+  // 4. Build interaction map (likes/boosts) — empty when no collection
   const interactionMap = options.interactionsCol
     ? await buildInteractionMap(items, options.interactionsCol)
     : {};
@@ -111,6 +115,45 @@ export function stripQuoteReferences(items) {
   }
 }
 
+/**
+ * Replace custom emoji :shortcode: patterns with <img> tags.
+ * Handles both content HTML and display names.
+ * Mutates items in place.
+ *
+ * @param {Array} items
+ */
+function applyCustomEmoji(items) {
+  for (const item of items) {
+    // Replace emoji in post content
+    if (item.emojis?.length && item.content?.html) {
+      item.content.html = replaceCustomEmoji(item.content.html, item.emojis);
+    }
+
+    // Replace emoji in author display name → stored as author.nameHtml
+    const authorEmojis = item.author?.emojis;
+    if (authorEmojis?.length && item.author?.name) {
+      item.author.nameHtml = replaceCustomEmoji(item.author.name, authorEmojis);
+    }
+
+    // Replace emoji in boostedBy display name
+    const boostEmojis = item.boostedBy?.emojis;
+    if (boostEmojis?.length && item.boostedBy?.name) {
+      item.boostedBy.nameHtml = replaceCustomEmoji(item.boostedBy.name, boostEmojis);
+    }
+
+    // Replace emoji in quote embed content and author name
+    if (item.quote) {
+      if (item.quote.emojis?.length && item.quote.content?.html) {
+        item.quote.content.html = replaceCustomEmoji(item.quote.content.html, item.quote.emojis);
+      }
+      const qAuthorEmojis = item.quote.author?.emojis;
+      if (qAuthorEmojis?.length && item.quote.author?.name) {
+        item.quote.author.nameHtml = replaceCustomEmoji(item.quote.author.name, qAuthorEmojis);
+      }
+    }
+  }
+}
+
 /**
  * Build interaction map (likes/boosts) for template rendering.
  * Returns { [uid]: { like: true, boost: true } }.

package/lib/timeline-store.js

@@ -3,7 +3,7 @@
  * @module timeline-store
  */
 
-import { Article, Hashtag, Mention } from "@fedify/fedify/vocab";
+import { Article, Emoji, Hashtag, Mention } from "@fedify/fedify/vocab";
 import sanitizeHtml from "sanitize-html";
 
 /**
@@ -82,7 +82,26 @@ export async function extractActorInfo(actor, options = {}) {
     // Invalid URL, keep handle empty
   }
 
-  return { name, url, photo, handle };
+  // Extract custom emoji from actor tags
+  const emojis = [];
+  try {
+    if (typeof actor.getTags === "function") {
+      const tags = await actor.getTags(loaderOpts);
+      for await (const tag of tags) {
+        if (tag instanceof Emoji) {
+          const shortcode = (tag.name?.toString() || "").replace(/^:|:$/g, "");
+          const iconUrl = tag.iconId?.href || "";
+          if (shortcode && iconUrl) {
+            emojis.push({ shortcode, url: iconUrl });
+          }
+        }
+      }
+    }
+  } catch {
+    // Emoji extraction failed — non-critical
+  }
+
+  return { name, url, photo, handle, emojis };
 }
 
 /**
@@ -190,8 +209,10 @@ export async function extractObjectData(object, options = {}) {
   // Extract tags — Fedify uses async getTags() which returns typed vocab objects.
   // Hashtag → category[] (plain strings, # prefix stripped)
   // Mention → mentions[] ({ name, url } objects for profile linking)
+  // Emoji → emojis[] ({ shortcode, url } for custom emoji rendering)
   const category = [];
   const mentions = [];
+  const emojis = [];
   try {
     if (typeof object.getTags === "function") {
       const tags = await object.getTags(loaderOpts);
@@ -206,6 +227,13 @@ export async function extractObjectData(object, options = {}) {
           // tag.href is a URL object — use .href to get the string
           const mentionUrl = tag.href?.href || "";
           if (mentionName) mentions.push({ name: mentionName, url: mentionUrl });
+        } else if (tag instanceof Emoji) {
+          // Custom emoji: name is ":shortcode:", icon is an Image with url
+          const shortcode = (tag.name?.toString() || "").replace(/^:|:$/g, "");
+          const iconUrl = tag.iconId?.href || "";
+          if (shortcode && iconUrl) {
+            emojis.push({ shortcode, url: iconUrl });
+          }
         }
       }
     }
@@ -228,7 +256,12 @@ export async function extractObjectData(object, options = {}) {
         const mediaType = att.mediaType?.toLowerCase() || "";
 
         if (mediaType.startsWith("image/")) {
-          photo.push(mediaUrl);
+          photo.push({
+            url: mediaUrl,
+            alt: att.name?.toString() || "",
+            width: att.width || null,
+            height: att.height || null,
+          });
         } else if (mediaType.startsWith("video/")) {
           video.push(mediaUrl);
         } else if (mediaType.startsWith("audio/")) {
@@ -246,6 +279,21 @@ export async function extractObjectData(object, options = {}) {
   // Quote URL — Fedify reads quoteUrl / _misskey_quote / quoteUri
   const quoteUrl = object.quoteUrl?.href || "";
 
+  // Interaction counts — extract from AP Collection objects
+  const counts = { replies: null, boosts: null, likes: null };
+  try {
+    const replies = await object.getReplies?.(loaderOpts);
+    if (replies?.totalItems != null) counts.replies = replies.totalItems;
+  } catch { /* ignore — collection may not exist */ }
+  try {
+    const likes = await object.getLikes?.(loaderOpts);
+    if (likes?.totalItems != null) counts.likes = likes.totalItems;
+  } catch { /* ignore */ }
+  try {
+    const shares = await object.getShares?.(loaderOpts);
+    if (shares?.totalItems != null) counts.boosts = shares.totalItems;
+  } catch { /* ignore */ }
+
   // Build base timeline item
   const item = {
     uid,
@@ -259,11 +307,13 @@ export async function extractObjectData(object, options = {}) {
     author,
     category,
     mentions,
+    emojis,
     photo,
     video,
     audio,
     inReplyTo,
     quoteUrl,
+    counts,
     createdAt: new Date().toISOString()
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.5.0",
+  "version": "2.5.5",
   "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-explore.njk

@@ -256,10 +256,14 @@
               x-data="apInfiniteScroll()"
               x-init="init()">
               <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
-              <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
-                <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
-                <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
+              <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
+                {{ __("activitypub.reader.pagination.loadMore") }}
               </button>
+              <div class="ap-skeleton-group" x-show="loading" x-cloak>
+                {% include "partials/ap-skeleton-card.njk" %}
+                {% include "partials/ap-skeleton-card.njk" %}
+                {% include "partials/ap-skeleton-card.njk" %}
+              </div>
               <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
             </div>
           {% endif %}
@@ -283,10 +287,12 @@
         <template x-if="tab.type === 'instance'">
           <div class="ap-explore-instance-panel">
 
-            {# Loading spinner — first load, no content yet #}
-            <div class="ap-explore-tab-loading"
+            {# Skeleton loaders — first load, no content yet #}
+            <div class="ap-skeleton-group"
               x-show="tabState[tab._id] && tabState[tab._id].loading && !tabState[tab._id].html">
-              <span class="ap-explore-tab-loading__text">{{ __("activitypub.reader.pagination.loading") }}</span>
+              {% include "partials/ap-skeleton-card.njk" %}
+              {% include "partials/ap-skeleton-card.njk" %}
+              {% include "partials/ap-skeleton-card.njk" %}
             </div>
 
             {# Error state with retry #}
@@ -304,7 +310,7 @@
               x-html="tabState[tab._id] ? tabState[tab._id].html : ''">
             </div>
 
-            {# Load more button + loading spinner for subsequent pages #}
+            {# Load more button + skeleton loaders for subsequent pages #}
             <div class="ap-load-more"
               x-show="tabState[tab._id] && tabState[tab._id].html && !tabState[tab._id].done">
               <button class="ap-load-more__btn"
@@ -313,10 +319,11 @@
                 :disabled="tabState[tab._id]?.loading">
                 {{ __("activitypub.reader.pagination.loadMore") }}
               </button>
-              <span class="ap-explore-tab-loading__text"
+              <div class="ap-skeleton-group"
                 x-show="tabState[tab._id]?.loading">
-                {{ __("activitypub.reader.pagination.loading") }}
-              </span>
+                {% include "partials/ap-skeleton-card.njk" %}
+                {% include "partials/ap-skeleton-card.njk" %}
+              </div>
             </div>
 
             {# Empty state — loaded successfully but no posts #}
@@ -347,10 +354,12 @@
               x-text="hashtagSourcesLine(tab)"
               x-cloak></p>
 
-            {# Loading spinner — first load, no content yet #}
-            <div class="ap-explore-tab-loading"
+            {# Skeleton loaders — first load, no content yet #}
+            <div class="ap-skeleton-group"
               x-show="tabState[tab._id] && tabState[tab._id].loading && !tabState[tab._id].html">
-              <span class="ap-explore-tab-loading__text">{{ __("activitypub.reader.pagination.loading") }}</span>
+              {% include "partials/ap-skeleton-card.njk" %}
+              {% include "partials/ap-skeleton-card.njk" %}
+              {% include "partials/ap-skeleton-card.njk" %}
             </div>
 
             {# Error state with retry #}
@@ -368,7 +377,7 @@
               x-html="tabState[tab._id] ? tabState[tab._id].html : ''">
             </div>
 
-            {# Load more button + loading spinner for subsequent pages #}
+            {# Load more button + skeleton loaders for subsequent pages #}
             <div class="ap-load-more"
               x-show="tabState[tab._id] && tabState[tab._id].html && !tabState[tab._id].done">
               <button class="ap-load-more__btn"
@@ -377,10 +386,11 @@
                 :disabled="tabState[tab._id]?.loading">
                 {{ __("activitypub.reader.pagination.loadMore") }}
               </button>
-              <span class="ap-explore-tab-loading__text"
+              <div class="ap-skeleton-group"
                 x-show="tabState[tab._id]?.loading">
-                {{ __("activitypub.reader.pagination.loading") }}
-              </span>
+                {% include "partials/ap-skeleton-card.njk" %}
+                {% include "partials/ap-skeleton-card.njk" %}
+              </div>
             </div>
 
             {# Empty state — no instance tabs pinned yet #}

package/views/activitypub-reader.njk

@@ -150,10 +150,14 @@
         x-data="apInfiniteScroll()"
         x-init="init()">
         <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
-        <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
-          <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
-          <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
+        <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
+          {{ __("activitypub.reader.pagination.loadMore") }}
         </button>
+        <div class="ap-skeleton-group" x-show="loading" x-cloak>
+          {% include "partials/ap-skeleton-card.njk" %}
+          {% include "partials/ap-skeleton-card.njk" %}
+          {% include "partials/ap-skeleton-card.njk" %}
+        </div>
         <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
       </div>
     {% endif %}

package/views/activitypub-tag-timeline.njk

@@ -75,10 +75,14 @@
         x-data="apInfiniteScroll()"
         x-init="init()">
         <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
-        <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
-          <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
-          <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
+        <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
+          {{ __("activitypub.reader.pagination.loadMore") }}
         </button>
+        <div class="ap-skeleton-group" x-show="loading" x-cloak>
+          {% include "partials/ap-skeleton-card.njk" %}
+          {% include "partials/ap-skeleton-card.njk" %}
+          {% include "partials/ap-skeleton-card.njk" %}
+        </div>
         <p class="ap-load-more__done" x-show="done">{{ __("activitypub.reader.pagination.noMore") }}</p>
       </div>
     {% endif %}

package/views/layouts/ap-reader.njk

@@ -7,6 +7,8 @@
   <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-autocomplete.js"></script>
   {# Tab components — apExploreTabs #}
   <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-tabs.js"></script>
+  {# 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>

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

@@ -26,7 +26,7 @@
   {# Boost header if this is a boosted post #}
   {% if item.type == "boost" and item.boostedBy %}
     <div class="ap-card__boost">
-      🔁 {% if item.boostedBy.url %}<a href="{{ mountPath }}/admin/reader/profile?url={{ item.boostedBy.url | urlencode }}">{{ item.boostedBy.name or "Someone" }}</a>{% else %}{{ item.boostedBy.name or "Someone" }}{% endif %} {{ __("activitypub.reader.boosted") }}
+      🔁 {% if item.boostedBy.url %}<a href="{{ mountPath }}/admin/reader/profile?url={{ item.boostedBy.url | urlencode }}">{% if item.boostedBy.nameHtml %}{{ item.boostedBy.nameHtml | safe }}{% else %}{{ item.boostedBy.name or "Someone" }}{% endif %}</a>{% else %}{% if item.boostedBy.nameHtml %}{{ item.boostedBy.nameHtml | safe }}{% else %}{{ item.boostedBy.name or "Someone" }}{% endif %}{% endif %} {{ __("activitypub.reader.boosted") }}
     </div>
   {% endif %}
 
@@ -49,9 +49,9 @@
     <div class="ap-card__author-info">
       <div class="ap-card__author-name">
         {% if item.author.url %}
-          <a href="{{ mountPath }}/admin/reader/profile?url={{ item.author.url | urlencode }}">{{ item.author.name or "Unknown" }}</a>
+          <a href="{{ mountPath }}/admin/reader/profile?url={{ item.author.url | urlencode }}">{% if item.author.nameHtml %}{{ item.author.nameHtml | safe }}{% else %}{{ item.author.name or "Unknown" }}{% endif %}</a>
         {% else %}
-          <span>{{ item.author.name or "Unknown" }}</span>
+          <span>{% if item.author.nameHtml %}{{ item.author.nameHtml | safe }}{% else %}{{ item.author.name or "Unknown" }}{% endif %}</span>
         {% endif %}
       </div>
       {% if item.author.handle %}
@@ -60,7 +60,7 @@
     </div>
     {% if item.published %}
       <a href="{{ mountPath }}/admin/reader/post?url={{ (item.uid or item.url) | urlencode }}" class="ap-card__timestamp-link" title="{{ __('activitypub.reader.post.title') }}">
-        <time datetime="{{ item.published }}" class="ap-card__timestamp">
+        <time datetime="{{ item.published }}" class="ap-card__timestamp" x-data x-relative-time>
           {{ item.published | date("PPp") }}
         </time>
       </a>
@@ -149,6 +149,9 @@
   {% set itemUid = item.uid or item.url or item.originalUrl %}
   {% set isLiked = interactionMap[itemUid].like if interactionMap[itemUid] else false %}
   {% set isBoosted = interactionMap[itemUid].boost if interactionMap[itemUid] else false %}
+  {% set replyCount = item.counts.replies if item.counts and item.counts.replies != null else null %}
+  {% set boostCount = item.counts.boosts if item.counts and item.counts.boosts != null else null %}
+  {% set likeCount = item.counts.likes if item.counts and item.counts.likes != null else null %}
   <footer class="ap-card__actions"
     data-item-uid="{{ itemUid }}"
     data-item-url="{{ itemUrl }}"
@@ -160,6 +163,8 @@
       saved: false,
       loading: false,
       error: '',
+      boostCount: {{ boostCount if boostCount != null else 'null' }},
+      likeCount: {{ likeCount if likeCount != null else 'null' }},
       async saveLater() {
         if (this.saved) return;
         const el = this.$root;
@@ -190,11 +195,11 @@
         const itemUid = el.dataset.itemUid;
         const csrfToken = el.dataset.csrfToken;
         const basePath = el.dataset.mountPath;
-        const prev = { liked: this.liked, boosted: this.boosted };
-        if (action === 'like') this.liked = true;
-        else if (action === 'unlike') this.liked = false;
-        else if (action === 'boost') this.boosted = true;
-        else if (action === 'unboost') this.boosted = false;
+        const prev = { liked: this.liked, boosted: this.boosted, boostCount: this.boostCount, likeCount: this.likeCount };
+        if (action === 'like') { this.liked = true; if (this.likeCount !== null) this.likeCount++; }
+        else if (action === 'unlike') { this.liked = false; if (this.likeCount !== null && this.likeCount > 0) this.likeCount--; }
+        else if (action === 'boost') { this.boosted = true; if (this.boostCount !== null) this.boostCount++; }
+        else if (action === 'unboost') { this.boosted = false; if (this.boostCount !== null && this.boostCount > 0) this.boostCount--; }
         try {
           const res = await fetch(basePath + '/admin/reader/' + action, {
             method: 'POST',
@@ -208,11 +213,15 @@
           if (!data.success) {
             this.liked = prev.liked;
             this.boosted = prev.boosted;
+            this.boostCount = prev.boostCount;
+            this.likeCount = prev.likeCount;
             this.error = data.error || 'Failed';
           }
         } catch (e) {
           this.liked = prev.liked;
           this.boosted = prev.boosted;
+          this.boostCount = prev.boostCount;
+          this.likeCount = prev.likeCount;
           this.error = e.message;
         }
         this.loading = false;
@@ -222,14 +231,14 @@
     <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ itemUid | urlencode }}"
        class="ap-card__action ap-card__action--reply"
        title="{{ __('activitypub.reader.actions.reply') }}">
-      ↩ {{ __("activitypub.reader.actions.reply") }}
+      ↩ {{ __("activitypub.reader.actions.reply") }}{% if replyCount != null %}<span class="ap-card__count">{{ replyCount }}</span>{% endif %}
     </a>
     <button class="ap-card__action ap-card__action--boost"
       :class="{ 'ap-card__action--active': boosted }"
       :title="boosted ? '{{ __('activitypub.reader.actions.unboost') }}' : '{{ __('activitypub.reader.actions.boost') }}'"
       :disabled="loading"
       @click="interact(boosted ? 'unboost' : 'boost')">
-      🔁 <span x-text="boosted ? '{{ __('activitypub.reader.actions.boosted') }}' : '{{ __('activitypub.reader.actions.boost') }}'"></span>
+      🔁 <span x-text="boosted ? '{{ __('activitypub.reader.actions.boosted') }}' : '{{ __('activitypub.reader.actions.boost') }}'"></span><template x-if="boostCount !== null"><span class="ap-card__count" x-text="boostCount"></span></template>
     </button>
     <button class="ap-card__action ap-card__action--like"
       :class="{ 'ap-card__action--active': liked }"
@@ -237,7 +246,7 @@
       :disabled="loading"
       @click="interact(liked ? 'unlike' : 'like')">
       <span x-text="liked ? '❤️' : '♥'"></span>
-      <span x-text="liked ? '{{ __('activitypub.reader.actions.liked') }}' : '{{ __('activitypub.reader.actions.like') }}'"></span>
+      <span x-text="liked ? '{{ __('activitypub.reader.actions.liked') }}' : '{{ __('activitypub.reader.actions.like') }}'"></span><template x-if="likeCount !== null"><span class="ap-card__count" x-text="likeCount"></span></template>
     </button>
     <a href="{{ itemUrl }}" class="ap-card__action ap-card__action--link" target="_blank" rel="noopener">
       🔗 {{ __("activitypub.reader.actions.viewOriginal") }}

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

@@ -6,14 +6,23 @@
   {% 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 }}">
-    {% for photoUrl in item.photo %}
+    {% for photo in item.photo %}
+      {# Support both old string format and new object format #}
+      {% set photoSrc = photo.url if photo.url else photo %}
+      {% set photoAlt = photo.alt if photo.alt else "" %}
       {% if loop.index0 < 4 %}
-        <button type="button" @click="idx = {{ loop.index0 }}; lightbox = true" class="ap-card__gallery-link{% if loop.index0 == 3 and extraCount > 0 %} ap-card__gallery-link--more{% endif %}">
-          <img src="{{ photoUrl }}" alt="" loading="lazy">
-          {% if loop.index0 == 3 and extraCount > 0 %}
-            <span class="ap-card__gallery-more">+{{ extraCount }}</span>
+        <div class="ap-card__gallery-item" x-data="{ showAlt: false }">
+          <button type="button" @click="idx = {{ loop.index0 }}; lightbox = true" class="ap-card__gallery-link{% if loop.index0 == 3 and extraCount > 0 %} ap-card__gallery-link--more{% endif %}">
+            <img src="{{ photoSrc }}" alt="{{ photoAlt }}" loading="lazy">
+            {% if loop.index0 == 3 and extraCount > 0 %}
+              <span class="ap-card__gallery-more">+{{ extraCount }}</span>
+            {% endif %}
+          </button>
+          {% if photoAlt %}
+            <button type="button" class="ap-media__alt-badge" @click.stop="showAlt = !showAlt" :aria-expanded="showAlt">ALT</button>
+            <div class="ap-media__alt-text" x-show="showAlt" x-cloak @click.stop>{{ photoAlt }}</div>
           {% endif %}
-        </button>
+        </div>
       {% endif %}
     {% endfor %}
 
@@ -24,7 +33,9 @@
         {% if totalPhotos > 1 %}
           <button type="button" @click="idx = (idx - 1 + {{ totalPhotos }}) % {{ totalPhotos }}" class="ap-lightbox__prev" aria-label="Previous image">&lsaquo;</button>
         {% endif %}
-        <img :src="[{% for p in item.photo %}'{{ p }}'{% if not loop.last %},{% endif %}{% endfor %}][idx]" class="ap-lightbox__img" alt="">
+        <img :src="[{% for photo in item.photo %}'{{ photo.url if photo.url else photo }}'{% if not loop.last %},{% endif %}{% endfor %}][idx]"
+             :alt="[{% for photo in item.photo %}'{{ (photo.alt if photo.alt else '') | replace(\"'\", \"\\'\") }}'{% if not loop.last %},{% endif %}{% endfor %}][idx]"
+             class="ap-lightbox__img">
         {% if totalPhotos > 1 %}
           <button type="button" @click="idx = (idx + 1) % {{ totalPhotos }}" class="ap-lightbox__next" aria-label="Next image">&rsaquo;</button>
           <div class="ap-lightbox__counter" x-text="(idx + 1) + ' / ' + {{ totalPhotos }}"></div>

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

@@ -68,7 +68,7 @@
 
   {# Timestamp #}
   {% if item.published %}
-    <time datetime="{{ item.published }}" class="ap-notification__time">
+    <time datetime="{{ item.published }}" class="ap-notification__time" x-data x-relative-time>
       {{ item.published | date("PPp") }}
     </time>
   {% endif %}

package/views/partials/ap-quote-embed.njk

@@ -9,13 +9,13 @@
           <span class="ap-quote-embed__avatar ap-quote-embed__avatar--default">{{ item.quote.author.name[0] | upper if item.quote.author.name else "?" }}</span>
         {% endif %}
         <div class="ap-quote-embed__author-info">
-          <div class="ap-quote-embed__name">{{ item.quote.author.name or "Unknown" }}</div>
+          <div class="ap-quote-embed__name">{% if item.quote.author.nameHtml %}{{ item.quote.author.nameHtml | safe }}{% else %}{{ item.quote.author.name or "Unknown" }}{% endif %}</div>
           {% if item.quote.author.handle %}
             <div class="ap-quote-embed__handle">{{ item.quote.author.handle }}</div>
           {% endif %}
         </div>
         {% if item.quote.published %}
-          <time datetime="{{ item.quote.published }}" class="ap-quote-embed__time">{{ item.quote.published | date("PPp") }}</time>
+          <time datetime="{{ item.quote.published }}" class="ap-quote-embed__time" x-data x-relative-time>{{ item.quote.published | date("PPp") }}</time>
         {% endif %}
       </header>
       {% if item.quote.name %}
@@ -25,8 +25,9 @@
         <div class="ap-quote-embed__content">{{ item.quote.content.html | safe }}</div>
       {% endif %}
       {% if item.quote.photo and item.quote.photo.length > 0 %}
+        {% set qPhoto = item.quote.photo[0] %}
         <div class="ap-quote-embed__media">
-          <img src="{{ item.quote.photo[0] }}" alt="" loading="lazy" class="ap-quote-embed__photo">
+          <img src="{{ qPhoto.url if qPhoto.url else qPhoto }}" alt="{{ qPhoto.alt if qPhoto.alt else '' }}" loading="lazy" class="ap-quote-embed__photo">
         </div>
       {% endif %}
     </a>

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

@@ -0,0 +1,15 @@
+{# Skeleton loading card — animated placeholder while content loads #}
+<div class="ap-card ap-card--skeleton" aria-hidden="true">
+  <header class="ap-card__author">
+    <div class="ap-skeleton ap-skeleton--avatar"></div>
+    <div class="ap-skeleton-lines">
+      <div class="ap-skeleton ap-skeleton--name"></div>
+      <div class="ap-skeleton ap-skeleton--handle"></div>
+    </div>
+  </header>
+  <div class="ap-skeleton-body">
+    <div class="ap-skeleton ap-skeleton--line"></div>
+    <div class="ap-skeleton ap-skeleton--line"></div>
+    <div class="ap-skeleton ap-skeleton--line ap-skeleton--short"></div>
+  </div>
+</div>