From 690a10ecf81559ee8c37cec17bf9c2498c533e68 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Tue, 17 Feb 2026 15:26:26 +0100
Subject: [PATCH] feat: add FeedLand sidebar widget

Replicates Dave Winer's blogroll.js visual rendering (240px bordered
container, Ubuntu/Rancho fonts, Title/When sort, caret wedges, truncated
titles, relative timestamps, "Powered by FeedLand" footer) using Alpine.js
and the blogroll API instead of jQuery + external scripts.

Registered in all three sidebar types (homepage, blog listing, blog post)
and in the fallback sidebar.
---
 _includes/components/blog-sidebar.njk     |   2 +
 _includes/components/homepage-sidebar.njk |   2 +
 _includes/components/sidebar.njk          |   7 +
 _includes/components/widgets/feedland.njk | 292 ++++++++++++++++++++++
 4 files changed, 303 insertions(+)
 create mode 100644 _includes/components/widgets/feedland.njk

diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk
index 6c665f3..799b5aa 100644
--- a/_includes/components/blog-sidebar.njk
+++ b/_includes/components/blog-sidebar.njk
@@ -28,6 +28,8 @@
       {% include "components/widgets/funkwhale.njk" %}
     {% elif widget.type == "blogroll" %}
       {% include "components/widgets/blogroll.njk" %}
+    {% elif widget.type == "feedland" %}
+      {% include "components/widgets/feedland.njk" %}
     {% elif widget.type == "categories" %}
       {% include "components/widgets/categories.njk" %}
     {% elif widget.type == "search" %}
diff --git a/_includes/components/homepage-sidebar.njk b/_includes/components/homepage-sidebar.njk
index 936cb92..754fb9a 100644
--- a/_includes/components/homepage-sidebar.njk
+++ b/_includes/components/homepage-sidebar.njk
@@ -13,6 +13,8 @@
       {% include "components/widgets/recent-posts.njk" %}
     {% elif widget.type == "blogroll" %}
       {% include "components/widgets/blogroll.njk" %}
+    {% elif widget.type == "feedland" %}
+      {% include "components/widgets/feedland.njk" %}
     {% elif widget.type == "categories" %}
       {% include "components/widgets/categories.njk" %}
     {% elif widget.type == "search" %}
diff --git a/_includes/components/sidebar.njk b/_includes/components/sidebar.njk
index 12c151f..0ee74eb 100644
--- a/_includes/components/sidebar.njk
+++ b/_includes/components/sidebar.njk
@@ -20,6 +20,8 @@
       {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
       {% include "components/widgets/blogroll.njk" %}
       {% endif %}
+    {% elif widget.type == "feedland" %}
+      {% include "components/widgets/feedland.njk" %}
     {% elif widget.type == "categories" %}
       {% include "components/widgets/categories.njk" %}
     {% elif widget.type == "subscribe" %}
@@ -70,6 +72,11 @@
   {% include "components/widgets/blogroll.njk" %}
   {% endif %}
 
+  {# FeedLand — only when backend is available #}
+  {% if blogrollStatus and blogrollStatus.source == "indiekit" %}
+  {% include "components/widgets/feedland.njk" %}
+  {% endif %}
+
   {# Categories/Tags #}
   {% include "components/widgets/categories.njk" %}
 {% endif %}
diff --git a/_includes/components/widgets/feedland.njk b/_includes/components/widgets/feedland.njk
new file mode 100644
index 0000000..4e78d4a
--- /dev/null
+++ b/_includes/components/widgets/feedland.njk
@@ -0,0 +1,292 @@
+{# FeedLand Widget - Matches Dave Winer's blogroll.js visual rendering #}
+{# Uses Alpine.js + blogroll API instead of jQuery + external blogroll.js #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Rancho&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
+
+<style>
+.divBlogrollContainer {
+  display: block;
+  vertical-align: top;
+  width: 240px;
+  border: 1px solid gainsboro;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-family: Ubuntu, sans-serif;
+  font-size: 15px;
+  box-sizing: content-box;
+}
+.divBlogrollContainer:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  background-color: white;
+}
+.divBlogroll {
+  width: 220px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.divBlogrollTable {
+  width: 100%;
+  margin-right: 0;
+  border: 0;
+  min-width: 0;
+}
+.divBlogrollTable td {
+  border: 0;
+}
+.divBlogrollTitle {
+  display: block;
+  width: 100%;
+  font-family: "Rancho", cursive;
+  font-size: 36px;
+  font-weight: bold;
+  letter-spacing: -1px;
+  text-align: center;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  line-height: 1.1em;
+}
+.divBlogrollTitle a {
+  color: inherit;
+  text-decoration: none;
+}
+.divBlogrollTitle a:hover {
+  text-decoration: underline;
+}
+.divBlogrollSortLinks {
+  font-size: 12px;
+  line-height: 14px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.divBlogrollSortLinks .spTitleLink {
+  margin-left: 16px;
+  cursor: pointer;
+}
+.divBlogrollSortLinks .spWhenLink {
+  float: right;
+  padding-right: 2px;
+  cursor: pointer;
+}
+.divBlogrollSortLinks .selected {
+  font-weight: bold;
+}
+.trBlogrollFeed {
+  line-height: normal;
+}
+.trBlogrollFeed td {
+  padding-left: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-right: 0;
+}
+.trBlogrollFeed .tdBlogrollWedge {
+  padding-left: 4px;
+  padding-right: 0;
+  vertical-align: top;
+  width: 12px;
+}
+.trBlogrollFeed .tdBlogrollFeedTitle {
+  font-size: 15px;
+  color: inherit;
+  cursor: pointer;
+  padding-left: 0;
+}
+.trBlogrollFeed .tdBlogrollFeedTitle a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+.trBlogrollFeed .tdBlogrollFeedTitle a:hover {
+  text-decoration: underline;
+}
+.trBlogrollFeed .tdBlogrollFeedTitle .spWhenUpdated {
+  float: right;
+  font-size: 12px;
+  margin-top: 2px;
+  padding-right: 2px;
+}
+.trBlogrollFeed .tdBlogrollFeedTitle .spTitleString {
+  display: inline-block;
+  white-space: nowrap;
+  max-width: 155px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.trBlogrollFeed:hover {
+  background-color: whitesmoke;
+}
+.darkCaretColor {
+  opacity: .9;
+}
+.lightCaretColor {
+  opacity: .2;
+}
+.divBlogrollFooter {
+  text-align: center;
+  font-size: 13px;
+  border-top: 1px solid gainsboro;
+  margin-top: 13px;
+  padding-top: 4px;
+  opacity: 0.5;
+}
+.divBlogrollFooter a {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+.divBlogrollFooter a:hover {
+  text-decoration: underline;
+}
+@media screen and (max-width: 576px) {
+  .divBlogrollContainer {
+    width: 180px;
+    margin-right: 0;
+  }
+  .divBlogroll {
+    width: 100%;
+  }
+  .divBlogrollTitle {
+    display: none;
+  }
+  .trBlogrollFeed .tdBlogrollFeedTitle {
+    font-size: 14px;
+  }
+  .trBlogrollFeed .tdBlogrollWedge {
+    width: 12px;
+    padding-left: 4px;
+    padding-right: 0;
+  }
+  .trBlogrollFeed .tdBlogrollFeedTitle .spTitleString {
+    max-width: 115px;
+  }
+}
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .dark .divBlogrollContainer {
+    border-color: #444;
+    color: #e0e0e0;
+  }
+  .dark .divBlogrollContainer:focus {
+    background-color: #1a1a1a;
+  }
+  .dark .trBlogrollFeed:hover {
+    background-color: #2a2a2a;
+  }
+  .dark .divBlogrollFooter {
+    border-top-color: #444;
+  }
+}
+.dark .divBlogrollContainer {
+  border-color: #444;
+  color: #e0e0e0;
+}
+.dark .divBlogrollContainer:focus {
+  background-color: #1a1a1a;
+}
+.dark .trBlogrollFeed:hover {
+  background-color: #2a2a2a;
+}
+.dark .divBlogrollFooter {
+  border-top-color: #444;
+}
+</style>
+
+<div class="widget" x-data="feedlandWidget()" x-init="init()">
+  <div class="divBlogrollContainer" tabindex="0">
+    <div class="divBlogroll">
+      {# Title in Rancho font — matches blogroll.js #}
+      <div class="divBlogrollTitle">
+        <a :href="riverUrl" target="_blank" rel="noopener" x-text="title"></a>
+      </div>
+
+      {# Sort links: Title / When #}
+      <div class="divBlogrollSortLinks">
+        <span
+          class="spTitleLink"
+          :class="sortBy === 'title' ? 'selected' : ''"
+          @click="sortBy = 'title'"
+        >Title</span>
+        <span
+          class="spWhenLink"
+          :class="sortBy === 'when' ? 'selected' : ''"
+          @click="sortBy = 'when'"
+        >When</span>
+      </div>
+
+      {# Feed table #}
+      <table class="divBlogrollTable">
+        <tbody>
+          <template x-for="blog in sortedBlogs" :key="blog.id">
+            <tr class="trBlogrollFeed">
+              <td class="tdBlogrollWedge">
+                <span class="darkCaretColor">&#9654;</span>
+              </td>
+              <td class="tdBlogrollFeedTitle">
+                <span class="spWhenUpdated" x-text="relativeTime(blog.lastFetchAt)"></span>
+                <span class="spTitleString">
+                  <a :href="blog.siteUrl || blog.feedUrl" target="_blank" rel="noopener" x-text="blog.title"></a>
+                </span>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      {# Footer — Powered by FeedLand #}
+      <div class="divBlogrollFooter">
+        <a :href="riverUrl" target="_blank" rel="noopener">Powered by FeedLand</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function feedlandWidget() {
+  return {
+    blogs: [],
+    sortBy: 'when',
+    title: 'FeedLand',
+    riverUrl: 'https://feedland.com',
+    loading: true,
+
+    get sortedBlogs() {
+      const sorted = [...this.blogs];
+      if (this.sortBy === 'title') {
+        sorted.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+      } else {
+        sorted.sort((a, b) => {
+          const da = a.lastFetchAt ? new Date(a.lastFetchAt) : new Date(0);
+          const db = b.lastFetchAt ? new Date(b.lastFetchAt) : new Date(0);
+          return db - da;
+        });
+      }
+      return sorted;
+    },
+
+    relativeTime(iso) {
+      if (!iso) return '';
+      const diff = Date.now() - new Date(iso).getTime();
+      const mins = Math.floor(diff / 60000);
+      if (mins < 60) return mins + 'm';
+      const hrs = Math.floor(mins / 60);
+      if (hrs < 24) return hrs + 'h';
+      const days = Math.floor(hrs / 24);
+      return days + 'd';
+    },
+
+    async init() {
+      try {
+        const res = await fetch('/blogrollapi/api/blogs?source=feedland&sort=recent&limit=100');
+        const data = await res.json();
+        this.blogs = data.items || [];
+      } catch (err) {
+        console.error('FeedLand widget error:', err);
+      } finally {
+        this.loading = false;
+      }
+    }
+  };
+}
+</script>