@rmdes/indiekit-endpoint-microsub 1.0.1 → 1.0.3

package/views/item.njk

@@ -1,20 +1,26 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <article class="item">
-    <a href="{{ baseUrl }}/channels" class="back-link">
+    <a href="{{ backUrl or (baseUrl + '/channels') }}" class="back-link">
       {{ icon("previous") }} {{ __("Back") }}
     </a>
 
     {% if item.author %}
     <header class="item__author">
       {% if item.author.photo %}
-      <img src="{{ item.author.photo }}" alt="" class="item__author-photo" width="48" height="48" loading="lazy">
+      <img src="{{ item.author.photo }}"
+           alt=""
+           class="item__author-photo"
+           width="48"
+           height="48"
+           loading="lazy"
+           onerror="this.style.display='none'">
       {% endif %}
       <div class="item__author-info">
         <span class="item__author-name">
           {% if item.author.url %}
-          <a href="{{ item.author.url }}">{{ item.author.name or item.author.url }}</a>
+          <a href="{{ item.author.url }}" target="_blank" rel="noopener">{{ item.author.name or item.author.url }}</a>
           {% else %}
           {{ item.author.name or "Unknown" }}
           {% endif %}
@@ -28,6 +34,44 @@
     </header>
     {% endif %}
 
+    {# Context for interactions #}
+    {% if item["in-reply-to"] or item["like-of"] or item["repost-of"] or item["bookmark-of"] %}
+    <div class="item__context">
+      {% if item["in-reply-to"] and item["in-reply-to"].length > 0 %}
+      <p class="item__context-label">
+        {{ icon("reply") }} {{ __("Reply to") }}:
+        <a href="{{ item['in-reply-to'][0] }}" target="_blank" rel="noopener">
+          {{ item["in-reply-to"][0] | replace("https://", "") | replace("http://", "") }}
+        </a>
+      </p>
+      {% endif %}
+      {% if item["like-of"] and item["like-of"].length > 0 %}
+      <p class="item__context-label">
+        {{ icon("like") }} {{ __("Liked") }}:
+        <a href="{{ item['like-of'][0] }}" target="_blank" rel="noopener">
+          {{ item["like-of"][0] | replace("https://", "") | replace("http://", "") }}
+        </a>
+      </p>
+      {% endif %}
+      {% if item["repost-of"] and item["repost-of"].length > 0 %}
+      <p class="item__context-label">
+        {{ icon("repost") }} {{ __("Reposted") }}:
+        <a href="{{ item['repost-of'][0] }}" target="_blank" rel="noopener">
+          {{ item["repost-of"][0] | replace("https://", "") | replace("http://", "") }}
+        </a>
+      </p>
+      {% endif %}
+      {% if item["bookmark-of"] and item["bookmark-of"].length > 0 %}
+      <p class="item__context-label">
+        {{ icon("bookmark") }} {{ __("Bookmarked") }}:
+        <a href="{{ item['bookmark-of'][0] }}" target="_blank" rel="noopener">
+          {{ item["bookmark-of"][0] | replace("https://", "") | replace("http://", "") }}
+        </a>
+      </p>
+      {% endif %}
+    </div>
+    {% endif %}
+
     {% if item.name %}
     <h2 class="item__title">{{ item.name }}</h2>
     {% endif %}
@@ -42,43 +86,65 @@
     </div>
     {% endif %}
 
+    {# Categories #}
+    {% if item.category and item.category.length > 0 %}
+    <div class="item-card__categories">
+      {% for cat in item.category %}
+      <span class="item-card__category">#{{ cat | replace("#", "") }}</span>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    {# Photos #}
     {% if item.photo and item.photo.length > 0 %}
     <div class="item__photos">
       {% for photo in item.photo %}
-      <img src="{{ photo }}" alt="" class="item__photo" loading="lazy">
+      <a href="{{ photo }}" target="_blank" rel="noopener">
+        <img src="{{ photo }}" alt="" class="item__photo" loading="lazy">
+      </a>
       {% endfor %}
     </div>
     {% endif %}
 
-    {% if item.inReplyTo or item.likeOf or item.repostOf or item.bookmarkOf %}
-    <div class="item__context">
-      {% if item.inReplyTo %}
-      <p>{{ icon("reply") }} {{ __("Reply to") }}: <a href="{{ item.inReplyTo[0] }}">{{ item.inReplyTo[0] }}</a></p>
-      {% endif %}
-      {% if item.likeOf %}
-      <p>{{ icon("like") }} {{ __("Liked") }}: <a href="{{ item.likeOf[0] }}">{{ item.likeOf[0] }}</a></p>
-      {% endif %}
-      {% if item.repostOf %}
-      <p>{{ icon("repost") }} {{ __("Reposted") }}: <a href="{{ item.repostOf[0] }}">{{ item.repostOf[0] }}</a></p>
-      {% endif %}
-      {% if item.bookmarkOf %}
-      <p>{{ icon("bookmark") }} {{ __("Bookmarked") }}: <a href="{{ item.bookmarkOf[0] }}">{{ item.bookmarkOf[0] }}</a></p>
-      {% endif %}
+    {# Video #}
+    {% if item.video and item.video.length > 0 %}
+    <div class="item__media">
+      {% for video in item.video %}
+      <video src="{{ video }}"
+             controls
+             preload="metadata"
+             {% if item.photo and item.photo.length > 0 %}poster="{{ item.photo[0] }}"{% endif %}>
+      </video>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    {# Audio #}
+    {% if item.audio and item.audio.length > 0 %}
+    <div class="item__media">
+      {% for audio in item.audio %}
+      <audio src="{{ audio }}" controls preload="metadata"></audio>
+      {% endfor %}
     </div>
     {% endif %}
 
     <footer class="item__actions">
-      <a href="{{ baseUrl }}/compose?replyTo={{ item.url | urlencode }}" class="button button--secondary button--small">
+      {% if item.url %}
+      <a href="{{ item.url }}" class="button button--secondary button--small" target="_blank" rel="noopener">
+        {{ icon("external") }} {{ __("microsub.item.viewOriginal") }}
+      </a>
+      {% endif %}
+      <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="button button--secondary button--small">
         {{ icon("reply") }} {{ __("microsub.item.reply") }}
       </a>
-      <a href="{{ baseUrl }}/compose?likeOf={{ item.url | urlencode }}" class="button button--secondary button--small">
+      <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="button button--secondary button--small">
         {{ icon("like") }} {{ __("microsub.item.like") }}
       </a>
-      <a href="{{ baseUrl }}/compose?repostOf={{ item.url | urlencode }}" class="button button--secondary button--small">
+      <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="button button--secondary button--small">
         {{ icon("repost") }} {{ __("microsub.item.repost") }}
       </a>
-      <a href="{{ item.url }}" class="button button--secondary button--small" target="_blank" rel="noopener">
-        {{ icon("public") }} {{ __("microsub.item.viewOriginal") }}
+      <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="button button--secondary button--small">
+        {{ icon("bookmark") }} {{ __("microsub.item.bookmark") }}
       </a>
     </footer>
   </article>

package/views/layouts/reader.njk

@@ -0,0 +1,10 @@
+{#
+  Microsub Reader Layout
+  Extends document.njk and adds reader-specific stylesheet
+#}
+{% extends "document.njk" %}
+
+{% block content %}
+<link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-microsub/styles.css">
+{% block reader %}{% endblock %}
+{% endblock %}

package/views/partials/item-card.njk

@@ -1,56 +1,130 @@
-{# Item card for timeline display #}
-<article class="item-card{% if item._is_read %} item-card--read{% endif %}">
-  <a href="{{ baseUrl }}/item/{{ item.uid }}" class="item-card__link">
+{#
+  Item card for timeline display
+  Inspired by Aperture/Monocle reader
+#}
+<article class="item-card{% if item._is_read %} item-card--read{% endif %}"
+         data-item-id="{{ item._id }}"
+         data-is-read="{{ item._is_read | default(false) }}">
+
+  {# Context bar for interactions (Aperture pattern) #}
+  {% if item["like-of"] and item["like-of"].length > 0 %}
+  <div class="item-card__context">
+    {{ icon("like") }}
+    <span>Liked</span>
+    <a href="{{ item['like-of'][0] }}" target="_blank" rel="noopener">
+      {{ item['like-of'][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}
+    </a>
+  </div>
+  {% elif item["repost-of"] and item["repost-of"].length > 0 %}
+  <div class="item-card__context">
+    {{ icon("repost") }}
+    <span>Reposted</span>
+    <a href="{{ item['repost-of'][0] }}" target="_blank" rel="noopener">
+      {{ item['repost-of'][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}
+    </a>
+  </div>
+  {% elif item["in-reply-to"] and item["in-reply-to"].length > 0 %}
+  <div class="item-card__context">
+    {{ icon("reply") }}
+    <span>Reply to</span>
+    <a href="{{ item['in-reply-to'][0] }}" target="_blank" rel="noopener">
+      {{ item['in-reply-to'][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}
+    </a>
+  </div>
+  {% elif item["bookmark-of"] and item["bookmark-of"].length > 0 %}
+  <div class="item-card__context">
+    {{ icon("bookmark") }}
+    <span>Bookmarked</span>
+    <a href="{{ item['bookmark-of'][0] }}" target="_blank" rel="noopener">
+      {{ item['bookmark-of'][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}
+    </a>
+  </div>
+  {% endif %}
+
+  <a href="{{ baseUrl }}/item/{{ item._id }}" class="item-card__link">
+    {# Author #}
     {% if item.author %}
     <div class="item-card__author">
       {% if item.author.photo %}
-      <img src="{{ item.author.photo }}" alt="" class="item-card__author-photo" width="40" height="40" loading="lazy">
+      <img src="{{ item.author.photo }}"
+           alt=""
+           class="item-card__author-photo"
+           width="40"
+           height="40"
+           loading="lazy"
+           onerror="this.style.display='none'">
       {% endif %}
       <div class="item-card__author-info">
         <span class="item-card__author-name">{{ item.author.name or "Unknown" }}</span>
         {% if item._source %}
         <span class="item-card__source">{{ item._source.name or item._source.url }}</span>
+        {% elif item.author.url %}
+        <span class="item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
         {% endif %}
       </div>
     </div>
     {% endif %}
 
-    {% if item._type and item._type !== "entry" %}
-    <div class="item-card__type">
-      {% if item._type === "like" %}
-      {{ icon("like") }} Liked
-      {% elif item._type === "repost" %}
-      {{ icon("repost") }} Reposted
-      {% elif item._type === "reply" %}
-      {{ icon("reply") }} Reply
-      {% elif item._type === "bookmark" %}
-      {{ icon("bookmark") }} Bookmarked
-      {% endif %}
-    </div>
-    {% endif %}
-
+    {# Title (for articles) #}
     {% if item.name %}
     <h3 class="item-card__title">{{ item.name }}</h3>
     {% endif %}
 
+    {# Content with overflow handling #}
     {% if item.summary or item.content %}
-    <div class="item-card__content">
-      {% if item.summary %}
-      {{ item.summary | truncate(200) }}
+    <div class="item-card__content{% if (item.content.text or item.summary or '') | length > 300 %} item-card__content--truncated{% endif %}">
+      {% if item.content.html %}
+      {{ item.content.html | safe | striptags | truncate(400) }}
       {% elif item.content.text %}
-      {{ item.content.text | truncate(200) }}
+      {{ item.content.text | truncate(400) }}
+      {% elif item.summary %}
+      {{ item.summary | truncate(400) }}
       {% endif %}
     </div>
     {% endif %}
 
+    {# Categories/Tags #}
+    {% if item.category and item.category.length > 0 %}
+    <div class="item-card__categories">
+      {% for cat in item.category | slice(0, 5) %}
+      <span class="item-card__category">#{{ cat | replace("#", "") }}</span>
+      {% endfor %}
+    </div>
+    {% endif %}
+
+    {# Photo grid (Aperture multi-photo pattern) #}
     {% if item.photo and item.photo.length > 0 %}
-    <div class="item-card__photos">
+    <div class="item-card__photos item-card__photos--{{ [item.photo.length, 4] | min }}">
       {% for photo in item.photo | slice(0, 4) %}
-      <img src="{{ photo }}" alt="" class="item-card__photo" loading="lazy">
+      <img src="{{ photo }}"
+           alt=""
+           class="item-card__photo"
+           loading="lazy"
+           onerror="this.parentElement.removeChild(this)">
       {% endfor %}
     </div>
     {% endif %}
 
+    {# Video preview #}
+    {% if item.video and item.video.length > 0 %}
+    <div class="item-card__media">
+      <video src="{{ item.video[0] }}"
+             class="item-card__video"
+             controls
+             preload="metadata"
+             {% if item.photo and item.photo.length > 0 %}poster="{{ item.photo[0] }}"{% endif %}>
+      </video>
+    </div>
+    {% endif %}
+
+    {# Audio preview #}
+    {% if item.audio and item.audio.length > 0 %}
+    <div class="item-card__media">
+      <audio src="{{ item.audio[0] }}" class="item-card__audio" controls preload="metadata"></audio>
+    </div>
+    {% endif %}
+
+    {# Footer with date and actions #}
     <footer class="item-card__footer">
       {% if item.published %}
       <time datetime="{{ item.published }}" class="item-card__date">
@@ -62,4 +136,36 @@
       {% endif %}
     </footer>
   </a>
+
+  {# Inline actions (Aperture pattern) #}
+  <div class="item-actions">
+    {% if item.url %}
+    <a href="{{ item.url }}" class="item-actions__button" target="_blank" rel="noopener" title="View original">
+      {{ icon("external") }}
+      <span class="visually-hidden">Original</span>
+    </a>
+    {% endif %}
+    <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="item-actions__button" title="Reply">
+      {{ icon("reply") }}
+      <span class="visually-hidden">Reply</span>
+    </a>
+    <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="item-actions__button" title="Like">
+      {{ icon("like") }}
+      <span class="visually-hidden">Like</span>
+    </a>
+    <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="item-actions__button" title="Repost">
+      {{ icon("repost") }}
+      <span class="visually-hidden">Repost</span>
+    </a>
+    {% if not item._is_read %}
+    <button type="button"
+            class="item-actions__button item-actions__mark-read"
+            data-action="mark-read"
+            data-item-id="{{ item._id }}"
+            title="Mark as read">
+      {{ icon("checkboxChecked") }}
+      <span class="visually-hidden">Mark read</span>
+    </button>
+    {% endif %}
+  </div>
 </article>

package/views/reader.njk

@@ -1,40 +1,41 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="reader">
     {% if channels.length > 0 %}
-    <ul class="reader__channels">
+    <div class="reader__channels">
       {% for channel in channels %}
-      <li class="reader__channel">
-        <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="reader__channel-link">
-          <span class="reader__channel-name">
-            {% if channel.uid === "notifications" %}
-            {{ icon("mention") }}
-            {% endif %}
-            {{ channel.name }}
-          </span>
-          {% if channel.unread > 0 %}
-          <span class="reader__channel-badge">{{ channel.unread }}</span>
+      <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="reader__channel{% if channel.uid === currentChannel %} reader__channel--active{% endif %}">
+        <span class="reader__channel-name">
+          {% if channel.uid === "notifications" %}
+          {{ icon("mention") }}
           {% endif %}
-        </a>
-      </li>
+          {{ channel.name }}
+        </span>
+        {% if channel.unread %}
+        <span class="reader__channel-badge{% if channel.unread === true %} reader__channel-badge--dot{% endif %}">
+          {% if channel.unread !== true %}{{ channel.unread }}{% endif %}
+        </span>
+        {% endif %}
+      </a>
       {% endfor %}
-    </ul>
-    <p class="reader__actions">
+    </div>
+    <div class="reader__actions">
       <a href="{{ baseUrl }}/search" class="button button--primary">
         {{ icon("syndicate") }} {{ __("microsub.feeds.follow") }}
       </a>
       <a href="{{ baseUrl }}/channels/new" class="button button--secondary">
         {{ icon("createPost") }} {{ __("microsub.channels.new") }}
       </a>
-    </p>
+    </div>
     {% else %}
-    {{ prose({ text: __("microsub.channels.empty") }) }}
-    <p>
+    <div class="reader__empty">
+      {{ icon("syndicate") }}
+      <p>{{ __("microsub.channels.empty") }}</p>
       <a href="{{ baseUrl }}/channels/new" class="button button--primary">
         {{ __("microsub.channels.new") }}
       </a>
-    </p>
+    </div>
     {% endif %}
   </div>
 {% endblock %}

package/views/search.njk

@@ -1,6 +1,6 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="search">
     <a href="{{ baseUrl }}/channels" class="back-link">
       {{ icon("previous") }} {{ __("microsub.channels.title") }}
@@ -28,11 +28,12 @@
     {% if results and results.length > 0 %}
     <div class="search__results">
       <h3>{{ __("microsub.search.title") }}</h3>
-      <ul class="search__list">
+      <div class="search__list">
         {% for result in results %}
-        <li class="search__item">
+        <div class="search__item">
           <div class="search__feed">
-            <span class="search__url">{{ result.url }}</span>
+            <span class="search__name">{{ result.title or "Feed" }}</span>
+            <span class="search__url">{{ result.url | replace("https://", "") | replace("http://", "") }}</span>
           </div>
           <form method="post" action="{{ baseUrl }}/subscribe" class="search__subscribe">
             <input type="hidden" name="url" value="{{ result.url }}">
@@ -47,12 +48,14 @@
               classes: "button--small"
             }) }}
           </form>
-        </li>
+        </div>
         {% endfor %}
-      </ul>
+      </div>
     </div>
     {% elif searched %}
-    {{ prose({ text: __("microsub.search.noResults") }) }}
+    <div class="reader__empty">
+      <p>{{ __("microsub.search.noResults") }}</p>
+    </div>
     {% endif %}
   </div>
 {% endblock %}

package/views/settings.njk

@@ -1,11 +1,13 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="settings">
     <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="back-link">
       {{ icon("previous") }} {{ channel.name }}
     </a>
 
+    <h2>{{ __("microsub.settings.title", { channel: channel.name }) }}</h2>
+
     <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/settings">
       {{ checkboxes({
         name: "excludeTypes",