npm - @rmdes/indiekit-endpoint-site-config - Versions diffs - 1.0.0-alpha.1 - Mend

@rmdes/indiekit-endpoint-site-config 1.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +9 -0
package/index.js +83 -0
package/lib/controllers/api.js +45 -0
package/lib/controllers/branding.js +97 -0
package/lib/controllers/features.js +56 -0
package/lib/controllers/identity.js +61 -0
package/lib/controllers/layout.js +66 -0
package/lib/render/derive-palette.js +41 -0
package/lib/render/surface-presets.js +25 -0
package/lib/render/write-site-json.js +59 -0
package/lib/render/write-theme-css.js +135 -0
package/lib/storage/defaults.js +58 -0
package/lib/storage/get-site-config.js +64 -0
package/lib/storage/save-site-config.js +40 -0
package/lib/validators/color.js +19 -0
package/lib/validators/font.js +16 -0
package/locales/en.json +57 -0
package/locales/fr.json +57 -0
package/package.json +36 -0
package/views/partials/color-picker.njk +11 -0
package/views/partials/tab-strip.njk +16 -0
package/views/site-config-branding.njk +76 -0
package/views/site-config-features.njk +35 -0
package/views/site-config-identity.njk +42 -0
package/views/site-config-layout.njk +55 -0

package/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# @rmdes/indiekit-endpoint-site-config
+Site identity, branding, layout, and feature flag configuration plugin for Indiekit.
+Documentation lives in `documentation-central/docs/site-config-plugin.md` in the workspace.
+## Dependencies
+- `culori` — used for OKLCH-based palette derivation (see `lib/render/derive-palette.js`, added in a later task).

package/index.js ADDED Viewed

@@ -0,0 +1,83 @@
+import express from "express";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { identityRouter } from "./lib/controllers/identity.js";
+import { brandingRouter } from "./lib/controllers/branding.js";
+import { layoutRouter } from "./lib/controllers/layout.js";
+import { featuresRouter } from "./lib/controllers/features.js";
+import { apiRouter } from "./lib/controllers/api.js";
+import { getSiteConfig } from "./lib/storage/get-site-config.js";
+import { writeThemeCss } from "./lib/render/write-theme-css.js";
+import { writeSiteJson } from "./lib/render/write-site-json.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const defaults = {
+  mountPath: "/site-config",
+};
+export default class SiteConfigEndpoint {
+  name = "Site Config endpoint";
+  constructor(options = {}) {
+    this.options = { ...defaults, ...options };
+    this.mountPath = this.options.mountPath;
+  }
+  get localesDirectory() {
+    return path.join(__dirname, "locales");
+  }
+  get viewsDirectory() {
+    return path.join(__dirname, "views");
+  }
+  get navigationItems() {
+    return {
+      href: this.options.mountPath,
+      text: "siteConfig.title",
+      requiresDatabase: true,
+    };
+  }
+  get shortcutItems() {
+    return {
+      url: this.options.mountPath,
+      name: "siteConfig.title",
+      iconName: "settings",
+      requiresDatabase: true,
+    };
+  }
+  async init(Indiekit) {
+    Indiekit.addEndpoint(this);
+    this._apiRouter = apiRouter(Indiekit);
+    const protectedRouter = express.Router();
+    protectedRouter.get("/", (req, res) => res.redirect(`${this.mountPath}/identity`));
+    protectedRouter.use("/identity", identityRouter(Indiekit));
+    protectedRouter.use("/branding", brandingRouter(Indiekit));
+    protectedRouter.use("/layout",   layoutRouter(Indiekit));
+    protectedRouter.use("/features", featuresRouter(Indiekit));
+    this.routes = protectedRouter;
+    // Ensure files exist on first boot — synchronously regenerate.
+    try {
+      const config = await getSiteConfig(Indiekit);
+      await writeThemeCss(config);
+      await writeSiteJson(config);
+    } catch (error) {
+      console.warn("[site-config] initial render skipped:", error.message);
+    }
+  }
+  get routesPublic() {
+    const router = express.Router();
+    if (this._apiRouter) {
+      router.use("/api", this._apiRouter);
+    }
+    return router;
+  }
+}

package/lib/controllers/api.js ADDED Viewed

@@ -0,0 +1,45 @@
+import express from "express";
+import { getSiteConfig } from "../storage/get-site-config.js";
+import { renderThemeCss } from "../render/write-theme-css.js";
+export function apiRouter(Indiekit) {
+  const router = express.Router();
+  router.get("/preview", async (req, res, next) => {
+    try {
+      const config = await getSiteConfig(Indiekit);
+      const themeCss = renderThemeCss(config);
+      res.setHeader("Content-Type", "text/html");
+      res.setHeader("X-Content-Type-Options", "nosniff");
+      res.setHeader("Cache-Control", "no-store");
+      res.send(`<!doctype html>
+<html lang="${escapeHtml(config.identity.locale || "en")}">
+<head>
+  <meta charset="utf-8">
+  <title>Preview</title>
+  <style>
+${themeCss}
+    body { font-family: var(--font-sans); background: rgb(var(--c-surface-50)); color: rgb(var(--c-surface-900)); margin: 0; padding: 1.5rem; }
+    h1 { font-family: var(--font-serif); color: rgb(var(--c-primary)); margin: 0 0 0.5em; font-size: 1.5em; }
+    p { color: rgb(var(--c-surface-700)); line-height: 1.5; margin: 0 0 1em; }
+    .button { background: rgb(var(--c-accent-500)); color: rgb(var(--c-surface-50)); padding: 0.4em 0.8em; border-radius: 0.4em; display: inline-block; font-weight: 600; }
+    a { color: rgb(var(--c-link)); }
+  </style>
+</head>
+<body>
+  <h1>${escapeHtml(config.identity.name || "Untitled site")}</h1>
+  <p>${escapeHtml(config.identity.description || "Sample description")}</p>
+  <p><a href="#">A sample link</a> and <span class="button">an action button</span>.</p>
+</body>
+</html>`);
+    } catch (error) {
+      next(error);
+    }
+  });
+  return router;
+}
+export function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
+}

package/lib/controllers/branding.js ADDED Viewed

@@ -0,0 +1,97 @@
+import express from "express";
+import { getSiteConfig } from "../storage/get-site-config.js";
+import { saveSiteConfig } from "../storage/save-site-config.js";
+import { writeSiteJson } from "../render/write-site-json.js";
+import { writeThemeCss } from "../render/write-theme-css.js";
+import { isValidHexColor, normalizeHex } from "../validators/color.js";
+import { isValidFont, CURATED_FONTS } from "../validators/font.js";
+import { SURFACE_PRESETS } from "../render/surface-presets.js";
+const VALID_PRESETS = new Set([...Object.keys(SURFACE_PRESETS), "custom"]);
+export function brandingRouter(Indiekit) {
+  const router = express.Router();
+  router.get("/", async (req, res, next) => {
+    try {
+      const config = await getSiteConfig(Indiekit);
+      res.render("site-config-branding", {
+        config,
+        activeTab: "branding",
+        curatedFonts: CURATED_FONTS,
+        success: req.query.success,
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+  router.post("/", async (req, res, next) => {
+    try {
+      const body = req.body;
+      // Collect custom surface if preset === custom
+      const surfaceCustom = body.surfacePreset === "custom"
+        ? Object.fromEntries(
+            [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+              .map((k) => [k, normalizeHex(body[`surfaceCustom_${k}`])])
+              .filter(([, v]) => v != null),
+          )
+        : null;
+      if (body.surfacePreset === "custom") {
+        const missing = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+          .filter((k) => !surfaceCustom[k]);
+        if (missing.length > 0) {
+          return res.status(400).send(`Custom palette is missing tones: ${missing.join(", ")}`);
+        }
+      }
+      // Validate and collect brand tokens
+      const colors = {};
+      for (const token of ["primary", "link", "focus", "success", "warning", "danger"]) {
+        const raw = body[`colors_${token}`];
+        if (!isValidHexColor(raw)) {
+          return res.status(400).send(`Invalid color for ${token}: ${raw}`);
+        }
+        colors[token] = normalizeHex(raw);
+      }
+      // Validate typography
+      const typography = {
+        hosting: ["self", "bunny"].includes(body.typography_hosting) ? body.typography_hosting : "self",
+      };
+      for (const cat of ["sans", "serif", "mono"]) {
+        const name = body[`typography_${cat}`];
+        if (!isValidFont(name, cat)) {
+          return res.status(400).send(`Invalid font for ${cat}: ${name}`);
+        }
+        typography[cat] = name;
+      }
+      const accentBase = normalizeHex(body.accentBase);
+      if (!accentBase) return res.status(400).send("Invalid accentBase");
+      const patch = {
+        branding: {
+          surfacePreset: VALID_PRESETS.has(body.surfacePreset) ? body.surfacePreset : "warm-stone",
+          surfaceCustom,
+          accentBase,
+          colors,
+          typography,
+        },
+      };
+      const userIdent = Indiekit.config?.publication?.me || "unknown";
+      const updated = await saveSiteConfig(Indiekit, patch, userIdent);
+      await writeSiteJson(updated);
+      await writeThemeCss(updated);
+      const message = encodeURIComponent(res.locals.__("siteConfig.common.saved"));
+      res.redirect(`/site-config/branding?success=${message}`);
+    } catch (error) {
+      next(error);
+    }
+  });
+  return router;
+}

package/lib/controllers/features.js ADDED Viewed

@@ -0,0 +1,56 @@
+import express from "express";
+import { getSiteConfig } from "../storage/get-site-config.js";
+import { saveSiteConfig } from "../storage/save-site-config.js";
+import { writeSiteJson } from "../render/write-site-json.js";
+/**
+ * Discover feature flags from loaded plugins by reading `plugin.featureFlag`.
+ * Plugins without the capability are skipped.
+ */
+export function discoverFlags(Indiekit) {
+  const plugins = Indiekit.config?.plugins || [];
+  return plugins
+    .map((p) => p.featureFlag)
+    .filter(Boolean)
+    .sort((a, b) => (a.category || "").localeCompare(b.category || ""));
+}
+export function featuresRouter(Indiekit) {
+  const router = express.Router();
+  router.get("/", async (req, res, next) => {
+    try {
+      const config = await getSiteConfig(Indiekit);
+      const flags = discoverFlags(Indiekit);
+      res.render("site-config-features", {
+        config,
+        activeTab: "features",
+        flags,
+        success: req.query.success,
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+  router.post("/", async (req, res, next) => {
+    try {
+      const flags = discoverFlags(Indiekit);
+      const features = {};
+      for (const flag of flags) {
+        features[flag.key] = req.body[`feature_${flag.key}`] === "on";
+      }
+      const userIdent = Indiekit.config?.publication?.me || "unknown";
+      const updated = await saveSiteConfig(Indiekit, { features }, userIdent);
+      await writeSiteJson(updated);
+      const message = encodeURIComponent(
+        res.locals.__("siteConfig.common.saved"),
+      );
+      res.redirect(`/site-config/features?success=${message}`);
+    } catch (error) {
+      next(error);
+    }
+  });
+  return router;
+}

package/lib/controllers/identity.js ADDED Viewed

@@ -0,0 +1,61 @@
+import express from "express";
+import { getSiteConfig } from "../storage/get-site-config.js";
+import { saveSiteConfig } from "../storage/save-site-config.js";
+import { writeSiteJson } from "../render/write-site-json.js";
+const LOCALE_RE = /^[a-z]{2}(-[A-Z]{2})?$/;
+const TIMEZONE_RE = /^[A-Za-z]+\/[A-Za-z_\/]+$/;
+function validLocale(raw) {
+  const v = raw?.trim() || "en";
+  return LOCALE_RE.test(v) ? v : "en";
+}
+function validTimezone(raw) {
+  const v = raw?.trim() || "UTC";
+  // "UTC" is a special-case valid timezone that doesn't match the region/city pattern
+  if (v === "UTC") return v;
+  return TIMEZONE_RE.test(v) ? v : "UTC";
+}
+export function identityRouter(Indiekit) {
+  const router = express.Router();
+  router.get("/", async (req, res, next) => {
+    try {
+      const config = await getSiteConfig(Indiekit);
+      res.render("site-config-identity", {
+        config,
+        activeTab: "identity",
+        success: req.query.success,
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+  router.post("/", async (req, res, next) => {
+    try {
+      const patch = {
+        identity: {
+          name: req.body.name?.trim() || "",
+          description: req.body.description?.trim() || "",
+          tagline: req.body.tagline?.trim() || "",
+          defaultAuthor: req.body.defaultAuthor?.trim() || "",
+          defaultOgImage: req.body.defaultOgImage?.trim() || "",
+          locale: validLocale(req.body.locale),
+          timezone: validTimezone(req.body.timezone),
+        },
+      };
+      const userIdent = Indiekit.config?.publication?.me || "unknown";
+      const updated = await saveSiteConfig(Indiekit, patch, userIdent);
+      await writeSiteJson(updated);
+      const message = encodeURIComponent(res.locals.__("siteConfig.common.saved"));
+      res.redirect(`/site-config/identity?success=${message}`);
+    } catch (error) {
+      next(error);
+    }
+  });
+  return router;
+}

package/lib/controllers/layout.js ADDED Viewed

@@ -0,0 +1,66 @@
+import express from "express";
+import { getSiteConfig } from "../storage/get-site-config.js";
+import { saveSiteConfig } from "../storage/save-site-config.js";
+import { writeSiteJson } from "../render/write-site-json.js";
+const PRESETS = ["blog", "portfolio", "business", "landing"];
+export function layoutRouter(Indiekit) {
+  const router = express.Router();
+  router.get("/", async (req, res, next) => {
+    try {
+      const config = await getSiteConfig(Indiekit);
+      res.render("site-config-layout", {
+        config,
+        activeTab: "layout",
+        presets: PRESETS,
+        success: req.query.success,
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+  router.post("/", async (req, res, next) => {
+    try {
+      const navItems = [];
+      const labels = [].concat(req.body.navLabel || []);
+      const urls = [].concat(req.body.navUrl || []);
+      for (let i = 0; i < labels.length; i++) {
+        if (labels[i] && urls[i]) {
+          const url = urls[i].trim();
+          navItems.push({
+            label: labels[i].trim(),
+            url,
+            external: url.startsWith("http"),
+          });
+        }
+      }
+      const patch = {
+        layout: {
+          preset: PRESETS.includes(req.body.preset) ? req.body.preset : "blog",
+          sidebarEnabled: req.body.sidebarEnabled === "on",
+          sidebarSide: ["left", "right"].includes(req.body.sidebarSide)
+            ? req.body.sidebarSide
+            : "right",
+          navItems,
+          // footerColumns intentionally omitted — managed by a future tab; deepMerge would replace, not preserve
+        },
+      };
+      const userIdent = Indiekit.config?.publication?.me || "unknown";
+      const updated = await saveSiteConfig(Indiekit, patch, userIdent);
+      await writeSiteJson(updated);
+      const message = encodeURIComponent(
+        res.locals.__("siteConfig.common.saved"),
+      );
+      res.redirect(`/site-config/layout?success=${message}`);
+    } catch (error) {
+      next(error);
+    }
+  });
+  return router;
+}

package/lib/render/derive-palette.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { parse, formatHex, oklch, clampChroma } from "culori";
+import { SURFACE_PRESETS } from "./surface-presets.js";
+const SCALE_STEPS = [
+  { key: 50,  l: 0.97 }, { key: 100, l: 0.94 }, { key: 200, l: 0.86 },
+  { key: 300, l: 0.78 }, { key: 400, l: 0.65 }, { key: 500, l: 0.55 },
+  { key: 600, l: 0.45 }, { key: 700, l: 0.36 }, { key: 800, l: 0.27 },
+  { key: 900, l: 0.20 }, { key: 950, l: 0.13 },
+];
+const REQUIRED_SCALE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+export function derivePaletteFromBase(baseHex) {
+  const base = oklch(parse(baseHex));
+  if (!base) throw new Error(`Invalid color: ${baseHex}`);
+  const palette = {};
+  for (const step of SCALE_STEPS) {
+    const color = {
+      mode: "oklch",
+      l: step.l,
+      c: base.c * (step.l < 0.5 ? step.l * 1.8 : (1 - step.l) * 1.8),
+      h: base.h ?? 0, // hue unused when base.c === 0; fallback prevents NaN in OKLCH ops
+    };
+    palette[step.key] = formatHex(clampChroma(color, "oklch", "rgb"));
+  }
+  return palette;
+}
+export function getSurfacePalette(preset, custom = null) {
+  if (preset === "custom") {
+    if (!custom) throw new Error("Custom preset selected but no custom palette provided");
+    const missing = REQUIRED_SCALE_KEYS.filter((k) => !custom[k]);
+    if (missing.length > 0) {
+      throw new Error(`Custom palette is missing required scale keys: ${missing.join(", ")}`);
+    }
+    return custom;
+  }
+  const p = SURFACE_PRESETS[preset];
+  if (!p) throw new Error(`Unknown surface preset: ${preset}`);
+  return p;
+}

package/lib/render/surface-presets.js ADDED Viewed

@@ -0,0 +1,25 @@
+// `cool-slate` and `neutral-zinc` palette values are derived from Tailwind CSS,
+// MIT License — Copyright (c) Tailwind Labs, Inc.
+// https://tailwindcss.com/docs/customizing-colors
+//
+// `warm-stone` is the original rmendes.net palette.
+export const SURFACE_PRESETS = Object.freeze({
+  "warm-stone": Object.freeze({
+    50:  "#faf8f5", 100: "#f4f2ee", 200: "#e8e5df",
+    300: "#d5d0c8", 400: "#a09a90", 500: "#7a746a",
+    600: "#5c5750", 700: "#3f3b35", 800: "#2a2722",
+    900: "#1c1b19", 950: "#0f0e0d",
+  }),
+  "cool-slate": Object.freeze({
+    50:  "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0",
+    300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b",
+    600: "#475569", 700: "#334155", 800: "#1e293b",
+    900: "#0f172a", 950: "#020617",
+  }),
+  "neutral-zinc": Object.freeze({
+    50:  "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7",
+    300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a",
+    600: "#52525b", 700: "#3f3f46", 800: "#27272a",
+    900: "#18181b", 950: "#09090b",
+  }),
+});

package/lib/render/write-site-json.js ADDED Viewed

@@ -0,0 +1,59 @@
+/**
+ * Site config JSON writer.
+ * Renders a site config object as a JSON string for Eleventy consumption,
+ * and optionally writes it atomically to disk.
+ *
+ * The JSON is consumed by Eleventy via `_data/site-config.json`. Template
+ * authors access fields like `{{ site.identity.name }}` and
+ * `{{ site.branding.colors.primary }}` in Nunjucks templates.
+ *
+ * @module render/write-site-json
+ */
+import { writeFile, rename, mkdir } from "node:fs/promises";
+import { randomBytes } from "node:crypto";
+import path from "node:path";
+// Keys that must never appear in the public Eleventy data layer.
+// updatedBy may contain a user email or profile URL (PII).
+// We strip by key name at any depth so future nested fields are safe by default.
+const PRIVATE_KEYS = new Set(["updatedBy"]);
+/**
+ * Render the site config as a JSON string suitable for Eleventy consumption.
+ * Strips PRIVATE_KEYS at any depth (currently only `updatedBy`).
+ *
+ * `updatedAt` (a timestamp) is intentionally kept — template authors may want
+ * to display "site last updated YYYY-MM-DD" using this field.
+ *
+ * @param {object} config - Merged site config object (output of mergeWithDefaults)
+ * @returns {string} Pretty-printed JSON source (2-space indent)
+ */
+export function renderSiteJson(config) {
+  const replacer = (key, value) => (PRIVATE_KEYS.has(key) ? undefined : value);
+  return JSON.stringify(config, replacer, 2);
+}
+/**
+ * Write the site config JSON to disk atomically (tmp file → rename).
+ * Creates the output directory if it does not exist.
+ *
+ * The tmp file uses a random suffix so concurrent callers don't collide on a
+ * shared tmp name (two simultaneous writes both renaming the same file would
+ * cause one to fail with ENOENT). The rename itself is atomic on POSIX —
+ * Eleventy's file watcher will not observe a partial write.
+ *
+ * @param {object} config - Full site config (from mergeWithDefaults)
+ * @param {string} [outputPath="/app/data/content/_data/site-config.json"] - Destination path
+ * @returns {Promise<void>}
+ */
+export async function writeSiteJson(
+  config,
+  outputPath = "/app/data/content/_data/site-config.json",
+) {
+  const json = renderSiteJson(config);
+  await mkdir(path.dirname(outputPath), { recursive: true });
+  const tmp = `${outputPath}.${randomBytes(6).toString("hex")}.tmp`;
+  await writeFile(tmp, json, "utf8");
+  await rename(tmp, outputPath);
+}

package/lib/render/write-theme-css.js ADDED Viewed

@@ -0,0 +1,135 @@
+/**
+ * Theme CSS writer.
+ * Renders a `:root {}` block of CSS custom properties from a site config,
+ * and optionally writes it atomically to disk.
+ *
+ * CSS variables use space-separated RGB triplets (no commas) so that
+ * Tailwind's alpha-value pattern works: `rgb(var(--c-primary) / <alpha-value>)`.
+ *
+ * @module render/write-theme-css
+ */
+import { writeFile, rename, mkdir } from "node:fs/promises";
+import { randomBytes } from "node:crypto";
+import path from "node:path";
+import { getSurfacePalette, derivePaletteFromBase } from "./derive-palette.js";
+import { normalizeHex } from "../validators/color.js";
+/**
+ * Convert a hex color string to a space-separated RGB triplet.
+ * Returns "0 0 0" for invalid or null input (safe fallback).
+ *
+ * 8-digit (alpha) hex inputs have their alpha channel dropped; a warning is
+ * logged because the RGB triplet output format cannot represent alpha.
+ * (Tailwind applies alpha at the use site via the <alpha-value> pattern.)
+ *
+ * @param {string|null} hex - Hex color string (e.g. "#ff0000")
+ * @returns {string} Space-separated triplet (e.g. "255 0 0")
+ */
+function hexToRgbTriplet(hex) {
+  const v = normalizeHex(hex);
+  if (!v) return "0 0 0";
+  if (v.length === 9) {
+    // 8-digit hex includes alpha; alpha is not representable in our CSS var format.
+    // (Tailwind applies alpha at use site via the <alpha-value> pattern.)
+    console.warn(`[site-config] alpha channel in '${hex}' is not supported in CSS custom properties and will be ignored`);
+  }
+  const r = parseInt(v.slice(1, 3), 16);
+  const g = parseInt(v.slice(3, 5), 16);
+  const b = parseInt(v.slice(5, 7), 16);
+  return `${r} ${g} ${b}`;
+}
+/**
+ * CSS generic font keywords (and ui-* generics) per CSS Fonts spec.
+ * These MUST be emitted unquoted; quoting them turns them into a search for a
+ * custom font-family named "ui-monospace" rather than the CSS generic keyword.
+ */
+const CSS_GENERIC_FONT_KEYWORDS = new Set([
+  "system-ui",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "sans-serif",
+  "serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+]);
+/**
+ * Format a font-family name for a CSS declaration. Generic keywords are
+ * emitted unquoted; named families are wrapped in quotes via JSON.stringify
+ * (which also escapes any special characters safely).
+ *
+ * @param {string} name - Font family name
+ * @returns {string} CSS-ready font family token
+ */
+function formatFontFamily(name) {
+  return CSS_GENERIC_FONT_KEYWORDS.has(name) ? name : JSON.stringify(name);
+}
+/**
+ * Render the site's theme as a CSS string with custom properties.
+ *
+ * Note: only light-mode (:root) variables are emitted. Dark-mode overrides
+ * are out of scope for this module; the theme uses Tailwind's class-based
+ * dark mode (darkMode: "class") via existing styling, not via separate
+ * CSS variable overrides.
+ *
+ * @param {object} config - Merged site config object (output of mergeWithDefaults)
+ * @returns {string} CSS source ready to be written or served
+ */
+export function renderThemeCss(config) {
+  const surface = getSurfacePalette(
+    config.branding.surfacePreset,
+    config.branding.surfaceCustom,
+  );
+  const accent = derivePaletteFromBase(config.branding.accentBase);
+  const { primary, link, focus, success, warning, danger } = config.branding.colors;
+  const { sans, serif, mono } = config.branding.typography;
+  const surfaceVars = Object.entries(surface)
+    .map(([k, v]) => `  --c-surface-${k}: ${hexToRgbTriplet(v)};`)
+    .join("\n");
+  const accentVars = Object.entries(accent)
+    .map(([k, v]) => `  --c-accent-${k}: ${hexToRgbTriplet(v)};`)
+    .join("\n");
+  return `:root {
+${surfaceVars}
+${accentVars}
+  --c-primary: ${hexToRgbTriplet(primary)};
+  --c-link:    ${hexToRgbTriplet(link)};
+  --c-focus:   ${hexToRgbTriplet(focus)};
+  --c-success: ${hexToRgbTriplet(success)};
+  --c-warning: ${hexToRgbTriplet(warning)};
+  --c-danger:  ${hexToRgbTriplet(danger)};
+  --font-sans:  ${formatFontFamily(sans)}, system-ui, sans-serif;
+  --font-serif: ${formatFontFamily(serif)}, Georgia, serif;
+  --font-mono:  ${formatFontFamily(mono)}, ui-monospace, monospace;
+}
+`;
+}
+/**
+ * Write theme CSS to disk atomically (tmp file → rename).
+ * Creates the output directory if it does not exist.
+ *
+ * The tmp file uses a random suffix so concurrent callers don't collide on a
+ * shared tmp name (two simultaneous writes both renaming the same file would
+ * cause one to fail with ENOENT). The rename itself is atomic on POSIX —
+ * Eleventy's file watcher will not observe a partial write.
+ *
+ * @param {object} config - Full site config (from mergeWithDefaults)
+ * @param {string} [outputPath="/app/data/content/_data/theme.css"] - Destination path
+ * @returns {Promise<void>}
+ */
+export async function writeThemeCss(config, outputPath = "/app/data/content/_data/theme.css") {
+  const css = renderThemeCss(config);
+  await mkdir(path.dirname(outputPath), { recursive: true });
+  const tmp = `${outputPath}.${randomBytes(6).toString("hex")}.tmp`;
+  await writeFile(tmp, css, "utf8");
+  await rename(tmp, outputPath);
+}

package/lib/storage/defaults.js ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * Default values for site configuration.
+ * Single source of truth for the schema's defaults.
+ * Frozen for immutability — never mutate this object directly.
+ * @module storage/defaults
+ */
+import { CURATED_FONTS } from "../validators/font.js";
+export const DEFAULTS = Object.freeze({
+  schemaVersion: 1,
+  identity: Object.freeze({
+    name: "My IndieWeb Site",
+    description: "A site built with Indiekit",
+    tagline: "",
+    defaultAuthor: "",
+    defaultOgImage: "",
+    locale: "en",
+    timezone: "UTC",
+  }),
+  branding: Object.freeze({
+    surfacePreset: "warm-stone",
+    surfaceCustom: null,
+    accentBase: "#f59e0b",
+    colors: Object.freeze({
+      primary: "#1f3a8a",
+      link: "#3b82f6",
+      focus: "#fbbf24",
+      success: "#16a34a",
+      warning: "#eab308",
+      danger: "#dc2626",
+    }),
+    typography: Object.freeze({
+      sans:  CURATED_FONTS.sans[0],
+      serif: CURATED_FONTS.serif[0],
+      mono:  CURATED_FONTS.mono[0],
+      hosting: "self",
+    }),
+    logo: "",
+    favicon: "",
+  }),
+  layout: Object.freeze({
+    preset: "blog",
+    sidebarEnabled: true,
+    sidebarSide: "right",
+    navItems: Object.freeze([
+      Object.freeze({ label: "Home", url: "/", external: false }),
+    ]),
+    footerColumns: Object.freeze([]),
+  }),
+  features: Object.freeze({
+    webmentions: true,
+    syndication: true,
+    activitypub: false,
+    search: true,
+    rss: true,
+  }),
+});

package/lib/storage/get-site-config.js ADDED Viewed

@@ -0,0 +1,64 @@
+/**
+ * Site configuration reader and merger.
+ * Provides mergeWithDefaults (pure) and getSiteConfig (async DB read).
+ * @module storage/get-site-config
+ */
+import { DEFAULTS } from "./defaults.js";
+/**
+ * Deep-merge source into target, returning a new object.
+ * Arrays are replaced (not concatenated).
+ * null values are treated as scalars (not objects to merge into).
+ *
+ * @param {object} target - Base object (e.g. DEFAULTS)
+ * @param {object} source - Override object
+ * @returns {object} New merged object
+ */
+export function deepMerge(target, source) {
+  const out = Array.isArray(target) ? [...target] : { ...target };
+  for (const key of Object.keys(source || {})) {
+    const srcVal = source[key];
+    const tgtVal = out[key];
+    if (
+      srcVal &&
+      typeof srcVal === "object" &&
+      !Array.isArray(srcVal) &&
+      tgtVal &&
+      typeof tgtVal === "object" &&
+      !Array.isArray(tgtVal)
+    ) {
+      out[key] = deepMerge(tgtVal, srcVal);
+    } else if (srcVal !== undefined) {
+      out[key] = srcVal;
+    }
+  }
+  return out;
+}
+/**
+ * Merge an input object with defaults.
+ * Returns a fully-populated config with all required keys.
+ *
+ * @param {object} input - Partial config (may be empty)
+ * @returns {object} Merged config
+ */
+export function mergeWithDefaults(input) {
+  return deepMerge(DEFAULTS, input || {});
+}
+/**
+ * Read site config from MongoDB, merged with defaults.
+ * Returns defaults-only config when no database is configured.
+ *
+ * @param {object} Indiekit - Indiekit application instance
+ * @returns {Promise<object>} Full site config
+ */
+export async function getSiteConfig(Indiekit) {
+  const db = Indiekit.database;
+  if (!db) return mergeWithDefaults({});
+  const doc = await db.collection("siteConfig").findOne({ _id: "primary" });
+  if (!doc) return mergeWithDefaults({});
+  const { _id, ...fields } = doc;
+  return mergeWithDefaults(fields);
+}

package/lib/storage/save-site-config.js ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * Site configuration writer.
+ * Persists a patched config to MongoDB with upsert, merging with defaults.
+ * @module storage/save-site-config
+ */
+import { mergeWithDefaults, deepMerge } from "./get-site-config.js";
+/**
+ * Save a partial config patch to MongoDB, merged with defaults.
+ * Creates the document if it doesn't exist (upsert).
+ * Records updatedAt (ISO 8601) and updatedBy on every write.
+ *
+ * Uses deepMerge against the existing document so partial-section patches
+ * (e.g. { branding: { accentBase: "#new" } }) do not erase sibling fields.
+ * Uses replaceOne to match sibling plugin convention and avoid MongoDB's
+ * "Mod on _id not allowed" error from $set on a doc containing _id.
+ *
+ * @param {object} Indiekit - Indiekit application instance
+ * @param {object} patch - Partial config values to apply
+ * @param {string} [userIdentifier] - Identifier of the user making the change
+ * @returns {Promise<object>} The fully merged config that was saved
+ * @throws {Error} When no database is configured
+ */
+export async function saveSiteConfig(Indiekit, patch, userIdentifier) {
+  const db = Indiekit.database;
+  if (!db) throw new Error("Database not configured");
+  const collection = db.collection("siteConfig");
+  const existing = await collection.findOne({ _id: "primary" });
+  const { _id, ...existingFields } = existing || {};
+  const merged = mergeWithDefaults(deepMerge(existingFields, patch));
+  merged.updatedAt = new Date().toISOString();
+  merged.updatedBy = userIdentifier || "unknown";
+  await collection.replaceOne(
+    { _id: "primary" },
+    { _id: "primary", ...merged },
+    { upsert: true }
+  );
+  return merged;
+}

package/lib/validators/color.js ADDED Viewed

@@ -0,0 +1,19 @@
+// Hex validation uses a regex rather than culori because the responsibilities
+// are different: this module guards user input (predicate + normalize); the
+// palette derivation layer (lib/render/derive-palette.js) uses culori for
+// OKLCH conversion and scale generation. Keeping the two paths separate avoids
+// pulling a 50kb color library into the validator's hot path.
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+export function isValidHexColor(value) {
+  return typeof value === "string" && HEX_RE.test(value);
+}
+export function normalizeHex(value) {
+  if (!isValidHexColor(value)) return null;
+  const v = value.toLowerCase();
+  if (v.length === 4) {
+    return "#" + v[1].repeat(2) + v[2].repeat(2) + v[3].repeat(2);
+  }
+  return v;
+}

package/lib/validators/font.js ADDED Viewed

@@ -0,0 +1,16 @@
+export const CURATED_FONTS = Object.freeze({
+  // "system-ui" is a CSS generic — no @font-face needed
+  sans:  Object.freeze(["Inter", "Source Sans Pro", "system-ui"]),
+  // "Georgia" is system-bundled on all major platforms — no @font-face needed
+  serif: Object.freeze(["Fraunces", "Source Serif Pro", "Georgia"]),
+  // "ui-monospace" is a CSS generic — no @font-face needed
+  mono:  Object.freeze(["ui-monospace", "JetBrains Mono", "Source Code Pro"]),
+});
+export function isValidFont(name, category = null) {
+  if (typeof name !== "string") return false;
+  if (category != null) {
+    return CURATED_FONTS[category]?.includes(name) ?? false;
+  }
+  return Object.values(CURATED_FONTS).some((list) => list.includes(name));
+}

package/locales/en.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "siteConfig": {
+    "title": "Site Config",
+    "tabs": {
+      "identity": "Identity",
+      "branding": "Branding",
+      "layout": "Layout",
+      "features": "Feature Flags"
+    },
+    "identity": {
+      "title": "Identity",
+      "name": "Site name",
+      "description": "Description",
+      "tagline": "Tagline",
+      "defaultAuthor": "Default author",
+      "defaultOgImage": "Default OpenGraph image URL",
+      "locale": "Locale (ISO 639-1)",
+      "timezone": "Timezone (IANA)"
+    },
+    "branding": {
+      "title": "Branding",
+      "surfacePreset": "Surface palette",
+      "surfaceCustom": "Custom surface tones",
+      "accent": "Accent",
+      "brandTokens": "Brand tokens",
+      "primary": "Primary",
+      "link": "Link",
+      "focus": "Focus ring",
+      "success": "Success",
+      "warning": "Warning",
+      "danger": "Danger",
+      "typography": "Typography",
+      "fontSans": "Sans-serif font",
+      "fontSerif": "Serif font",
+      "fontMono": "Monospace font",
+      "fontHosting": "Font hosting",
+      "logo": "Logo",
+      "favicon": "Favicon"
+    },
+    "layout": {
+      "title": "Layout",
+      "preset": "Layout preset",
+      "sidebarEnabled": "Sidebar enabled",
+      "sidebarSide": "Sidebar side",
+      "navItems": "Navigation items"
+    },
+    "features": {
+      "title": "Feature Flags",
+      "empty": "No plugins declare a feature flag yet."
+    },
+    "common": {
+      "save": "Save changes",
+      "saved": "Saved",
+      "preview": "Live preview"
+    }
+  }
+}

package/locales/fr.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "siteConfig": {
+    "title": "Configuration du site",
+    "tabs": {
+      "identity": "Identité",
+      "branding": "Identité visuelle",
+      "layout": "Mise en page",
+      "features": "Fonctionnalités"
+    },
+    "identity": {
+      "title": "Identité",
+      "name": "Nom du site",
+      "description": "Description",
+      "tagline": "Slogan",
+      "defaultAuthor": "Auteur par défaut",
+      "defaultOgImage": "Image OpenGraph par défaut",
+      "locale": "Langue (ISO 639-1)",
+      "timezone": "Fuseau horaire (IANA)"
+    },
+    "branding": {
+      "title": "Identité visuelle",
+      "surfacePreset": "Palette de fond",
+      "surfaceCustom": "Tons personnalisés",
+      "accent": "Accent",
+      "brandTokens": "Couleurs de marque",
+      "primary": "Couleur principale",
+      "link": "Lien",
+      "focus": "Anneau de focus",
+      "success": "Succès",
+      "warning": "Avertissement",
+      "danger": "Erreur",
+      "typography": "Typographie",
+      "fontSans": "Police sans-serif",
+      "fontSerif": "Police serif",
+      "fontMono": "Police mono",
+      "fontHosting": "Hébergement des polices",
+      "logo": "Logo",
+      "favicon": "Favicon"
+    },
+    "layout": {
+      "title": "Mise en page",
+      "preset": "Modèle",
+      "sidebarEnabled": "Barre latérale activée",
+      "sidebarSide": "Côté de la barre latérale",
+      "navItems": "Éléments de navigation"
+    },
+    "features": {
+      "title": "Fonctionnalités",
+      "empty": "Aucun plugin ne déclare encore de drapeau de fonctionnalité."
+    },
+    "common": {
+      "save": "Enregistrer",
+      "saved": "Enregistré",
+      "preview": "Aperçu en direct"
+    }
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "@rmdes/indiekit-endpoint-site-config",
+  "version": "1.0.0-alpha.1",
+  "type": "module",
+  "description": "Site identity, branding, layout, and feature flag configuration for Indiekit",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "lib/",
+    "views/",
+    "locales/",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node --test tests/*.test.js",
+    "publish:beta": "npm publish --tag beta"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "peerDependencies": {
+    "@indiekit/indiekit": ">=1.0.0-beta.27"
+  },
+  "dependencies": {
+    "@indiekit/error": "^1.0.0-beta.25",
+    "@indiekit/frontend": "^1.0.0-beta.25",
+    "culori": "^4.0.1",
+    "express": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/views/partials/color-picker.njk ADDED Viewed

@@ -0,0 +1,11 @@
+{# locals: name (string), label (string), value (hex string) #}
+<div class="form-field form-field--color">
+  <label for="{{ name }}">{{ label }}</label>
+  <div class="color-picker">
+    <input type="color" class="color-picker__swatch" id="{{ name }}-swatch" value="{{ value }}"
+           oninput="document.getElementById('{{ name }}').value = this.value">
+    <input type="text" class="color-picker__hex" id="{{ name }}" name="{{ name }}"
+           value="{{ value }}" pattern="^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$" required
+           oninput="document.getElementById('{{ name }}-swatch').value = this.value">
+  </div>
+</div>

package/views/partials/tab-strip.njk ADDED Viewed

@@ -0,0 +1,16 @@
+{# locals: activeTab (string, one of identity|branding|layout|features) #}
+<nav class="site-config__tabs" aria-label="{{ __('siteConfig.title') }}">
+  {% set tabs = [
+    {key: 'identity', href: '/site-config/identity'},
+    {key: 'branding', href: '/site-config/branding'},
+    {key: 'layout', href: '/site-config/layout'},
+    {key: 'features', href: '/site-config/features'}
+  ] %}
+  {% for tab in tabs %}
+    <a href="{{ tab.href }}"
+       class="site-config__tab {% if activeTab == tab.key %}site-config__tab--active{% endif %}"
+       {% if activeTab == tab.key %}aria-current="page"{% endif %}>
+      {{ __('siteConfig.tabs.' + tab.key) }}
+    </a>
+  {% endfor %}
+</nav>

package/views/site-config-branding.njk ADDED Viewed

@@ -0,0 +1,76 @@
+{% extends "document.njk" %}
+{% block title %}{{ __('siteConfig.branding.title') }}{% endblock %}
+{% block content %}
+  <h1>{{ __('siteConfig.title') }}</h1>
+  {% include "partials/tab-strip.njk" %}
+  <form method="post" action="/site-config/branding" class="site-config__form site-config__form--branding">
+    <div class="site-config__columns">
+      <div class="site-config__form-column">
+        <fieldset>
+          <legend>{{ __('siteConfig.branding.surfacePreset') }}</legend>
+          <div class="form-radio-group">
+            {% for preset in ['warm-stone', 'cool-slate', 'neutral-zinc', 'custom'] %}
+              <label class="form-radio">
+                <input type="radio" name="surfacePreset" value="{{ preset }}"
+                       {% if config.branding.surfacePreset == preset %}checked{% endif %}>
+                <span>{{ preset }}</span>
+              </label>
+            {% endfor %}
+          </div>
+        </fieldset>
+        <fieldset class="surface-custom" data-show-when="surfacePreset=custom">
+          <legend>{{ __('siteConfig.branding.surfaceCustom') }}</legend>
+          {% for tone in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] %}
+            {% set v = config.branding.surfaceCustom and config.branding.surfaceCustom[tone] or '#888888' %}
+            {% include "partials/color-picker.njk" with { name: 'surfaceCustom_' + tone, label: 'surface-' + tone, value: v } %}
+          {% endfor %}
+        </fieldset>
+        <fieldset>
+          <legend>{{ __('siteConfig.branding.accent') }}</legend>
+          {% include "partials/color-picker.njk" with { name: 'accentBase', label: __('siteConfig.branding.accent'), value: config.branding.accentBase } %}
+        </fieldset>
+        <fieldset>
+          <legend>{{ __('siteConfig.branding.brandTokens') }}</legend>
+          {% for token in ['primary', 'link', 'focus', 'success', 'warning', 'danger'] %}
+            {% include "partials/color-picker.njk" with { name: 'colors_' + token, label: __('siteConfig.branding.' + token), value: config.branding.colors[token] } %}
+          {% endfor %}
+        </fieldset>
+        <fieldset>
+          <legend>{{ __('siteConfig.branding.typography') }}</legend>
+          {% for cat in ['sans', 'serif', 'mono'] %}
+            <div class="form-field">
+              <label for="typography_{{ cat }}">{{ __('siteConfig.branding.font' + cat | capitalize) }}</label>
+              <select id="typography_{{ cat }}" name="typography_{{ cat }}">
+                {% for f in curatedFonts[cat] %}
+                  <option value="{{ f }}" {% if config.branding.typography[cat] == f %}selected{% endif %}>{{ f }}</option>
+                {% endfor %}
+              </select>
+            </div>
+          {% endfor %}
+          <div class="form-field">
+            <label for="typography_hosting">{{ __('siteConfig.branding.fontHosting') }}</label>
+            <select id="typography_hosting" name="typography_hosting">
+              <option value="self" {% if config.branding.typography.hosting == 'self' %}selected{% endif %}>self-hosted</option>
+              <option value="bunny" {% if config.branding.typography.hosting == 'bunny' %}selected{% endif %}>Bunny Fonts</option>
+            </select>
+          </div>
+        </fieldset>
+        <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
+      </div>
+      <div class="site-config__preview-column">
+        <h3>{{ __('siteConfig.common.preview') }}</h3>
+        {# TODO Task 10: /site-config/api/preview endpoint not yet implemented; iframe will 404 until then #}
+        <iframe src="/site-config/api/preview" class="site-config__preview-iframe" title="{{ __('siteConfig.common.preview') }}"></iframe>
+      </div>
+    </div>
+  </form>
+{% endblock %}

package/views/site-config-features.njk ADDED Viewed

@@ -0,0 +1,35 @@
+{% extends "document.njk" %}
+{% block title %}{{ __('siteConfig.features.title') }}{% endblock %}
+{% block content %}
+  <h1>{{ __('siteConfig.title') }}</h1>
+  {% include "partials/tab-strip.njk" %}
+  {% if flags.length == 0 %}
+    <p class="empty-state">{{ __('siteConfig.features.empty') }}</p>
+  {% else %}
+    <form method="post" action="/site-config/features" class="site-config__form">
+      {% set currentCategory = '' %}
+      {% for flag in flags %}
+        {% if flag.category != currentCategory %}
+          {% if not loop.first %}</fieldset>{% endif %}
+          <fieldset>
+            <legend>{{ flag.category }}</legend>
+          {% set currentCategory = flag.category %}
+        {% endif %}
+        <div class="form-field">
+          <label>
+            <input type="checkbox" name="feature_{{ flag.key }}"
+                   {% if config.features[flag.key] %}checked{% elif flag.default %}checked{% endif %}>
+            <strong>{{ flag.label }}</strong>
+            {% if flag.description %}<span class="hint">{{ flag.description }}</span>{% endif %}
+            {% if flag.requiresRestart %}<span class="badge">Restart required</span>{% endif %}
+          </label>
+        </div>
+      {% endfor %}
+      </fieldset>
+      <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
+    </form>
+  {% endif %}
+{% endblock %}

package/views/site-config-identity.njk ADDED Viewed

@@ -0,0 +1,42 @@
+{% extends "document.njk" %}
+{% block title %}{{ __('siteConfig.identity.title') }}{% endblock %}
+{% block content %}
+  <h1>{{ __('siteConfig.title') }}</h1>
+  {% include "partials/tab-strip.njk" %}
+  <form method="post" action="/site-config/identity" class="site-config__form">
+    <div class="form-field">
+      <label for="name">{{ __('siteConfig.identity.name') }}</label>
+      <input type="text" id="name" name="name" value="{{ config.identity.name }}" required>
+    </div>
+    <div class="form-field">
+      <label for="description">{{ __('siteConfig.identity.description') }}</label>
+      <textarea id="description" name="description" rows="2">{{ config.identity.description }}</textarea>
+    </div>
+    <div class="form-field">
+      <label for="tagline">{{ __('siteConfig.identity.tagline') }}</label>
+      <input type="text" id="tagline" name="tagline" value="{{ config.identity.tagline }}">
+    </div>
+    <div class="form-field">
+      <label for="defaultAuthor">{{ __('siteConfig.identity.defaultAuthor') }}</label>
+      <input type="text" id="defaultAuthor" name="defaultAuthor" value="{{ config.identity.defaultAuthor }}">
+    </div>
+    <div class="form-field">
+      <label for="defaultOgImage">{{ __('siteConfig.identity.defaultOgImage') }}</label>
+      <input type="url" id="defaultOgImage" name="defaultOgImage" value="{{ config.identity.defaultOgImage }}">
+    </div>
+    <div class="form-row">
+      <div class="form-field">
+        <label for="locale">{{ __('siteConfig.identity.locale') }}</label>
+        <input type="text" id="locale" name="locale" value="{{ config.identity.locale }}" maxlength="5">
+      </div>
+      <div class="form-field">
+        <label for="timezone">{{ __('siteConfig.identity.timezone') }}</label>
+        <input type="text" id="timezone" name="timezone" value="{{ config.identity.timezone }}">
+      </div>
+    </div>
+    <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
+  </form>
+{% endblock %}

package/views/site-config-layout.njk ADDED Viewed

@@ -0,0 +1,55 @@
+{% extends "document.njk" %}
+{% block title %}{{ __('siteConfig.layout.title') }}{% endblock %}
+{% block content %}
+  <h1>{{ __('siteConfig.title') }}</h1>
+  {% include "partials/tab-strip.njk" %}
+  <form method="post" action="/site-config/layout" class="site-config__form">
+    <div class="form-field">
+      <label for="preset">{{ __('siteConfig.layout.preset') }}</label>
+      <select id="preset" name="preset">
+        {% for p in presets %}
+          <option value="{{ p }}" {% if config.layout.preset == p %}selected{% endif %}>{{ p }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="form-field">
+      <label>
+        <input type="checkbox" name="sidebarEnabled" {% if config.layout.sidebarEnabled %}checked{% endif %}>
+        {{ __('siteConfig.layout.sidebarEnabled') }}
+      </label>
+    </div>
+    <div class="form-field">
+      <label for="sidebarSide">{{ __('siteConfig.layout.sidebarSide') }}</label>
+      <select id="sidebarSide" name="sidebarSide">
+        <option value="left" {% if config.layout.sidebarSide == 'left' %}selected{% endif %}>left</option>
+        <option value="right" {% if config.layout.sidebarSide == 'right' %}selected{% endif %}>right</option>
+      </select>
+    </div>
+    <fieldset>
+      <legend>{{ __('siteConfig.layout.navItems') }}</legend>
+      <table class="form-table">
+        <thead>
+          <tr><th>Label</th><th>URL</th></tr>
+        </thead>
+        <tbody>
+          {% for item in config.layout.navItems %}
+            <tr>
+              <td><input type="text" name="navLabel" value="{{ item.label }}"></td>
+              <td><input type="text" name="navUrl" value="{{ item.url }}"></td>
+            </tr>
+          {% endfor %}
+          <tr>
+            <td><input type="text" name="navLabel" placeholder="New label"></td>
+            <td><input type="text" name="navUrl" placeholder="/path or https://..."></td>
+          </tr>
+        </tbody>
+      </table>
+    </fieldset>
+    <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
+  </form>
+{% endblock %}