@rmdes/indiekit-endpoint-homepage 1.0.2 → 1.0.4

package/index.js

@@ -170,6 +170,20 @@ export default class HomepageEndpoint {
         defaultConfig: {},
         configSchema: {},
       },
+      {
+        id: "custom-html",
+        label: "Custom Content",
+        description: "Freeform HTML or text block",
+        icon: "code",
+        defaultConfig: {
+          title: "",
+          content: "",
+        },
+        configSchema: {
+          title: { type: "text", label: "Title (optional)" },
+          content: { type: "textarea", label: "Content (HTML)" },
+        },
+      },
     ];
   }
 
@@ -227,8 +241,10 @@ export default class HomepageEndpoint {
     // Store reference to Indiekit for plugin discovery
     Indiekit.config.application.indiekitInstance = Indiekit;
 
-    // Discover sections and widgets from other plugins
-    this._discoverPluginSections(Indiekit);
+    // Defer discovery until after all plugins have called init()
+    // (process.nextTick runs after the synchronous plugin loading loop)
+    const self = this;
+    process.nextTick(() => self._discoverPluginSections(Indiekit));
   }
 
   /**

package/lib/controllers/api.js

@@ -90,6 +90,7 @@ export const apiController = {
         hero: config.hero,
         sections: config.sections,
         sidebar: config.sidebar,
+        footer: config.footer,
         identity: config.identity,
         updatedAt: config.updatedAt,
       });

package/lib/controllers/dashboard.js

@@ -63,7 +63,7 @@ export const dashboardController = {
     const { application } = request.app.locals;
 
     try {
-      const { layout, hero, sections, sidebar, identity } = request.body;
+      const { layout, hero, sections, sidebar, footer, identity } = request.body;
 
       // Parse JSON strings if needed
       const config = {
@@ -71,6 +71,7 @@ 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,
+        footer: typeof footer === "string" ? JSON.parse(footer) : footer,
         identity: typeof identity === "string" ? JSON.parse(identity) : identity,
       };
 

package/lib/storage/config.js

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

package/locales/en.json

@@ -1,7 +1,7 @@
 {
   "homepage": {
     "title": "Homepage Builder",
-    "description": "Configure your homepage layout, sections, and sidebar widgets.",
+    "description": "Configure your homepage layout, sections, sidebar widgets, and footer.",
     "saved": "Configuration saved successfully. Refresh your homepage to see changes.",
     "save": "Save Configuration",
     "layout": {
@@ -17,7 +17,7 @@
     },
     "sections": {
       "title": "Content Sections",
-      "description": "Add and arrange sections that appear on your homepage.",
+      "description": "Add and arrange sections that appear in the main content area.",
       "add": "Add Section",
       "empty": "No sections configured. Add sections from the picker below."
     },
@@ -26,6 +26,19 @@
       "description": "Configure widgets that appear in the sidebar (only visible with two-column layout).",
       "add": "Add Widget",
       "empty": "No widgets configured. Add widgets from the picker below."
+    },
+    "footer": {
+      "title": "Footer",
+      "description": "Content that appears below the main area — ideal for webrings, links, or custom blocks.",
+      "add": "Add Footer Block",
+      "empty": "No footer blocks configured."
+    },
+    "customContent": {
+      "editTitle": "Edit Custom Content",
+      "titleLabel": "Title (optional)",
+      "contentLabel": "Content (HTML or text)",
+      "save": "Apply",
+      "cancel": "Cancel"
     }
   }
 }

package/package.json

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

package/views/homepage-dashboard.njk

@@ -21,6 +21,12 @@
     border-block-end: 1px solid var(--color-outline-variant, #ddd);
   }
 
+  .hp-section__desc {
+    color: var(--color-on-offset, #666);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    margin-block-end: var(--space-s, 0.75rem);
+  }
+
   .hp-layout-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -76,6 +82,12 @@
     gap: var(--space-s, 0.75rem);
   }
 
+  .hp-section-item--has-edit {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-block-end: 0;
+  }
+
   .hp-section-item__info {
     flex: 1;
   }
@@ -89,9 +101,86 @@
     font: var(--font-caption, 0.75rem/1.4 sans-serif);
   }
 
+  .hp-section-item__preview {
+    color: var(--color-on-offset, #888);
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    margin-block-start: 0.125rem;
+    max-width: 40ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .hp-section-item__actions {
     display: flex;
     gap: var(--space-2xs, 0.25rem);
+    flex-shrink: 0;
+  }
+
+  .hp-section-item__drag {
+    cursor: grab;
+    color: var(--color-on-offset, #999);
+    padding: 0 0.25rem;
+    display: flex;
+    align-items: center;
+  }
+
+  .hp-section-item__drag:active {
+    cursor: grabbing;
+  }
+
+  .hp-section-item.sortable-ghost {
+    opacity: 0.4;
+    background: var(--color-primary-container, #e6f0ff);
+  }
+
+  .hp-section-item.sortable-chosen {
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  }
+
+  .hp-edit-panel {
+    background: var(--color-background, #fff);
+    border: 1px solid var(--color-primary, #0066cc);
+    border-top: none;
+    border-radius: 0 0 var(--border-radius-small, 0.25rem) var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem);
+    margin-block-end: var(--space-xs, 0.5rem);
+  }
+
+  .hp-edit-panel summary { display: none; }
+
+  .hp-edit-panel .field {
+    margin-block-end: var(--space-xs, 0.5rem);
+  }
+
+  .hp-edit-panel .field__label {
+    display: block;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    margin-block-end: 0.25rem;
+  }
+
+  .hp-edit-panel .field__input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+  }
+
+  .hp-edit-panel textarea.field__input {
+    resize: vertical;
+    min-height: 6rem;
+    font-family: monospace;
+    font-size: 0.8125rem;
+  }
+
+  .hp-edit-panel__buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-block-start: var(--space-xs, 0.5rem);
   }
 
   .hp-section-picker {
@@ -128,6 +217,14 @@
     border-color: var(--color-primary, #0066cc);
   }
 
+  .hp-section-picker__heading {
+    grid-column: 1 / -1;
+    font-weight: bold;
+    margin-top: 0.5rem;
+    font: var(--font-caption, 0.8rem/1.4 sans-serif);
+    color: var(--color-on-offset, #555);
+  }
+
   .hp-empty {
     color: var(--color-on-offset, #666);
     font: var(--font-caption, 0.875rem/1.4 sans-serif);
@@ -155,7 +252,7 @@
 </div>
 {% endif %}
 
-<form method="post" action="{{ homepageEndpoint }}/save" class="hp-dashboard">
+<form method="post" action="{{ homepageEndpoint }}/save" class="hp-dashboard" id="hp-form">
   {# Layout Selection #}
   <section class="hp-section">
     <h2>{{ __("homepage.layout.title") }}</h2>
@@ -163,7 +260,6 @@
       {% for layout in layouts %}
       <label class="hp-layout-option {% if config.layout == layout.id %}selected{% endif %}">
         <input type="radio" name="layout" value="{{ layout.id }}" {% if config.layout == layout.id %}checked{% endif %}>
-        {# Simple layout previews #}
         {% if layout.id == "single-column" %}
         <svg viewBox="0 0 80 60"><rect x="10" y="5" width="60" height="50" fill="#ddd" stroke="#999"/></svg>
         {% elif layout.id == "two-column" %}
@@ -194,38 +290,20 @@
     </div>
   </section>
 
-  {# Sections #}
+  {# Content Sections #}
   <section class="hp-section">
     <h2>{{ __("homepage.sections.title") }}</h2>
     <p class="hp-section__desc">{{ __("homepage.sections.description") }}</p>
 
-    <ul class="hp-sections-list" id="sections-list">
-      {% if config.sections and config.sections.length %}
-        {% for section in config.sections %}
-        <li class="hp-section-item" data-type="{{ section.type }}">
-          <div class="hp-section-item__info">
-            <span class="hp-section-item__name">
-              {% for s in sections %}{% if s.id == section.type %}{{ s.label }}{% endif %}{% endfor %}
-            </span>
-            <span class="hp-section-item__type">{{ section.type }}</span>
-          </div>
-          <div class="hp-section-item__actions">
-            <button type="button" class="button button--small button--secondary" onclick="removeSection(this)">Remove</button>
-          </div>
-        </li>
-        {% endfor %}
-      {% else %}
-        <li class="hp-empty">{{ __("homepage.sections.empty") }}</li>
-      {% endif %}
-    </ul>
+    <ul class="hp-sections-list" id="sections-list"></ul>
 
     <div class="hp-section-picker">
       <h3>{{ __("homepage.sections.add") }}</h3>
       <div class="hp-section-picker__grid">
         {% for source, items in sectionsByPlugin %}
-        <div style="grid-column: 1 / -1; font-weight: bold; margin-top: 0.5rem;">{{ source }}</div>
+        <div class="hp-section-picker__heading">{{ source }}</div>
         {% for section in items %}
-        <div class="hp-section-picker__item" onclick="addSection('{{ section.id }}', '{{ section.label }}')">
+        <div class="hp-section-picker__item" data-add-section="{{ section.id }}">
           {{ section.label }}
         </div>
         {% endfor %}
@@ -233,7 +311,6 @@
       </div>
     </div>
 
-    {# Hidden input for sections JSON #}
     <input type="hidden" name="sections" id="sections-json" value='{{ config.sections | dump | safe }}'>
   </section>
 
@@ -242,41 +319,47 @@
     <h2>{{ __("homepage.sidebar.title") }}</h2>
     <p class="hp-section__desc">{{ __("homepage.sidebar.description") }}</p>
 
-    <ul class="hp-sections-list" id="widgets-list">
-      {% if config.sidebar and config.sidebar.length %}
-        {% for widget in config.sidebar %}
-        <li class="hp-section-item" data-type="{{ widget.type }}">
-          <div class="hp-section-item__info">
-            <span class="hp-section-item__name">
-              {% for w in widgets %}{% if w.id == widget.type %}{{ w.label }}{% endif %}{% endfor %}
-            </span>
-            <span class="hp-section-item__type">{{ widget.type }}</span>
-          </div>
-          <div class="hp-section-item__actions">
-            <button type="button" class="button button--small button--secondary" onclick="removeWidget(this)">Remove</button>
-          </div>
-        </li>
-        {% endfor %}
-      {% else %}
-        <li class="hp-empty">{{ __("homepage.sidebar.empty") }}</li>
-      {% endif %}
-    </ul>
+    <ul class="hp-sections-list" id="widgets-list"></ul>
 
     <div class="hp-section-picker">
       <h3>{{ __("homepage.sidebar.add") }}</h3>
       <div class="hp-section-picker__grid">
         {% for widget in widgets %}
-        <div class="hp-section-picker__item" onclick="addWidget('{{ widget.id }}', '{{ widget.label }}')">
+        <div class="hp-section-picker__item" data-add-widget="{{ widget.id }}">
           {{ widget.label }}
         </div>
         {% endfor %}
       </div>
     </div>
 
-    {# Hidden input for sidebar JSON #}
     <input type="hidden" name="sidebar" id="sidebar-json" value='{{ config.sidebar | dump | safe }}'>
   </section>
 
+  {# Footer #}
+  <section class="hp-section">
+    <h2>{{ __("homepage.footer.title") }}</h2>
+    <p class="hp-section__desc">{{ __("homepage.footer.description") }}</p>
+
+    <ul class="hp-sections-list" id="footer-list"></ul>
+
+    <div class="hp-section-picker">
+      <h3>{{ __("homepage.footer.add") }}</h3>
+      <div class="hp-section-picker__grid">
+        {# Footer accepts same section types + custom-html #}
+        {% for source, items in sectionsByPlugin %}
+        <div class="hp-section-picker__heading">{{ source }}</div>
+        {% for section in items %}
+        <div class="hp-section-picker__item" data-add-footer="{{ section.id }}">
+          {{ section.label }}
+        </div>
+        {% endfor %}
+        {% endfor %}
+      </div>
+    </div>
+
+    <input type="hidden" name="footer" id="footer-json" value='{{ config.footer | dump | safe }}'>
+  </section>
+
   {# Save Button #}
   <div class="button-group">
     <button type="submit" class="button button--primary">{{ __("homepage.save") }}</button>
@@ -284,110 +367,330 @@
 </form>
 
 <script>
-  // Label lookup maps for rendering
-  const sectionLabels = {
+  // Label lookup maps
+  var sectionLabels = {
     {% for section in sections %}'{{ section.id }}': '{{ section.label }}'{% if not loop.last %}, {% endif %}{% endfor %}
   };
-  const widgetLabels = {
+  var widgetLabels = {
     {% for widget in widgets %}'{{ widget.id }}': '{{ widget.label }}'{% if not loop.last %}, {% endif %}{% endfor %}
   };
+  // Merge so all label maps cover all types
+  var allLabels = Object.assign({}, sectionLabels, widgetLabels);
+
+  // Unique key counter for tracking items
+  var nextKey = 0;
+
+  // 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 footer = JSON.parse(document.getElementById('footer-json').value || '[]');
+
+  sections.forEach(function(s) { s._key = nextKey++; });
+  sidebar.forEach(function(s) { s._key = nextKey++; });
+  footer.forEach(function(s) { s._key = nextKey++; });
+
+  // Strip _key before form submission
+  function stripKeys(items) {
+    return items.map(function(item) {
+      var copy = {};
+      for (var k in item) {
+        if (k !== '_key') copy[k] = item[k];
+      }
+      return copy;
+    });
+  }
 
-  // Parse current sections and sidebar from hidden inputs
-  let sections = JSON.parse(document.getElementById('sections-json').value || '[]');
-  let sidebar = JSON.parse(document.getElementById('sidebar-json').value || '[]');
+  // Create drag handle SVG
+  function createDragHandle() {
+    var drag = document.createElement('span');
+    drag.className = 'hp-section-item__drag drag-handle';
+    drag.title = 'Drag to reorder';
+    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '16');
+    svg.setAttribute('height', '16');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'currentColor');
+    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M8 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8-16a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z');
+    svg.appendChild(path);
+    drag.appendChild(svg);
+    return drag;
+  }
+
+  // Create a list item element for a section/widget/footer item
+  function createItemElement(item, labels, removeFn, editFn) {
+    var isCustom = (item.type === 'custom-html');
+    var container = document.createDocumentFragment();
 
-  function createItemElement(type, labels, removeFn) {
-    const li = document.createElement('li');
-    li.className = 'hp-section-item';
-    li.dataset.type = type;
+    var li = document.createElement('li');
+    li.className = 'hp-section-item' + (isCustom ? ' hp-section-item--has-edit' : '');
+    li.dataset.key = item._key;
+    li.dataset.type = item.type;
 
-    const info = document.createElement('div');
+    li.appendChild(createDragHandle());
+
+    var info = document.createElement('div');
     info.className = 'hp-section-item__info';
 
-    const name = document.createElement('span');
+    var name = document.createElement('span');
     name.className = 'hp-section-item__name';
-    name.textContent = labels[type] || type;
+    name.textContent = labels[item.type] || item.type;
+    info.appendChild(name);
 
-    const typeSpan = document.createElement('span');
+    var typeSpan = document.createElement('span');
     typeSpan.className = 'hp-section-item__type';
-    typeSpan.textContent = type;
-
-    info.appendChild(name);
+    typeSpan.textContent = ' ' + item.type;
     info.appendChild(typeSpan);
 
-    const actions = document.createElement('div');
+    // Show content preview for custom-html
+    if (isCustom && item.config && item.config.content) {
+      var preview = document.createElement('div');
+      preview.className = 'hp-section-item__preview';
+      var previewText = item.config.title ? item.config.title + ': ' : '';
+      previewText += item.config.content.replace(/<[^>]*>/g, '').substring(0, 60);
+      preview.textContent = previewText;
+      info.appendChild(preview);
+    }
+
+    li.appendChild(info);
+
+    var actions = document.createElement('div');
     actions.className = 'hp-section-item__actions';
 
-    const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'button button--small button--secondary';
-    btn.textContent = 'Remove';
-    btn.addEventListener('click', function() { removeFn(this); });
+    if (isCustom) {
+      var editBtn = document.createElement('button');
+      editBtn.type = 'button';
+      editBtn.className = 'button button--small';
+      editBtn.textContent = 'Edit';
+      editBtn.addEventListener('click', function() {
+        var panel = li.nextElementSibling;
+        if (panel && panel.tagName === 'DETAILS') {
+          panel.open = !panel.open;
+        }
+      });
+      actions.appendChild(editBtn);
+    }
+
+    var removeBtn = document.createElement('button');
+    removeBtn.type = 'button';
+    removeBtn.className = 'button button--small button--secondary';
+    removeBtn.textContent = 'Remove';
+    removeBtn.addEventListener('click', function() { removeFn(item._key); });
+    actions.appendChild(removeBtn);
 
-    actions.appendChild(btn);
-    li.appendChild(info);
     li.appendChild(actions);
+    container.appendChild(li);
+
+    // Add edit panel for custom-html
+    if (isCustom) {
+      var details = document.createElement('details');
+      details.className = 'hp-edit-panel';
+
+      var summary = document.createElement('summary');
+      details.appendChild(summary);
+
+      var titleField = document.createElement('div');
+      titleField.className = 'field';
+      var titleLabel = document.createElement('label');
+      titleLabel.className = 'field__label';
+      titleLabel.textContent = '{{ __("homepage.customContent.titleLabel") }}';
+      var titleInput = document.createElement('input');
+      titleInput.className = 'field__input';
+      titleInput.type = 'text';
+      titleInput.placeholder = 'e.g. Webring, Links';
+      titleInput.value = (item.config && item.config.title) || '';
+      titleField.appendChild(titleLabel);
+      titleField.appendChild(titleInput);
+      details.appendChild(titleField);
+
+      var contentField = document.createElement('div');
+      contentField.className = 'field';
+      var contentLabel = document.createElement('label');
+      contentLabel.className = 'field__label';
+      contentLabel.textContent = '{{ __("homepage.customContent.contentLabel") }}';
+      var contentInput = document.createElement('textarea');
+      contentInput.className = 'field__input';
+      contentInput.rows = 6;
+      contentInput.placeholder = '<p>Your HTML here...</p>';
+      contentInput.value = (item.config && item.config.content) || '';
+      contentField.appendChild(contentLabel);
+      contentField.appendChild(contentInput);
+      details.appendChild(contentField);
+
+      var buttons = document.createElement('div');
+      buttons.className = 'hp-edit-panel__buttons';
+
+      var saveBtn = document.createElement('button');
+      saveBtn.type = 'button';
+      saveBtn.className = 'button button--primary button--small';
+      saveBtn.textContent = '{{ __("homepage.customContent.save") }}';
+      saveBtn.addEventListener('click', function() {
+        editFn(item._key, {
+          title: titleInput.value,
+          content: contentInput.value
+        });
+        details.open = false;
+      });
+
+      var cancelBtn = document.createElement('button');
+      cancelBtn.type = 'button';
+      cancelBtn.className = 'button button--small button--secondary';
+      cancelBtn.textContent = '{{ __("homepage.customContent.cancel") }}';
+      cancelBtn.addEventListener('click', function() { details.open = false; });
+
+      buttons.appendChild(saveBtn);
+      buttons.appendChild(cancelBtn);
+      details.appendChild(buttons);
+
+      container.appendChild(details);
+    }
 
-    return li;
+    return container;
   }
 
-  function renderList(listEl, items, labels, removeFn, emptyText) {
+  // Render a list of items into a UL element
+  function renderList(listEl, items, labels, removeFn, editFn, emptyText) {
     listEl.textContent = '';
     if (items.length === 0) {
-      const li = document.createElement('li');
+      var li = document.createElement('li');
       li.className = 'hp-empty';
       li.textContent = emptyText;
       listEl.appendChild(li);
     } else {
       items.forEach(function(item) {
-        listEl.appendChild(createItemElement(item.type, labels, removeFn));
+        listEl.appendChild(createItemElement(item, labels, removeFn, editFn));
       });
     }
   }
 
-  function addSection(id, label) {
-    sections.push({ type: id, config: {} });
-    updateSectionsList();
+  // --- Sections ---
+  function addSection(id) {
+    var item = { type: id, config: {}, _key: nextKey++ };
+    sections.push(item);
+    updateSections();
+    // Auto-open edit panel for custom-html
+    if (id === 'custom-html') {
+      var list = document.getElementById('sections-list');
+      var lastPanel = list.querySelector('details.hp-edit-panel:last-of-type');
+      if (lastPanel) lastPanel.open = true;
+    }
+  }
+
+  function removeSection(key) {
+    sections = sections.filter(function(s) { return s._key !== key; });
+    updateSections();
   }
 
-  function removeSection(button) {
-    const item = button.closest('.hp-section-item');
-    const type = item.dataset.type;
-    sections = sections.filter(function(s) { return s.type !== type; });
-    updateSectionsList();
+  function editSection(key, config) {
+    var item = sections.find(function(s) { return s._key === key; });
+    if (item) item.config = config;
+    updateSections();
   }
 
-  function updateSectionsList() {
-    document.getElementById('sections-json').value = JSON.stringify(sections);
+  function updateSections() {
+    document.getElementById('sections-json').value = JSON.stringify(stripKeys(sections));
     renderList(
       document.getElementById('sections-list'),
-      sections, sectionLabels, removeSection,
+      sections, allLabels, removeSection, editSection,
       '{{ __("homepage.sections.empty") }}'
     );
+    initSortable();
   }
 
-  function addWidget(id, label) {
-    sidebar.push({ type: id, config: {} });
-    updateWidgetsList();
+  // --- Sidebar ---
+  function addWidget(id) {
+    var item = { type: id, config: {}, _key: nextKey++ };
+    sidebar.push(item);
+    updateWidgets();
+    if (id === 'custom-html') {
+      var list = document.getElementById('widgets-list');
+      var lastPanel = list.querySelector('details.hp-edit-panel:last-of-type');
+      if (lastPanel) lastPanel.open = true;
+    }
   }
 
-  function removeWidget(button) {
-    const item = button.closest('.hp-section-item');
-    const type = item.dataset.type;
-    sidebar = sidebar.filter(function(w) { return w.type !== type; });
-    updateWidgetsList();
+  function removeWidget(key) {
+    sidebar = sidebar.filter(function(w) { return w._key !== key; });
+    updateWidgets();
   }
 
-  function updateWidgetsList() {
-    document.getElementById('sidebar-json').value = JSON.stringify(sidebar);
+  function editWidget(key, config) {
+    var item = sidebar.find(function(s) { return s._key === key; });
+    if (item) item.config = config;
+    updateWidgets();
+  }
+
+  function updateWidgets() {
+    document.getElementById('sidebar-json').value = JSON.stringify(stripKeys(sidebar));
     renderList(
       document.getElementById('widgets-list'),
-      sidebar, widgetLabels, removeWidget,
+      sidebar, allLabels, removeWidget, editWidget,
       '{{ __("homepage.sidebar.empty") }}'
     );
+    initSortable();
+  }
+
+  // --- Footer ---
+  function addFooter(id) {
+    var item = { type: id, config: {}, _key: nextKey++ };
+    footer.push(item);
+    updateFooter();
+    if (id === 'custom-html') {
+      var list = document.getElementById('footer-list');
+      var lastPanel = list.querySelector('details.hp-edit-panel:last-of-type');
+      if (lastPanel) lastPanel.open = true;
+    }
+  }
+
+  function removeFooter(key) {
+    footer = footer.filter(function(f) { return f._key !== key; });
+    updateFooter();
+  }
+
+  function editFooter(key, config) {
+    var item = footer.find(function(s) { return s._key === key; });
+    if (item) item.config = config;
+    updateFooter();
+  }
+
+  function updateFooter() {
+    document.getElementById('footer-json').value = JSON.stringify(stripKeys(footer));
+    renderList(
+      document.getElementById('footer-list'),
+      footer, allLabels, removeFooter, editFooter,
+      '{{ __("homepage.footer.empty") }}'
+    );
+    initSortable();
+  }
+
+  // --- Sync after drag (preserves config by reordering JS array) ---
+  function syncFromDom(listEl, dataArray) {
+    var items = listEl.querySelectorAll('.hp-section-item');
+    var ordered = [];
+    items.forEach(function(el) {
+      var key = parseInt(el.dataset.key, 10);
+      var item = dataArray.find(function(s) { return s._key === key; });
+      if (item) ordered.push(item);
+    });
+    return ordered;
+  }
+
+  function syncSectionsFromDom() {
+    sections = syncFromDom(document.getElementById('sections-list'), sections);
+    document.getElementById('sections-json').value = JSON.stringify(stripKeys(sections));
   }
 
-  // Layout selection
+  function syncSidebarFromDom() {
+    sidebar = syncFromDom(document.getElementById('widgets-list'), sidebar);
+    document.getElementById('sidebar-json').value = JSON.stringify(stripKeys(sidebar));
+  }
+
+  function syncFooterFromDom() {
+    footer = syncFromDom(document.getElementById('footer-list'), footer);
+    document.getElementById('footer-json').value = JSON.stringify(stripKeys(footer));
+  }
+
+  // --- Layout selection ---
   document.querySelectorAll('.hp-layout-option').forEach(function(option) {
     option.addEventListener('click', function() {
       document.querySelectorAll('.hp-layout-option').forEach(function(o) { o.classList.remove('selected'); });
@@ -395,12 +698,23 @@
     });
   });
 
-  // Hero checkboxes - convert to JSON on submit
-  document.querySelector('form').addEventListener('submit', function(e) {
-    const heroEnabled = document.querySelector('input[name="hero[enabled]"]').checked;
-    const heroShowSocial = document.querySelector('input[name="hero[showSocial]"]').checked;
+  // --- Section picker event delegation ---
+  document.querySelectorAll('[data-add-section]').forEach(function(el) {
+    el.addEventListener('click', function() { addSection(el.dataset.addSection); });
+  });
+  document.querySelectorAll('[data-add-widget]').forEach(function(el) {
+    el.addEventListener('click', function() { addWidget(el.dataset.addWidget); });
+  });
+  document.querySelectorAll('[data-add-footer]').forEach(function(el) {
+    el.addEventListener('click', function() { addFooter(el.dataset.addFooter); });
+  });
+
+  // --- Hero checkboxes → JSON on submit ---
+  document.getElementById('hp-form').addEventListener('submit', function(e) {
+    var heroEnabled = document.querySelector('input[name="hero[enabled]"]').checked;
+    var heroShowSocial = document.querySelector('input[name="hero[showSocial]"]').checked;
 
-    const heroInput = document.createElement('input');
+    var heroInput = document.createElement('input');
     heroInput.type = 'hidden';
     heroInput.name = 'hero';
     heroInput.value = JSON.stringify({ enabled: heroEnabled, showSocial: heroShowSocial });
@@ -408,5 +722,44 @@
 
     document.querySelectorAll('input[name^="hero["]').forEach(function(i) { i.name = ''; });
   });
+
+  // --- SortableJS ---
+  function initSortable() {
+    if (typeof Sortable === 'undefined') return;
+
+    var lists = [
+      { el: 'sections-list', sync: syncSectionsFromDom },
+      { el: 'widgets-list', sync: syncSidebarFromDom },
+      { el: 'footer-list', sync: syncFooterFromDom }
+    ];
+
+    lists.forEach(function(cfg) {
+      var el = document.getElementById(cfg.el);
+      if (!el) return;
+      // Destroy existing Sortable if any
+      if (el._sortable) el._sortable.destroy();
+      el._sortable = new Sortable(el, {
+        handle: '.drag-handle',
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        chosenClass: 'sortable-chosen',
+        draggable: '.hp-section-item',
+        onEnd: cfg.sync
+      });
+    });
+  }
+
+  // Load SortableJS from CDN
+  var sortableScript = document.createElement('script');
+  sortableScript.src = 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js';
+  sortableScript.onload = function() {
+    initSortable();
+  };
+  document.head.appendChild(sortableScript);
+
+  // --- Initial render ---
+  updateSections();
+  updateWidgets();
+  updateFooter();
 </script>
 {% endblock %}