@rmdes/indiekit-endpoint-microsub 1.0.2 → 1.0.4

package/locales/en.json

@@ -27,6 +27,7 @@
     "feeds": {
       "title": "Feeds",
       "follow": "Follow",
+      "subscribe": "Subscribe to a feed",
       "unfollow": "Unfollow",
       "empty": "No feeds followed in this channel",
       "url": "Feed URL",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-microsub",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Microsub endpoint for Indiekit. Enables subscribing to feeds and reading content using the Microsub protocol.",
   "keywords": [
     "indiekit",
@@ -25,6 +25,7 @@
     "test": "node --test test/unit/*.js"
   },
   "files": [
+    "assets",
     "lib",
     "locales",
     "views",

package/views/channel-new.njk

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

package/views/channel.njk

@@ -1,12 +1,19 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="channel">
     <header class="channel__header">
       <a href="{{ baseUrl }}/channels" class="back-link">
         {{ icon("previous") }} {{ __("microsub.channels.title") }}
       </a>
       <div class="channel__actions">
+        <form action="{{ baseUrl }}/api/mark-read" method="POST" style="display: inline;">
+          <input type="hidden" name="channel" value="{{ channel.uid }}">
+          <input type="hidden" name="entry" value="last-read-entry">
+          <button type="submit" class="button button--secondary button--small">
+            {{ icon("checkboxChecked") }} {{ __("microsub.reader.markAllRead") }}
+          </button>
+        </form>
         <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="button button--secondary button--small">
           {{ icon("syndicate") }} {{ __("microsub.feeds.title") }}
         </a>
@@ -17,7 +24,7 @@
     </header>
 
     {% if items.length > 0 %}
-    <div class="timeline">
+    <div class="timeline" id="timeline" data-channel="{{ channel.uid }}">
       {% for item in items %}
       {% include "partials/item-card.njk" %}
       {% endfor %}
@@ -29,6 +36,8 @@
       <a href="?before={{ paging.before }}" class="button button--secondary">
         {{ icon("previous") }} {{ __("microsub.reader.newer") }}
       </a>
+      {% else %}
+      <span></span>
       {% endif %}
       {% if paging.after %}
       <a href="?after={{ paging.after }}" class="button button--secondary">
@@ -38,7 +47,56 @@
     </nav>
     {% endif %}
     {% else %}
-    {{ prose({ text: __("microsub.timeline.empty") }) }}
+    <div class="reader__empty">
+      {{ icon("syndicate") }}
+      <p>{{ __("microsub.timeline.empty") }}</p>
+      <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="button button--primary">
+        {{ __("microsub.feeds.subscribe") }}
+      </a>
+    </div>
     {% endif %}
   </div>
+
+  <script type="module">
+    // Keyboard navigation (j/k for items, o to open)
+    const timeline = document.getElementById('timeline');
+    if (timeline) {
+      const items = Array.from(timeline.querySelectorAll('.item-card'));
+      let currentIndex = -1;
+
+      function focusItem(index) {
+        if (items[currentIndex]) {
+          items[currentIndex].classList.remove('item-card--focused');
+        }
+        currentIndex = Math.max(0, Math.min(index, items.length - 1));
+        if (items[currentIndex]) {
+          items[currentIndex].classList.add('item-card--focused');
+          items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+
+      document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+        switch(e.key) {
+          case 'j':
+            e.preventDefault();
+            focusItem(currentIndex + 1);
+            break;
+          case 'k':
+            e.preventDefault();
+            focusItem(currentIndex - 1);
+            break;
+          case 'o':
+          case 'Enter':
+            e.preventDefault();
+            if (items[currentIndex]) {
+              const link = items[currentIndex].querySelector('.item-card__link');
+              if (link) link.click();
+            }
+            break;
+        }
+      });
+    }
+  </script>
 {% endblock %}

package/views/compose.njk

@@ -1,50 +1,66 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="compose">
-    <a href="{{ baseUrl }}/channels" class="back-link">
+    <a href="{{ backUrl or (baseUrl + '/channels') }}" class="back-link">
       {{ icon("previous") }} {{ __("Back") }}
     </a>
 
-    {% if replyTo %}
+    <h2>{{ __("microsub.compose.title") }}</h2>
+
+    {% if replyTo or reply %}
     <div class="compose__context">
-      {{ icon("reply") }} {{ __("microsub.compose.replyTo") }}: <a href="{{ replyTo }}">{{ replyTo }}</a>
+      {{ icon("reply") }} {{ __("microsub.compose.replyTo") }}:
+      <a href="{{ replyTo or reply }}" target="_blank" rel="noopener">
+        {{ (replyTo or reply) | replace("https://", "") | replace("http://", "") }}
+      </a>
     </div>
     {% endif %}
 
-    {% if likeOf %}
+    {% if likeOf or like %}
     <div class="compose__context">
-      {{ icon("like") }} {{ __("microsub.compose.likeOf") }}: <a href="{{ likeOf }}">{{ likeOf }}</a>
+      {{ icon("like") }} {{ __("microsub.compose.likeOf") }}:
+      <a href="{{ likeOf or like }}" target="_blank" rel="noopener">
+        {{ (likeOf or like) | replace("https://", "") | replace("http://", "") }}
+      </a>
     </div>
     {% endif %}
 
-    {% if repostOf %}
+    {% if repostOf or repost %}
     <div class="compose__context">
-      {{ icon("repost") }} {{ __("microsub.compose.repostOf") }}: <a href="{{ repostOf }}">{{ repostOf }}</a>
+      {{ icon("repost") }} {{ __("microsub.compose.repostOf") }}:
+      <a href="{{ repostOf or repost }}" target="_blank" rel="noopener">
+        {{ (repostOf or repost) | replace("https://", "") | replace("http://", "") }}
+      </a>
     </div>
     {% endif %}
 
-    {% if bookmarkOf %}
+    {% if bookmarkOf or bookmark %}
     <div class="compose__context">
-      {{ icon("bookmark") }} {{ __("microsub.compose.bookmarkOf") }}: <a href="{{ bookmarkOf }}">{{ bookmarkOf }}</a>
+      {{ icon("bookmark") }} {{ __("microsub.compose.bookmarkOf") }}:
+      <a href="{{ bookmarkOf or bookmark }}" target="_blank" rel="noopener">
+        {{ (bookmarkOf or bookmark) | replace("https://", "") | replace("http://", "") }}
+      </a>
     </div>
     {% endif %}
 
     <form method="post" action="{{ baseUrl }}/compose">
-      {% if replyTo %}
-      <input type="hidden" name="in-reply-to" value="{{ replyTo }}">
+      {% if replyTo or reply %}
+      <input type="hidden" name="in-reply-to" value="{{ replyTo or reply }}">
       {% endif %}
-      {% if likeOf %}
-      <input type="hidden" name="like-of" value="{{ likeOf }}">
+      {% if likeOf or like %}
+      <input type="hidden" name="like-of" value="{{ likeOf or like }}">
       {% endif %}
-      {% if repostOf %}
-      <input type="hidden" name="repost-of" value="{{ repostOf }}">
+      {% if repostOf or repost %}
+      <input type="hidden" name="repost-of" value="{{ repostOf or repost }}">
       {% endif %}
-      {% if bookmarkOf %}
-      <input type="hidden" name="bookmark-of" value="{{ bookmarkOf }}">
+      {% if bookmarkOf or bookmark %}
+      <input type="hidden" name="bookmark-of" value="{{ bookmarkOf or bookmark }}">
       {% endif %}
 
-      {% if not likeOf and not repostOf and not bookmarkOf %}
+      {% set isAction = (likeOf or like) or (repostOf or repost) or (bookmarkOf or bookmark) %}
+
+      {% if not isAction %}
       {{ textarea({
         label: __("microsub.compose.content"),
         id: "content",
@@ -52,16 +68,31 @@
         rows: 5,
         attributes: { autofocus: true }
       }) }}
+      <div class="compose__counter">
+        <span id="char-count">0</span> characters
+      </div>
       {% endif %}
 
       <div class="button-group">
         {{ button({
           text: __("microsub.compose.submit")
         }) }}
-        <a href="{{ baseUrl }}/channels" class="button button--secondary">
+        <a href="{{ backUrl or (baseUrl + '/channels') }}" class="button button--secondary">
           {{ __("microsub.compose.cancel") }}
         </a>
       </div>
     </form>
   </div>
+
+  {% if not isAction %}
+  <script type="module">
+    const textarea = document.getElementById('content');
+    const counter = document.getElementById('char-count');
+    if (textarea && counter) {
+      textarea.addEventListener('input', () => {
+        counter.textContent = textarea.value.length;
+      });
+    }
+  </script>
+  {% endif %}
 {% endblock %}

package/views/feeds.njk

@@ -1,6 +1,6 @@
-{% extends "document.njk" %}
+{% extends "layouts/reader.njk" %}
 
-{% block content %}
+{% block reader %}
   <div class="feeds">
     <header class="feeds__header">
       <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="back-link">
@@ -11,16 +11,24 @@
     <h2>{{ __("microsub.feeds.title") }}</h2>
 
     {% if feeds.length > 0 %}
-    <ul class="feeds__list">
+    <div class="feeds__list">
       {% for feed in feeds %}
-      <li class="feeds__item">
+      <div class="feeds__item">
         <div class="feeds__info">
           {% if feed.photo %}
-          <img src="{{ feed.photo }}" alt="" class="feeds__photo" width="32" height="32" loading="lazy">
+          <img src="{{ feed.photo }}"
+               alt=""
+               class="feeds__photo"
+               width="48"
+               height="48"
+               loading="lazy"
+               onerror="this.style.display='none'">
           {% endif %}
           <div class="feeds__details">
             <span class="feeds__name">{{ feed.title or feed.url }}</span>
-            <a href="{{ feed.url }}" class="feeds__url" target="_blank" rel="noopener">{{ feed.url }}</a>
+            <a href="{{ feed.url }}" class="feeds__url" target="_blank" rel="noopener">
+              {{ feed.url | replace("https://", "") | replace("http://", "") }}
+            </a>
           </div>
         </div>
         <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/remove" class="feeds__actions">
@@ -30,11 +38,14 @@
             classes: "button--secondary button--small"
           }) }}
         </form>
-      </li>
+      </div>
       {% endfor %}
-    </ul>
+    </div>
     {% else %}
-    {{ prose({ text: __("microsub.feeds.empty") }) }}
+    <div class="reader__empty">
+      {{ icon("syndicate") }}
+      <p>{{ __("microsub.feeds.empty") }}</p>
+    </div>
     {% endif %}
 
     <div class="feeds__add">

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["in-reply-to"] or item["like-of"] or item["repost-of"] or item["bookmark-of"] %}
-    <div class="item__context">
-      {% if item["in-reply-to"] %}
-      <p>{{ icon("reply") }} {{ __("Reply to") }}: <a href="{{ item["in-reply-to"][0] }}">{{ item["in-reply-to"][0] }}</a></p>
-      {% endif %}
-      {% if item["like-of"] %}
-      <p>{{ icon("like") }} {{ __("Liked") }}: <a href="{{ item["like-of"][0] }}">{{ item["like-of"][0] }}</a></p>
-      {% endif %}
-      {% if item["repost-of"] %}
-      <p>{{ icon("repost") }} {{ __("Reposted") }}: <a href="{{ item["repost-of"][0] }}">{{ item["repost-of"][0] }}</a></p>
-      {% endif %}
-      {% if item["bookmark-of"] %}
-      <p>{{ icon("bookmark") }} {{ __("Bookmarked") }}: <a href="{{ item["bookmark-of"][0] }}">{{ item["bookmark-of"][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 %}