create-smoodly-app 0.0.8 → 0.0.9

package/dist/index.js

@@ -203,6 +203,12 @@ async function isEmptyOrMissing(dir) {
 }
 var ROUTING_LOCALES = '  locales: ["en", "fi"],';
 var ROUTING_DEFAULT = '  defaultLocale: "en",';
+var ARTICLES_PATH_LINE = '  path: { en: "posts", fi: "artikkelit" },';
+var ARTICLES_SLUG_LINE = '  slug: { en: "posts", fi: "artikkelit" },';
+function articlesSegments(locales) {
+  const entries = locales.map((l) => `${/^[a-z]+$/.test(l) ? l : JSON.stringify(l)}: ${l === "fi" ? '"artikkelit"' : '"posts"'}`);
+  return `{ ${entries.join(", ")} }`;
+}
 async function scaffold(opts) {
   await cp(opts.templateDir, opts.dir, { recursive: true });
   await rename(join(opts.dir, "_gitignore"), join(opts.dir, ".gitignore"));
@@ -221,6 +227,14 @@ async function scaffold(opts) {
       routingPath,
       routing.replace(ROUTING_LOCALES, `  locales: [${opts.locales.map((l) => JSON.stringify(l)).join(", ")}],`).replace(ROUTING_DEFAULT, `  defaultLocale: ${JSON.stringify(opts.locales[0])},`)
     );
+    const map = articlesSegments(opts.locales);
+    for (const [rel, line] of [["smoodly/collections.ts", ARTICLES_PATH_LINE], ["components/pages/Articles.tsx", ARTICLES_SLUG_LINE]]) {
+      const path = join(opts.dir, rel);
+      const source = await readFile(path, "utf8");
+      if (!source.includes(line)) throw new Error(`${rel} in the template has drifted; expected the line
+${line}`);
+      await writeFile(path, source.replace(line, line.replace('{ en: "posts", fi: "artikkelit" }', map)));
+    }
   }
 }
 
@@ -331,7 +345,7 @@ function plan(a) {
     steps.push("supabaseInit");
     if (a.hosted?.linkAndPush) steps.push("linkAndPush");
   }
-  steps.push("writeEnv", "ensureEditor", "finish");
+  steps.push("writeEnv", "ensureEditor", "seed", "finish");
   return steps;
 }
 
@@ -438,6 +452,10 @@ async function run(answers2, deps) {
         case "ensureEditor":
           ctx.editor = await ensureEditor(deps.editorClient(ctx.keys), deps.askEditor);
           break;
+        case "seed":
+          deps.log("Seeding the starter content\u2026");
+          await sh("npm", ["run", "seed"]);
+          break;
         case "finish":
           break;
       }
@@ -482,6 +500,8 @@ ${renderEnv(keys).split("\n").filter((l) => !l.startsWith("#")).join("\n").trimE
         "",
         editorLines
       ].join("\n");
+    case "seed":
+      return `cd ${answers2.name} && npm run seed`;
     default:
       return "";
   }
@@ -549,7 +569,7 @@ p2.note(
     `cd ${answers.name}`,
     "npm run dev",
     "",
-    "Site:  http://localhost:3000",
+    "Site:  http://localhost:3000  (the Lorem Co. starter \u2014 edit it at /admin)",
     "Admin: http://localhost:3000/admin",
     `Editor: ${outcome.editor.email ?? outcome.editor.id}`,
     ...answers.locales ? [`Locales: ${answers.locales.join(", ")} (i18n/routing.ts)`] : []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smoodly-app",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Create a Smoodly site: a fresh Next.js app with the admin mounted, a Supabase schema, an env file and a first editor.",
   "license": "MIT",
   "repository": {

package/templates/next/README.md

@@ -9,12 +9,28 @@ mounted at `/admin` from the `smoodly` package.
 
 - `app/page.tsx` — the home page: one line calling renderSmoodlyPath([]).
 - `app/[...path]/page.tsx` — every other page and every collection entry, at any depth.
-- `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`.
+- `app/layout.tsx` — the site's root layout: fonts, `app/globals.css`, the header and footer from shared content.
+- `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`.
 
+## 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.
+
+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/app/globals.css

@@ -0,0 +1,190 @@
+/* Lorem Co. — the starter's one stylesheet.
+   Tokens from the design, base rules, then one block per section and
+   page in page order. Sections carry data-spacing and data-tone from
+   the config's section styles; the site header and footer are shared
+   items rendered by the layout. Photos crop with object-fit: cover at
+   the design's aspect ratios. */
+
+:root {
+  --paper: #faf7f2;
+  --ink: #1f1b17;
+  --accent: #d9653a;
+  --muted: #6b6259;
+  --line: #e8e1d7;
+  --line-strong: #d6cdc1;
+  --body: #3a342e;
+  --radius: 6px;
+  --container: 1200px;
+  --serif: var(--font-serif), Georgia, serif;
+  --sans: var(--font-sans), Helvetica, Arial, sans-serif;
+}
+
+/* ---------- base ---------- */
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+main { flex: 1; }
+a { color: inherit; text-decoration: none; }
+a:hover { color: var(--accent); }
+img { display: block; max-width: 100%; }
+h1, h2, h3, p, blockquote, address { margin: 0; }
+address { font-style: normal; }
+
+.container { max-width: var(--container); width: 100%; margin: 0 auto; padding-inline: 32px; }
+
+.kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
+.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
+.link-accent { color: var(--accent); font-weight: 500; font-size: 15px; }
+.link-accent:hover { color: var(--ink); }
+
+.button { display: inline-block; background: var(--ink); color: var(--paper); padding: 14px 24px; border-radius: var(--radius); font-size: 15px; font-weight: 500; }
+.button:hover { background: var(--accent); color: var(--paper); }
+.button--outline { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
+.button--outline:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
+
+/* Richtext (RichText renders bare elements) */
+.prose { display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); }
+.prose p { text-wrap: pretty; }
+.prose h2, .prose h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
+.prose h2 { font-size: 32px; margin-top: 8px; }
+.prose h3 { font-size: 24px; }
+.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
+.prose blockquote { margin: 8px 0; padding-left: 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.4; color: var(--ink); }
+.prose a { color: var(--accent); text-decoration: underline; }
+.prose--lead { gap: 24px; font-size: 18px; line-height: 1.7; color: var(--body); }
+.prose--lead > p:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--ink); }
+
+/* ---------- section styles: the config's spacing and tone ---------- */
+
+/* Every section in the page body gets the medium spacing by element,
+   not by attribute: a node saved without an explicit style carries no
+   data-spacing (the config's default is not filled at render), so the
+   attribute selectors below only handle the two non-default values. */
+main > section { padding-block: 56px; }
+[data-spacing="sm"] { padding-block: 32px; }
+[data-spacing="lg"] { padding-block: 88px; }
+[data-tone="ink"] { background: var(--ink); color: var(--paper); }
+[data-tone="ink"] .prose, [data-tone="ink"] .hero__text, [data-tone="ink"] .page-hero__text,
+[data-tone="ink"] .point__text, [data-tone="ink"] .card__meta, [data-tone="ink"] .card__excerpt,
+[data-tone="ink"] .person__role, [data-tone="ink"] .quote__attribution { color: var(--line); }
+[data-tone="ink"] .button { background: var(--paper); color: var(--ink); }
+[data-tone="ink"] .button--outline { background: transparent; color: var(--paper); border-color: var(--muted); }
+
+/* ---------- header ---------- */
+
+.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
+.site-header__brand { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
+.site-header__nav { display: flex; gap: 32px; font-size: 15px; margin-left: auto; }
+.site-header__locales { display: flex; gap: 12px; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); }
+.site-header__locales a[aria-current] { color: var(--ink); font-weight: 600; }
+
+/* ---------- hero (home) ---------- */
+
+.hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
+.hero__copy { display: flex; flex-direction: column; gap: 24px; }
+.hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
+.hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 520px; text-wrap: pretty; }
+.hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
+.hero__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
+
+/* ---------- page hero ---------- */
+
+.page-hero__inner { display: flex; flex-direction: column; gap: 40px; }
+.page-hero__copy { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
+.page-hero__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
+.page-hero__text { font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+.page-hero__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+
+/* ---------- image and text ---------- */
+
+.image-text__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; }
+.image-text__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
+[data-image-side="right"] .image-text__image { order: 2; }
+.image-text__copy { display: flex; flex-direction: column; gap: 20px; }
+.image-text__grid > .h2 { align-self: start; }
+
+/* ---------- quote ---------- */
+
+.quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.quote__inner { max-width: 880px; margin: 0 auto; padding-inline: 32px; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
+.quote__text { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
+.quote__attribution { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
+
+/* ---------- points ---------- */
+
+.points .container { display: flex; flex-direction: column; gap: 48px; }
+.points__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
+.point { display: flex; flex-direction: column; gap: 16px; }
+.point__icon { color: var(--accent); }
+.point__heading { font-family: var(--serif); font-weight: 500; font-size: 24px; }
+.point__text { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+
+/* ---------- article cards (favourites, index, related) ---------- */
+
+.favourites .container, .related .container { display: flex; flex-direction: column; gap: 40px; }
+.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 32px; }
+.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.card { display: flex; flex-direction: column; gap: 14px; color: inherit; }
+.card:hover { color: inherit; }
+.card:hover .card__title { color: var(--accent); }
+.card__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
+.card__meta { display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
+.card__tag { color: var(--accent); font-weight: 600; }
+.card__title { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
+h3.card__title { font-size: 24px; }
+.card__excerpt { font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
+
+/* ---------- people ---------- */
+
+.people .container { display: flex; flex-direction: column; gap: 40px; }
+.people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; }
+.person { display: flex; flex-direction: column; gap: 12px; }
+.person__mark { width: 56px; height: 56px; border-radius: 50%; background: var(--line); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; }
+.person__name { font-family: var(--serif); font-size: 22px; font-weight: 500; }
+.person__role { font-size: 14px; color: var(--muted); }
+
+/* ---------- pages ---------- */
+
+.breadcrumb { padding-top: 24px; font-size: 14px; color: var(--muted); }
+.breadcrumb a:hover { color: var(--accent); }
+
+.articles-index { padding-bottom: 96px; }
+
+.article { padding-top: 48px; display: flex; flex-direction: column; gap: 40px; }
+.article__back { font-size: 14px; color: var(--muted); }
+.article__head { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
+.article__tags { display: flex; gap: 10px; flex-wrap: wrap; }
+.tag { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 10px; }
+.tag--accent { color: var(--accent); border-color: var(--accent); }
+.article__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
+.article__byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
+.article__byline strong { color: var(--ink); font-weight: 500; }
+.article__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line); display: inline-block; flex: none; }
+.article__image { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
+.article__body { max-width: 720px; margin: 16px auto 0; width: 100%; }
+
+.related { border-top: 1px solid var(--line); margin-top: 88px; padding: 64px 0 96px; }
+.related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
+
+/* ---------- footer ---------- */
+
+.site-footer { border-top: 1px solid var(--line); margin-top: auto; }
+.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 56px 32px 40px; font-size: 14px; }
+@media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
+.site-footer__about { display: flex; flex-direction: column; gap: 12px; }
+.site-footer__tagline { color: var(--muted); line-height: 1.6; max-width: 300px; }
+.site-footer__contact { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
+.site-footer__column { display: flex; flex-direction: column; gap: 10px; }
+.site-footer__column a { color: var(--muted); }
+.site-footer__column a:hover { color: var(--accent); }
+.site-footer__title { font-weight: 600; }
+.site-footer__copyright { padding: 0 32px 32px; font-size: 13px; color: var(--muted); }

package/templates/next/app/layout.tsx

@@ -1,26 +1,34 @@
 import type { ReactNode } from "react";
-import { Footer } from "@/components/sections/Footer";
-import { contact, footer } from "@/smoodly/shared";
+import { Instrument_Sans, Newsreader } from "next/font/google";
+import { HeaderView } from "@/components/sections/Header";
+import { FooterView } from "@/components/sections/Footer";
+import { contact, footer, header } from "@/smoodly/shared";
 import { getSmoodlyShared } 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
+// are separate apps in spirit. Header, footer and the contact block are
 // shared content: fetched here, cached under their tag, null until
 // published.
 export default async function RootLayout({ children }: { children: ReactNode }) {
-  const [footerProps, contactFields] = await Promise.all([
+  const [headerProps, footerProps, contactFields] = await Promise.all([
+    getSmoodlyShared(header),
     getSmoodlyShared(footer),
     getSmoodlyShared(contact),
   ]);
   return (
-    <html lang="en">
+    <html lang="en" className={`${serif.variable} ${sans.variable}`}>
       <body>
-        {children}
-        {contactFields && <address>{contactFields.email} · {contactFields.address}</address>}
-        {footerProps && <Footer {...footerProps} />}
+        {headerProps && <HeaderView {...headerProps} />}
+        <main>{children}</main>
+        {footerProps && <FooterView {...footerProps} contact={contactFields} />}
       </body>
     </html>
   );

package/templates/next/components/ArticleCard.tsx

@@ -0,0 +1,22 @@
+import { formatDate, type ArticleFields } from "./articles";
+
+// One article card: photo, first tag and date, title, excerpt. The grid
+// item on the Articles page and in Favourite articles; `compact` drops
+// the excerpt for the Related list. Pure — the caller resolves the URL
+// and the locale.
+export function ArticleCard({ article, url, locale, compact = false }: {
+  article: ArticleFields; url: string; locale: string; compact?: boolean;
+}) {
+  const Title = compact ? "h3" : "h2";
+  return (
+    <a className="card" href={url}>
+      {article.image?.url && <img className="card__image" src={article.image.url} alt={article.image.alt ?? ""} />}
+      <div className="card__meta">
+        {article.tags?.[0] && <span className="card__tag">{article.tags[0]}</span>}
+        {article.date && <span>{formatDate(article.date, locale)}</span>}
+      </div>
+      <Title className="card__title">{article.title}</Title>
+      {!compact && article.excerpt && <p className="card__excerpt">{article.excerpt}</p>}
+    </a>
+  );
+}

package/templates/next/components/articles.ts

@@ -0,0 +1,38 @@
+// Small helpers shared by the Articles index, the article page and the
+// Favourite articles section — the article's URL, dates in the request
+// locale, and the read time from the richtext body.
+import { articles } from "@/smoodly/collections";
+
+export type ArticleFields = {
+  title: string;
+  slug: string;
+  excerpt?: string;
+  body?: unknown;
+  tags?: string[];
+  image?: { url: string; alt?: string };
+  date: string;
+};
+
+/** The collection's segment in a locale: its per-locale path, or the
+ *  first declared one for a locale the map does not name. */
+function segment(locale: string): string {
+  const p = articles.path;
+  if (typeof p === "string") return p;
+  return p?.[locale] ?? Object.values(p ?? {})[0] ?? "posts";
+}
+
+export const articlesIndexPath = (locale: string) => `/${segment(locale)}`;
+export const articlePath = (slug: string, locale: string) => `/${segment(locale)}/${slug}`;
+
+export const formatDate = (iso: string, locale: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(iso));
+
+type Node = { text?: string; content?: Node[] };
+export function richtextText(doc: unknown): string {
+  const walk = (n: Node): string => n.text ?? (n.content ?? []).map(walk).join(" ");
+  return walk((doc ?? {}) as Node);
+}
+
+/** Words / 200, at least one minute. */
+export const readingMinutes = (doc: unknown) =>
+  Math.max(1, Math.round(richtextText(doc).split(/\s+/).filter(Boolean).length / 200));

package/templates/next/components/pages/Article.tsx

@@ -1,15 +1,63 @@
-import { smoodly } from "smoodly";
+import { RichText, smoodly, type EntryPageProps } from "smoodly";
 import { articles } from "@/smoodly/collections";
+import { site } from "@/smoodly/server";
+import { ArticleCard } from "../ArticleCard";
+import { articlePath, articlesIndexPath, formatDate, readingMinutes, type ArticleFields } from "../articles";
+import { ui } from "../strings";
 
 // The entry page for `articles`, served at the collection's `path`
-// (/posts/<slug>). Fields only; refs arrive resolved (author is a person).
-export const ArticlePage = smoodly.entryPage(articles, ({ entry, path }) => {
-  const a = entry.fields as { title: string; excerpt?: string; author?: { name: string; role?: string } | null };
+// (/posts/<slug>, /fi/artikkelit/<slug>). Fields only; refs arrive
+// resolved (author is a person). The body is richtext rendered by the
+// package's RichText; the read time is words / 200. "Related articles"
+// is the newest other published articles, fetched here, and absent when
+// there are none.
+async function ArticleView({ entry }: EntryPageProps) {
+  const { locale, t, url } = await ui();
+  const a = entry.fields as ArticleFields & { author?: { name: string; role?: string } | null };
+  const related = (await site().getEntries("articles", { locale })).filter((r) => r.entry.id !== entry.id).slice(0, 3);
+  const index = url(articlesIndexPath(locale));
   return (
-    <article data-path={path}>
-      <h1>{a.title}</h1>
-      {a.author && <p>By {a.author.name}{a.author.role ? `, ${a.author.role}` : ""}</p>}
-      {a.excerpt && <p>{a.excerpt}</p>}
-    </article>
+    <>
+      <article className="container article">
+        <a className="article__back" href={index}>← {t("allArticles")}</a>
+        <div className="article__head">
+          {a.tags && a.tags.length > 0 && (
+            <div className="article__tags">
+              {a.tags.map((tag, i) => <span key={`${i}-${tag}`} className={i === 0 ? "tag tag--accent" : "tag"}>{tag}</span>)}
+            </div>
+          )}
+          <h1 className="article__title">{a.title}</h1>
+          <p className="article__byline">
+            <span className="article__avatar" aria-hidden="true" />
+            <span>
+              {a.author?.name && <strong>{a.author.name}</strong>}
+              {a.author?.name && " · "}
+              {a.date && <>{formatDate(a.date, locale)} · </>}
+              {t("minRead", { minutes: readingMinutes(a.body) })}
+            </span>
+          </p>
+        </div>
+        {a.image?.url && <img className="article__image" src={a.image.url} alt={a.image.alt ?? ""} />}
+        <div className="article__body prose prose--lead"><RichText doc={a.body} /></div>
+      </article>
+      {related.length > 0 && (
+        <section className="related">
+          <div className="container">
+            <div className="related__head">
+              <h2 className="h2">{t("relatedArticles")}</h2>
+              <a className="link-accent" href={index}>{t("allArticles")} →</a>
+            </div>
+            <div className="card-grid card-grid--3">
+              {related.map(({ entry: r, path }) => {
+                const fields = r.fields as ArticleFields;
+                return <ArticleCard key={r.id} article={fields} url={url(path ?? articlePath(fields.slug, locale))} locale={locale} compact />;
+              })}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
   );
-});
+}
+
+export const ArticlePage = smoodly.entryPage(articles, ArticleView);

package/templates/next/components/pages/Articles.tsx

@@ -0,0 +1,44 @@
+import { smoodly, z, Zone, type Props } from "smoodly";
+import { PageHero } from "../sections/PageHero";
+import { ArticleCard } from "../ArticleCard";
+import { articlePath, type ArticleFields } from "../articles";
+import { ui } from "../strings";
+import { site } from "@/smoodly/server";
+
+// The Articles index: a fixed page whose slugs are the collection's own
+// segments (smoodly/collections.ts), which makes it the collection's
+// index page — the mount in the Pages list opens this page's editor. The
+// editor owns the hero; the grid below is developer JSX that fetches the
+// published articles through the site layer, newest first (the
+// collection's `order`). In the editor canvas the hero is the draft while
+// the grid shows published articles only: the content API is
+// published-only by design.
+export const articlesSchema = smoodly.schema.page({
+  name: "articlesIndex",
+  title: "Articles",
+  slug: "posts",
+  zones: {
+    hero: z.locked(PageHero),
+  },
+  meta: { seo: true },
+});
+
+async function ArticlesView({ zones }: Props<typeof articlesSchema>) {
+  const { locale, url } = await ui();
+  const items = await site().getEntries("articles", { locale });
+  return (
+    <>
+      <Zone of={zones.hero} />
+      <section className="container articles-index">
+        <div className="card-grid">
+          {items.map(({ entry, path }) => {
+            const a = entry.fields as ArticleFields;
+            return <ArticleCard key={entry.id} article={a} url={url(path ?? articlePath(a.slug, locale))} locale={locale} />;
+          })}
+        </div>
+      </section>
+    </>
+  );
+}
+
+export const ArticlesPage = smoodly.page(articlesSchema, ArticlesView);

package/templates/next/components/pages/Home.tsx

@@ -1,21 +1,26 @@
 import { smoodly, z, Zone, type Props } from "smoodly";
 import { Hero } from "../sections/Hero";
-import { ArticleList } from "../sections/ArticleList";
-import { CtaBanner } from "../sections/CtaBanner";
-import { Testimonials } from "../sections/Testimonials";
+import { ImageText } from "../sections/ImageText";
+import { Points } from "../sections/Points";
+import { FavouriteArticles } from "../sections/FavouriteArticles";
+import { People } from "../sections/People";
+import { Quote } from "../sections/Quote";
 
 // A page shape: zones declared, <Zone /> placed, one file (DESIGN.md §3).
 // `slug` makes it fixed — one record the editor can neither delete nor
 // duplicate — and the config's homePageSlug maps that record to "/".
+// The hero is locked: fields only, never added, moved or removed. The
+// body is freeform over five sections. Quote is among them because the
+// picker offers a shared item only where the zone allows its section: an
+// editor may drop a one-off quote, or place the shared one from the
+// picker's Shared group.
 export const homeSchema = smoodly.schema.page({
   name: "home",
   title: "Home",
   slug: "home",
   zones: {
-    hero: z.sections([Hero]).max(1),
-    body: z.freeform({ sections: [ArticleList, Testimonials] }),
-    // Locked: fields only. One CtaBanner, always there, never movable.
-    prefooter: z.locked(CtaBanner),
+    hero: z.locked(Hero),
+    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
   },
   meta: { seo: true },
 });
@@ -25,10 +30,6 @@ function HomeView({ zones }: Props<typeof homeSchema>) {
     <>
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-      <Zone of={zones.prefooter} />
-      <footer>
-        <p>Hard-coded footer — owned by the developer, invisible to the editor.</p>
-      </footer>
     </>
   );
 }

package/templates/next/components/pages/Page.tsx

@@ -1,19 +1,22 @@
 import Link from "next/link";
 import { smoodly, z, Zone, type Props } from "smoodly";
-import { Hero } from "../sections/Hero";
-import { ArticleList } from "../sections/ArticleList";
-import { CtaBanner } from "../sections/CtaBanner";
-import { Testimonials } from "../sections/Testimonials";
+import { PageHero } from "../sections/PageHero";
+import { ImageText } from "../sections/ImageText";
+import { Points } from "../sections/Points";
+import { FavouriteArticles } from "../sections/FavouriteArticles";
+import { People } from "../sections/People";
+import { Quote } from "../sections/Quote";
 
 // Open registration: editors create as many of these as they like, at
 // any depth the config allows. `page` is where this one sits in the tree.
+// Its locked hero is the page hero, not the home one: each shape locks
+// its own.
 export const pageSchema = smoodly.schema.page({
   name: "page",
   title: "Page",
   zones: {
-    hero: z.sections([Hero]).max(1),
-    body: z.freeform({ sections: [ArticleList, Testimonials] }),
-    prefooter: z.locked(CtaBanner),
+    hero: z.locked(PageHero),
+    body: z.freeform({ sections: [ImageText, Points, FavouriteArticles, People, Quote] }),
   },
   meta: { seo: true },
 });
@@ -24,7 +27,7 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
       {page.ancestors.length > 0 && (
         // `url` is the ancestor's site URL through the app's href seam
         // (/fi/yritys under next-intl); `path` would be the bare CMS path.
-        <nav aria-label="Breadcrumb">
+        <nav className="container breadcrumb" aria-label="Breadcrumb">
           {page.ancestors.map((a) => (
             <span key={a.path}>{a.hasPage ? <Link href={a.url}>{a.title}</Link> : a.title} / </span>
           ))}
@@ -33,7 +36,6 @@ function PageView({ zones, page }: Props<typeof pageSchema>) {
       )}
       <Zone of={zones.hero} />
       <Zone of={zones.body} />
-      <Zone of={zones.prefooter} />
     </>
   );
 }