@rmdes/indiekit-endpoint-activitypub 1.1.12 → 1.1.14

package/views/activitypub-post-detail.njk

@@ -0,0 +1,61 @@
+{% extends "layouts/ap-reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+
+{% block readercontent %}
+  {{ heading({
+    text: title,
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  <div class="ap-post-detail" data-mount-path="{{ mountPath }}">
+    {# Back button #}
+    <div class="ap-post-detail__back">
+      <a href="{{ mountPath }}/admin/reader" class="ap-post-detail__back-link">
+        ← {{ __("activitypub.reader.post.back") }}
+      </a>
+    </div>
+
+    {% if notFound %}
+      {# Post not found — show message with external link #}
+      <div class="ap-post-detail__not-found">
+        <p>{{ __("activitypub.reader.post.notFound") }}</p>
+        {% if objectUrl %}
+          <p><a href="{{ objectUrl }}" target="_blank" rel="noopener noreferrer">{{ __("activitypub.reader.post.openExternal") }} →</a></p>
+        {% endif %}
+      </div>
+    {% else %}
+      {# Parent posts (thread context above main post) #}
+      {% if parentPosts and parentPosts.length > 0 %}
+        <div class="ap-post-detail__parents">
+          <h2 class="ap-post-detail__section-title">{{ __("activitypub.reader.post.parentPosts") }}</h2>
+          {% for parentItem in parentPosts %}
+            {% set item = parentItem %}
+            <div class="ap-post-detail__parent-item">
+              {% include "partials/ap-item-card.njk" %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endif %}
+
+      {# Main post #}
+      <div class="ap-post-detail__main">
+        {% include "partials/ap-item-card.njk" %}
+      </div>
+
+      {# Replies (below main post) #}
+      {% if replyPosts and replyPosts.length > 0 %}
+        <div class="ap-post-detail__replies">
+          <h2 class="ap-post-detail__section-title">{{ __("activitypub.reader.post.replies") }}</h2>
+          {% for replyItem in replyPosts %}
+            {% set item = replyItem %}
+            <div class="ap-post-detail__reply-item">
+              {% include "partials/ap-item-card.njk" %}
+            </div>
+          {% endfor %}
+        </div>
+      {% endif %}
+    {% endif %}
+  </div>
+{% endblock %}

package/views/activitypub-reader.njk

@@ -34,7 +34,7 @@
 
   {# Timeline items #}
   {% if items.length > 0 %}
-    <div class="ap-timeline">
+    <div class="ap-timeline" data-mount-path="{{ mountPath }}">
       {% for item in items %}
         {% include "partials/ap-item-card.njk" %}
       {% endfor %}

package/views/activitypub-remote-profile.njk

@@ -46,7 +46,8 @@
     <div class="ap-profile__info">
       <div class="ap-profile__avatar-wrap">
         {% if icon %}
-          <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar">
+          <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>
         {% endif %}

package/views/layouts/ap-reader.njk

@@ -6,6 +6,10 @@
 
   {# Reader stylesheet — loaded in body is fine for modern browsers #}
   <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader.css">
+  <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader-links.css">
+
+  {# AP link interception for internal navigation #}
+  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-links.js"></script>
 
   {% block readercontent %}
   {% endblock %}

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

@@ -17,14 +17,15 @@
   {# Reply context if this is a reply #}
   {% if item.inReplyTo %}
     <div class="ap-card__reply-to">
-      ↩ {{ __("activitypub.reader.replyingTo") }} <a href="{{ item.inReplyTo }}">{{ item.inReplyTo }}</a>
+      ↩ {{ __("activitypub.reader.replyingTo") }} <a href="{{ mountPath }}/admin/reader/post?url={{ item.inReplyTo | urlencode }}">{{ item.inReplyTo }}</a>
     </div>
   {% endif %}
 
   {# 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">
+      <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar"
+        onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'ap-card__avatar ap-card__avatar--default',textContent:'{{ item.author.name[0] | upper if item.author.name else "?" }}'}))">
     {% else %}
       <span class="ap-card__avatar ap-card__avatar--default" aria-hidden="true">{{ item.author.name[0] | upper if item.author.name else "?" }}</span>
     {% endif %}
@@ -50,7 +51,7 @@
   {# Post title (articles only) #}
   {% if item.name %}
     <h2 class="ap-card__title">
-      <a href="{{ item.url }}">{{ item.name }}</a>
+      <a href="{{ mountPath }}/admin/reader/post?url={{ item.uid | urlencode }}">{{ item.name }}</a>
     </h2>
   {% endif %}
 
@@ -71,6 +72,9 @@
           </div>
         {% endif %}
 
+        {# Link previews #}
+        {% include "partials/ap-link-preview.njk" %}
+
         {# Media hidden behind CW #}
         {% include "partials/ap-item-media.njk" %}
       </div>
@@ -83,6 +87,9 @@
       </div>
     {% endif %}
 
+    {# Link previews #}
+    {% include "partials/ap-link-preview.njk" %}
+
     {# Media visible directly #}
     {% include "partials/ap-item-media.njk" %}
   {% endif %}

package/views/partials/ap-link-preview.njk

@@ -0,0 +1,34 @@
+{# Link preview cards for external links (OpenGraph) #}
+{% if item.linkPreviews and item.linkPreviews.length > 0 %}
+  <div class="ap-link-previews">
+    {% for preview in item.linkPreviews %}
+      <a href="{{ preview.url }}" 
+         rel="noopener" 
+         target="_blank" 
+         class="ap-link-preview"
+         aria-label="{{ __('activitypub.reader.linkPreview.label') }}: {{ preview.title }}">
+        
+        <div class="ap-link-preview__text">
+          <p class="ap-link-preview__title">{{ preview.title }}</p>
+          
+          {% if preview.description %}
+            <p class="ap-link-preview__desc">{{ preview.description }}</p>
+          {% endif %}
+          
+          <p class="ap-link-preview__domain">
+            {% if preview.favicon %}
+              <img src="{{ preview.favicon }}" alt="" class="ap-link-preview__favicon" loading="lazy" />
+            {% endif %}
+            {{ preview.domain }}
+          </p>
+        </div>
+        
+        {% if preview.image %}
+          <div class="ap-link-preview__image">
+            <img src="{{ preview.image }}" alt="" loading="lazy" decoding="async" />
+          </div>
+        {% endif %}
+      </a>
+    {% endfor %}
+  </div>
+{% endif %}