create-smoodly-app 0.0.45 → 0.0.47

package/templates/astro-lorem/scripts/seed.ts

@@ -0,0 +1,405 @@
+// The starter's content, written through the content API (`createContent(config)`
+// from smoodly/astro): the admin's own operations, so validation and
+// the publish checks apply and a failure throws. This file is also the
+// example of writing content from code. 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 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 has content.
+import type { PageTree, TreeNode } from "smoodly";
+
+const { config } = await import("../src/smoodly/config");
+const { articles, news } = await import("../src/smoodly/collections");
+const { node } = await import("smoodly");
+const { createContent } = await import("smoodly/astro");
+const { content, href } = createContent(config);
+const { heroSchema } = await import("../src/components/sections/Hero.schema");
+const { pageHeroSchema } = await import("../src/components/sections/PageHero.schema");
+const { imageTextSchema } = await import("../src/components/sections/ImageText.schema");
+const { pointsSchema } = await import("../src/components/sections/Points.schema");
+const { favouriteArticlesSchema } = await import("../src/components/sections/FavouriteArticles.schema");
+const { peopleSchema } = await import("../src/components/sections/People.schema");
+const c = content;
+
+const EN = config.locales.default;
+const FI = config.locales.supported.includes("fi") && EN !== "fi" ? "fi" : null;
+
+// The home page is code-owned: `find` returns its record, creating it when
+// the database is new. It is seeded once somebody has given it sections.
+const home = (await c.pages.find(EN, "/"))!;
+if (Object.values((await c.pages.getTree(home.id, EN))?.zones ?? {}).some((nodes) => nodes.length > 0)) {
+  console.log(`Already seeded — the home page has content 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)] })) });
+// Block nodes (spec 2026-09-08): a library image, and the starter's two elements.
+const imageBlock = (image: { asset: string }, caption: string): Node => ({ type: "image", attrs: { image, caption } });
+const callout = (title: string, text: string, tone: "info" | "success" | "warning" = "info"): Node =>
+  ({ type: "element", attrs: { name: "callout", fields: { title, body: doc(p(text)) }, settings: { tone } } });
+const cta = (heading: string, text: string, label: string, href: string): Node =>
+  ({ type: "element", attrs: { name: "cta", fields: { heading, text, label, href }, settings: { variant: "primary" } } });
+const doc = (...content: Node[]) => ({ type: "doc", content });
+
+// The starter's photos become assets: each file is uploaded once (a row
+// in `assets`, the bytes in the `media` bucket), and a field value is
+// `{ asset: <id> }` — the alt lives on the asset (spec 2026-09-08).
+const image = async (name: string, alt: string): Promise<{ asset: string }> =>
+  ({ asset: (await c.media.upload(`public/images/${name}.jpg`, { alt, title: alt })).asset });
+const img = {
+  article: await image("article_photo", "Notebook on a desk"),
+  home2: await image("home_section_2", "Team working"),
+  hero: await image("hero_image", "Office interior"),
+  about: await image("about_main", "Team meeting"),
+};
+
+/** 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");
+};
+/** The news collection's nested address in a locale (`company/news`), from its own `path`. */
+const newsAddress = (locale: string) => {
+  const declared = news.path;
+  return typeof declared === "string" ? declared : (declared?.[locale] ?? declared?.[EN] ?? "company/news");
+};
+/** Site URLs for the starter's own pages in a locale. */
+const paths = (locale: string) => ({
+  home: href("/", locale),
+  articles: href(`/${articlesSegment(locale)}`, locale),
+  news: href(`/${newsAddress(locale)}`, locale),
+  about: href(locale === FI ? "/yritys/tietoa-meista" : "/company/about-us", locale),
+});
+
+/** Create an entry 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 c.entries.create(collection, { locale: EN, fields: en });
+  await c.entries.publish(collection, row.id, EN);
+  if (FI && fi) {
+    await c.entries.addLocale(collection, row.id, FI, { from: EN, fields: { ...en, ...fi } });
+    await c.entries.publish(collection, row.id, FI);
+  }
+  return row;
+}
+
+/** A global item exists in every locale from the start: set and publish each. */
+async function seedGlobal(name: string, en: Fields, fi?: Fields) {
+  const row = await c.globals.set(name, EN, en);
+  await c.globals.publish(name, EN);
+  if (FI) {
+    await c.globals.set(name, FI, { ...en, ...fi });
+    await c.globals.publish(name, FI);
+  }
+  return row;
+}
+
+type Tree = PageTree;
+type Trees = { en: Tree; fi?: Tree };
+
+/** 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?: Trees,
+) {
+  const page = await c.pages.create({ parentId: input.parentId ?? null, locale: EN, slug: input.slug, title: input.title, template: input.template });
+  if (trees) {
+    await c.pages.setTree(page.id, EN, trees.en);
+    await c.pages.publish(page.id, EN);
+  }
+  if (FI && input.fi) {
+    await c.pages.addLocale(page.id, FI, { from: EN, ...input.fi });
+    if (trees?.fi) {
+      await c.pages.setTree(page.id, FI, trees.fi);
+      await c.pages.publish(page.id, FI);
+    }
+  }
+  return page;
+}
+
+/** A code-owned page (the home page, a collection's index): its address,
+ *  title and locales come from the registration, so there is nothing to
+ *  create — `find` returns the record, and the trees are written to it. */
+async function seedCodePage(path: string, trees: Trees) {
+  const page = (await c.pages.find(EN, path))!;
+  await c.pages.setTree(page.id, EN, trees.en);
+  await c.pages.publish(page.id, EN);
+  if (FI && trees.fi) {
+    await c.pages.setTree(page.id, FI, trees.fi);
+    await c.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."),
+  imageBlock(img.home2, "Lorem ipsum dolor sit amet."),
+  quoteBlock("Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit."),
+  callout("Good to know", "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."),
+  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."),
+  cta("Ready to talk?", "Sed ut perspiciatis unde omnis iste natus error sit voluptatem.", "Get in touch", paths(EN).about),
+);
+
+// Every collection is versioned: 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: img.article,
+  date: "2026-09-02",
+  author: jane.id,
+}, {
+  slug: "lorem-ipsum-dolor-sit-amet-fi",
+  tags: ["Näkemyksiä", "Muotoilu"],
+});
+
+// Two news posts at the collection's nested address (/company/news/<slug>,
+// /fi/yritys/uutiset/<slug>): Latin copy, a slug per locale.
+await seedEntry("news", {
+  title: "Lorem ipsum dolor sit amet nova",
+  slug: "lorem-news",
+  date: "2026-09-20",
+  excerpt: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+  body: doc(p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),
+}, { slug: "lorem-uutinen" });
+await seedEntry("news", {
+  title: "Ipsum dolor sit amet consectetur",
+  slug: "ipsum-update",
+  date: "2026-09-27",
+  excerpt: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.",
+  body: doc(p("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")),
+}, { slug: "ipsum-paivitys" });
+
+// --- global items ---------------------------------------------------
+
+// No Home item: the brand in the header is the way home.
+const nav = (locale: string, labels: [string, string]) => {
+  const links = paths(locale);
+  return [
+    { label: labels[0], href: links.articles },
+    { label: labels[1], href: links.about },
+  ];
+};
+await seedGlobal("header",
+  { brand: "Lorem Co.", nav: nav(EN, ["Articles", "About"]) },
+  FI ? { nav: nav(FI, ["Artikkelit", "Tietoa meistä"]) } : undefined,
+);
+
+await seedGlobal("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 }, { label: "News", href: paths(EN).news }] },
+  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 }, { label: "Uutiset", href: paths(FI).news }] },
+  legal: { title: "Lakiasiat", links: [{ label: "Tietosuoja", href: "#" }, { label: "Ehdot", href: "#" }] },
+  social: { title: "Some", links: [{ label: "Instagram", href: "#" }, { label: "LinkedIn", href: "#" }] },
+} : undefined);
+
+await seedGlobal("contact",
+  { email: "hello@lorem.co", phone: "+358 40 123 4567", address: "Lorem Street 1, 00100 Helsinki" },
+  { address: "Loremkatu 1, 00100 Helsinki" },
+);
+
+// A visual global item's settings ride the row under the reserved
+// `$settings` key (spec 2026-09-13 §1): the quote is the site's one dark band.
+const quoteRow = await seedGlobal("quote",
+  { text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.", attribution: "Jane Doe, Founder", $settings: { background: "ink" } },
+  { attribution: "Jane Doe, perustaja" },
+);
+// A placement: the quote as a linked node, the same row wherever it sits.
+const quote: TreeNode = { id: "node-quote", type: "global", fields: { item: "quote", ref: quoteRow.id } };
+
+// --- pages ----------------------------------------------------------
+
+const imageText = (locale: string, linkLabel: string) => node(imageTextSchema, {
+    image: img.home2,
+    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 },
+  }, { id: "node-intro", settings: { imageSide: "left" } });
+
+const points: TreeNode = {
+  ...node(pointsSchema, {
+    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." },
+    ],
+  }, { id: "node-points" }),
+  // One Spacing & layout step stored (spec 2026-09-14 §2); the rest are Default and store nothing.
+  styles: { spacingBottom: "lg" },
+};
+
+const favourites = (heading: string) => node(favouriteArticlesSchema, { heading, items: [article.id] }, { id: "node-favourites" });
+
+// The custom section (spec 2026-09-14 §6): the editor's own rows of
+// richtext columns, widths in twelfths; Smoodly renders its layout CSS.
+// Not a registered section, so it is a plain node object.
+const customSection = (locale: string): TreeNode => ({
+  id: "node-custom",
+  type: "custom",
+  fields: { rows: [
+    { spans: [4, 8], gap: "lg", align: "top", reverse: false, columns: [
+      doc(h2("Sed ut perspiciatis"), p("Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.")),
+      doc(p("Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."), callout("Nemo enim", "Ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.", "info")),
+    ] },
+    { spans: [12], gap: "md", align: "top", reverse: false, columns: [doc(cta("Neque porro quisquam", "Qui dolorem ipsum quia dolor sit amet.", "Read the articles", paths(locale).articles))] },
+  ] },
+  styles: { spacingBottom: "lg" },
+});
+
+const homeTree = (locale: string, t: { kicker: string; buttons: [string, string]; link: string; favourites: string }): Tree => ({
+  // The built-in SEO set rides the tree (spec 2026-09-10 page fields §2).
+  meta: { description: "Lorem Co. — consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore." },
+  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: [node(heroSchema, {
+      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: img.hero,
+    }, { id: "node-hero" })],
+    body: [imageText(locale, t.link), quote, points, customSection(locale), favourites(t.favourites)],
+  },
+});
+
+await seedCodePage("/", {
+    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: [node(pageHeroSchema, { heading, text }, { id: "node-articles-hero" })] },
+});
+await seedCodePage(`/${articlesSegment(EN)}`, {
+  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" } });
+
+// The News index: the code-owned page on the news collection's nested
+// address (spec 2026-09-29 nested paths §3) — it shows under Company in
+// URL only; renaming Company never moves it.
+await seedCodePage(`/${newsAddress(EN)}`, {
+  en: { zones: { hero: [node(pageHeroSchema, { heading: "News", text: "Lorem ipsum dolor sit amet — what is new at Lorem Co." }, { id: "node-news-hero" })] } },
+  fi: { zones: { hero: [node(pageHeroSchema, { heading: "Uutiset", text: "Lorem ipsum dolor sit amet — mitä Lorem Co:lle kuuluu." }, { id: "node-news-hero" })] } },
+});
+
+const aboutTree = (t: { kicker: string; people: string; description: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.description },
+  zones: {
+    hero: [node(pageHeroSchema, {
+      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: img.about,
+    }, { id: "node-about-hero" })],
+    body: [
+      node(imageTextSchema, {
+          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."),
+          ),
+      }, { id: "node-about-text", settings: { imageSide: "left" } }),
+      quote,
+      node(peopleSchema, { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] }, { id: "node-people" }),
+    ],
+  },
+});
+const about = 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", description: "Lorem ipsum dolor sit amet — who we are and what we do." }),
+    fi: aboutTree({ kicker: "Tietoa meistä", people: "Meidän väki", description: "Lorem ipsum dolor sit amet — keitä olemme ja mitä teemme." }),
+  },
+);
+
+// A page under About us, shown in its sub-navigation through the Page
+// shape's `showInNavigation` field (spec 2026-09-10 page fields §7).
+const teamTree = (t: { heading: string; text: string; people: string }): Tree => ({
+  fields: { showInNavigation: true },
+  meta: { description: t.text },
+  zones: {
+    hero: [node(pageHeroSchema, { kicker: t.heading, heading: t.heading, text: t.text, image: img.about }, { id: "node-team-hero" })],
+    body: [node(peopleSchema, { heading: t.people, people: [jane.id, john.id, anna.id, mark.id] }, { id: "node-team-people" })],
+  },
+});
+await seedPage(
+  { slug: "team", title: "Team", template: "page", parentId: about.id, fi: { slug: "tiimi", title: "Tiimi" } },
+  {
+    en: teamTree({ heading: "Team", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "The whole team" }),
+    fi: teamTree({ heading: "Tiimi", text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.", people: "Koko tiimi" }),
+  },
+);
+
+console.log(
+  `Seeded Lorem Co. in "${EN}"${FI ? ` and "${FI}"` : ""}: home, the Articles index (${articlesSegment(EN)}${FI ? ` / ${articlesSegment(FI)}` : ""}), company/about-us and its Team page${FI ? " (yritys/tietoa-meista/tiimi)" : ""}, one article, News (${newsAddress(EN)}${FI ? ` / ${newsAddress(FI)}` : ""}) with two posts, four people, header, footer, contact and quote — all published.`,
+);

package/templates/astro-lorem/src/components/ArticleCard.astro

@@ -0,0 +1,19 @@
+---
+// src/components/ArticleCard.astro
+// 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. The caller resolves the URL.
+import { Image } from "smoodly/astro/components";
+import { formatDate } from "@/components/articles";
+
+const { article, url, locale, compact = false } = Astro.props;
+const Title = compact ? "h3" : "h2";
+---
+<a class="card" href={url}>
+  {article.image && <Image image={article.image} class="card__image" sizes="(min-width: 900px) 33vw, 100vw" />}
+  <div class="card__meta">
+    {article.tags?.[0] && <span class="card__tag">{article.tags[0]}</span>}
+    {article.date && <span>{formatDate(article.date, locale)}</span>}
+  </div>
+  <Title class="card__title">{article.title}</Title>
+  {!compact && article.excerpt && <p class="card__excerpt">{article.excerpt}</p>}
+</a>

package/templates/astro-lorem/src/components/articles.ts

@@ -0,0 +1,42 @@
+// 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 type { ResolvedImage } from "smoodly";
+import { articles } from "@/smoodly/collections";
+
+export type ArticleFields = {
+  title: string;
+  slug: string;
+  excerpt?: string;
+  body?: unknown;
+  tags?: string[];
+  image?: ResolvedImage;
+  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 formatDate = (iso: string, locale: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }).format(new Date(iso));
+
+/** A datetime field's UTC instant, shown in the site's zone (config.timeZone). */
+export const formatDateTime = (iso: string, locale: string, timeZone: string) =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).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/astro-lorem/src/components/elements/Callout.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+
+// An Element: a small registered block editors insert inside an article
+// body (the `richtext` context). Its body is richtext too — marks only —
+// rendered by the package's pure RichText (a schema file imports no view:
+// the view imports this file, and an import back would cycle).
+export const calloutSchema = smoodly.schema.element({
+  name: "callout",
+  title: "Callout",
+  icon: "!",
+  description: "A highlighted note inside the text.",
+  contexts: ["richtext"],
+  fields: {
+    title: f.text().max(80),
+    body: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
+  },
+  settings: {
+    tone: f.select([{ value: "info", label: "Info" }, { value: "success", label: "Success" }, { value: "warning", label: "Warning" }]).default("info"),
+  },
+  sample: {
+    title: "Good to know",
+    body: { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }] }] },
+  },
+});

package/templates/astro-lorem/src/components/elements/Cta.schema.ts

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// A call to action inside an article body: heading, a line of text and
+// one button. `variant` is a style — never translated.
+export const ctaSchema = smoodly.schema.element({
+  name: "cta",
+  title: "Call to action",
+  icon: "→",
+  description: "A heading, a line and a button.",
+  contexts: ["richtext"],
+  fields: {
+    heading: f.text().max(80),
+    text: f.text().max(200).optional(),
+    label: f.text().max(40),
+    href: f.link(),
+  },
+  settings: {
+    variant: f.select([{ value: "primary", label: "Primary" }, { value: "outline", label: "Outline" }]).default("primary"),
+  },
+  sample: { heading: "Ready to start?", text: "Sed ut perspiciatis unde omnis iste natus.", label: "Get in touch", href: "/company/about-us" },
+});

package/templates/astro-lorem/src/components/news.ts

@@ -0,0 +1,13 @@
+// The news index's URL, for the post page's back link, from the
+// collection's own nested path (smoodly/collections.ts).
+import { news } from "@/smoodly/collections";
+
+/** The collection's address in a locale: its per-locale path, or the
+ *  first declared one for a locale the map does not name. */
+function address(locale: string): string {
+  const p = news.path;
+  if (typeof p === "string") return p;
+  return p?.[locale] ?? Object.values(p ?? {})[0] ?? "company/news";
+}
+
+export const newsIndexPath = (locale: string) => `/${address(locale)}`;

package/templates/astro-lorem/src/components/pages/Articles.schema.ts

@@ -0,0 +1,20 @@
+import { smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+
+// 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 reads the
+// articles through `q`, newest first (the collection's `order`), cached
+// under the collection's tag. In the editor canvas the site runs in draft
+// mode, so the grid reads the live rows too: an unpublished article shows
+// there as it will (spec 2026-09-11 §2).
+export const articlesSchema = smoodly.schema.page({
+  name: "articlesIndex",
+  title: "Articles",
+  slug: "posts",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+  },
+  seo: true,
+});

package/templates/astro-lorem/src/components/pages/Home.schema.ts

@@ -0,0 +1,26 @@
+import { smoodly, z } from "smoodly";
+import { heroSchema } from "../sections/Hero.schema";
+import { imageTextSchema } from "../sections/ImageText.schema";
+import { pointsSchema } from "../sections/Points.schema";
+import { favouriteArticlesSchema } from "../sections/FavouriteArticles.schema";
+import { peopleSchema } from "../sections/People.schema";
+import { quoteSchema } from "../sections/Quote.schema";
+
+// A page type: zones declared here, placed by the page type's view (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 global item only where the zone allows its section: an
+// editor may drop a one-off quote, or place the global one from the
+// picker's Global group.
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    hero: z.locked(heroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  seo: true,
+});

package/templates/astro-lorem/src/components/pages/News.schema.ts

@@ -0,0 +1,17 @@
+import { smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+
+// The News index: a fixed page on the news collection's own nested
+// address (smoodly/collections.ts), so it is the collection's index page.
+// Code owns /company/news whole: the Company page above it is an
+// editor's, and renaming it leaves the news where it is. The editor owns
+// the hero; the list below reads the posts through `q`, newest first.
+export const newsSchema = smoodly.schema.page({
+  name: "newsIndex",
+  title: "News",
+  slug: "company/news",
+  zones: {
+    hero: z.locked(pageHeroSchema),
+  },
+  seo: true,
+});

package/templates/astro-lorem/src/components/pages/Page.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly, z } from "smoodly";
+import { pageHeroSchema } from "../sections/PageHero.schema";
+import { imageTextSchema } from "../sections/ImageText.schema";
+import { pointsSchema } from "../sections/Points.schema";
+import { favouriteArticlesSchema } from "../sections/FavouriteArticles.schema";
+import { peopleSchema } from "../sections/People.schema";
+import { quoteSchema } from "../sections/Quote.schema";
+
+// 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.locked(pageHeroSchema),
+    body: z.freeform({ sections: [imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema], custom: true }),
+  },
+  seo: true,
+  // A page field (spec 2026-09-10 page fields §7): the parent's view lists
+  // the children that keep this on. Edited on the Settings tab.
+  fields: { showInNavigation: f.boolean().default(true) },
+});

package/templates/astro-lorem/src/components/sections/FavouriteArticles.schema.ts

@@ -0,0 +1,17 @@
+import { f, smoodly } from "smoodly";
+import { articles } from "@/smoodly/collections";
+
+// Articles an editor picks by hand (refList), as cards. The resolve pass
+// hydrates each ref before render, so the view gets article fields, not
+// ids; an article unpublished after this page went live resolves to
+// null and is skipped.
+export const favouriteArticlesSchema = smoodly.schema.section({
+  name: "favouriteArticles",
+  title: "Favourite articles",
+  description: "Articles picked by hand, as cards.",
+  fields: {
+    heading: f.text(),
+    items: f.refList(() => articles).max(6),
+  },
+  sample: { heading: "From the journal", items: [] },
+});