@rmdes/indiekit-endpoint-microsub 1.0.45 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-microsub",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "Microsub endpoint for Indiekit. Enables subscribing to feeds and reading content using the Microsub protocol.",
   "keywords": [
     "indiekit",

package/views/actor.njk

@@ -1,33 +1,32 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="channel">
-    <header class="channel__header">
+  <div class="ms-channel">
+    <header class="ms-channel__header">
       <a href="{{ baseUrl }}/channels/activitypub" class="back-link">
         {{ icon("previous") }} Fediverse
       </a>
     </header>
 
     {# Actor profile card #}
-    <div class="actor-profile">
-      <div class="actor-profile__header">
+    <div class="ms-actor-profile">
+      <div class="ms-actor-profile__header">
         {% if actor.photo %}
         <img src="{{ actor.photo }}"
              alt=""
-             class="actor-profile__avatar"
+             class="ms-actor-profile__avatar"
              width="80"
-             height="80"
-             onerror="this.style.display='none'">
+             height="80">
         {% endif %}
-        <div class="actor-profile__info">
-          <h2 class="actor-profile__name">{{ actor.name }}</h2>
+        <div class="ms-actor-profile__info">
+          <h2 class="ms-actor-profile__name">{{ actor.name }}</h2>
           {% if actor.handle %}
-          <span class="actor-profile__handle">@{{ actor.handle }}</span>
+          <span class="ms-actor-profile__handle">@{{ actor.handle }}</span>
           {% endif %}
           {% if actor.summary %}
-          <p class="actor-profile__summary">{{ actor.summary }}</p>
+          <p class="ms-actor-profile__summary">{{ actor.summary }}</p>
           {% endif %}
-          <div class="actor-profile__stats">
+          <div class="ms-actor-profile__stats">
             {% if actor.followersCount %}
             <span>{{ actor.followersCount }} followers</span>
             {% endif %}
@@ -37,7 +36,7 @@
           </div>
         </div>
       </div>
-      <div class="actor-profile__actions">
+      <div class="ms-actor-profile__actions">
         <a href="{{ actor.url }}" class="button button--secondary button--small" target="_blank" rel="noopener">
           {{ icon("external") }} View profile
         </a>
@@ -63,39 +62,38 @@
     </div>
 
     {% if error %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("warning") }}
       <p>{{ error }}</p>
     </div>
     {% elif items.length > 0 %}
-    <div class="timeline" id="timeline">
+    <div class="ms-timeline" id="timeline">
       {% for item in items %}
-      <article class="item-card">
+      <article class="ms-item-card">
         {# Author #}
         {% if item.author %}
-        <div class="item-card__author" style="padding: 12px 16px 0;">
+        <div class="ms-item-card__author" style="padding: 12px 16px 0;">
           {% if item.author.photo %}
           <img src="{{ item.author.photo }}"
                alt=""
-               class="item-card__author-photo"
+               class="ms-item-card__author-photo"
                width="40"
                height="40"
-               loading="lazy"
-               onerror="this.style.display='none'">
+               loading="lazy">
           {% endif %}
-          <div class="item-card__author-info">
-            <span class="item-card__author-name">{{ item.author.name or "Unknown" }}</span>
+          <div class="ms-item-card__author-info">
+            <span class="ms-item-card__author-name">{{ item.author.name or "Unknown" }}</span>
             {% if item.author.url %}
-            <span class="item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
+            <span class="ms-item-card__source">{{ item.author.url | replace("https://", "") | replace("http://", "") }}</span>
             {% endif %}
           </div>
         </div>
         {% endif %}
 
-        <a href="{{ item.url }}" class="item-card__link" target="_blank" rel="noopener">
+        <a href="{{ item.url }}" class="ms-item-card__link" target="_blank" rel="noopener">
           {# Reply context #}
           {% if item["in-reply-to"] and item["in-reply-to"].length > 0 %}
-          <div class="item-card__context">
+          <div class="ms-item-card__context">
             {{ icon("reply") }}
             <span>Reply to</span>
             <span>{{ item["in-reply-to"][0] | replace("https://", "") | replace("http://", "") | truncate(50) }}</span>
@@ -104,12 +102,12 @@
 
           {# Title #}
           {% if item.name %}
-          <h3 class="item-card__title">{{ item.name }}</h3>
+          <h3 class="ms-item-card__title">{{ item.name }}</h3>
           {% endif %}
 
           {# Content #}
           {% if item.content %}
-          <div class="item-card__content{% if (item.content.text or '') | length > 300 %} item-card__content--truncated{% endif %}">
+          <div class="ms-item-card__content{% if (item.content.text or '') | length > 300 %} ms-item-card__content--truncated{% endif %}">
             {% if item.content.html %}
             {{ item.content.html | safe | striptags | truncate(400) }}
             {% elif item.content.text %}
@@ -120,10 +118,10 @@
 
           {# Tags #}
           {% if item.category and item.category.length > 0 %}
-          <div class="item-card__categories">
+          <div class="ms-item-card__categories">
             {% for cat in item.category %}
             {% if loop.index0 < 5 %}
-            <span class="item-card__category">#{{ cat }}</span>
+            <span class="ms-item-card__category">#{{ cat }}</span>
             {% endif %}
             {% endfor %}
           </div>
@@ -132,20 +130,19 @@
           {# Photos #}
           {% if item.photo and item.photo.length > 0 %}
           {% set photoCount = item.photo.length if item.photo.length <= 4 else 4 %}
-          <div class="item-card__photos item-card__photos--{{ photoCount }}">
+          <div class="ms-item-card__photos ms-item-card__photos--{{ photoCount }}">
             {% for photo in item.photo %}
             {% if loop.index0 < 4 %}
-            <img src="{{ photo }}" alt="" class="item-card__photo" loading="lazy"
-                 onerror="this.parentElement.removeChild(this)">
+            <img src="{{ photo }}" alt="" class="ms-item-card__photo" loading="lazy">
             {% endif %}
             {% endfor %}
           </div>
           {% endif %}
 
           {# Footer #}
-          <footer class="item-card__footer">
+          <footer class="ms-item-card__footer">
             {% if item.published %}
-            <time datetime="{{ item.published }}" class="item-card__date">
+            <time datetime="{{ item.published }}" class="ms-item-card__date">
               {{ item.published | date("PP", { locale: locale, timeZone: application.timeZone }) }}
             </time>
             {% endif %}
@@ -153,20 +150,20 @@
         </a>
 
         {# Actions #}
-        <div class="item-actions">
-          <a href="{{ item.url }}" class="item-actions__button" target="_blank" rel="noopener" title="View original">
+        <div class="ms-item-actions">
+          <a href="{{ item.url }}" class="ms-item-actions__button" target="_blank" rel="noopener" title="View original">
             {{ icon("external") }}
           </a>
-          <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="item-actions__button" title="Reply">
+          <a href="{{ baseUrl }}/compose?reply={{ item.url | urlencode }}" class="ms-item-actions__button" title="Reply">
             {{ icon("reply") }}
           </a>
-          <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="item-actions__button" title="Like">
+          <a href="{{ baseUrl }}/compose?like={{ item.url | urlencode }}" class="ms-item-actions__button" title="Like">
             {{ icon("like") }}
           </a>
-          <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="item-actions__button" title="Repost">
+          <a href="{{ baseUrl }}/compose?repost={{ item.url | urlencode }}" class="ms-item-actions__button" title="Repost">
             {{ icon("repost") }}
           </a>
-          <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="item-actions__button" title="Bookmark">
+          <a href="{{ baseUrl }}/compose?bookmark={{ item.url | urlencode }}" class="ms-item-actions__button" title="Bookmark">
             {{ icon("bookmark") }}
           </a>
         </div>
@@ -174,7 +171,7 @@
       {% endfor %}
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {{ icon("syndicate") }}
       <p>No posts found for this actor.</p>
     </div>

package/views/channel.njk

@@ -1,10 +1,10 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="channel">
-    <header class="channel__header">
+  <div class="ms-channel">
+    <header class="ms-channel__header">
       <h1>{{ channel.name }}</h1>
-      <div class="channel__actions">
+      <div class="ms-channel__actions">
         {% if not showRead and items.length > 0 %}
         <form action="{{ baseUrl }}/api/mark-read" method="POST" style="display: inline;">
           <input type="hidden" name="channel" value="{{ channel.uid }}">
@@ -33,14 +33,14 @@
     </header>
 
     {% if items.length > 0 %}
-    <div class="timeline" id="timeline" data-channel="{{ channel.uid }}">
+    <div class="ms-timeline" id="timeline" data-channel="{{ channel.uid }}">
       {% for item in items %}
       {% include "partials/item-card.njk" %}
       {% endfor %}
     </div>
 
     {% if paging %}
-    <nav class="timeline__paging" aria-label="Pagination">
+    <nav class="ms-timeline__paging" aria-label="Pagination">
       {% if paging.before %}
       <a href="?before={{ paging.before }}{% if showRead %}&showRead=true{% endif %}" class="button button--secondary">
         {{ icon("previous") }} {{ __("microsub.reader.newer") }}
@@ -56,7 +56,7 @@
     </nav>
     {% endif %}
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       {% if readCount > 0 and not showRead %}
       {{ icon("checkboxChecked") }}
       <p>{{ __("microsub.reader.allRead") }}</p>
@@ -78,16 +78,16 @@
     // Keyboard navigation (j/k for items, o to open)
     const timeline = document.getElementById('timeline');
     if (timeline) {
-      const items = Array.from(timeline.querySelectorAll('.item-card'));
+      const items = Array.from(timeline.querySelectorAll('.ms-item-card'));
       let currentIndex = -1;
 
       function focusItem(index) {
         if (items[currentIndex]) {
-          items[currentIndex].classList.remove('item-card--focused');
+          items[currentIndex].classList.remove('ms-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].classList.add('ms-item-card--focused');
           items[currentIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
       }
@@ -108,7 +108,7 @@
           case 'Enter':
             e.preventDefault();
             if (items[currentIndex]) {
-              const link = items[currentIndex].querySelector('.item-card__link');
+              const link = items[currentIndex].querySelector('.ms-item-card__link');
               if (link) link.click();
             }
             break;
@@ -121,7 +121,7 @@
       const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
 
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-read');
+        const button = e.target.closest('.ms-item-actions__mark-read');
         if (!button) return;
 
         e.preventDefault();
@@ -151,7 +151,7 @@
 
           if (response.ok) {
             // Hide the item with animation
-            const card = button.closest('.item-card');
+            const card = button.closest('.ms-item-card');
             if (card) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
@@ -159,7 +159,7 @@
               setTimeout(() => {
                 card.remove();
                 // Check if timeline is now empty
-                if (timeline.querySelectorAll('.item-card').length === 0) {
+                if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                   location.reload();
                 }
               }, 300);
@@ -176,14 +176,14 @@
 
       // Handle caret toggle for mark-source-read popover
       timeline.addEventListener('click', (e) => {
-        const caret = e.target.closest('.item-actions__mark-read-caret');
+        const caret = e.target.closest('.ms-item-actions__mark-read-caret');
         if (!caret) return;
 
         e.preventDefault();
         e.stopPropagation();
 
         // Close other open popovers
-        for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
           if (p !== caret.nextElementSibling) p.hidden = true;
         }
 
@@ -193,7 +193,7 @@
 
       // Handle mark-source-read button
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__mark-source-read');
+        const button = e.target.closest('.ms-item-actions__mark-source-read');
         if (!button) return;
 
         e.preventDefault();
@@ -220,7 +220,7 @@
 
           if (response.ok) {
             // Animate out all cards from this feed
-            const cards = timeline.querySelectorAll(`.item-card[data-feed-id="${feedId}"]`);
+            const cards = timeline.querySelectorAll(`.ms-item-card[data-feed-id="${feedId}"]`);
             for (const card of cards) {
               card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
               card.style.opacity = '0';
@@ -230,7 +230,7 @@
               for (const card of [...cards]) {
                 card.remove();
               }
-              if (timeline.querySelectorAll('.item-card').length === 0) {
+              if (timeline.querySelectorAll('.ms-item-card').length === 0) {
                 location.reload();
               }
             }, 300);
@@ -245,8 +245,8 @@
 
       // Close popovers on outside click
       document.addEventListener('click', (e) => {
-        if (!e.target.closest('.item-actions__mark-read-group')) {
-          for (const p of timeline.querySelectorAll('.item-actions__mark-read-popover:not([hidden])')) {
+        if (!e.target.closest('.ms-item-actions__mark-read-group')) {
+          for (const p of timeline.querySelectorAll('.ms-item-actions__mark-read-popover:not([hidden])')) {
             p.hidden = true;
           }
         }
@@ -254,7 +254,7 @@
 
       // Handle save-for-later buttons
       timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.item-actions__save-later');
+        const button = e.target.closest('.ms-item-actions__save-later');
         if (!button) return;
 
         e.preventDefault();
@@ -275,7 +275,7 @@
           });
 
           if (response.ok) {
-            button.classList.add('item-actions__save-later--saved');
+            button.classList.add('ms-item-actions__save-later--saved');
             button.title = 'Saved';
           } else {
             button.disabled = false;

package/views/compose.njk

@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="compose">
+  <div class="ms-compose">
     <a href="{{ backUrl or (baseUrl + '/channels') }}" class="back-link">
       {{ icon("previous") }} {{ __("Back") }}
     </a>
@@ -9,7 +9,7 @@
     <h2>{{ __("microsub.compose.title") }}</h2>
 
     {% if replyTo and replyTo is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("reply") }} {{ __("microsub.compose.replyTo") }}:
       <a href="{{ replyTo }}" target="_blank" rel="noopener">
         {{ replyTo | replace("https://", "") | replace("http://", "") }}
@@ -18,7 +18,7 @@
     {% endif %}
 
     {% if likeOf and likeOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("like") }} {{ __("microsub.compose.likeOf") }}:
       <a href="{{ likeOf }}" target="_blank" rel="noopener">
         {{ likeOf | replace("https://", "") | replace("http://", "") }}
@@ -27,7 +27,7 @@
     {% endif %}
 
     {% if repostOf and repostOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("repost") }} {{ __("microsub.compose.repostOf") }}:
       <a href="{{ repostOf }}" target="_blank" rel="noopener">
         {{ repostOf | replace("https://", "") | replace("http://", "") }}
@@ -36,7 +36,7 @@
     {% endif %}
 
     {% if bookmarkOf and bookmarkOf is string %}
-    <div class="compose__context">
+    <div class="ms-compose__context">
       {{ icon("bookmark") }} {{ __("microsub.compose.bookmarkOf") }}:
       <a href="{{ bookmarkOf }}" target="_blank" rel="noopener">
         {{ bookmarkOf | replace("https://", "") | replace("http://", "") }}
@@ -68,13 +68,13 @@
         attributes: { autofocus: true },
         hint: __("microsub.compose.commentHint") if isAction else false
       }) }}
-      <div class="compose__counter">
+      <div class="ms-compose__counter">
         <span id="char-count">0</span> characters
       </div>
 
       {# Syndication targets #}
       {% if syndicationTargets and syndicationTargets.length %}
-      <fieldset class="compose__syndication">
+      <fieldset class="ms-compose__syndication">
         <legend>{{ __("microsub.compose.syndicateTo") }}</legend>
         <p class="hint">{{ __("microsub.compose.syndicateHint") }}</p>
         {% for target in syndicationTargets %}

package/views/deck-settings.njk

@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="settings">
+  <div class="ms-settings">
     <header>
       <a href="{{ baseUrl }}/deck" class="back-link">
         {{ __("microsub.views.deck") }}
@@ -12,13 +12,13 @@
     <form action="{{ baseUrl }}/deck/settings" method="POST">
       <p>Select which channels appear as columns in your deck, and their order.</p>
 
-      <div class="deck-settings__channels">
+      <div class="ms-deck-settings__channels">
         {% for channel in channels %}
         {% if channel.uid !== "notifications" %}
-        <label class="deck-settings__channel">
+        <label class="ms-deck-settings__channel">
           <input type="checkbox" name="columns" value="{{ channel._id }}"
             {% if channel._id.toString() in selectedIds %}checked{% endif %}>
-          <span class="timeline-view__filter-color" style="background: {{ channel.color }}"></span>
+          <span class="ms-timeline-view__filter-color" style="background: {{ channel.color }}"></span>
           {{ channel.name }}
         </label>
         {% endif %}

package/views/deck.njk

@@ -1,8 +1,8 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="deck">
-    <header class="deck__header">
+  <div class="ms-deck">
+    <header class="ms-deck__header">
       <h1>{{ __("microsub.views.deck") }}</h1>
       <a href="{{ baseUrl }}/deck/settings" class="button button--secondary button--small">
         Configure columns
@@ -10,29 +10,29 @@
     </header>
 
     {% if columns.length > 0 %}
-    <div class="deck__columns">
+    <div class="ms-deck__columns">
       {% for col in columns %}
-      <div class="deck__column" data-channel-uid="{{ col.channel.uid }}">
-        <div class="deck__column-header" style="border-top: 3px solid {{ col.channel.color or '#ccc' }}">
-          <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}" class="deck__column-name">
+      <div class="ms-deck__column" data-channel-uid="{{ col.channel.uid }}">
+        <div class="ms-deck__column-header" style="border-top: 3px solid {{ col.channel.color or '#ccc' }}">
+          <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}" class="ms-deck__column-name">
             {{ col.channel.name }}
           </a>
           {% if col.channel.unread %}
-          <span class="reader__channel-badge{% if col.channel.unread === true %} reader__channel-badge--dot{% endif %}">
+          <span class="ms-reader__channel-badge{% if col.channel.unread === true %} ms-reader__channel-badge--dot{% endif %}">
             {% if col.channel.unread !== true %}{{ col.channel.unread }}{% endif %}
           </span>
           {% endif %}
         </div>
-        <div class="deck__column-items">
+        <div class="ms-deck__column-items">
           {% for item in col.items %}
           {% include "partials/item-card-compact.njk" %}
           {% endfor %}
           {% if col.items.length === 0 %}
-          <p class="deck__column-empty">No unread items</p>
+          <p class="ms-deck__column-empty">No unread items</p>
           {% endif %}
           {% if col.paging and col.paging.after %}
           <a href="{{ baseUrl }}/channels/{{ col.channel.uid }}"
-             class="deck__column-more button button--secondary button--small">
+             class="ms-deck__column-more button button--secondary button--small">
             View more
           </a>
           {% endif %}
@@ -41,7 +41,7 @@
       {% endfor %}
     </div>
     {% else %}
-    <div class="reader__empty">
+    <div class="ms-reader__empty">
       <p>No columns configured. Add channels to your deck.</p>
       <a href="{{ baseUrl }}/deck/settings" class="button button--primary">
         Configure deck

package/views/feed-edit.njk

@@ -1,7 +1,7 @@
 {% extends "layouts/reader.njk" %}
 
 {% block reader %}
-  <div class="settings">
+  <div class="ms-settings">
     <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="back-link">
       {{ icon("previous") }} {{ __("microsub.feeds.title") }}
     </a>
@@ -9,20 +9,20 @@
     <h2>{{ __("microsub.feeds.edit") }}</h2>
 
     {% if error %}
-    <div class="notice notice--error">
+    <div class="ms-notice ms-notice--error">
       <p>{{ error }}</p>
     </div>
     {% endif %}
 
-    <div class="feed-edit">
-      <div class="feed-edit__current">
+    <div class="ms-feed-edit">
+      <div class="ms-feed-edit__current">
         <h3>Current Feed</h3>
-        <p class="feed-edit__url">{{ feed.url }}</p>
+        <p class="ms-feed-edit__url">{{ feed.url }}</p>
         {% if feed.title %}
-        <p class="feed-edit__title">{{ feed.title }}</p>
+        <p class="ms-feed-edit__title">{{ feed.title }}</p>
         {% endif %}
         {% if feed.status == 'error' %}
-        <div class="notice notice--error">
+        <div class="ms-notice ms-notice--error">
           <p><strong>Status:</strong> Error</p>
           {% if feed.lastError %}
           <p><strong>Last error:</strong> {{ feed.lastError }}</p>
@@ -34,7 +34,7 @@
         {% endif %}
       </div>
 
-      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit" class="feed-edit__form">
+      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit" class="ms-feed-edit__form">
         {{ input({
           id: "url",
           name: "url",
@@ -46,7 +46,7 @@
           autocomplete: "off"
         }) }}
 
-        <p class="feed-edit__help">
+        <p class="ms-feed-edit__help">
           Enter the direct URL to the RSS, Atom, or JSON Feed. The URL will be validated before updating.
         </p>
 
@@ -60,10 +60,10 @@
 
       <div class="divider"></div>
 
-      <div class="feed-edit__actions">
+      <div class="ms-feed-edit__actions">
         <h3>Other Actions</h3>
 
-        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" class="feed-edit__action">
+        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" class="ms-feed-edit__action">
           <p>Run feed discovery on the current URL to find the actual RSS/Atom feed.</p>
           {{ button({
             text: "Rediscover Feed",
@@ -71,7 +71,7 @@
           }) }}
         </form>
 
-        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" class="feed-edit__action">
+        <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" class="ms-feed-edit__action">
           <p>Force refresh this feed now.</p>
           {{ button({
             text: "Refresh Now",