create-smoodly-app 0.0.8 → 0.0.9

package/templates/next/scripts/seed.ts

@@ -0,0 +1,310 @@
+// The starter's content, through the stores (never raw inserts — the
+// refs index and publish integrity must be exercised, that's the point).
+// Content only; it ships in the template and create-smoodly-app runs
+// `npm run seed` after the first editor. (The example repo's demo
+// editor account is a separate, example-only script.)
+// Run: npm run seed  (needs .env.local and a Supabase stack).
+//
+// Locales: the English content goes into the configured default locale,
+// whatever its code, and the Finnish rows are written only when `fi` is
+// supported and not the default (spec 2026-09-07 starter §4). The
+// installer accepts any locale set; URL segments come from the
+// registrations (the articles collection's per-locale `path`), so a
+// `fi` default lands the index on `artikkelit`. Body copy is Latin in
+// both; what a reader perceives as language (nav, headings, tags,
+// roles, footer titles) is translated. Idempotent: exits once the home
+// page exists.
+import next from "@next/env";
+import type { PageTree } from "smoodly";
+const { loadEnvConfig } = next;
+
+loadEnvConfig(process.cwd());
+
+const { config } = await import("../smoodly/config");
+const { articles } = await import("../smoodly/collections");
+const { href, stores } = await import("../smoodly/server");
+const { pages, entries } = stores();
+
+const EN = config.locales.default;
+const FI = config.locales.supported.includes("fi") && EN !== "fi" ? "fi" : null;
+
+if (await pages.resolvePath(EN, "/")) {
+  console.log(`Already seeded — "home" exists in "${EN}".`);
+  process.exit(0);
+}
+
+// --- helpers -------------------------------------------------------
+
+type Fields = Record<string, unknown>;
+type Node = Record<string, unknown>;
+
+// Richtext is TipTap JSON, the stored format; RichText renders it.
+const text = (s: string) => [{ type: "text", text: s }];
+const p = (s: string): Node => ({ type: "paragraph", content: text(s) });
+const h2 = (s: string): Node => ({ type: "heading", attrs: { level: 2 }, content: text(s) });
+const quoteBlock = (s: string): Node => ({ type: "blockquote", content: [p(s)] });
+const bullets = (...items: string[]): Node => ({ type: "bulletList", content: items.map((s) => ({ type: "listItem", content: [p(s)] })) });
+const doc = (...content: Node[]) => ({ type: "doc", content });
+
+const image = (name: string, alt: string) => ({ url: `/images/${name}.jpg`, alt });
+
+/** The articles collection's URL segment in a locale, from its own `path`. */
+const articlesSegment = (locale: string) => {
+  const declared = articles.path;
+  return typeof declared === "string" ? declared : (declared?.[locale] ?? declared?.[EN] ?? "posts");
+};
+/** Site URLs for the starter's own pages in a locale. */
+const paths = (locale: string) => ({
+  home: href("/", locale),
+  articles: href(`/${articlesSegment(locale)}`, locale),
+  about: href(locale === FI ? "/yritys/tietoa-meista" : "/company/about-us", locale),
+});
+
+/** Create an entry (a collection's or a shared item's) in EN, add the FI
+ *  row when there is one, and publish both — every entry is published in
+ *  every locale it has BEFORE any page, because publish integrity is per
+ *  locale and would (rightly) block a page whose tree references an entry
+ *  that is a draft, or absent, in that locale. `fi` holds the localized
+ *  fields; shared ones are repeated from `en`. */
+async function seedEntry(collection: string, en: Fields, fi?: Fields) {
+  const row = await entries.create(collection, en, { locale: EN });
+  await entries.setStatus(collection, row.id, EN, "published");
+  if (FI && fi) {
+    await entries.addLocale(collection, row.id, FI, { from: EN });
+    await entries.update(collection, row.id, FI, { ...en, ...fi });
+    await entries.setStatus(collection, row.id, FI, "published");
+  }
+  return row;
+}
+
+type Tree = { zones: Record<string, Node[]> };
+
+/** Create a page (or a folder: `template: null`) in EN with its tree,
+ *  publish it, then the FI row with its own tree — a locale's tree is
+ *  its own (spec 2026-09-06); the Finnish page is copied from the
+ *  English draft, then overwritten with the Finnish tree. */
+async function seedPage(
+  input: { slug: string; title: string; template: string | null; parentId?: string; fi?: { slug?: string; title: string } },
+  trees?: { en: Tree; fi?: Tree },
+) {
+  const page = await pages.createPage({
+    locale: EN, slug: input.slug, title: input.title, template: input.template,
+    ...(input.parentId ? { parentId: input.parentId } : {}),
+  });
+  if (trees) {
+    await pages.saveDraft(page.id, EN, trees.en as unknown as PageTree);
+    await pages.publish(page.id, EN);
+  }
+  if (FI && input.fi) {
+    await pages.addLocale(page.id, FI, { from: EN, title: input.fi.title, ...(input.fi.slug ? { slug: input.fi.slug } : {}) });
+    if (trees?.fi) {
+      await pages.saveDraft(page.id, FI, trees.fi as unknown as PageTree);
+      await pages.publish(page.id, FI);
+    }
+  }
+  return page;
+}
+
+// --- people ---------------------------------------------------------
+
+const jane = await seedEntry("people", { name: "Jane Doe", role: "Founder" }, { role: "Perustaja" });
+const john = await seedEntry("people", { name: "John Smith", role: "Creative Director" }, { role: "Luova johtaja" });
+const anna = await seedEntry("people", { name: "Anna Lorem", role: "Head of Design" }, { role: "Muotoilujohtaja" });
+const mark = await seedEntry("people", { name: "Mark Ipsum", role: "Developer" }, { role: "Kehittäjä" });
+
+// --- the article ----------------------------------------------------
+
+const body = doc(
+  p("Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
+  p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+  h2("Sed ut perspiciatis unde omnis"),
+  p("Iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."),
+  quoteBlock("Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."),
+  p("Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."),
+  h2("Quis autem vel eum iure"),
+  p("Reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur."),
+  bullets("At vero eos et accusamus et iusto odio", "Dignissimos ducimus qui blanditiis praesentium", "Voluptatum deleniti atque corrupti quos dolores"),
+  p("Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus."),
+);
+
+// Versioned (`versions: true` on the collection): every save below is a
+// snapshot. Title and body are Latin in both locales; tags and slug are
+// per locale, so the Finnish row reads Finnish where a reader would notice.
+const article = await seedEntry("articles", {
+  title: "Lorem ipsum dolor sit amet consectetur adipiscing",
+  slug: "lorem-ipsum-dolor-sit-amet",
+  excerpt: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  body,
+  tags: ["Insights", "Design"],
+  image: image("article_photo", "Notebook on a desk"),
+  date: "2026-09-02",
+  author: jane.id,
+}, {
+  slug: "lorem-ipsum-dolor-sit-amet-fi",
+  tags: ["Näkemyksiä", "Muotoilu"],
+});
+
+// --- shared items ---------------------------------------------------
+
+const nav = (locale: string, labels: [string, string, string]) => {
+  const links = paths(locale);
+  return [
+    { label: labels[0], href: links.home },
+    { label: labels[1], href: links.articles },
+    { label: labels[2], href: links.about },
+  ];
+};
+await seedEntry("header",
+  { brand: "Lorem Co.", nav: nav(EN, ["Home", "Articles", "About"]) },
+  FI ? { nav: nav(FI, ["Etusivu", "Artikkelit", "Tietoa meistä"]) } : undefined,
+);
+
+await seedEntry("footer", {
+  tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  company: { title: "Company", links: [{ label: "About", href: paths(EN).about }, { label: "Articles", href: paths(EN).articles }] },
+  legal: { title: "Legal", links: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
+  social: { title: "Social", links: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+  copyright: "© 2026 Lorem Co. Built with Smoodly.",
+}, FI ? {
+  tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  company: { title: "Yritys", links: [{ label: "Tietoa meistä", href: paths(FI).about }, { label: "Artikkelit", href: paths(FI).articles }] },
+  legal: { title: "Lakiasiat", links: [{ label: "Tietosuoja", href: "#" }, { label: "Ehdot", href: "#" }] },
+  social: { title: "Some", links: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+} : undefined);
+
+await seedEntry("contact",
+  { email: "hello@lorem.co", phone: "+358 40 123 4567", address: "Lorem Street 1, 00100 Helsinki" },
+  { address: "Loremkatu 1, 00100 Helsinki" },
+);
+
+const quoteRow = await seedEntry("quote",
+  { text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.", attribution: "Jane Doe, Founder" },
+  { attribution: "Jane Doe, perustaja" },
+);
+// A placement: the quote as a linked node, the same row wherever it sits.
+const quote: Node = { id: "node-quote", type: "shared", fields: { item: "quote", ref: quoteRow.id } };
+
+// --- pages ----------------------------------------------------------
+
+const imageText = (locale: string, linkLabel: string): Node => ({
+  id: "node-intro",
+  type: "imageText",
+  fields: {
+    image: image("home_section_2", "Team working"),
+    heading: "Duis aute irure dolor in reprehenderit",
+    text: doc(
+      p("In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+      p("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium."),
+    ),
+    link: { label: linkLabel, href: paths(locale).about },
+  },
+  styles: { imageSide: "left" },
+});
+
+const points: Node = {
+  id: "node-points",
+  type: "points",
+  fields: {
+    heading: "Quis autem vel eum",
+    points: [
+      { icon: "circle", heading: "Iure reprehenderit", text: "Qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat." },
+      { icon: "square", heading: "Quo voluptas nulla", text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum." },
+      { icon: "diamond", heading: "Pariatur deleniti", text: "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga." },
+    ],
+  },
+  styles: { spacing: "lg" },
+};
+
+const favourites = (heading: string): Node => ({
+  id: "node-favourites",
+  type: "favouriteArticles",
+  fields: { heading, items: [article.id] },
+});
+
+const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]; link: string; favourites: string }): Tree => ({
+  zones: {
+    // The locked hero's one node. Pages created in the admin get theirs
+    // from the editor (fillLockedZones on load); a seeded tree brings its own.
+    hero: [{
+      id: "node-hero",
+      type: "hero",
+      fields: {
+        kicker: t.kicker,
+        heading: "Consectetur adipiscing elit sed do eiusmod",
+        text: "Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
+        buttons: [
+          { label: t.buttons[0], href: paths(locale).about },
+          { label: t.buttons[1], href: paths(locale).articles },
+        ],
+        image: image("hero_image", "Office interior"),
+      },
+    }],
+    body: [imageText(locale, t.link), quote, points, favourites(t.favourites)],
+  },
+});
+
+await seedPage(
+  { slug: "home", title: "Home", template: "home", fi: { title: "Etusivu" } },
+  {
+    en: homeTree(EN, { kicker: "Lorem ipsum dolor", buttons: ["About us", "Read articles"], link: "About Lorem Co. →", favourites: "From the journal" }),
+    fi: FI ? homeTree(FI, { kicker: "Lorem ipsum dolor", buttons: ["Tietoa meistä", "Lue artikkelit"], link: "Tietoa Lorem Co:sta →", favourites: "Ajankohtaista" }) : undefined,
+  },
+);
+
+// The Articles index: the fixed page at the collection's own segments,
+// so the mount in the Pages list opens this page. Only a hero; the grid
+// is the view's own fetch.
+const articlesHero = (heading: string, text: string): Tree => ({
+  zones: { hero: [{ id: "node-articles-hero", type: "pageHero", fields: { heading, text } }] },
+});
+await seedPage(
+  { slug: articlesSegment(EN), title: "Articles", template: "articlesIndex", fi: { slug: articlesSegment(FI ?? EN), title: "Artikkelit" } },
+  {
+    en: articlesHero("Articles", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."),
+    fi: articlesHero("Artikkelit", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."),
+  },
+);
+
+// A folder and a page under it: the tree the admin lists, and the
+// breadcrumb the Page shape renders from the `page` prop. Each exists in
+// both locales with its own slug and title.
+const company = await seedPage({ slug: "company", title: "Company", template: null, fi: { slug: "yritys", title: "Yritys" } });
+
+const aboutTree = (t: { kicker: string; people: string }): Tree => ({
+  zones: {
+    hero: [{
+      id: "node-about-hero",
+      type: "pageHero",
+      fields: {
+        kicker: t.kicker,
+        heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+        text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+        image: image("about_main", "Team meeting"),
+      },
+    }],
+    body: [
+      {
+        id: "node-about-text",
+        type: "imageText",
+        fields: {
+          heading: "Duis aute irure dolor in reprehenderit",
+          text: doc(
+            p("In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
+            p("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis."),
+            p("Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."),
+          ),
+        },
+      },
+      quote,
+      { id: "node-people", type: "peopleSection", fields: { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] } },
+    ],
+  },
+});
+await seedPage(
+  { slug: "about-us", title: "About us", template: "page", parentId: company.id, fi: { slug: "tietoa-meista", title: "Tietoa meistä" } },
+  { en: aboutTree({ kicker: "About us", people: "Our people" }), fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki" }) },
+);
+
+console.log(
+  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us${FI ? " (yritys/tietoa-meista)" : ""}, one article, four people, header, footer, contact and quote — all published.`,
+);

package/templates/next/smoodly/collections.ts

@@ -9,23 +9,32 @@ export const people = smoodly.collection({
   titleField: "name",
   fields: {
     name: f.text(),
-    role: f.text().optional().localized(),
+    role: f.text().localized(),
   },
 });
 
 // Articles keep a version history per locale (`versions: true`): every
 // save is a snapshot, publish moves a pointer, and the published site
-// keeps serving the published snapshot while a draft moves on.
+// keeps serving the published snapshot while a draft moves on. The path
+// is per locale — /posts/<slug> and /fi/artikkelit/<slug> — and the
+// Articles fixed page (components/pages/Articles.tsx) claims the same
+// segments, which makes it the collection's index page. Tags are a list
+// localized as a whole, so the Finnish row carries Finnish tags.
 export const articles = smoodly.collection({
   name: "articles",
   title: "Articles",
   titleField: "title",
   path: "posts",
+  order: { by: "date", direction: "desc" },
   versions: true,
   fields: {
     title: f.text().localized(),
     slug: f.slug({ from: "title" }),
-    excerpt: f.text().optional().localized(),
+    excerpt: f.text().localized(),
+    body: f.richtext().localized(),
+    tags: f.list(f.text()).localized(),
+    image: f.image(),
+    date: f.date(),
     author: f.ref(() => people),
   },
 });

package/templates/next/smoodly/config.ts

@@ -3,6 +3,7 @@ import { collections } from "./collections";
 import { sections } from "./sections";
 import { shared } from "./shared";
 import { HomePage } from "@/components/pages/Home";
+import { ArticlesPage } from "@/components/pages/Articles";
 import { StandardPage } from "@/components/pages/Page";
 import { ArticlePage } from "@/components/pages/Article";
 
@@ -16,14 +17,20 @@ export const config = defineConfig({
     sections,
     collections,
     shared,
-    pages: [HomePage, StandardPage, ArticlePage],
+    pages: [HomePage, ArticlesPage, StandardPage, ArticlePage],
   },
   locales: { default: "en", supported: ["en"] },
   // Smoodly's own default, spelled out: the record the site root serves.
   homePageSlug: "home",
   // Nesting on: an editor can put pages three deep.
   pages: { tree: { depth: 3 } },
+  // Every section gets these two selects beside its own styles; the
+  // section wrapper emits them as data-spacing / data-tone, and
+  // app/globals.css styles both (DESIGN.md §3 "<smoodly.Section>").
   styles: {
-    sections: { spacing: f.select(["sm", "md", "lg"]).default("md") },
+    sections: {
+      spacing: f.select(["sm", "md", "lg"]).default("md"),
+      tone: f.select(["paper", "ink"]).default("paper"),
+    },
   },
 });

package/templates/next/smoodly/sections.ts

@@ -1,10 +1,19 @@
 // The site's section registrations, in one list. config.ts puts it
 // in the registry and re-exports it, so the config, the stores (which walk
 // trees against these schemas) and the renderer all share one array.
+// Header and Footer are here because their shared items render through
+// them; no zone lists them, so the "+" picker never offers them. Quote
+// is both: its shared item renders through it, and the body zones list
+// it so the shared quote can be placed (the picker offers a shared item
+// only where its section is allowed).
 import { Hero } from "@/components/sections/Hero";
-import { ArticleList } from "@/components/sections/ArticleList";
-import { CtaBanner } from "@/components/sections/CtaBanner";
+import { PageHero } from "@/components/sections/PageHero";
+import { ImageText } from "@/components/sections/ImageText";
+import { Points } from "@/components/sections/Points";
+import { FavouriteArticles } from "@/components/sections/FavouriteArticles";
+import { People } from "@/components/sections/People";
+import { Quote } from "@/components/sections/Quote";
+import { Header } from "@/components/sections/Header";
 import { Footer } from "@/components/sections/Footer";
-import { Testimonials } from "@/components/sections/Testimonials";
 
-export const sections = [Hero, ArticleList, CtaBanner, Footer, Testimonials];
+export const sections = [Hero, PageHero, ImageText, Points, FavouriteArticles, People, Quote, Header, Footer];

package/templates/next/smoodly/server.ts

@@ -2,17 +2,28 @@
 // renderer, constructed lazily so `next build` doesn't need env vars at
 // import time. The env shape is the package's (SMOODLY_*); whether the
 // secret is a service-role key or a cloud write key is invisible here.
+//
+// Lazy on purpose, the site and renderer included: config.ts imports the
+// page shapes, and a page shape may import this file to fetch through
+// the site (components/pages/Articles.tsx). That is a cycle, and the
+// admin route enters it from config.ts — so nothing here may read the
+// config at module scope.
 import {
-  createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex,
+  createSmoodlyClient, createSmoodlySite, smoodlyEnv, SupabaseEntryStore, SupabasePageStore, SupabasePathIndex, type SmoodlySite,
 } from "smoodly";
 import { supabaseAdminAuth, type AdminAuth, type AuthConfig } from "smoodly/admin/next";
 import { createPageRenderer, type PageRegistration } from "smoodly/next";
 import type { SupabaseClient } from "@supabase/supabase-js";
 import { collections, config, sections, shared } from "./config";
 
-let cached: { db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; auth: AdminAuth } | null = null;
+type Renderer = ReturnType<typeof createPageRenderer>;
+type Bound = {
+  db: SupabaseClient; pages: SupabasePageStore; entries: SupabaseEntryStore; auth: AdminAuth; site: SmoodlySite; renderer: Renderer;
+};
 
-function bound() {
+let cached: Bound | null = null;
+
+function bound(): Bound {
   if (cached) return cached;
   const env = smoodlyEnv();
   const db = createSmoodlyClient(env);
@@ -26,7 +37,21 @@ function bound() {
     tree: config.pages?.tree,
   });
   const auth = supabaseAdminAuth({ authUrl: env.authUrl, authKey: env.authKey, db });
-  cached = { db, pages, entries, auth };
+  // Shadows the exported `stores` below on purpose: `createSmoodlySite`
+  // takes this local closure, not the export, so it never re-enters `bound()`.
+  const stores = () => ({ pages, entries });
+  // The site layer: (locale, path) → page or entry, and the content API
+  // (site.getPagesTree for menus, site.getEntries for lists).
+  // Shadows the exported `site` below on purpose: `createPageRenderer`
+  // takes this local value, not the export, so it never re-enters `bound()`.
+  const site = createSmoodlySite({ stores, collections, shared, sections, locales, homePageSlug: config.homePageSlug });
+  const renderer = createPageRenderer({
+    site,
+    sections,
+    pages: (config.registry.pages ?? []) as PageRegistration[],
+    href,
+  });
+  cached = { db, pages, entries, auth, site, renderer };
   return cached;
 }
 
@@ -53,21 +78,13 @@ export function publicAuth(): AuthConfig {
  * becomes a locale-prefixing lookup. */
 export const href = (path: string, _locale: string) => path;
 
-/** The site layer: (locale, path) → page or entry, and the content API
- * (site.getPagesTree for menus, site.getEntries for lists). */
-export const site = createSmoodlySite({
-  stores,
-  collections,
-  shared,
-  sections,
-  locales: config.locales,
-  homePageSlug: config.homePageSlug,
-});
+/** The content API for page views that fetch (the Articles index, an
+ * article's related list): `site().getEntries("articles", { locale })`. */
+export const site = (): SmoodlySite => bound().site;
 
 /** The two route files call these. */
-export const { renderSmoodlyPath, smoodlyMetadata, renderSmoodlyPage, smoodlyPageMetadata, getSmoodlyShared } = createPageRenderer({
-  site,
-  sections,
-  pages: (config.registry.pages ?? []) as PageRegistration[],
-  href,
-});
+export const renderSmoodlyPath: Renderer["renderSmoodlyPath"] = (...args) => bound().renderer.renderSmoodlyPath(...args);
+export const smoodlyMetadata: Renderer["smoodlyMetadata"] = (...args) => bound().renderer.smoodlyMetadata(...args);
+export const renderSmoodlyPage: Renderer["renderSmoodlyPage"] = (...args) => bound().renderer.renderSmoodlyPage(...args);
+export const smoodlyPageMetadata: Renderer["smoodlyPageMetadata"] = (...args) => bound().renderer.smoodlyPageMetadata(...args);
+export const getSmoodlyShared: Renderer["getSmoodlyShared"] = (...args) => bound().renderer.getSmoodlyShared(...args);

package/templates/next/smoodly/shared.ts

@@ -1,9 +1,13 @@
 // Shared content (spec 2026-09-07): code-declared singletons stored as
-// entries. `footer` is visual — the layout renders it; `contact` is an
-// object the layout reads; `testimonials` is visual and placed on pages.
+// entries. `header` and `footer` are visual — the layout renders them;
+// `contact` is an object the footer reads through the layout; `quote` is
+// visual and placed on pages from the picker's Shared group.
 import { f, smoodly } from "smoodly";
+import { Header } from "@/components/sections/Header";
 import { Footer } from "@/components/sections/Footer";
-import { Testimonials } from "@/components/sections/Testimonials";
+import { Quote } from "@/components/sections/Quote";
+
+export const header = smoodly.shared({ name: "header", title: "Header", section: Header });
 
 export const footer = smoodly.shared({ name: "footer", title: "Footer", section: Footer, versions: true });
 
@@ -17,6 +21,6 @@ export const contact = smoodly.shared({
   },
 });
 
-export const testimonials = smoodly.shared({ name: "testimonials", title: "Testimonials", section: Testimonials });
+export const quote = smoodly.shared({ name: "quote", title: "Quote", section: Quote });
 
-export const shared = [footer, contact, testimonials];
+export const shared = [header, footer, contact, quote];

package/templates/next/supabase/migrations/00000000000000_smoodly.sql

@@ -462,8 +462,15 @@ select
   l."updated_at",
   v."fields"->>'title' as "title",
   v."fields"->>'excerpt' as "excerpt",
+  v."fields"->'body' as "body",
+  v."fields"->'tags' as "tags",
+  v."fields"->'image' as "image",
+  (v."fields"->>'date')::timestamptz as "date",
   v."fields"->>'author' as "author"
 from "entries" e
 join "entry_locales" l on l."entry_id" = e."id"
 join "entry_versions" v on v."id" = l."published_version_id"
 where e."collection" = 'articles' and l."status" = 'published';
+
+create index if not exists "entries_articles_date_idx"
+  on "entries" (("fields"->'date')) where "collection" = 'articles';

package/templates/next-intl/README.md

@@ -9,10 +9,13 @@ mounted at `/admin` from the `smoodly` package.
 
 - `app/[locale]/page.tsx` — the home page: one line calling renderSmoodlyPath([], { locale }).
 - `app/[locale]/[...path]/page.tsx` — every other page and every collection entry, at any depth, with translated segments per locale.
-- `app/[locale]/layout.tsx` — the site's root layout (`<html lang>`, next-intl's provider); the admin has its own under `app/(smoodly)/admin/`.
+- `app/[locale]/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the header and footer from shared content, the FI / EN links; the admin has its own under `app/(smoodly)/admin/`.
 - `i18n/routing.ts` — the locales and the default; `smoodly/config.ts` reads them from here. `i18n/request.ts` and `i18n/navigation.ts` are next-intl's stock files; `proxy.ts` is its locale routing (`/admin` excluded).
-- `components/pages/` — the page shapes and entry pages: schema + view, one file each.
-- `components/sections/` — the building blocks editors compose with. Add one, list it in `smoodly/sections.ts`.
+- `components/pages/` — the page shapes and the entry page: `Home` (locked hero, freeform body), `Articles` (a fixed page at the collection's path — its index — with a code-fetched grid), `Page` (open; About lives here), `Article` (the entry page).
+- `components/sections/` — the building blocks editors compose with, and the header, footer and quote behind the shared items. Add one, list it in `smoodly/sections.ts`.
+- `components/strings.ts`, `messages/` — the site's own UI strings and the request locale, one seam.
+- `public/images/` — the starter's photos; image fields hold URLs like `/images/hero_image.jpg`.
+- `scripts/seed.ts` — the starter content, written through the stores. `npm run seed` is idempotent.
 - `smoodly/collections.ts` — structured content (people, articles). Add a collection, then add its view to a new migration with `collectionSQL` from `smoodly`.
 - `smoodly/` — the wiring: `config.ts` (the registry and settings), `collections.ts`, `sections.ts`, `server.ts` (stores, site layer, renderer), `ops.ts` (the admin's one server action), `admin.tsx` (the admin mount).
 - `.env.local` — `SMOODLY_URL`, `SMOODLY_SECRET_KEY`, `SMOODLY_PUBLISHABLE_KEY`.
@@ -23,6 +26,19 @@ admin's page settings; a collection's base segment per locale is its
 next-intl's messages — add `messages` in `i18n/request.ts`:
 https://next-intl.dev/docs/usage/configuration
 
+## What is in the starter
+
+The Lorem Co. site the installer seeded is a tour of the features:
+
+- **Home** — a locked hero (fields only; nobody adds, moves or removes it), then a freeform body: image and text (richtext), the shared **quote** placed from the picker's Shared group, points (a list with a minimum and a maximum, an object per item), favourite articles (an editor-picked list of refs).
+- **Articles** — a fixed page at the collection's own URL segment, so it is the collection's index: the hero is the editor's, the grid is code fetching published articles.
+- **Company / About** — a folder and a page under it (the breadcrumb), the same body sections, plus people.
+- **An article** — a collection entry with a richtext body, tags (a localized list), a date and an author ref; versioned, so every save is a snapshot.
+- **Shared content** — the header and footer the layout renders, the contact details the footer reads, the quote pages place.
+
+Every page and entry exists in each locale with its own slug. Reseed an
+empty database any time with `npm run seed`.
+
 ## Editors
 
 Anyone who may open `/admin` is a Supabase Auth user with a row in the

package/templates/next-intl/app/[locale]/layout.tsx

@@ -1,31 +1,43 @@
 import type { ReactNode } from "react";
 import { notFound } from "next/navigation";
+import { Instrument_Sans, Newsreader } from "next/font/google";
 import { hasLocale, NextIntlClientProvider } from "next-intl";
 import { routing } from "@/i18n/routing";
-import { Footer } from "@/components/sections/Footer";
-import { contact, footer } from "@/smoodly/shared";
-import { getSmoodlyShared } from "@/smoodly/server";
+import { HeaderView } from "@/components/sections/Header";
+import { FooterView } from "@/components/sections/Footer";
+import { contact, footer, header } from "@/smoodly/shared";
+import { getSmoodlyShared, href } from "@/smoodly/server";
+import "../globals.css";
 
-export const metadata = { title: "Smoodly site" };
+// The starter's two faces, as CSS variables globals.css reads.
+const serif = Newsreader({ subsets: ["latin", "latin-ext"], style: ["normal", "italic"], variable: "--font-serif" });
+const sans = Instrument_Sans({ subsets: ["latin", "latin-ext"], weight: ["400", "500", "600"], variable: "--font-sans" });
+
+export const metadata = { title: "Lorem Co." };
 
 // The site's root layout. The admin has its own under app/(smoodly)/admin —
 // two root layouts, a full page load between them, which is fine: they
-// are separate apps in spirit. The footer and the contact block are
-// shared content: fetched here, cached per locale under their tag,
-// null until published in this locale.
+// are separate apps in spirit. Header, footer and the contact block are
+// shared content: fetched here, cached per locale under their tag, null
+// until published in this locale. The header also gets the locale links
+// — the visitor's only language switch, since locale detection is off.
 export default async function LocaleLayout({ children, params }: { children: ReactNode; params: Promise<{ locale: string }> }) {
   const { locale } = await params;
   if (!hasLocale(routing.locales, locale)) notFound();
-  const [footerProps, contactFields] = await Promise.all([
+  const [headerProps, footerProps, contactFields] = await Promise.all([
+    getSmoodlyShared(header, { locale }),
     getSmoodlyShared(footer, { locale }),
     getSmoodlyShared(contact, { locale }),
   ]);
+  const locales = routing.locales.map((code) => ({ code, url: href("/", code), current: code === locale }));
   return (
-    <html lang={locale}>
+    <html lang={locale} className={`${serif.variable} ${sans.variable}`}>
       <body>
-        <NextIntlClientProvider>{children}</NextIntlClientProvider>
-        {contactFields && <address>{contactFields.email} · {contactFields.address}</address>}
-        {footerProps && <Footer {...footerProps} />}
+        <NextIntlClientProvider>
+          {headerProps && <HeaderView {...headerProps} locales={locales} />}
+          <main>{children}</main>
+          {footerProps && <FooterView {...footerProps} contact={contactFields} />}
+        </NextIntlClientProvider>
       </body>
     </html>
   );