create-smoodly-app 0.0.45 → 0.0.47

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

@@ -0,0 +1,31 @@
+import { f, smoodly } from "smoodly";
+
+// The site footer — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout. Three link columns
+// as top-level objects, each localized as a whole (an object holding a
+// list — one level, which the list field allows; a list of columns each
+// holding a list would be a nested list, which it refuses).
+const column = () =>
+  f.object({ title: f.text(), links: f.list(f.object({ label: f.text(), href: f.link() })) }).localized();
+
+export const footerSchema = smoodly.schema.section({
+  name: "footer",
+  title: "Footer",
+  description: "The site footer: tagline, three link columns, copyright.",
+  fields: {
+    tagline: f.text().localized(),
+    company: column(),
+    legal: column(),
+    social: column(),
+    copyright: f.text(),
+  },
+  sample: {
+    tagline: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    company: { title: "Company", links: [{ label: "About", href: "/company/about-us" }] },
+    legal: { title: "Legal", links: [{ label: "Privacy", href: "#" }] },
+    social: { title: "Social", links: [{ label: "Instagram", href: "#" }] },
+    copyright: "© 2026 Lorem Co. Built with Smoodly.",
+  },
+  // The layout's footer keeps the design's spacing: no Spacing & layout group.
+  styles: false,
+});

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

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// The site header — a VISUAL global item (smoodly/globals.ts): one row,
+// edited under Global content, rendered by the layout, never placed in a
+// page. The brand is the same in every language; the nav is a list of
+// links localized as a whole, so each language has its own labels and
+// hrefs. The layout renders HeaderView directly to hand it the locale
+// links (a paired component takes only its schema's props); the paired
+// Header is what the registry and the admin know.
+export const headerSchema = smoodly.schema.section({
+  name: "header",
+  title: "Header",
+  description: "The site header: brand and navigation.",
+  fields: {
+    brand: f.text(),
+    nav: f.list(f.object({ label: f.text(), href: f.link() })).localized(),
+  },
+  sample: { brand: "Lorem Co.", nav: [{ label: "Home", href: "/" }] },
+  // Nobody pads the header from the editor: no Spacing & layout group.
+  styles: false,
+});

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

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+
+// The home page opener: kicker, heading, text, up to two buttons and a
+// portrait photo. Home locks it (`z.locked(heroSchema)`): one node an editor
+// fills but cannot add, move or remove. `sample` is what the editor
+// materializes into an empty locked zone, so it is a complete value.
+export const heroSchema = smoodly.schema.section({
+  name: "hero",
+  title: "Hero",
+  description: "The home page opener: heading, text, buttons and a photo.",
+  fields: {
+    kicker: f.text().optional(),
+    heading: f.text(),
+    text: f.text(),
+    buttons: f.list(f.object({ label: f.text(), href: f.link() })).max(2),
+    image: f.image({ aspect: "4:5" }),
+  },
+  sample: {
+    kicker: "Lorem ipsum dolor",
+    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: "About us", href: "/company/about-us" }],
+  },
+});

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

@@ -0,0 +1,30 @@
+import { f, smoodly } from "smoodly";
+
+// A photo beside a heading and richtext, the photo on either side (a
+// setting, not a field: settings are never translated). Without a photo the
+// heading takes the left column and the text the right — the About
+// page's text block. The richtext renders through the package's
+// RichText: paragraphs, headings, lists, quotes.
+export const imageTextSchema = smoodly.schema.section({
+  name: "imageText",
+  title: "Image and text",
+  description: "A photo beside a heading and text; text alone in two columns without one.",
+  fields: {
+    image: f.image({ aspect: "4:3" }).optional(),
+    heading: f.text(),
+    // Body copy beside a photo: emphasis and links, no headings — the block's
+    // own heading field owns that. Every other richtext field takes the default.
+    text: f.richtext({ toolset: smoodly.toolset({ marks: ["bold", "italic", "link"] }) }),
+    link: f.object({ label: f.text(), href: f.link() }).optional(),
+  },
+  settings: {
+    imageSide: f.radio([{ value: "left", label: "Image left" }, { value: "right", label: "Image right" }]).default("left"),
+  },
+  sample: {
+    heading: "Duis aute irure dolor in reprehenderit",
+    text: {
+      type: "doc",
+      content: [{ type: "paragraph", content: [{ type: "text", text: "In voluptate velit esse cillum dolore eu fugiat nulla pariatur." }] }],
+    },
+  },
+});

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

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// The opener of every page that is not the home page: kicker, heading,
+// text and an optional wide photo. Page and Articles lock it — each page
+// shape locks its own hero, which is the point: a locked zone is per
+// shape. Without an image the copy stands alone (the Articles index).
+export const pageHeroSchema = smoodly.schema.section({
+  name: "pageHero",
+  title: "Page hero",
+  description: "A page opener: kicker, heading, text and an optional wide photo.",
+  fields: {
+    kicker: f.text().optional(),
+    heading: f.text(),
+    text: f.text(),
+    image: f.image({ aspect: "21:9" }).optional(),
+  },
+  sample: {
+    heading: "About us",
+    text: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.",
+  },
+});

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

@@ -0,0 +1,15 @@
+import { f, smoodly } from "smoodly";
+import { people } from "@/smoodly/collections";
+
+// People picked by hand (refList), four to a row: name and role, the
+// role in the page's language because it is a localized field.
+export const peopleSchema = smoodly.schema.section({
+  name: "peopleSection",
+  title: "People",
+  description: "A heading and a row of people.",
+  fields: {
+    heading: f.text(),
+    people: f.refList(() => people),
+  },
+  sample: { heading: "Our people", people: [] },
+});

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

@@ -0,0 +1,21 @@
+import { f, smoodly } from "smoodly";
+
+// A heading over one to six points, each an icon, a heading and a line
+// of text: the list field with min/max, and an object inside the list.
+export const pointsSchema = smoodly.schema.section({
+  name: "points",
+  title: "Points",
+  description: "A heading and one to six points with an icon each.",
+  fields: {
+    heading: f.text(),
+    points: f.list(f.object({
+      icon: f.select([{ value: "circle", label: "Circle" }, { value: "square", label: "Square" }, { value: "diamond", label: "Diamond" }]),
+      heading: f.text(),
+      text: f.text(),
+    })).min(1).max(6),
+  },
+  sample: {
+    heading: "Quis autem vel eum",
+    points: [{ icon: "circle", heading: "Iure reprehenderit", text: "Qui in ea voluptate velit esse quam nihil molestiae consequatur." }],
+  },
+});

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

@@ -0,0 +1,23 @@
+import { f, smoodly } from "smoodly";
+
+// A pull quote. Registered as a global item (smoodly/globals.ts): one row
+// edited under Global content, placed on pages from the "+" picker's
+// Global group as a linked node. The body zones also list it, because
+// the picker offers a global item only where the zone allows its
+// section — so an editor may also drop a one-off quote.
+export const quoteSchema = smoodly.schema.section({
+  name: "quote",
+  title: "Quote",
+  description: "A pull quote with its attribution.",
+  fields: {
+    text: f.text().localized(),
+    attribution: f.text().localized(),
+  },
+  settings: {
+    background: f.radio([{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]).default("paper"),
+  },
+  sample: {
+    text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
+    attribution: "Jane Doe, Founder",
+  },
+});

package/templates/astro-lorem/src/elements/callout.astro

@@ -0,0 +1,13 @@
+---
+// src/elements/callout.astro — the view of the element named "callout", inside an article body
+import { type Props as SmoodlyProps } from "smoodly";
+import { RichText } from "smoodly/astro/components";
+import { calloutSchema } from "@/components/elements/Callout.schema";
+
+type Props = SmoodlyProps<typeof calloutSchema>;
+const { title, body, settings } = Astro.props;
+---
+<aside class="callout" data-tone={settings.tone}>
+  <strong class="callout__title">{title}</strong>
+  <div class="callout__body"><RichText doc={body} /></div>
+</aside>

package/templates/astro-lorem/src/elements/cta.astro

@@ -0,0 +1,15 @@
+---
+// src/elements/cta.astro — the view of the element named "cta"
+import { safeHref, type Props as SmoodlyProps } from "smoodly";
+import { ctaSchema } from "@/components/elements/Cta.schema";
+
+type Props = SmoodlyProps<typeof ctaSchema>;
+const { heading, text, label, href, settings } = Astro.props;
+---
+<div class="cta" data-variant={settings.variant}>
+  <div class="cta__copy">
+    <strong class="cta__heading">{heading}</strong>
+    {text && <p class="cta__text">{text}</p>}
+  </div>
+  <a class={settings.variant === "outline" ? "button button--outline" : "button"} href={safeHref(href)}>{label}</a>
+</div>

package/templates/astro-lorem/src/entry-pages/articles.astro

@@ -0,0 +1,71 @@
+---
+// src/entry-pages/articles.astro — the entry page of the collection "articles", served at the
+// collection's path (/posts/<slug>, /fi/artikkelit/<slug>). Fields only; refs arrive resolved (author is a
+// person). "Related" is the newest other published articles; "More from <author>" filters on the shared
+// author field in the store. The render locale and the alternates ride on the entry (spec 2026-09-15).
+import { getLiveCollection } from "astro:content";
+import { Image, RichText } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { articlesIndexPath, formatDate, readingMinutes } from "@/components/articles";
+import type { EntryFields, EntryItem } from "smoodly";
+import type { PageHead } from "smoodly/astro/runtime";
+import type { articles } from "@/smoodly/collections";
+import Layout from "../layouts/Layout.astro";
+import ArticleCard from "../components/ArticleCard.astro";
+import { ui } from "../strings";
+
+type Props = { entry: EntryItem<EntryFields<typeof articles>>; head: PageHead };
+const { entry, head } = Astro.props;
+const { locale, locales } = entry;
+const { t } = ui(locale);
+const a = entry.fields;
+const url = (path: string) => href(path, locale);
+// Four newest, minus this one, so three remain even when it is among them; the store applies the limit.
+const { entries: newest = [] } = await getLiveCollection("articles", { locale, limit: 4 });
+const related = newest.map((e) => e.data).filter((r) => r.id !== entry.id).slice(0, 3);
+const authorId = a.author?.id;
+const { entries: byAuthor = [] } = authorId ? await getLiveCollection("articles", { locale, where: { author: authorId } }) : { entries: [] };
+const more = byAuthor.map((e) => e.data).filter((r) => r.id !== entry.id);
+const index = url(articlesIndexPath(locale));
+---
+<Layout head={head} locale={locale} locales={locales}>
+  <article class="container article">
+    <a class="article__back" href={index}>← {t("allArticles")}</a>
+    <div class="article__head">
+      {a.tags && a.tags.length > 0 && (
+        <div class="article__tags">{a.tags.map((tag, i) => <span class={i === 0 ? "tag tag--accent" : "tag"}>{tag}</span>)}</div>
+      )}
+      <h1 class="article__title">{a.title}</h1>
+      <p class="article__byline">
+        <span class="article__avatar" aria-hidden="true"></span>
+        <span>
+          {a.author?.fields.name && <strong>{a.author.fields.name}</strong>}
+          {a.author?.fields.name && " · "}
+          {a.date && <>{formatDate(a.date, locale)} · </>}
+          {t("minRead", { minutes: readingMinutes(a.body) })}
+        </span>
+      </p>
+    </div>
+    {a.image && <Image image={a.image} aspect="21:9" class="article__image" sizes="(min-width: 900px) 800px, 100vw" priority />}
+    <div class="article__body prose prose--lead"><RichText doc={a.body} sizes="(min-width: 900px) 720px, 100vw" /></div>
+  </article>
+  {more.length > 0 && (
+    <section class="related" data-testid="more-by-author">
+      <div class="container">
+        <div class="related__head"><h2 class="h2">{t("moreFromAuthor", { name: a.author?.fields.name ?? "" })}</h2></div>
+        <div class="card-grid card-grid--3">{more.map((r) => <ArticleCard article={r.fields} url={url(r.path!)} locale={locale} compact />)}</div>
+      </div>
+    </section>
+  )}
+  {related.length > 0 && (
+    <section class="related">
+      <div class="container">
+        <div class="related__head">
+          <h2 class="h2">{t("relatedArticles")}</h2>
+          <a class="link-accent" href={index}>{t("allArticles")} →</a>
+        </div>
+        <div class="card-grid card-grid--3">{related.map((r) => <ArticleCard article={r.fields} url={url(r.path!)} locale={locale} compact />)}</div>
+      </div>
+    </section>
+  )}
+</Layout>

package/templates/astro-lorem/src/entry-pages/news.astro

@@ -0,0 +1,29 @@
+---
+// src/entry-pages/news.astro — the entry page of the collection "news", at
+// /company/news/<slug> and /fi/yritys/uutiset/<slug>: the collection's nested path, then the slug.
+import { RichText } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { formatDate } from "@/components/articles";
+import { newsIndexPath } from "@/components/news";
+import type { EntryFields, EntryItem } from "smoodly";
+import type { PageHead } from "smoodly/astro/runtime";
+import type { news } from "@/smoodly/collections";
+import Layout from "../layouts/Layout.astro";
+import { ui } from "../strings";
+
+type Props = { entry: EntryItem<EntryFields<typeof news>>; head: PageHead };
+const { entry, head } = Astro.props;
+const { locale, locales } = entry;
+const { t } = ui(locale);
+const n = entry.fields;
+---
+<Layout head={head} locale={locale} locales={locales}>
+  <article class="container article">
+    <a class="article__back" href={href(newsIndexPath(locale), locale)}>← {t("allNews")}</a>
+    <div class="article__head">
+      <h1 class="article__title">{n.title}</h1>
+      {n.date && <p class="article__byline">{formatDate(n.date, locale)}</p>}
+    </div>
+    <div class="article__body prose prose--lead"><RichText doc={n.body} /></div>
+  </article>
+</Layout>

package/templates/astro-lorem/src/layouts/Layout.astro

@@ -0,0 +1,39 @@
+---
+// src/layouts/Layout.astro
+// The site's own document: every page type and entry page renders inside it. The header and the footer are
+// global content, read as live entries per locale, null until published there; the language links come from
+// the page's own `locales` map (spec 2026-09-15), so a layout here can know which page is on screen — Astro
+// renders the page before its layout's slot is filled. Nothing of Smoodly's is written here but the head it
+// knows; in a preview the integration adds what the editor needs to the response.
+import { getLiveEntry } from "astro:content";
+import { Head } from "smoodly/astro/components";
+import { href, type PageHead } from "smoodly/astro/runtime";
+import Header from "../sections/header.astro";
+import Footer from "../sections/footer.astro";
+import "../styles/global.css";
+
+type Props = { head: PageHead; locale: string; locales?: Record<string, { path: string | null } | null> };
+const { head, locale, locales = {} } = Astro.props;
+const [{ entry: header }, { entry: footer }, { entry: contact }] = await Promise.all([
+  getLiveEntry("header", { locale }),
+  getLiveEntry("footer", { locale }),
+  getLiveEntry("contact", { locale }),
+]);
+const codes = Object.keys(locales);
+const links = codes.length > 1
+  ? codes.map((code) => ({ code, url: href(locales[code]?.path ?? "/", code), current: code === locale }))
+  : undefined;
+---
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Head of={head} fallback="Lorem Co." />
+  </head>
+  <body>
+    {header && <Header {...header.data.fields} settings={header.data.settings} styles={header.data.styles} home={href("/", locale)} locales={links} />}
+    <main><slot /></main>
+    {footer && <Footer {...footer.data.fields} settings={footer.data.settings} styles={footer.data.styles} contact={contact?.data.fields} />}
+  </body>
+</html>

package/templates/astro-lorem/src/live.config.ts

@@ -0,0 +1,20 @@
+// src/live.config.ts
+// Smoodly's content as live collections (spec 2026-10-02 astro cloud fit §6): a loader per collection, global
+// item and the pages, from the package; this file only names them. `getLiveCollection("articles", { locale })`
+// in a view reads through the read layer, and the response is tagged by what it read.
+import { defineLiveCollection } from "astro:content";
+import { entriesLoader, globalLoader, pageLoader, pageTreeLoader } from "smoodly/astro/content";
+import { articles, news, people } from "@/smoodly/collections";
+import { contact, footer, header, quote } from "@/smoodly/globals";
+
+export const collections = {
+  pages: defineLiveCollection({ loader: pageLoader() }),
+  pageTree: defineLiveCollection({ loader: pageTreeLoader() }),
+  articles: defineLiveCollection({ loader: entriesLoader(articles) }),
+  news: defineLiveCollection({ loader: entriesLoader(news) }),
+  people: defineLiveCollection({ loader: entriesLoader(people) }),
+  header: defineLiveCollection({ loader: globalLoader(header) }),
+  footer: defineLiveCollection({ loader: globalLoader(footer) }),
+  contact: defineLiveCollection({ loader: globalLoader(contact) }),
+  quote: defineLiveCollection({ loader: globalLoader(quote) }),
+};

package/templates/astro-lorem/src/messages/en.json

@@ -0,0 +1,7 @@
+{
+  "allArticles": "All articles",
+  "relatedArticles": "Related articles",
+  "moreFromAuthor": "More from {name}",
+  "minRead": "{minutes} min read",
+  "allNews": "All news"
+}

package/templates/astro-lorem/src/messages/fi.json

@@ -0,0 +1,7 @@
+{
+  "allArticles": "Kaikki artikkelit",
+  "relatedArticles": "Aiheeseen liittyvät artikkelit",
+  "moreFromAuthor": "Lisää kirjoittajalta {name}",
+  "minRead": "{minutes} min lukuaika",
+  "allNews": "Kaikki uutiset"
+}

package/templates/astro-lorem/src/page-types/articlesIndex.astro

@@ -0,0 +1,24 @@
+---
+// src/page-types/articlesIndex.astro — the view of the page type named "articlesIndex": the
+// editor owns the hero; the grid reads the published articles as a live collection, newest first (the
+// collection's `order`), and in the canvas the drafts too (the request scope reads drafts in a preview).
+import { getLiveCollection } from "astro:content";
+import { Zone } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+import ArticleCard from "../components/ArticleCard.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+const { entries = [] } = await getLiveCollection("articles", { locale: page.locale });
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <section class="container articles-index">
+    <div class="card-grid">
+      {entries.map(({ data: entry }) => <ArticleCard article={entry.fields} url={href(entry.path!, page.locale)} locale={page.locale} />)}
+    </div>
+  </section>
+</Layout>

package/templates/astro-lorem/src/page-types/home.astro

@@ -0,0 +1,14 @@
+---
+// src/page-types/home.astro — the view of the page type named "home"
+import { Zone } from "smoodly/astro/components";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <Zone of={zones.body} />
+</Layout>

package/templates/astro-lorem/src/page-types/newsIndex.astro

@@ -0,0 +1,28 @@
+---
+// src/page-types/newsIndex.astro — the view of the page type named "newsIndex"
+import { getLiveCollection } from "astro:content";
+import { Zone } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { formatDate } from "@/components/articles";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+const { entries = [] } = await getLiveCollection("news", { locale: page.locale });
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  <Zone of={zones.hero} />
+  <section class="container news-index">
+    <ul class="news-list">
+      {entries.map(({ data: { path, fields: n } }) => (
+        <li class="news-list__item">
+          <time class="news-list__date" datetime={n.date}>{formatDate(n.date, page.locale)}</time>
+          <a class="news-list__title" href={href(path!, page.locale)}>{n.title}</a>
+          {n.excerpt && <p class="news-list__excerpt">{n.excerpt}</p>}
+        </li>
+      ))}
+    </ul>
+  </section>
+</Layout>

package/templates/astro-lorem/src/page-types/page.astro

@@ -0,0 +1,27 @@
+---
+// src/page-types/page.astro — the view of the page type named "page"
+import { Zone } from "smoodly/astro/components";
+import type { PageContext } from "smoodly";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+// Sub-navigation: the published children that opted in through their page field.
+const shown = page.children.filter((c) => c.hasPage && c.fields.showInNavigation === true);
+---
+<Layout head={head} locale={page.locale} locales={page.locales}>
+  {page.ancestors.length > 0 && (
+    <nav class="container breadcrumb" aria-label="Breadcrumb">
+      {page.ancestors.map((a) => <span>{a.hasPage ? <a href={a.url}>{a.title}</a> : a.title} / </span>)}
+      {page.title}
+    </nav>
+  )}
+  {shown.length > 0 && (
+    <nav class="container subnav" aria-label="Pages in this section">
+      {shown.map((c) => <a href={c.url}>{c.title}</a>)}
+    </nav>
+  )}
+  <Zone of={zones.hero} />
+  <Zone of={zones.body} />
+</Layout>

package/templates/astro-lorem/src/pages/404.astro

@@ -0,0 +1,7 @@
+---
+// src/pages/404.astro — the site's own "not found" page: the shell rewrites here.
+import Layout from "../layouts/Layout.astro";
+---
+<Layout head={{ title: "Not found", noindex: true, languages: {} }} locale="en">
+  <div class="container"><h1>Page not found</h1></div>
+</Layout>

package/templates/astro-lorem/src/sections/favouriteArticles.astro

@@ -0,0 +1,26 @@
+---
+// src/sections/favouriteArticles.astro — the view of the section named "favouriteArticles":
+// articles an editor picked, resolved before render, so the view gets article fields, not ids.
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { href } from "smoodly/astro/runtime";
+import { favouriteArticlesSchema } from "@/components/sections/FavouriteArticles.schema";
+import { config } from "@/smoodly/config";
+import ArticleCard from "../components/ArticleCard.astro";
+
+type Props = SmoodlyProps<typeof favouriteArticlesSchema>;
+const { heading, items, styles } = Astro.props;
+// A section receives its schema's props and nothing of the page; the request's locale is the one page-level
+// value the adapter leaves it, on Astro.locals (shell.ts sets it).
+// Outside the shell (a page file of the project's own) it is unset: the default locale then.
+const locale: string = Astro.locals.smoodly?.locale ?? config.locales.default;
+const m = smoodly.marks(favouriteArticlesSchema);
+---
+<Section styles={styles} class="favourites">
+  <div class="container">
+    <h2 class="h2" {...m.field("heading")}>{heading}</h2>
+    <div class="card-grid" {...m.field("items")}>
+      {(items ?? []).filter((a) => a !== null).map((a) => <ArticleCard article={a.fields} url={href(a.path!, locale)} locale={locale} />)}
+    </div>
+  </div>
+</Section>

package/templates/astro-lorem/src/sections/footer.astro

@@ -0,0 +1,37 @@
+---
+// src/sections/footer.astro — the view of the section named "footer", a visual global item
+// the layout renders with the contact object item, which is not a footer field.
+import { safeHref, smoodly, type Props as SmoodlyProps, type Scope } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { footerSchema } from "@/components/sections/Footer.schema";
+
+type Column = { title: string; links: { label: string; href: string }[] };
+type Props = SmoodlyProps<typeof footerSchema> & { contact?: { email: string; phone?: string; address: string } | null };
+const { tagline, company, legal, social, copyright, contact, styles } = Astro.props;
+const m = smoodly.marks(footerSchema);
+const columns: [Column | undefined, Scope<Column>][] = [[company, m.object("company")], [legal, m.object("legal")], [social, m.object("social")]];
+---
+<Section as="footer" styles={styles} class="site-footer">
+  <div class="container site-footer__grid">
+    <div class="site-footer__about">
+      <p class="site-footer__tagline" {...m.field("tagline")}>{tagline}</p>
+      {contact && (
+        <address class="site-footer__contact">
+          <a href={`mailto:${contact.email}`}>{contact.email}</a>
+          {contact.phone && <span>{contact.phone}</span>}
+          <span>{contact.address}</span>
+        </address>
+      )}
+    </div>
+    {columns.map(([column, scope]) => column && (
+      <div class="site-footer__column" {...scope.attrs}>
+        <span class="site-footer__title" {...scope.field("title")}>{column.title}</span>
+        {(column.links ?? []).map((l, i) => {
+          const link = scope.item("links", i);
+          return <a href={safeHref(l.href)} {...link.attrs} {...link.field("label")}>{l.label}</a>;
+        })}
+      </div>
+    ))}
+  </div>
+  <div class="container site-footer__copyright" {...m.field("copyright")}>{copyright}</div>
+</Section>

package/templates/astro-lorem/src/sections/header.astro

@@ -0,0 +1,27 @@
+---
+// src/sections/header.astro — the view of the section named "header", a visual global item
+// the layout renders with the locale links beside the schema's own props.
+import { safeHref, smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { headerSchema } from "@/components/sections/Header.schema";
+
+type Props = SmoodlyProps<typeof headerSchema> & { home?: string; locales?: { code: string; url: string; current: boolean }[] };
+const { brand, nav, home = "/", locales, styles } = Astro.props;
+const m = smoodly.marks(headerSchema);
+---
+<Section as="header" styles={styles} class="site-header">
+  <div class="container site-header__bar">
+    <a class="site-header__brand" href={home} {...m.field("brand")}>{brand}</a>
+    <nav class="site-header__nav">
+      {(nav ?? []).map((item, i) => {
+        const link = m.item("nav", i);
+        return <a href={safeHref(item.href)} {...link.attrs} {...link.field("label")}>{item.label}</a>;
+      })}
+    </nav>
+    {locales && locales.length > 1 && (
+      <nav class="site-header__locales" aria-label="Language">
+        {locales.map((l) => <a href={l.url} aria-current={l.current ? "page" : undefined}>{l.code.toUpperCase()}</a>)}
+      </nav>
+    )}
+  </div>
+</Section>

package/templates/astro-lorem/src/sections/hero.astro

@@ -0,0 +1,28 @@
+---
+// src/sections/hero.astro — the view of the section named "hero"
+import { safeHref, smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Image, Section } from "smoodly/astro/components";
+import { heroSchema } from "@/components/sections/Hero.schema";
+
+type Props = SmoodlyProps<typeof heroSchema>;
+const { kicker, heading, text, buttons, image, styles } = Astro.props;
+const m = smoodly.marks(heroSchema);
+---
+<Section styles={styles} class="hero">
+  <div class="container hero__grid">
+    <div class="hero__copy">
+      {kicker && <p class="kicker" {...m.field("kicker")}>{kicker}</p>}
+      <h1 class="hero__heading" {...m.field("heading")}>{heading}</h1>
+      <p class="hero__text" {...m.field("text")}>{text}</p>
+      {buttons?.length > 0 && (
+        <div class="hero__buttons">
+          {buttons.map((b, i) => {
+            const button = m.item("buttons", i);
+            return <a class={i === 0 ? "button" : "button button--outline"} href={safeHref(b.href)} {...button.attrs} {...button.field("label")}>{b.label}</a>;
+          })}
+        </div>
+      )}
+    </div>
+    {image && <Image image={image} class="hero__image" sizes="(min-width: 900px) 40vw, 100vw" priority {...m.field("image")} />}
+  </div>
+</Section>