create-smoodly-app 0.0.8 → 0.0.9

package/templates/next-intl/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-intl/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-intl/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-intl/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-intl/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: { en: "posts", fi: "artikkelit" },
+  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-intl/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-intl/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} />
     </>
   );
 }

package/templates/next-intl/components/sections/FavouriteArticles.tsx

@@ -0,0 +1,42 @@
+import { f, smoodly, type Props } from "smoodly";
+import { articles } from "@/smoodly/collections";
+import { ArticleCard } from "@/components/ArticleCard";
+import { articlePath } from "@/components/articles";
+import { ui } from "@/components/strings";
+
+// 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),
+  },
+  sample: { heading: "From the journal", items: [] },
+});
+
+// async: the cards format dates in the request locale and link through
+// the locale's article segment, both from the strings seam. The canvas
+// is the site's own draft route in an iframe, so an async section
+// previews like any other (DESIGN.md §3 "RSC strategy").
+async function FavouriteArticlesView({ heading, items, styles }: Props<typeof favouriteArticlesSchema>) {
+  const { locale, url } = await ui();
+  return (
+    <smoodly.Section styles={styles} className="favourites">
+      <div className="container">
+        <h2 className="h2">{heading}</h2>
+        <div className="card-grid">
+          {(items ?? []).filter(Boolean).map((a, i) => (
+            <ArticleCard key={i} article={a} url={url(articlePath(a.slug, locale))} locale={locale} />
+          ))}
+        </div>
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const FavouriteArticles = smoodly.section(favouriteArticlesSchema, FavouriteArticlesView);

package/templates/next-intl/components/sections/Footer.tsx

@@ -1,31 +1,67 @@
 import { f, smoodly, type Props } from "smoodly";
 
-// The site footer — a VISUAL shared item (smoodly/shared.ts): registered
-// like any section, stored once, rendered by the locale layout through
-// getSmoodlyShared, never placed in a page tree. The tagline is per
-// language; the copyright line is the same everywhere.
+// The site footer — a VISUAL shared item (smoodly/shared.ts): one row,
+// edited under Shared 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). The layout
+// renders FooterView directly to hand it the contact object item, which
+// is not a footer field.
+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-wide footer.",
+  description: "The site footer: tagline, three link columns, copyright.",
   fields: {
     tagline: f.text().localized(),
+    company: column(),
+    legal: column(),
+    social: column(),
     copyright: f.text(),
   },
-  styles: {
-    tone: f.select(["light", "dark"]).default("dark"),
-  },
   sample: {
-    tagline: "Made with Smoodly",
-    copyright: "© Laniakea Studio",
+    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.",
   },
 });
 
-function FooterView({ tagline, copyright, styles }: Props<typeof footerSchema>) {
+export type ContactFields = { email: string; phone?: string; address: string };
+type Column = { title: string; links: { label: string; href: string }[] };
+
+function FooterColumn({ column }: { column: Column | undefined }) {
+  if (!column) return null;
+  return (
+    <div className="site-footer__column">
+      <span className="site-footer__title">{column.title}</span>
+      {(column.links ?? []).map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
+    </div>
+  );
+}
+
+export function FooterView({ tagline, company, legal, social, copyright, contact, styles }: Props<typeof footerSchema> & { contact?: ContactFields | null }) {
   return (
-    <smoodly.Section as="footer" styles={styles}>
-      <p>{tagline}</p>
-      <small>{copyright}</small>
+    <smoodly.Section as="footer" styles={styles} className="site-footer">
+      <div className="container site-footer__grid">
+        <div className="site-footer__about">
+          <p className="site-footer__tagline">{tagline}</p>
+          {contact && (
+            <address className="site-footer__contact">
+              <a href={`mailto:${contact.email}`}>{contact.email}</a>
+              {contact.phone && <span>{contact.phone}</span>}
+              <span>{contact.address}</span>
+            </address>
+          )}
+        </div>
+        <FooterColumn column={company} />
+        <FooterColumn column={legal} />
+        <FooterColumn column={social} />
+      </div>
+      <div className="container site-footer__copyright">{copyright}</div>
     </smoodly.Section>
   );
 }

package/templates/next-intl/components/sections/Header.tsx

@@ -0,0 +1,44 @@
+import { f, smoodly, type Props } from "smoodly";
+
+// The site header — a VISUAL shared item (smoodly/shared.ts): one row,
+// edited under Shared 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: "/" }] },
+});
+
+export type LocaleLink = { code: string; url: string; current: boolean };
+
+export function HeaderView({ brand, nav, locales, styles }: Props<typeof headerSchema> & { locales?: LocaleLink[] }) {
+  const home = locales?.find((l) => l.current)?.url ?? "/";
+  return (
+    <smoodly.Section as="header" styles={styles} className="site-header">
+      <div className="container site-header__bar">
+        <a className="site-header__brand" href={home}>{brand}</a>
+        <nav className="site-header__nav">
+          {(nav ?? []).map((item, i) => <a key={i} href={item.href}>{item.label}</a>)}
+        </nav>
+        {locales && locales.length > 1 && (
+          <nav className="site-header__locales" aria-label="Language">
+            {locales.map((l) => (
+              <a key={l.code} href={l.url} aria-current={l.current ? "page" : undefined}>{l.code.toUpperCase()}</a>
+            ))}
+          </nav>
+        )}
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const Header = smoodly.section(headerSchema, HeaderView);