@rmdes/indiekit-endpoint-activitypub 2.0.26 → 2.0.28

package/views/activitypub-reader.njk

@@ -4,6 +4,23 @@
 {% from "prose/macro.njk" import prose with context %}
 
 {% block readercontent %}
+  {# Explore link #}
+  <div class="ap-reader-tools">
+    <a href="{{ mountPath }}/admin/reader/explore" class="ap-reader-tools__explore">
+      🔭 {{ __("activitypub.reader.explore.title") }}
+    </a>
+  </div>
+
+  {# Followed tags #}
+  {% if followedTags and followedTags.length > 0 %}
+    <div class="ap-followed-tags">
+      <span class="ap-followed-tags__label">{{ __("activitypub.reader.tagTimeline.following") }}:</span>
+      {% for tag in followedTags %}
+        <a href="{{ mountPath }}/admin/reader/tag?tag={{ tag | urlencode }}" class="ap-card__tag">#{{ tag }}</a>
+      {% endfor %}
+    </div>
+  {% endif %}
+
   {# Fediverse lookup #}
   <form action="{{ mountPath }}/admin/reader/resolve" method="get" class="ap-lookup">
     <input type="text" name="q" class="ap-lookup__input"
@@ -36,15 +53,18 @@
 
   {# Timeline items #}
   {% if items.length > 0 %}
-    <div class="ap-timeline" data-mount-path="{{ mountPath }}">
+    <div class="ap-timeline"
+      id="ap-timeline"
+      data-mount-path="{{ mountPath }}"
+      data-before="{{ before if before else '' }}">
       {% for item in items %}
         {% include "partials/ap-item-card.njk" %}
       {% endfor %}
     </div>
 
-    {# Pagination #}
+    {# Pagination (progressive enhancement — visible without JS, hidden when Alpine active) #}
     {% if before or after %}
-      <nav class="ap-pagination">
+      <nav class="ap-pagination ap-pagination--js-hidden" id="ap-reader-pagination">
         {% if after %}
           <a href="?tab={{ tab }}&after={{ after }}" class="ap-pagination__prev">
             {{ __("activitypub.reader.pagination.newer") }}
@@ -57,6 +77,25 @@
         {% endif %}
       </nav>
     {% endif %}
+
+    {# Infinite scroll load-more sentinel #}
+    {% if before %}
+      <div class="ap-load-more"
+        id="ap-load-more"
+        data-before="{{ before }}"
+        data-tab="{{ tab }}"
+        data-tag=""
+        x-data="apInfiniteScroll()"
+        x-init="init()"
+        @ap-append-items.window="appendItems($event.detail)">
+        <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>
+        <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
+      </div>
+    {% endif %}
   {% else %}
     {{ prose({ text: __("activitypub.reader.empty") }) }}
   {% endif %}

package/views/activitypub-tag-timeline.njk

@@ -0,0 +1,86 @@
+{% extends "layouts/ap-reader.njk" %}
+
+{% from "prose/macro.njk" import prose with context %}
+
+{% block readercontent %}
+  {# Tag header #}
+  <header class="ap-tag-header">
+    <div class="ap-tag-header__info">
+      <h2 class="ap-tag-header__title">#{{ tag }}</h2>
+      <p class="ap-tag-header__count">
+        {{ __("activitypub.reader.tagTimeline.postsTagged", items.length) }}
+      </p>
+    </div>
+    <div class="ap-tag-header__actions">
+      {% if isFollowed %}
+        <form action="{{ mountPath }}/admin/reader/unfollow-tag" method="post" class="ap-tag-header__follow-form">
+          <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+          <input type="hidden" name="tag" value="{{ tag }}">
+          <button type="submit" class="ap-tag-header__unfollow-btn">
+            {{ __("activitypub.reader.tagTimeline.unfollowTag") }}
+          </button>
+        </form>
+      {% else %}
+        <form action="{{ mountPath }}/admin/reader/follow-tag" method="post" class="ap-tag-header__follow-form">
+          <input type="hidden" name="_csrf" value="{{ csrfToken }}">
+          <input type="hidden" name="tag" value="{{ tag }}">
+          <button type="submit" class="ap-tag-header__follow-btn">
+            {{ __("activitypub.reader.tagTimeline.followTag") }}
+          </button>
+        </form>
+      {% endif %}
+      <a href="{{ mountPath }}/admin/reader" class="ap-tag-header__back">
+        ← {{ __("activitypub.reader.title") }}
+      </a>
+    </div>
+  </header>
+
+  {# Timeline items #}
+  {% if items.length > 0 %}
+    <div class="ap-timeline"
+      data-mount-path="{{ mountPath }}"
+      data-tag="{{ tag }}"
+      data-before="{{ before if before else '' }}">
+      {% for item in items %}
+        {% include "partials/ap-item-card.njk" %}
+      {% endfor %}
+    </div>
+
+    {# Pagination (progressive enhancement fallback — hidden when infinite scroll JS active) #}
+    {% if before or after %}
+      <nav class="ap-pagination ap-pagination--js-hidden" id="ap-tag-pagination">
+        {% if after %}
+          <a href="?tag={{ tag }}&after={{ after }}" class="ap-pagination__prev">
+            {{ __("activitypub.reader.pagination.newer") }}
+          </a>
+        {% endif %}
+        {% if before %}
+          <a href="?tag={{ tag }}&before={{ before }}" class="ap-pagination__next">
+            {{ __("activitypub.reader.pagination.older") }}
+          </a>
+        {% endif %}
+      </nav>
+    {% endif %}
+
+    {# Infinite scroll sentinel (Task 5) #}
+    {% if before %}
+      <div class="ap-load-more"
+        id="ap-load-more"
+        data-before="{{ before }}"
+        data-tab=""
+        data-tag="{{ tag }}"
+        x-data="apInfiniteScroll()"
+        x-init="init()"
+        @ap-append-items.window="appendItems($event.detail)">
+        <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>
+        <p class="ap-load-more__done" x-show="done">{{ __("activitypub.reader.pagination.noMore") }}</p>
+      </div>
+    {% endif %}
+  {% else %}
+    {{ prose({ text: __("activitypub.reader.tagTimeline.noPosts", tag) }) }}
+  {% endif %}
+{% endblock %}

package/views/layouts/ap-reader.njk

@@ -1,7 +1,10 @@
 {% extends "document.njk" %}
 
 {% block content %}
-  {# Alpine.js for client-side reactivity (CW toggles, interaction buttons) #}
+  {# Infinite scroll component — must load before Alpine to register via alpine:init #}
+  <script defer src="/assets/@rmdes-indiekit-endpoint-activitypub/reader-infinite-scroll.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>
 
   {# Reader stylesheet — loaded in body is fine for modern browsers #}

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

@@ -113,12 +113,27 @@
     {% include "partials/ap-item-media.njk" %}
   {% endif %}
 
-  {# Tags/categories #}
-  {% if item.category and item.category.length > 0 %}
+  {# Mentions and hashtags #}
+  {% set hasMentions = item.mentions and item.mentions.length > 0 %}
+  {% set hasHashtags = item.category and item.category.length > 0 %}
+  {% if hasMentions or hasHashtags %}
     <div class="ap-card__tags">
-      {% for tag in item.category %}
-        <a href="?tag={{ tag }}" class="ap-card__tag">#{{ tag }}</a>
-      {% endfor %}
+      {# Mentions — render with @ prefix, link to profile view when URL available #}
+      {% if hasMentions %}
+        {% for mention in item.mentions %}
+          {% if mention.url %}
+            <a href="{{ mountPath }}/admin/reader/profile?url={{ mention.url | urlencode }}" class="ap-card__mention">@{{ mention.name }}</a>
+          {% else %}
+            <span class="ap-card__mention ap-card__mention--legacy">@{{ mention.name }}</span>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+      {# Hashtags — render with # prefix, link to tag timeline #}
+      {% if hasHashtags %}
+        {% for tag in item.category %}
+          <a href="{{ mountPath }}/admin/reader/tag?tag={{ tag | urlencode }}" class="ap-card__tag">#{{ tag }}</a>
+        {% endfor %}
+      {% endif %}
     </div>
   {% endif %}