npm - create-astroid - Versions diffs - 0.1.2 → 0.2.0 - Mend

create-astroid 0.1.2 → 0.2.0

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 (19) hide show

package/README.md +16 -7
package/index.mjs +244 -15
package/package.json +5 -3
package/template/README.md +10 -0
package/template/_env.example +36 -0
package/template/astro.config.mjs +29 -12
package/template/package.json +5 -2
package/template/pnpm-workspace.yaml +38 -0
package/template/seed/home.seed.sql +48 -1
package/template/src/auth.ts +10 -6
package/template/src/components/LouiseEdit.astro +46 -3
package/template/src/env.d.ts +54 -5
package/template/src/layouts/Site.astro +84 -4
package/template/src/pages/contact.astro +122 -0
package/template/src/pages/index.astro +78 -5
package/template/src/pages/login.astro +52 -2
package/template/src/pages/robots.txt.ts +36 -0
package/template/src/pages/sitemap.xml.ts +40 -0
package/template/src/styles/site.css +9 -0

package/template/seed/home.seed.sql CHANGED Viewed

@@ -2,11 +2,58 @@
 -- Idempotent. Apply once after migrations:
 --   wrangler d1 execute DB --file seed/home.seed.sql --remote
 --   (drop --remote for the local dev D1)
-INSERT OR IGNORE INTO pages (slug, title, body, status, sort_order, created_at, updated_at)
+--
+-- `sections` is the page-builder array — the same shape the on-canvas editor
+-- reads and the server validates against the section catalog on write. Each item
+-- is `{"_type": …, …fields, "_settings": {…}}`, and `_settings` holds TOKENS
+-- (colorway/align), never CSS, so a re-theme needs no content change.
+--
+-- Seeding it is deliberate: an empty array renders an empty page, and a blank
+-- canvas is a worse first run than having something real to click on and edit.
+--
+-- Full-text search (the editor's Pages search) is kept in sync on PUBLISH, so a
+-- row inserted with raw SQL like this is NOT in the index until you either
+-- publish an edit to it or backfill once with `POST /api/louise/pages/reindex`
+-- (signed in). The page renders fine either way — only in-editor search is
+-- affected.
+--
+-- To override just the <head> title/description (not the on-page H1), add
+-- `seo_title` / `seo_description` columns below. `seo_title` is run through the
+-- config's title template, which already appends the brand — so set the page
+-- part only ("Pricing"), not "Pricing | __BRAND_NAME__".
+INSERT OR IGNORE INTO pages (slug, title, body, sections, status, sort_order, created_at, updated_at)
 VALUES (
   'home',
   '__BRAND_NAME__',
   '<p>Welcome to __BRAND_NAME__. Sign in at <code>/login</code>, switch on edit mode, and change this text in place — then hit Publish.</p>',
+  json_array(
+    json_object(
+      '_type', 'hero',
+      'heading', '__BRAND_NAME__',
+      'subheading', 'Edit this in place — sign in, switch on edit mode, and type.',
+      'ctaLabel', 'Get in touch',
+      'ctaHref', '/contact',
+      '_settings', json_object('colorway', 'base', 'align', 'center')
+    ),
+    json_object(
+      '_type', 'featureGrid',
+      'heading', 'What we do',
+      'items', json_array(
+        json_object('title', 'First thing', 'body', 'Describe it here.'),
+        json_object('title', 'Second thing', 'body', 'And this one.'),
+        json_object('title', 'Third thing', 'body', 'And this one too.')
+      ),
+      '_settings', json_object('colorway', 'base')
+    ),
+    json_object(
+      '_type', 'cta',
+      'heading', 'Ready when you are',
+      'body', 'Swap this copy for your own.',
+      'ctaLabel', 'Contact us',
+      'ctaHref', '/contact',
+      '_settings', json_object('colorway', 'brand', 'align', 'center')
+    )
+  ),
   'published',
   0,
   unixepoch(),

package/template/src/auth.ts CHANGED Viewed

@@ -7,6 +7,7 @@
 // `pnpm seed:editors`; add more from the Users panel (editorsRoute), never by
 // editing env. Magic-link + passkey come from `getLouiseAuth`; no passwords.
+import { astroidMailTheme, magicLinkEmail } from "astroidjs";
 import { env } from "cloudflare:workers";
 import {
   type EditorSession,
@@ -16,9 +17,15 @@ import {
   type MagicLinkEmail,
   resolveEditorSession,
 } from "louise-toolkit/auth";
+import astroidConfig from "../astroid.config.js";
 const BRAND = "__BRAND_NAME__";
+// Transactional mail theme, derived from your config's brand colours: the
+// palette, the masthead colour band, and a contrast-corrected accent. Pass a
+// second argument to override any slot.
+const MAIL_THEME = astroidMailTheme(astroidConfig);
 /** The DB-managed editor allowlist: every admin `user` row. */
 async function resolveAdmins(): Promise<string[]> {
   const { results } = await env.DB.prepare(
@@ -27,12 +34,9 @@ async function resolveAdmins(): Promise<string[]> {
   return results.map((r) => r.email);
 }
-function renderMagicLinkEmail({ url }: { url: string; toEmail: string }): MagicLinkEmail {
-  return {
-    subject: `Sign in to ${BRAND}`,
-    text: `Sign in to ${BRAND}:\n\n${url}\n\nThis link expires in 15 minutes. If you didn't request it, ignore this email.`,
-    html: `<p>Sign in to <strong>${BRAND}</strong>:</p><p><a href="${url}">Open the ${BRAND} editor</a></p><p style="color:#666">This link expires in 15 minutes. If you didn't request it, ignore this email.</p>`,
-  };
+/** The branded sign-in email — Astroid's template over your mail theme. */
+function renderMagicLinkEmail({ url, toEmail }: { url: string; toEmail: string }): MagicLinkEmail {
+  return magicLinkEmail(MAIL_THEME, { url, toEmail });
 }
 /** The request-scoped Better Auth instance (magic-link + passkey, DB allowlist). */

package/template/src/components/LouiseEdit.astro CHANGED Viewed

@@ -9,8 +9,25 @@
 //
 // Pass `versionedPageId` from a page whose `<Editable>` fields should stage drafts
 // + publish (the layout forwards it). Omit it and the bar is Settings-only.
+import astroidConfig from "../../astroid.config.js";
 const { editMode, editor } = Astro.locals;
-const { versionedPageId } = Astro.props as { versionedPageId?: number };
+const { versionedPageId, sections } = Astro.props as {
+  versionedPageId?: number;
+  sections?: unknown;
+};
+// The section editor needs the page's CURRENT sections array to seed its store.
+// It rides as JSON on the boot marker for the same reason the other values do:
+// a `define:vars` script would be `is:inline` with per-request content, which
+// can't be hashed into `script-src` and so would be CSP-blocked.
+const sectionsJson = Array.isArray(sections) ? JSON.stringify(sections) : undefined;
+// Is the live multi-editor session on? Read from the config rather than baked in
+// at scaffold time, so adding `realtime` to `modules` later takes effect here
+// too — `astroid generate` regenerates the worker and scaffolds the Durable
+// Object, but this file is yours and is never rewritten.
+const realtimeOn = (astroidConfig.modules ?? []).includes("realtime");
 ---
 {
@@ -28,6 +45,8 @@ const { versionedPageId } = Astro.props as { versionedPageId?: number };
         hidden
         data-louise-user={editor?.name ?? "Editor"}
         data-louise-versioned-page={versionedPageId != null ? String(versionedPageId) : undefined}
+        data-louise-sections={sectionsJson}
+        data-louise-realtime={realtimeOn ? "1" : undefined}
       />
       <script>
         // Lazy-import the editor client only in edit mode. `mountLouise` renders
@@ -41,18 +60,42 @@ const { versionedPageId } = Astro.props as { versionedPageId?: number };
           Promise.all([
             import("louise-toolkit/client"),
             import("louise-toolkit/client/settings"),
+            import("astroidjs/components/sections"),
           ])
-            .then(([client, settings]) => {
+            .then(([client, settings, lib]) => {
               settings.mountSettings({
                 userName: el.dataset.louiseUser || "Editor",
                 users: true,
               });
               const versioned = el.dataset.louiseVersionedPage;
+              const pageId = versioned ? Number(versioned) : undefined;
               client.mountLouise({
                 onOpenSettings: () =>
                   window.dispatchEvent(new Event(settings.OPEN_SETTINGS_EVENT)),
-                versionedPageId: versioned ? Number(versioned) : undefined,
+                versionedPageId: pageId,
+                // Live multi-editor session (ADR 0002). Present only when the
+                // realtime module is on; the client degrades to the debounced
+                // fetch auto-save whenever it is off OR the socket can't open,
+                // so this is an accelerator, never a dependency.
+                realtime: el.dataset.louiseRealtime === "1",
               });
+              // The on-canvas section editor. It edits the SAME catalog the
+              // server validates writes against (astroidSectionCatalog), so a
+              // field can't be editable-but-invalid.
+              //
+              // Mounted only when this page actually rendered sections: the host
+              // is emitted by <Sections>, and the array rides on the boot marker.
+              // A page with neither (the login page, a bespoke route) skips it.
+              const host = document.querySelector<HTMLElement>("[data-louise-sections-host]");
+              const raw = el.dataset.louiseSections;
+              if (host && raw && pageId != null) {
+                client.mountSections(host, {
+                  catalog: lib.astroidSectionCatalog,
+                  pageId,
+                  initial: JSON.parse(raw),
+                });
+              }
             })
             .catch((err) => console.error("[louise] editor bootstrap failed", err));
         }

package/template/src/env.d.ts CHANGED Viewed

@@ -13,24 +13,73 @@ type CloudflareEnv = {
   MEDIA: R2Bucket;
   /** Public base for media URLs (the framework-agnostic media route reads this). */
   MEDIA_URL: string;
+  /** The site's public origin — declared in wrangler.jsonc `vars`. Read by the
+   *  health scan to know what to crawl, and by anything else that needs an
+   *  absolute URL from inside the Worker. */
+  SITE_URL: string;
+  /**
+   * Edge caching for published pages — `"true"` to enable (ADR 0004). A string,
+   * not a boolean, because wrangler `vars` are strings.
+   *
+   * Off by default, and the default is the safe state. Enable on a PREVIEW
+   * deploy and walk the activation runbook first: `caches.default` is not
+   * cleared by Cloudflare Dev Mode or Purge Everything.
+   */
+  ASTROID_EDGE_CACHE: string;
   /** Cloudflare Images — upload dimensions + server-side transforms. */
   IMAGES: ImagesBinding;
+  /**
+   * Analytics Engine dataset for real-visitor Core Web Vitals. The ingest route
+   * accepts-and-drops without it, so leaving it unbound is safe — the Health
+   * panel's CWV badge just stays "not measured yet".
+   */
+  VITALS?: AnalyticsEngineDataset;
+  /**
+   * Workers AI — the editor's rewrite + SEO-suggest assists and alt-text
+   * generation on upload. Every consumer degrades on its own: the routes answer
+   * 503 without it (the client then hides the button) and alt-text generation is
+   * best-effort, so a project that never wants AI simply never calls it.
+   */
+  AI: Ai;
   /** KV — the security rate limiter. */
   RL: KVNamespace;
   /** KV — the autosave draft write-buffer (optional; falls back to direct D1). */
   DRAFTS?: KVNamespace;
-  /** Cloudflare Email Sending — magic-link + notification email. */
-  EMAIL: SendEmail;
+  /**
+   * Cloudflare Email Sending — magic-link + notification email. Typed as the
+   * toolkit's `EmailSender`, i.e. the modern object-form `send({to, from, …})`
+   * API. NOT workers-types' `SendEmail`, which is the legacy `cloudflare:email`
+   * binding: that one routes through Email Routing and can only deliver to
+   * *verified* destination addresses.
+   */
+  EMAIL: import("louise-toolkit/email").EmailSender;
   /** Static assets (bound by the @astrojs/cloudflare adapter). */
   ASSETS: Fetcher;
-  /** Signs Better Auth sessions (`wrangler secret put SESSION_SECRET`). */
+  /**
+   * Signs Better Auth sessions (`wrangler secret put SESSION_SECRET`). A
+   * Secrets Store binding works here too — Louise reads either shape.
+   */
   SESSION_SECRET: string;
+  /**
+   * Turnstile secret. Scaffolded with the DUMMY_REPLACE_ME sentinel, which
+   * reads as "not configured" — captcha stays off until this AND a real
+   * (non-test) site key are both set, so half-provisioning can't lock you out.
+   */
+  TURNSTILE_SECRET?: string;
+  /** Public Turnstile site key; the always-passing test key keeps captcha off. */
+  TURNSTILE_SITE_KEY?: string;
+  /** Cloudflare account id — ONLY for reading Core Web Vitals back out of the
+   *  Analytics Engine SQL API (it is account-scoped and has no binding).
+   *  Unset → the Health panel's CWV badge stays "not measured yet". */
+  CF_ACCOUNT_ID?: string;
+  /** API token with Account Analytics:Read, for the same query. */
+  CF_API_TOKEN?: string;
   /** First editor's email — seeded as an admin, then part of the DB allowlist. */
   OWNER_EMAIL: string;
   /** Optional second bootstrap editor (e.g. your engineer). */
   ENGINEER_EMAIL?: string;
   /** `from` address for outbound email. */
-  MAIL_FROM: string;
+  MAIL_FROM: string;__ASTROID_ENV_BINDINGS__
 };
 // `env` from `cloudflare:workers` is typed as the augmentable `Cloudflare.Env`.
@@ -44,6 +93,6 @@ declare namespace App {
     /** Resolved editor session (authorizes writes). Null when not signed in. */
     editor: import("louise-toolkit/auth").EditorSession | null;
     /** Whether the page should render edit affordances. */
-    editMode: boolean;
+    editMode: boolean;__ASTROID_PORTAL_LOCALS__
   }
 }

package/template/src/layouts/Site.astro CHANGED Viewed

@@ -1,18 +1,80 @@
 ---
 // The base HTML shell. `Astro.locals.editMode` is set by the generated
 // middleware.ts (from your auth seam); LouiseEdit boots the editor when it's on.
+//
+// SEO is settings-driven: the `site_settings` row supplies the site-wide title,
+// description, and OG image, and a page overrides any of them via props.
+// <StructuredData> emits the schema.org graph (business + WebSite), with the
+// business `@type` chosen from your archetype.
+import Seo from "astroidjs/components/Seo.astro";
+import StructuredData from "astroidjs/components/StructuredData.astro";
+import { env } from "cloudflare:workers";
+import astroidConfig from "../../astroid.config.js";
 import LouiseEdit from "../components/LouiseEdit.astro";
 import "../styles/site.css";
 interface Props {
   title?: string;
   description?: string;
+  /** Absolute or root-relative share image; falls back to the site default. */
+  ogImage?: string;
+  /** Keep this page out of search indexes (cart, checkout, account). */
+  noindex?: boolean;
   /** A `pages` row id whose `<Editable>` fields stage drafts + publish. */
   versionedPageId?: number;
+  /** The page's stored `sections` array, forwarded to the on-canvas section
+   *  editor so it can seed its store with what's actually rendered. */
+  sections?: unknown;
 }
-const { title = "__BRAND_NAME__", description, versionedPageId } = Astro.props;
+const { title, description, ogImage, noindex, versionedPageId, sections } = Astro.props;
 const { editMode } = Astro.locals;
+// The editable settings row drives the head. Missing (pre-provision, pre-seed)
+// falls back to the brand name from your config, so a fresh clone still renders
+// a sane <title> rather than an empty one.
+type Settings = {
+  site_name: string | null;
+  tagline: string | null;
+  meta_description: string | null;
+  default_og_image_url: string | null;
+  logo_url: string | null;
+  contact_email: string | null;
+  contact_phone: string | null;
+  contact_address: string | null;
+  social_links: string | null;
+  disable_indexing: number | null;
+};
+let row: Settings | null = null;
+try {
+  row = await env.DB.prepare(
+    `SELECT site_name, tagline, meta_description, default_og_image_url, logo_url,
+            contact_email, contact_phone, contact_address, social_links, disable_indexing
+     FROM site_settings WHERE id = 1`,
+  ).first<Settings>();
+} catch {
+  // No DB binding yet — fall through to the config defaults below.
+}
+const settings = {
+  siteName: row?.site_name ?? astroidConfig.theme.name,
+  tagline: row?.tagline,
+  metaDescription: row?.meta_description,
+  defaultOgImageUrl: row?.default_og_image_url,
+  logoUrl: row?.logo_url,
+  contactEmail: row?.contact_email,
+  contactPhone: row?.contact_phone,
+  contactAddress: row?.contact_address,
+  // Stored as a JSON string; a malformed value must not take down the page.
+  socialLinks: (() => {
+    try {
+      return row?.social_links ? JSON.parse(row.social_links) : undefined;
+    } catch {
+      return undefined;
+    }
+  })(),
+  disableIndexing: Boolean(row?.disable_indexing),
+};
 ---
 <!doctype html>
@@ -20,11 +82,29 @@ const { editMode } = Astro.locals;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title}</title>
-    {description && <meta name="description" content={description} />}
+    <Seo
+      settings={settings}
+      title={title}
+      description={description}
+      ogImage={ogImage}
+      noindex={noindex}
+      titleTemplate={astroidConfig.seo?.titleTemplate}
+      twitterHandle={astroidConfig.seo?.twitterHandle}
+      locale={astroidConfig.seo?.locale}
+    />
+    <StructuredData config={astroidConfig} settings={settings} />
   </head>
   <body class="min-h-screen bg-base-100 text-base-content" data-edit-mode={editMode ? "" : undefined}>
     <slot />
-    <LouiseEdit versionedPageId={versionedPageId} />
+    <LouiseEdit versionedPageId={versionedPageId} sections={sections} />
+    {
+      /* Real-visitor Core Web Vitals. A static file from public/, so it is
+         same-origin and already covered by `script-src 'self'` — an inline
+         script with generated content couldn't be hashed into the CSP.
+         `defer` keeps it off the critical path; it reports once per page on
+         visibilitychange via sendBeacon. Skipped in edit mode: an editor's
+         session is not representative field data. */
+      !editMode && <script src="/vitals.js" defer />
+    }
   </body>
 </html>

package/template/src/pages/contact.astro ADDED Viewed

@@ -0,0 +1,122 @@
+---
+// The public contact form.
+//
+// The `contact` section — and the scaffolded hero/cta defaults — link here, so
+// without this page a fresh site ships a dead link. It posts to the generated
+// worker's `formRoute`, mounted at /api/louise/forms/inquiries: same-origin POST
+// only, a honeypot field plus a minimum time-on-page, a KV rate limit, then
+// validation against the inquiries form before the row is written. Submissions
+// land in the Inquiries tab of the editor drawer.
+//
+// Yours to edit — the copy, the fields, the layout. (If you remove the `contact`
+// section from astroid.config.ts, the form route stops being mounted and this
+// page's POST will 404; delete the page too, or keep the section.)
+import Site from "../layouts/Site.astro";
+export const prerender = false;
+// Never cache a form page: `set(false)` emits `no-store`, so neither the worker's
+// edge-cache layer nor anything downstream holds on to it.
+Astro.cache.set(false);
+// Stamped at render and posted back, so the form route's `minSeconds` heuristic
+// can tell a person filling in a form from a bot that submitted the instant it
+// loaded.
+const renderedAt = Date.now();
+---
+<Site title="Contact" description="Get in touch.">
+  <main class="mx-auto max-w-xl px-6 py-16">
+    <h1 class="text-4xl font-bold">Get in touch</h1>
+    <p class="mt-3 opacity-80">Send us a message and we'll get back to you.</p>
+    <form id="contact-form" class="mt-8 grid gap-4" method="post" action="/api/louise/forms/inquiries">
+      <input type="hidden" name="louise_ts" value={renderedAt} />
+      {/* The honeypot the form route checks. Hidden from people, left in the DOM
+          for bots; a non-empty value gets a fake 201 and is never stored. */}
+      <div class="hidden" aria-hidden="true">
+        <label for="website">Website</label>
+        <input id="website" name="website" type="text" tabindex="-1" autocomplete="off" />
+      </div>
+      <div class="grid gap-4 sm:grid-cols-2">
+        <label class="form-control">
+          <span class="label-text">First name</span>
+          <input name="firstName" type="text" autocomplete="given-name" class="input input-bordered w-full" />
+        </label>
+        <label class="form-control">
+          <span class="label-text">Last name</span>
+          <input name="lastName" type="text" autocomplete="family-name" class="input input-bordered w-full" />
+        </label>
+      </div>
+      <label class="form-control">
+        <span class="label-text">Email <span aria-hidden="true">*</span></span>
+        <input name="email" type="email" required autocomplete="email" class="input input-bordered w-full" />
+      </label>
+      <label class="form-control">
+        <span class="label-text">Regarding</span>
+        <input name="regarding" type="text" class="input input-bordered w-full" />
+      </label>
+      <label class="form-control">
+        <span class="label-text">Message <span aria-hidden="true">*</span></span>
+        <textarea name="message" required rows="6" class="textarea textarea-bordered w-full"></textarea>
+      </label>
+      <button type="submit" class="btn btn-primary justify-self-start">Send</button>
+      {/* Announced, not merely coloured: a status change that's only visual is
+          invisible to a screen reader. */}
+      <p id="contact-status" class="text-sm" role="status" aria-live="polite"></p>
+    </form>
+  </main>
+</Site>
+<script>
+  // Progressive enhancement: without JS the form still submits (the route accepts
+  // form-encoded bodies) — the visitor just lands on the JSON response. A
+  // processed <script> (no is:inline) is bundled to a same-origin file, which is
+  // what keeps it inside the CSP's `script-src 'self'`.
+  const form = document.querySelector<HTMLFormElement>("#contact-form");
+  const status = document.querySelector<HTMLParagraphElement>("#contact-status");
+  form?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const button = form.querySelector<HTMLButtonElement>('button[type="submit"]');
+    if (button) button.disabled = true;
+    if (status) status.textContent = "Sending…";
+    try {
+      const body = Object.fromEntries(new FormData(form).entries());
+      const response = await fetch(form.action, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (response.ok) {
+        form.reset();
+        if (status) status.textContent = "Thanks — we've got it, and we'll be in touch.";
+        return;
+      }
+      // 422 carries per-field violations; 429 is the rate limit. Anything else is
+      // reported as itself rather than as a generic failure.
+      const payload = (await response.json().catch(() => null)) as
+        | { error?: string; violations?: { field?: string; message?: string }[] }
+        | null;
+      if (status) {
+        status.textContent =
+          payload?.violations?.map((v) => `${v.field ?? "form"}: ${v.message ?? "invalid"}`).join(", ") ||
+          payload?.error ||
+          `Something went wrong (${response.status}).`;
+      }
+    } catch {
+      if (status) status.textContent = "Could not reach the server. Please try again.";
+    } finally {
+      if (button) button.disabled = false;
+    }
+  });
+</script>

package/template/src/pages/index.astro CHANGED Viewed

@@ -5,6 +5,7 @@
 // Louise client turns into inline editors; saves stage a draft (versionedPageId),
 // and Publish promotes it. Seed the row once with `seed/home.seed.sql`.
 import Editable from "astroidjs/components/Editable.astro";
+import Sections from "astroidjs/components/Sections.astro";
 import { env } from "cloudflare:workers";
 import Hero from "../components/Hero.astro";
 import Site from "../layouts/Site.astro";
@@ -13,15 +14,63 @@ export const prerender = false;
 const { editMode } = Astro.locals;
-let page: { id: number; title: string; body: string | null } | null = null;
+// Edge caching (ADR 0004). Opting in emits `Cloudflare-CDN-Cache-Control`, which
+// the worker's `withEdgeCache` layer reads as "store this", then strips.
+//
+// Both conditions matter. Edit mode must NEVER opt in — a cached editor render
+// would carry draft content and the inline-edit hooks into the shared public
+// entry. And the var is off by default because `caches.default` survives
+// Cloudflare Dev Mode and Purge Everything; walk the activation runbook in
+// docs/adr/0004-edge-caching.md on a preview deploy before turning it on.
+//
+// `set(false)` is the safe state, not merely the "off" one: it emits `no-store`,
+// so nothing downstream caches this HTML either.
+if (editMode || env.ASTROID_EDGE_CACHE !== "true") {
+  Astro.cache.set(false);
+} else {
+  // Short on purpose: `caches.default` is per-colo with no global purge, so this
+  // max-age is the real worldwide freshness floor after a publish.
+  Astro.cache.set({ maxAge: 60 });
+}
+// `seo_*` are the page's SEO overrides, deliberately separate from `title` —
+// which is the on-page H1. The home page passes NO title to <Site>, so <title>
+// is the site-wide default ("Acme Coffee", not "Acme Coffee | Acme Coffee");
+// set `seo_title` on the row to override just the head.
+interface HomeRow {
+  id: number;
+  title: string;
+  body: string | null;
+  /** The page-builder array, stored as a JSON string in D1. */
+  sections: string | null;
+  seo_title: string | null;
+  seo_description: string | null;
+  og_image: string | null;
+  noindex: number | null;
+}
+let page: HomeRow | null = null;
 try {
-  page = await env.DB.prepare("SELECT id, title, body FROM pages WHERE slug = 'home'").first();
+  page = await env.DB.prepare(
+    "SELECT id, title, body, sections, seo_title, seo_description, og_image, noindex FROM pages WHERE slug = 'home'",
+  ).first<HomeRow>();
 } catch {
   // No DB binding yet (pre-provision) — fall through to the seed-me prompt.
 }
 let title = page?.title ?? "__BRAND_NAME__";
 let body = page?.body ?? "";
+// `sections` is a JSON string in D1. Bad JSON is a render-time non-event — the
+// page falls back to its prose body rather than 500ing on one malformed row.
+function parseSections(raw: string | null | undefined): unknown[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+let sections = parseSections(page?.sections);
 // In edit mode, prefer the latest unpublished draft so edits resume across reloads.
 if (editMode && page) {
@@ -32,9 +81,18 @@ if (editMode && page) {
       .bind(page.id)
       .first<{ version_data: string }>();
     if (draft?.version_data) {
-      const d = JSON.parse(draft.version_data) as { title?: string; body?: string };
+      const d = JSON.parse(draft.version_data) as {
+        title?: string;
+        body?: string;
+        sections?: unknown;
+      };
       if (typeof d.title === "string") title = d.title;
       if (typeof d.body === "string") body = d.body;
+      // Sections stage as drafts like any other field, so edit mode must render
+      // the draft's array — otherwise an editor's in-progress section edits
+      // vanish on reload while their title edits survive.
+      if (Array.isArray(d.sections)) sections = d.sections;
+      else if (typeof d.sections === "string") sections = parseSections(d.sections);
     }
   } catch {
     // Non-fatal — fall back to the live row.
@@ -42,16 +100,31 @@ if (editMode && page) {
 }
 ---
-<Site title={title} description={undefined} versionedPageId={page?.id}>
+<Site
+  title={page?.seo_title ?? undefined}
+  description={page?.seo_description ?? undefined}
+  ogImage={page?.og_image ?? undefined}
+  noindex={Boolean(page?.noindex)}
+  versionedPageId={page?.id}
+  sections={sections}
+>
   {
     page ? (
-      <main class="mx-auto max-w-3xl px-6 py-16">
+      <main>
+        {/* The page-builder sections, edited on-canvas. <Sections> resolves every
+            image's alt/caption from the media registry in ONE query for the whole
+            page, then hands each section its own path so `data-louise-sfield`
+            markers land at the right depth. */}
+        <Sections items={sections} db={env.DB} mediaBase={env.MEDIA_URL} />
+        <div class="mx-auto max-w-3xl px-6 py-16">
         <Editable as="h1" collection="pages" key={page.id} field="title" class="text-5xl font-bold">
           {title}
         </Editable>
         <Editable as="div" collection="pages" key={page.id} field="body" type="richtext" class="prose mt-6 max-w-none">
           <Fragment set:html={body} />
         </Editable>
+        </div>
       </main>
     ) : (
       <main>