@rmdes/indiekit-endpoint-activitypub 1.0.29 → 1.1.2

package/views/activitypub-remote-profile.njk

@@ -0,0 +1,117 @@
+{% extends "layouts/reader.njk" %}
+
+{% from "heading/macro.njk" import heading with context %}
+{% from "prose/macro.njk" import prose with context %}
+
+{% block content %}
+  {{ heading({
+    text: title,
+    level: 1,
+    parent: { text: __("activitypub.reader.title"), href: mountPath + "/admin/reader" }
+  }) }}
+
+  <div class="ap-profile"
+    x-data="{
+      following: {{ 'true' if isFollowing else 'false' }},
+      muted: {{ 'true' if isMuted else 'false' }},
+      blocked: {{ 'true' if isBlocked else 'false' }},
+      loading: false,
+      async action(endpoint, body) {
+        if (this.loading) return;
+        this.loading = true;
+        try {
+          const res = await fetch('{{ mountPath }}/admin/reader/' + endpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': '{{ csrfToken }}'
+            },
+            body: JSON.stringify(body)
+          });
+          const data = await res.json();
+          return data.success;
+        } catch { return false; }
+        finally { this.loading = false; }
+      }
+    }">
+
+    {# Header image #}
+    {% if image %}
+      <div class="ap-profile__header">
+        <img src="{{ image }}" alt="" class="ap-profile__header-img">
+      </div>
+    {% endif %}
+
+    {# Profile info #}
+    <div class="ap-profile__info">
+      <div class="ap-profile__avatar-wrap">
+        {% if icon %}
+          <img src="{{ icon }}" alt="{{ name }}" class="ap-profile__avatar">
+        {% else %}
+          <div class="ap-profile__avatar ap-profile__avatar--placeholder">{{ name[0] }}</div>
+        {% endif %}
+      </div>
+
+      <div class="ap-profile__details">
+        <h2 class="ap-profile__name">{{ name }}</h2>
+        {% if actorHandle %}
+          <div class="ap-profile__handle">@{{ actorHandle }}@{{ instanceHost }}</div>
+        {% endif %}
+        {% if summary %}
+          <div class="ap-profile__bio">{{ summary | safe }}</div>
+        {% endif %}
+      </div>
+
+      {# Action buttons #}
+      <div class="ap-profile__actions">
+        <button class="ap-profile__action ap-profile__action--follow"
+          :class="{ 'ap-profile__action--active': following }"
+          :disabled="loading"
+          @click="
+            const ok = await action(following ? 'unfollow' : 'follow', { url: '{{ actorUrl }}' });
+            if (ok) following = !following;
+          ">
+          <span x-text="following ? '{{ __('activitypub.profile.remote.unfollow') }}' : '{{ __('activitypub.profile.remote.follow') }}'"></span>
+        </button>
+
+        <button class="ap-profile__action"
+          :disabled="loading"
+          @click="
+            const ok = await action(muted ? 'unmute' : 'mute', { url: '{{ actorUrl }}' });
+            if (ok) muted = !muted;
+          ">
+          <span x-text="muted ? '{{ __('activitypub.moderation.unmute') }}' : '{{ __('activitypub.moderation.muteActor') }}'"></span>
+        </button>
+
+        <button class="ap-profile__action ap-profile__action--danger"
+          :disabled="loading"
+          @click="
+            const ok = await action(blocked ? 'unblock' : 'block', { url: '{{ actorUrl }}' });
+            if (ok) blocked = !blocked;
+          ">
+          <span x-text="blocked ? '{{ __('activitypub.moderation.unblock') }}' : '{{ __('activitypub.moderation.blockActor') }}'"></span>
+        </button>
+
+        <a href="{{ actorUrl }}" class="ap-profile__action" target="_blank" rel="noopener">
+          {{ __("activitypub.profile.remote.viewOn") }} {{ instanceHost }}
+        </a>
+      </div>
+    </div>
+
+    {# Posts from this actor #}
+    <div class="ap-profile__posts">
+      <h3>{{ __("activitypub.profile.remote.postsTitle") }}</h3>
+      {% if posts.length > 0 %}
+        <div class="ap-timeline">
+          {% for item in posts %}
+            {% include "partials/ap-item-card.njk" %}
+          {% endfor %}
+        </div>
+      {% elif isFollowing %}
+        {{ prose({ text: __("activitypub.profile.remote.noPosts") }) }}
+      {% else %}
+        {{ prose({ text: __("activitypub.profile.remote.followToSee") }) }}
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}

package/views/layouts/reader.njk

@@ -0,0 +1,9 @@
+{% extends "document.njk" %}
+
+{% block head %}
+  {# Alpine.js for client-side reactivity #}
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14/dist/cdn.min.js"></script>
+
+  {# Reader stylesheet #}
+  <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-activitypub/reader.css">
+{% endblock %}

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

@@ -0,0 +1,157 @@
+{# Timeline item card partial - reusable across timeline and profile views #}
+
+<article class="ap-card">
+  {# Boost header if this is a boosted post #}
+  {% if item.type == "boost" and item.boostedBy %}
+    <div class="ap-card__boost">
+      🔁 <a href="{{ item.boostedBy.url }}">{{ item.boostedBy.name }}</a> {{ __("activitypub.reader.boosted") }}
+    </div>
+  {% endif %}
+
+  {# 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>
+    </div>
+  {% endif %}
+
+  {# Author header #}
+  <header class="ap-card__author">
+    <img src="{{ item.author.photo }}" alt="{{ item.author.name }}" class="ap-card__avatar">
+    <div class="ap-card__author-info">
+      <div class="ap-card__author-name">
+        <a href="{{ item.author.url }}">{{ item.author.name }}</a>
+      </div>
+      <div class="ap-card__author-handle">{{ item.author.handle }}</div>
+    </div>
+    <time datetime="{{ item.published }}" class="ap-card__timestamp">
+      {{ item.published | date("PPp") }}
+    </time>
+  </header>
+
+  {# Post title (articles only) #}
+  {% if item.name %}
+    <h2 class="ap-card__title">
+      <a href="{{ item.url }}">{{ item.name }}</a>
+    </h2>
+  {% endif %}
+
+  {# Determine if content should be hidden behind CW #}
+  {% set hasCW = item.summary or item.sensitive %}
+  {% set cwLabel = item.summary if item.summary else __("activitypub.reader.sensitiveContent") %}
+
+  {% if hasCW %}
+    <div class="ap-card__cw" x-data="{ shown: false }">
+      <button @click="shown = !shown" class="ap-card__cw-toggle">
+        <span x-show="!shown">⚠️ {{ cwLabel }} — {{ __("activitypub.reader.showContent") }}</span>
+        <span x-show="shown" x-cloak>{{ __("activitypub.reader.hideContent") }}</span>
+      </button>
+      <div x-show="shown" x-cloak>
+        {% if item.content and item.content.html %}
+          <div class="ap-card__content">
+            {{ item.content.html | safe }}
+          </div>
+        {% endif %}
+
+        {# Media hidden behind CW #}
+        {% include "partials/ap-item-media.njk" %}
+      </div>
+    </div>
+  {% else %}
+    {# Regular content (no CW) #}
+    {% if item.content and item.content.html %}
+      <div class="ap-card__content">
+        {{ item.content.html | safe }}
+      </div>
+    {% endif %}
+
+    {# Media visible directly #}
+    {% include "partials/ap-item-media.njk" %}
+  {% endif %}
+
+  {# Tags/categories #}
+  {% if item.category and item.category.length > 0 %}
+    <div class="ap-card__tags">
+      {% for tag in item.category %}
+        <a href="?tag={{ tag }}" class="ap-card__tag">#{{ tag }}</a>
+      {% endfor %}
+    </div>
+  {% endif %}
+
+  {# Interaction buttons — Alpine.js for optimistic updates #}
+  {# Dynamic data moved to data-* attributes to prevent XSS from inline interpolation #}
+  {% set itemUrl = item.url or item.originalUrl %}
+  {% set isLiked = interactionMap[itemUrl].like if interactionMap[itemUrl] else false %}
+  {% set isBoosted = interactionMap[itemUrl].boost if interactionMap[itemUrl] else false %}
+  <footer class="ap-card__actions"
+    data-item-url="{{ itemUrl }}"
+    data-csrf-token="{{ csrfToken }}"
+    data-mount-path="{{ mountPath }}"
+    x-data="{
+      liked: {{ 'true' if isLiked else 'false' }},
+      boosted: {{ 'true' if isBoosted else 'false' }},
+      loading: false,
+      error: '',
+      async interact(action) {
+        if (this.loading) return;
+        this.loading = true;
+        this.error = '';
+        const el = this.$root;
+        const itemUrl = el.dataset.itemUrl;
+        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;
+        try {
+          const res = await fetch(basePath + '/admin/reader/' + action, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': csrfToken
+            },
+            body: JSON.stringify({ url: itemUrl })
+          });
+          const data = await res.json();
+          if (!data.success) {
+            this.liked = prev.liked;
+            this.boosted = prev.boosted;
+            this.error = data.error || 'Failed';
+          }
+        } catch (e) {
+          this.liked = prev.liked;
+          this.boosted = prev.boosted;
+          this.error = e.message;
+        }
+        this.loading = false;
+        if (this.error) setTimeout(() => this.error = '', 3000);
+      }
+    }">
+    <a href="{{ mountPath }}/admin/reader/compose?replyTo={{ itemUrl | urlencode }}"
+       class="ap-card__action ap-card__action--reply"
+       title="{{ __('activitypub.reader.actions.reply') }}">
+      ↩ {{ __("activitypub.reader.actions.reply") }}
+    </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>
+    </button>
+    <button class="ap-card__action ap-card__action--like"
+      :class="{ 'ap-card__action--active': liked }"
+      :title="liked ? '{{ __('activitypub.reader.actions.unlike') }}' : '{{ __('activitypub.reader.actions.like') }}'"
+      :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>
+    </button>
+    <a href="{{ itemUrl }}" class="ap-card__action ap-card__action--link" target="_blank" rel="noopener">
+      🔗 {{ __("activitypub.reader.actions.viewOriginal") }}
+    </a>
+    <div x-show="error" x-text="error" class="ap-card__action-error" x-transition></div>
+  </footer>
+</article>

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

@@ -0,0 +1,37 @@
+{# Media attachments partial — included from ap-item-card.njk #}
+
+{# Photo gallery #}
+{% if item.photo and item.photo.length > 0 %}
+  {% set displayCount = [item.photo.length, 4] | min %}
+  {% set extraCount = item.photo.length - 4 %}
+  <div class="ap-card__gallery ap-card__gallery--{{ displayCount }}">
+    {% for photoUrl in item.photo %}
+      {% if loop.index0 < 4 %}
+        <a href="{{ photoUrl }}" target="_blank" rel="noopener" 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>
+          {% endif %}
+        </a>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endif %}
+
+{# Video embed #}
+{% if item.video and item.video.length > 0 %}
+  <div class="ap-card__video">
+    <video controls preload="metadata" src="{{ item.video[0] }}">
+      {{ __("activitypub.reader.videoNotSupported") }}
+    </video>
+  </div>
+{% endif %}
+
+{# Audio player #}
+{% if item.audio and item.audio.length > 0 %}
+  <div class="ap-card__audio">
+    <audio controls preload="metadata" src="{{ item.audio[0] }}">
+      {{ __("activitypub.reader.audioNotSupported") }}
+    </audio>
+  </div>
+{% endif %}

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

@@ -0,0 +1,58 @@
+{# Notification card partial #}
+
+<div class="ap-notification{% if not item.read %} ap-notification--unread{% endif %}">
+  {# Type icon #}
+  <div class="ap-notification__icon">
+    {% if item.type == "like" %}
+      ❤
+    {% elif item.type == "boost" %}
+      🔁
+    {% elif item.type == "follow" %}
+      👤
+    {% elif item.type == "reply" %}
+      💬
+    {% elif item.type == "mention" %}
+      @
+    {% endif %}
+  </div>
+
+  {# Notification body #}
+  <div class="ap-notification__body">
+    <span class="ap-notification__actor">
+      <a href="{{ item.actorUrl }}">{{ item.actorName }}</a>
+    </span>
+
+    <span class="ap-notification__action">
+      {% if item.type == "like" %}
+        {{ __("activitypub.notifications.liked") }}
+      {% elif item.type == "boost" %}
+        {{ __("activitypub.notifications.boostedPost") }}
+      {% elif item.type == "follow" %}
+        {{ __("activitypub.notifications.followedYou") }}
+      {% elif item.type == "reply" %}
+        {{ __("activitypub.notifications.repliedTo") }}
+      {% elif item.type == "mention" %}
+        {{ __("activitypub.notifications.mentionedYou") }}
+      {% endif %}
+    </span>
+
+    {% if item.targetUrl %}
+      <a href="{{ item.targetUrl }}" class="ap-notification__target">
+        {{ item.targetName or item.targetUrl }}
+      </a>
+    {% endif %}
+
+    {% if item.content and item.content.text %}
+      <div class="ap-notification__excerpt">
+        {{ item.content.text | truncate(200) }}
+      </div>
+    {% endif %}
+  </div>
+
+  {# Timestamp #}
+  {% if item.published %}
+    <time datetime="{{ item.published }}" class="ap-notification__time">
+      {{ item.published | date("PPp") }}
+    </time>
+  {% endif %}
+</div>