@rmdes/indiekit-endpoint-activitypub 2.0.34 → 2.0.36

package/assets/reader.css

@@ -752,6 +752,12 @@
   color: var(--color-green50);
 }
 
+.ap-card__action--save.ap-card__action--active {
+  background: #4a9eff22;
+  border-color: #4a9eff;
+  color: #4a9eff;
+}
+
 .ap-card__action:disabled {
   cursor: wait;
   opacity: 0.6;

package/lib/controllers/tag-timeline.js

@@ -132,7 +132,7 @@ export function tagTimelineController(mountPath) {
       response.render("activitypub-tag-timeline", {
         title: `#${tag}`,
         readerParent: { href: `${mountPath}/admin/reader`, text: response.locals.__("activitypub.reader.title") },
-        tag,
+        hashtag: tag,
         items,
         before: result.before,
         after: result.after,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-activitypub",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "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-tag-timeline.njk

@@ -4,7 +4,7 @@
   {# Tag header #}
   <header class="ap-tag-header">
     <div class="ap-tag-header__info">
-      <h2 class="ap-tag-header__title">#{{ tag }}</h2>
+      <h2 class="ap-tag-header__title">#{{ hashtag }}</h2>
       <p class="ap-tag-header__count">
         {{ __("activitypub.reader.tagTimeline.postsTagged", items.length) }}
       </p>
@@ -13,7 +13,7 @@
       {% 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 }}">
+          <input type="hidden" name="tag" value="{{ hashtag }}">
           <button type="submit" class="ap-tag-header__unfollow-btn">
             {{ __("activitypub.reader.tagTimeline.unfollowTag") }}
           </button>
@@ -21,7 +21,7 @@
       {% 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 }}">
+          <input type="hidden" name="tag" value="{{ hashtag }}">
           <button type="submit" class="ap-tag-header__follow-btn">
             {{ __("activitypub.reader.tagTimeline.followTag") }}
           </button>
@@ -37,7 +37,7 @@
   {% if items.length > 0 %}
     <div class="ap-timeline"
       data-mount-path="{{ mountPath }}"
-      data-tag="{{ tag }}"
+      data-tag="{{ hashtag }}"
       data-before="{{ before if before else '' }}">
       {% for item in items %}
         {% include "partials/ap-item-card.njk" %}
@@ -48,12 +48,12 @@
     {% 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">
+          <a href="?tag={{ hashtag }}&after={{ after }}" class="ap-pagination__prev">
             {{ __("activitypub.reader.pagination.newer") }}
           </a>
         {% endif %}
         {% if before %}
-          <a href="?tag={{ tag }}&before={{ before }}" class="ap-pagination__next">
+          <a href="?tag={{ hashtag }}&before={{ before }}" class="ap-pagination__next">
             {{ __("activitypub.reader.pagination.older") }}
           </a>
         {% endif %}
@@ -66,7 +66,7 @@
         id="ap-load-more"
         data-before="{{ before }}"
         data-tab=""
-        data-tag="{{ tag }}"
+        data-tag="{{ hashtag }}"
         x-data="apInfiniteScroll()"
         x-init="init()"
         @ap-append-items.window="appendItems($event.detail)">
@@ -79,6 +79,6 @@
       </div>
     {% endif %}
   {% else %}
-    {{ prose({ text: __("activitypub.reader.tagTimeline.noPosts") | replace("%s", tag) }) }}
+    {{ prose({ text: __("activitypub.reader.tagTimeline.noPosts", hashtag) }) }}
   {% endif %}
 {% endblock %}

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

@@ -151,8 +151,31 @@
     x-data="{
       liked: {{ 'true' if isLiked else 'false' }},
       boosted: {{ 'true' if isBoosted else 'false' }},
+      saved: false,
       loading: false,
       error: '',
+      async saveLater() {
+        if (this.saved) return;
+        const el = this.$root;
+        const itemUrl = el.dataset.itemUrl;
+        try {
+          const res = await fetch('/readlater/save', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              url: itemUrl,
+              title: el.closest('article')?.querySelector('p')?.textContent?.substring(0, 80) || itemUrl,
+              source: 'activitypub'
+            }),
+            credentials: 'same-origin'
+          });
+          if (res.ok) this.saved = true;
+          else this.error = 'Failed to save';
+        } catch (e) {
+          this.error = e.message;
+        }
+        if (this.error) setTimeout(() => this.error = '', 3000);
+      },
       async interact(action) {
         if (this.loading) return;
         this.loading = true;
@@ -213,6 +236,16 @@
     <a href="{{ itemUrl }}" class="ap-card__action ap-card__action--link" target="_blank" rel="noopener">
       🔗 {{ __("activitypub.reader.actions.viewOriginal") }}
     </a>
+    {% if application.readlaterEndpoint %}
+    <button class="ap-card__action ap-card__action--save"
+      :class="{ 'ap-card__action--active': saved }"
+      :disabled="saved"
+      @click="saveLater()"
+      :title="saved ? 'Saved' : 'Save for later'">
+      <span x-text="saved ? '🔖' : '📑'"></span>
+      <span x-text="saved ? 'Saved' : 'Save'"></span>
+    </button>
+    {% endif %}
     <div x-show="error" x-text="error" class="ap-card__action-error" x-transition></div>
   </footer>
   {# Close moderation content warning wrapper #}