@rmdes/indiekit-endpoint-homepage 1.0.9 → 1.0.11

package/index.js

@@ -262,6 +262,62 @@ export default class HomepageEndpoint {
     ];
   }
 
+  /**
+   * Built-in blog post sidebar widget types (post-specific + universal)
+   */
+  get blogPostWidgets() {
+    return [
+      {
+        id: "author-card-compact",
+        label: "Author Card (Compact)",
+        description: "Compact h-card with avatar and name",
+        icon: "user",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "toc",
+        label: "Table of Contents",
+        description: "Auto-generated from headings",
+        icon: "list",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "post-categories",
+        label: "Post Categories",
+        description: "Categories for the current post",
+        icon: "tag",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "webmentions",
+        label: "Webmentions",
+        description: "Likes, reposts, and replies",
+        icon: "message-circle",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "share",
+        label: "Share",
+        description: "Share on Bluesky and Mastodon",
+        icon: "share",
+        defaultConfig: {},
+        configSchema: {},
+      },
+      {
+        id: "subscribe",
+        label: "Subscribe",
+        description: "RSS and JSON feed links",
+        icon: "rss",
+        defaultConfig: {},
+        configSchema: {},
+      },
+    ];
+  }
+
   /**
    * Protected routes (require authentication)
    */
@@ -335,6 +391,9 @@ export default class HomepageEndpoint {
     const discoveredSections = [...this.homepageSections];
     const discoveredWidgets = [...this.homepageWidgets];
 
+    // Blog post widgets = post-specific widgets + universal widgets
+    const discoveredBlogPostWidgets = [...this.blogPostWidgets];
+
     // Scan all endpoints for homepageSections
     for (const endpoint of Indiekit.endpoints || []) {
       if (endpoint === this) continue; // Skip self
@@ -362,9 +421,14 @@ export default class HomepageEndpoint {
     // Store discovered sections/widgets for API access
     Indiekit.config.application.discoveredSections = discoveredSections;
     Indiekit.config.application.discoveredWidgets = discoveredWidgets;
+    // Blog post widgets: post-specific + all universal widgets
+    Indiekit.config.application.discoveredBlogPostWidgets = [
+      ...discoveredBlogPostWidgets,
+      ...discoveredWidgets,
+    ];
 
     console.log(
-      `[Homepage] Discovered ${discoveredSections.length} sections, ${discoveredWidgets.length} widgets`
+      `[Homepage] Discovered ${discoveredSections.length} sections, ${discoveredWidgets.length} widgets, ${discoveredBlogPostWidgets.length} blog post widgets`
     );
   }
 }

package/lib/controllers/api.js

@@ -90,6 +90,8 @@ export const apiController = {
         hero: config.hero,
         sections: config.sections,
         sidebar: config.sidebar,
+        blogListingSidebar: config.blogListingSidebar,
+        blogPostSidebar: config.blogPostSidebar,
         footer: config.footer,
         identity: config.identity,
         updatedAt: config.updatedAt,

package/lib/controllers/dashboard.js

@@ -42,6 +42,7 @@ export const dashboardController = {
       // Get discovered sections and widgets
       const sections = application.discoveredSections || [];
       const widgets = application.discoveredWidgets || [];
+      const blogPostWidgets = application.discoveredBlogPostWidgets || [];
       const presets = application.layoutPresets || [];
 
       // Group sections by source plugin
@@ -62,6 +63,7 @@ export const dashboardController = {
         config,
         sections,
         widgets,
+        blogPostWidgets,
         presets,
         activePresetId,
         sectionsByPlugin,
@@ -89,7 +91,11 @@ export const dashboardController = {
     const { application } = request.app.locals;
 
     try {
-      const { layout, hero, sections, sidebar, footer, identity } = request.body;
+      const {
+        layout, hero, sections, sidebar,
+        blogListingSidebar, blogPostSidebar,
+        footer, identity,
+      } = request.body;
 
       // Parse JSON strings if needed
       const config = {
@@ -97,6 +103,8 @@ export const dashboardController = {
         hero: typeof hero === "string" ? JSON.parse(hero) : hero,
         sections: typeof sections === "string" ? JSON.parse(sections) : sections,
         sidebar: typeof sidebar === "string" ? JSON.parse(sidebar) : sidebar,
+        blogListingSidebar: typeof blogListingSidebar === "string" ? JSON.parse(blogListingSidebar) : blogListingSidebar,
+        blogPostSidebar: typeof blogPostSidebar === "string" ? JSON.parse(blogPostSidebar) : blogPostSidebar,
         footer: typeof footer === "string" ? JSON.parse(footer) : footer,
         identity: typeof identity === "string" ? JSON.parse(identity) : identity,
       };

package/lib/storage/config.js

@@ -42,6 +42,8 @@ export async function saveConfig(application, config) {
     hero: config.hero || { enabled: true, showSocial: true },
     sections: config.sections || [],
     sidebar: config.sidebar || [],
+    blogListingSidebar: config.blogListingSidebar || [],
+    blogPostSidebar: config.blogPostSidebar || [],
     footer: config.footer || [],
     identity: config.identity || null,
     updatedAt: now,
@@ -79,6 +81,8 @@ async function writeConfigFile(application, config) {
     hero: config.hero,
     sections: config.sections,
     sidebar: config.sidebar,
+    blogListingSidebar: config.blogListingSidebar,
+    blogPostSidebar: config.blogPostSidebar,
     footer: config.footer,
     identity: config.identity,
     updatedAt: config.updatedAt,
@@ -113,6 +117,8 @@ export function getDefaultConfig() {
       { type: "recent-posts", config: { maxItems: 5 } },
       { type: "categories", config: {} },
     ],
+    blogListingSidebar: [],
+    blogPostSidebar: [],
     footer: [],
     identity: null,
   };

package/locales/en.json

@@ -35,6 +35,18 @@
       "add": "Add Widget",
       "empty": "No widgets configured. Add widgets from the picker below."
     },
+    "blogListingSidebar": {
+      "title": "Blog Listing Sidebar",
+      "description": "Configure widgets that appear in the sidebar on blog listing pages (/blog/, /notes/, /articles/...). Leave empty to use default widgets.",
+      "add": "Add Widget",
+      "empty": "No widgets configured — using default sidebar."
+    },
+    "blogPostSidebar": {
+      "title": "Blog Post Sidebar",
+      "description": "Configure widgets that appear in the sidebar on individual post pages. Leave empty to use default widgets.",
+      "add": "Add Widget",
+      "empty": "No widgets configured — using default sidebar."
+    },
     "footer": {
       "title": "Footer (3-column)",
       "description": "A responsive 3-column area below the main content — add up to 3 blocks (one per column). Ideal for webrings, links, or custom content.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-homepage",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Homepage builder endpoint for Indiekit. Configure layout, sections, and sidebar widgets from the admin UI.",
   "keywords": [
     "indiekit",

package/views/homepage-dashboard.njk

@@ -443,6 +443,59 @@
     <input type="hidden" name="sidebar" id="sidebar-json" value='{{ config.sidebar | dump }}'>
   </section>
 
+  {# Blog Listing Sidebar #}
+  <section class="hp-section">
+    <h2>{{ __("homepage.blogListingSidebar.title") }}</h2>
+    <p class="hp-section__desc">{{ __("homepage.blogListingSidebar.description") }}</p>
+
+    <ul class="hp-sections-list" id="blog-listing-sidebar-list"></ul>
+
+    <div class="hp-section-picker">
+      <h3>{{ __("homepage.blogListingSidebar.add") }}</h3>
+      <div class="hp-section-picker__grid">
+        {% for widget in widgets %}
+        <div class="hp-section-picker__item" data-add-blog-listing-widget="{{ widget.id }}">
+          {{ widget.label }}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+
+    <input type="hidden" name="blogListingSidebar" id="blog-listing-sidebar-json" value='{{ config.blogListingSidebar | dump }}'>
+  </section>
+
+  {# Blog Post Sidebar #}
+  <section class="hp-section">
+    <h2>{{ __("homepage.blogPostSidebar.title") }}</h2>
+    <p class="hp-section__desc">{{ __("homepage.blogPostSidebar.description") }}</p>
+
+    <ul class="hp-sections-list" id="blog-post-sidebar-list"></ul>
+
+    <div class="hp-section-picker">
+      <h3>{{ __("homepage.blogPostSidebar.add") }}</h3>
+      <div class="hp-section-picker__grid">
+        <div class="hp-section-picker__heading">Post Widgets</div>
+        {% for widget in blogPostWidgets %}
+        {% if widget.id in ["author-card-compact", "post-navigation", "toc", "post-categories", "webmentions", "share", "subscribe"] %}
+        <div class="hp-section-picker__item" data-add-blog-post-widget="{{ widget.id }}">
+          {{ widget.label }}
+        </div>
+        {% endif %}
+        {% endfor %}
+        <div class="hp-section-picker__heading">Universal Widgets</div>
+        {% for widget in blogPostWidgets %}
+        {% if widget.id not in ["author-card-compact", "post-navigation", "toc", "post-categories", "webmentions", "share", "subscribe"] %}
+        <div class="hp-section-picker__item" data-add-blog-post-widget="{{ widget.id }}">
+          {{ widget.label }}
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+
+    <input type="hidden" name="blogPostSidebar" id="blog-post-sidebar-json" value='{{ config.blogPostSidebar | dump }}'>
+  </section>
+
   {# Footer #}
   <section class="hp-section">
     <h2>{{ __("homepage.footer.title") }}</h2>
@@ -483,8 +536,11 @@
   var widgetLabels = {
     {% for widget in widgets %}'{{ widget.id }}': '{{ widget.label }}'{% if not loop.last %}, {% endif %}{% endfor %}
   };
+  var blogPostWidgetLabels = {
+    {% for widget in blogPostWidgets %}'{{ widget.id }}': '{{ widget.label }}'{% if not loop.last %}, {% endif %}{% endfor %}
+  };
   // Merge so all label maps cover all types
-  var allLabels = Object.assign({}, sectionLabels, widgetLabels);
+  var allLabels = Object.assign({}, sectionLabels, widgetLabels, blogPostWidgetLabels);
 
   // Unique key counter for tracking items
   var nextKey = 0;
@@ -492,10 +548,14 @@
   // Parse current data from hidden inputs and assign keys
   var sections = JSON.parse(document.getElementById('sections-json').value || '[]');
   var sidebar = JSON.parse(document.getElementById('sidebar-json').value || '[]');
+  var blogListingSidebar = JSON.parse(document.getElementById('blog-listing-sidebar-json').value || '[]');
+  var blogPostSidebar = JSON.parse(document.getElementById('blog-post-sidebar-json').value || '[]');
   var footer = JSON.parse(document.getElementById('footer-json').value || '[]');
 
   sections.forEach(function(s) { s._key = nextKey++; });
   sidebar.forEach(function(s) { s._key = nextKey++; });
+  blogListingSidebar.forEach(function(s) { s._key = nextKey++; });
+  blogPostSidebar.forEach(function(s) { s._key = nextKey++; });
   footer.forEach(function(s) { s._key = nextKey++; });
 
   // Strip _key before form submission
@@ -739,6 +799,72 @@
     initSortable();
   }
 
+  // --- Blog Listing Sidebar ---
+  function addBlogListingWidget(id) {
+    var item = { type: id, config: {}, _key: nextKey++ };
+    blogListingSidebar.push(item);
+    updateBlogListingSidebar();
+    if (id === 'custom-html') {
+      var list = document.getElementById('blog-listing-sidebar-list');
+      var lastPanel = list.querySelector('details.hp-edit-panel:last-of-type');
+      if (lastPanel) lastPanel.open = true;
+    }
+  }
+
+  function removeBlogListingWidget(key) {
+    blogListingSidebar = blogListingSidebar.filter(function(w) { return w._key !== key; });
+    updateBlogListingSidebar();
+  }
+
+  function editBlogListingWidget(key, config) {
+    var item = blogListingSidebar.find(function(s) { return s._key === key; });
+    if (item) item.config = config;
+    updateBlogListingSidebar();
+  }
+
+  function updateBlogListingSidebar() {
+    document.getElementById('blog-listing-sidebar-json').value = JSON.stringify(stripKeys(blogListingSidebar));
+    renderList(
+      document.getElementById('blog-listing-sidebar-list'),
+      blogListingSidebar, allLabels, removeBlogListingWidget, editBlogListingWidget,
+      '{{ __("homepage.blogListingSidebar.empty") }}'
+    );
+    initSortable();
+  }
+
+  // --- Blog Post Sidebar ---
+  function addBlogPostWidget(id) {
+    var item = { type: id, config: {}, _key: nextKey++ };
+    blogPostSidebar.push(item);
+    updateBlogPostSidebar();
+    if (id === 'custom-html') {
+      var list = document.getElementById('blog-post-sidebar-list');
+      var lastPanel = list.querySelector('details.hp-edit-panel:last-of-type');
+      if (lastPanel) lastPanel.open = true;
+    }
+  }
+
+  function removeBlogPostWidget(key) {
+    blogPostSidebar = blogPostSidebar.filter(function(w) { return w._key !== key; });
+    updateBlogPostSidebar();
+  }
+
+  function editBlogPostWidget(key, config) {
+    var item = blogPostSidebar.find(function(s) { return s._key === key; });
+    if (item) item.config = config;
+    updateBlogPostSidebar();
+  }
+
+  function updateBlogPostSidebar() {
+    document.getElementById('blog-post-sidebar-json').value = JSON.stringify(stripKeys(blogPostSidebar));
+    renderList(
+      document.getElementById('blog-post-sidebar-list'),
+      blogPostSidebar, allLabels, removeBlogPostWidget, editBlogPostWidget,
+      '{{ __("homepage.blogPostSidebar.empty") }}'
+    );
+    initSortable();
+  }
+
   // --- Footer (max 3 columns) ---
   var FOOTER_MAX = 3;
 
@@ -802,6 +928,16 @@
     document.getElementById('sidebar-json').value = JSON.stringify(stripKeys(sidebar));
   }
 
+  function syncBlogListingSidebarFromDom() {
+    blogListingSidebar = syncFromDom(document.getElementById('blog-listing-sidebar-list'), blogListingSidebar);
+    document.getElementById('blog-listing-sidebar-json').value = JSON.stringify(stripKeys(blogListingSidebar));
+  }
+
+  function syncBlogPostSidebarFromDom() {
+    blogPostSidebar = syncFromDom(document.getElementById('blog-post-sidebar-list'), blogPostSidebar);
+    document.getElementById('blog-post-sidebar-json').value = JSON.stringify(stripKeys(blogPostSidebar));
+  }
+
   function syncFooterFromDom() {
     footer = syncFromDom(document.getElementById('footer-list'), footer);
     document.getElementById('footer-json').value = JSON.stringify(stripKeys(footer));
@@ -822,6 +958,12 @@
   document.querySelectorAll('[data-add-widget]').forEach(function(el) {
     el.addEventListener('click', function() { addWidget(el.dataset.addWidget); });
   });
+  document.querySelectorAll('[data-add-blog-listing-widget]').forEach(function(el) {
+    el.addEventListener('click', function() { addBlogListingWidget(el.dataset.addBlogListingWidget); });
+  });
+  document.querySelectorAll('[data-add-blog-post-widget]').forEach(function(el) {
+    el.addEventListener('click', function() { addBlogPostWidget(el.dataset.addBlogPostWidget); });
+  });
   document.querySelectorAll('[data-add-footer]').forEach(function(el) {
     el.addEventListener('click', function() { addFooter(el.dataset.addFooter); });
   });
@@ -847,6 +989,8 @@
     var lists = [
       { el: 'sections-list', sync: syncSectionsFromDom },
       { el: 'widgets-list', sync: syncSidebarFromDom },
+      { el: 'blog-listing-sidebar-list', sync: syncBlogListingSidebarFromDom },
+      { el: 'blog-post-sidebar-list', sync: syncBlogPostSidebarFromDom },
       { el: 'footer-list', sync: syncFooterFromDom }
     ];
 
@@ -877,6 +1021,8 @@
   // --- Initial render ---
   updateSections();
   updateWidgets();
+  updateBlogListingSidebar();
+  updateBlogPostSidebar();
   updateFooter();
 </script>
 {% endblock %}