@rmdes/indiekit-endpoint-microsub 1.0.55 → 1.0.57

package/views/channel.njk

@@ -7,6 +7,7 @@
       <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="_csrf" value="{{ csrfToken }}">
           <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">
@@ -40,6 +41,7 @@
 
     {% if items.length > 0 %}
     <form method="POST" action="{{ baseUrl }}/api/mark-view-read" id="mark-view-form">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
       <input type="hidden" name="channel" value="{{ channel.uid }}">
       {% for item in items %}
         {% if not item._is_read %}
@@ -94,348 +96,5 @@
     {% 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('.ms-item-card'));
-      let currentIndex = -1;
-
-      function focusItem(index) {
-        if (items[currentIndex]) {
-          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('ms-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('.ms-item-card__link');
-              if (link) link.click();
-            }
-            break;
-        }
-      });
-
-      // Handle individual mark-read buttons
-      const channelUid = timeline.dataset.channel;
-      // Microsub API is at the parent of /reader (e.g., /microsub not /microsub/reader)
-      const microsubApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
-
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__mark-read');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const itemId = button.dataset.itemId;
-        if (!itemId) return;
-
-        // Disable button while processing
-        button.disabled = true;
-
-        try {
-          const formData = new URLSearchParams();
-          formData.append('action', 'timeline');
-          formData.append('method', 'mark_read');
-          formData.append('channel', channelUid);
-          formData.append('entry', itemId);
-
-          const response = await fetch(microsubApiUrl, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: formData.toString(),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            // Hide the item with animation
-            const card = button.closest('.ms-item-card');
-            if (card) {
-              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-              card.style.opacity = '0';
-              card.style.transform = 'translateX(-20px)';
-              setTimeout(() => {
-                card.remove();
-                // Check if timeline is now empty
-                if (timeline.querySelectorAll('.ms-item-card').length === 0) {
-                  location.reload();
-                }
-              }, 300);
-            }
-          } else {
-            console.error('Failed to mark item as read');
-            button.disabled = false;
-          }
-        } catch (error) {
-          console.error('Error marking item as read:', error);
-          button.disabled = false;
-        }
-      });
-
-      // Handle caret toggle for mark-source-read popover
-      timeline.addEventListener('click', (e) => {
-        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('.ms-item-actions__mark-read-popover:not([hidden])')) {
-          if (p !== caret.nextElementSibling) p.hidden = true;
-        }
-
-        const popover = caret.nextElementSibling;
-        if (popover) popover.hidden = !popover.hidden;
-      });
-
-      // Handle mark-source-read button
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__mark-source-read');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const feedId = button.dataset.feedId;
-        if (!feedId) return;
-
-        button.disabled = true;
-
-        try {
-          const formData = new URLSearchParams();
-          formData.append('action', 'timeline');
-          formData.append('method', 'mark_read_source');
-          formData.append('channel', channelUid);
-          formData.append('feed', feedId);
-
-          const response = await fetch(microsubApiUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: formData.toString(),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            // Animate out all cards from this feed
-            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';
-              card.style.transform = 'translateX(-20px)';
-            }
-            setTimeout(() => {
-              for (const card of [...cards]) {
-                card.remove();
-              }
-              if (timeline.querySelectorAll('.ms-item-card').length === 0) {
-                location.reload();
-              }
-            }, 300);
-          } else {
-            button.disabled = false;
-          }
-        } catch (error) {
-          console.error('Error marking source as read:', error);
-          button.disabled = false;
-        }
-      });
-
-      // Close popovers on outside click
-      document.addEventListener('click', (e) => {
-        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;
-          }
-        }
-      });
-
-      // Handle save-for-later buttons
-      timeline.addEventListener('click', async (e) => {
-        const button = e.target.closest('.ms-item-actions__save-later');
-        if (!button) return;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const url = button.dataset.url;
-        const title = button.dataset.title;
-        if (!url) return;
-
-        button.disabled = true;
-
-        try {
-          const response = await fetch('/readlater/save', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url, title: title || url, source: 'microsub' }),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            button.classList.add('ms-item-actions__save-later--saved');
-            button.title = 'Saved';
-          } else {
-            button.disabled = false;
-          }
-        } catch {
-          button.disabled = false;
-        }
-      });
-    }
-
-    // === Infinite scroll ===
-    const loader = document.getElementById('timeline-loader');
-    if (loader && timeline) {
-      const spinner = loader.querySelector('.ms-timeline__spinner');
-      const loadMoreLink = loader.querySelector('.ms-timeline__load-more');
-      const endMessage = loader.querySelector('.ms-timeline__end');
-      let cursor = loader.dataset.cursor;
-      let loading = false;
-      let hasMore = true;
-      const apiUrl = loader.dataset.apiUrl;
-      const showReadParam = loader.dataset.showRead;
-
-      async function loadMore() {
-        if (loading || !hasMore) return;
-        loading = true;
-        if (spinner) spinner.style.display = '';
-        if (loadMoreLink) loadMoreLink.style.display = 'none';
-
-        try {
-          const params = new URLSearchParams({ after: cursor });
-          if (showReadParam === 'true') params.append('showRead', 'true');
-
-          const response = await fetch(`${apiUrl}?${params}`, {
-            credentials: 'same-origin'
-          });
-
-          if (!response.ok) throw new Error('Failed to load');
-
-          const data = await response.json();
-
-          if (data.html && data.count > 0) {
-            timeline.insertAdjacentHTML('beforeend', data.html);
-          }
-
-          if (data.paging?.after) {
-            cursor = data.paging.after;
-            if (loadMoreLink) {
-              loadMoreLink.href = `?after=${cursor}${showReadParam === 'true' ? '&showRead=true' : ''}`;
-              loadMoreLink.style.display = '';
-            }
-          } else {
-            hasMore = false;
-            if (loadMoreLink) loadMoreLink.style.display = 'none';
-            if (endMessage) endMessage.style.display = '';
-          }
-        } catch (error) {
-          console.error('Infinite scroll error:', error);
-          hasMore = false;
-          if (loadMoreLink) loadMoreLink.style.display = '';
-        } finally {
-          loading = false;
-          if (spinner) spinner.style.display = 'none';
-        }
-      }
-
-      // IntersectionObserver auto-loads when sentinel is visible
-      const observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasMore && !loading) {
-          loadMore();
-        }
-      }, { rootMargin: '200px' });
-      observer.observe(loader);
-
-      // Click handler for fallback link
-      if (loadMoreLink) {
-        loadMoreLink.addEventListener('click', (e) => {
-          e.preventDefault();
-          loadMore();
-        });
-      }
-
-      // Expose loadMore for mark-view-as-read to trigger
-      window.__microsubLoadMore = loadMore;
-    }
-
-    // === Mark current view as read button ===
-    const markViewBtn = document.querySelector('.js-mark-view-read');
-    if (markViewBtn && timeline) {
-      markViewBtn.style.display = '';
-      const markViewApiUrl = '{{ baseUrl }}'.replace(/\/reader$/, '');
-
-      markViewBtn.addEventListener('click', async () => {
-        const unreadCards = timeline.querySelectorAll('.ms-item-card:not(.ms-item-card--read)');
-        const itemIds = [...unreadCards].map((card) => card.dataset.itemId).filter(Boolean);
-
-        if (itemIds.length === 0) return;
-
-        markViewBtn.disabled = true;
-
-        const formData = new URLSearchParams();
-        formData.append('action', 'timeline');
-        formData.append('method', 'mark_read');
-        formData.append('channel', markViewBtn.dataset.channel);
-        for (const id of itemIds) {
-          formData.append('entry', id);
-        }
-
-        try {
-          const response = await fetch(markViewApiUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-            body: formData.toString(),
-            credentials: 'same-origin'
-          });
-
-          if (response.ok) {
-            for (const card of unreadCards) {
-              card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-              card.style.opacity = '0';
-              card.style.transform = 'translateX(-20px)';
-            }
-            setTimeout(() => {
-              for (const card of [...unreadCards]) card.remove();
-              markViewBtn.disabled = false;
-
-              // Trigger infinite scroll to load next batch
-              if (typeof window.__microsubLoadMore === 'function') {
-                window.__microsubLoadMore();
-              } else if (timeline.querySelectorAll('.ms-item-card').length === 0) {
-                location.reload();
-              }
-            }, 300);
-          } else {
-            markViewBtn.disabled = false;
-          }
-        } catch (error) {
-          console.error('Error marking current view as read:', error);
-          markViewBtn.disabled = false;
-        }
-      });
-    }
-  </script>
+  <script type="module" src="/assets/@rmdes-indiekit-endpoint-microsub/reader.js"></script>
 {% endblock %}

package/views/compose.njk

@@ -45,6 +45,7 @@
     {% endif %}
 
     <form method="post" action="{{ baseUrl }}/compose">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
       {% if replyTo %}
       <input type="hidden" name="in-reply-to" value="{{ replyTo }}">
       {% endif %}

package/views/deck-settings.njk

@@ -10,6 +10,7 @@
     </header>
 
     <form action="{{ baseUrl }}/deck/settings" method="POST">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
       <p>Select which channels appear as columns in your deck, and their order.</p>
 
       <div class="ms-deck-settings__channels">

package/views/feed-edit.njk

@@ -35,6 +35,7 @@
       </div>
 
       <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit" class="ms-feed-edit__form">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
         {{ input({
           id: "url",
           name: "url",
@@ -64,6 +65,7 @@
         <h3>Other Actions</h3>
 
         <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" class="ms-feed-edit__action">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
           <p>Run feed discovery on the current URL to find the actual RSS/Atom feed.</p>
           {{ button({
             text: "Rediscover Feed",
@@ -72,6 +74,7 @@
         </form>
 
         <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" class="ms-feed-edit__action">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
           <p>Force refresh this feed now.</p>
           {{ button({
             text: "Refresh Now",

package/views/feeds.njk

@@ -62,16 +62,19 @@
             {{ icon("updatePost") }}
           </a>
           <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" style="display:inline;">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <button type="submit" class="button button--secondary button--small" title="Rediscover feed">
               {{ icon("syndicate") }}
             </button>
           </form>
           <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" style="display:inline;">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <button type="submit" class="button button--secondary button--small" title="Refresh now">
               {{ icon("repost") }}
             </button>
           </form>
           <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/remove" style="display:inline;">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <input type="hidden" name="url" value="{{ feed.url }}">
             <button type="submit" class="button button--warning button--small" title="Unfollow">
               {{ icon("delete") }}
@@ -91,6 +94,7 @@
     <div class="ms-feeds__add">
       <h3>{{ __("microsub.feeds.follow") }}</h3>
       <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="ms-feeds__form">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
         {{ input({
           id: "url",
           name: "url",

package/views/layouts/reader.njk

@@ -6,6 +6,7 @@
 
 {% block content %}
 <link rel="stylesheet" href="/assets/@rmdes-indiekit-endpoint-microsub/styles.css">
+<meta name="csrf-token" content="{{ csrfToken }}">
 {% include "partials/breadcrumbs.njk" %}
 {% include "partials/view-switcher.njk" %}
 {% block reader %}{% endblock %}

package/views/search.njk

@@ -9,6 +9,7 @@
     <h2>{{ __("microsub.search.title") }}</h2>
 
     <form method="post" action="{{ baseUrl }}/search" class="ms-search__form">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
       {{ input({
         id: "query",
         name: "query",
@@ -60,6 +61,7 @@
           </div>
           {% if result.valid %}
           <form method="post" action="{{ baseUrl }}/subscribe" class="ms-search__subscribe">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
             <input type="hidden" name="url" value="{{ result.url }}">
             <label for="channel-{{ loop.index }}" class="-!-visually-hidden">{{ __("microsub.channels.title") }}</label>
             <select name="channel" id="channel-{{ loop.index }}" class="select select--small">

package/views/settings.njk

@@ -9,6 +9,7 @@
     <h2>{{ __("microsub.settings.title", { channel: channel.name }) }}</h2>
 
     <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/settings">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
       {{ checkboxes({
         name: "excludeTypes",
         values: channel.settings.excludeTypes,
@@ -64,6 +65,7 @@
       <h3>{{ __("microsub.settings.dangerZone") }}</h3>
       <p class="hint">{{ __("microsub.settings.deleteWarning") }}</p>
       <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/delete" onsubmit="return confirm('{{ __("microsub.settings.deleteConfirm") }}');">
+      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
         {{ button({
           text: __("microsub.settings.delete"),
           classes: "button--danger"