create-smoodly-app 0.0.44 → 0.0.46

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

@@ -0,0 +1,7 @@
+---
+// examples/astro/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-intl/src/sections/favouriteArticles.astro

@@ -0,0 +1,26 @@
+---
+// examples/astro/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-intl/src/sections/footer.astro

@@ -0,0 +1,37 @@
+---
+// examples/astro/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-intl/src/sections/header.astro

@@ -0,0 +1,27 @@
+---
+// examples/astro/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-intl/src/sections/hero.astro

@@ -0,0 +1,28 @@
+---
+// examples/astro/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>

package/templates/astro-lorem-intl/src/sections/imageText.astro

@@ -0,0 +1,22 @@
+---
+// examples/astro/src/sections/imageText.astro — the view of the section named "imageText"
+import { safeHref, smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Image, RichText, Section } from "smoodly/astro/components";
+import { imageTextSchema } from "@/components/sections/ImageText.schema";
+
+type Props = SmoodlyProps<typeof imageTextSchema>;
+const { image, heading, text, link, settings, styles } = Astro.props;
+const m = smoodly.marks(imageTextSchema);
+const linkMarks = m.object("link");
+---
+<Section styles={styles} class="image-text" data-image-side={settings.imageSide}>
+  <div class="container image-text__grid">
+    {image && <Image image={image} class="image-text__image" sizes="(min-width: 900px) 50vw, 100vw" {...m.field("image")} />}
+    {!image && <h2 class="h2" {...m.field("heading")}>{heading}</h2>}
+    <div class="image-text__copy">
+      {image && <h2 class="h2" {...m.field("heading")}>{heading}</h2>}
+      <div class="prose" {...m.field("text")}><RichText doc={text} /></div>
+      {link?.href && <a class="link-accent" href={safeHref(link.href)} {...linkMarks.attrs} {...linkMarks.field("label")}>{link.label}</a>}
+    </div>
+  </div>
+</Section>

package/templates/astro-lorem-intl/src/sections/pageHero.astro

@@ -0,0 +1,20 @@
+---
+// examples/astro/src/sections/pageHero.astro — the view of the section named "pageHero"
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Image, Section } from "smoodly/astro/components";
+import { pageHeroSchema } from "@/components/sections/PageHero.schema";
+
+type Props = SmoodlyProps<typeof pageHeroSchema>;
+const { kicker, heading, text, image, styles } = Astro.props;
+const m = smoodly.marks(pageHeroSchema);
+---
+<Section styles={styles} class="page-hero">
+  <div class="container page-hero__inner">
+    <div class="page-hero__copy">
+      {kicker && <p class="kicker" {...m.field("kicker")}>{kicker}</p>}
+      <h1 class="page-hero__heading" {...m.field("heading")}>{heading}</h1>
+      <p class="page-hero__text" {...m.field("text")}>{text}</p>
+    </div>
+    {image && <Image image={image} class="page-hero__image" sizes="100vw" priority {...m.field("image")} />}
+  </div>
+</Section>

package/templates/astro-lorem-intl/src/sections/peopleSection.astro

@@ -0,0 +1,24 @@
+---
+// examples/astro/src/sections/peopleSection.astro — the view of the section named "peopleSection"
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { peopleSchema } from "@/components/sections/People.schema";
+
+type Props = SmoodlyProps<typeof peopleSchema>;
+const { heading, people: persons, styles } = Astro.props;
+const m = smoodly.marks(peopleSchema);
+---
+<Section styles={styles} class="people">
+  <div class="container">
+    <h2 class="h2" {...m.field("heading")}>{heading}</h2>
+    <div class="people__grid" {...m.field("people")}>
+      {(persons ?? []).filter((ref) => ref !== null).map(({ fields: person }) => (
+        <div class="person">
+          <span class="person__mark" aria-hidden="true">{person.name?.charAt(0)}</span>
+          <span class="person__name">{person.name}</span>
+          <span class="person__role">{person.role}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+</Section>

package/templates/astro-lorem-intl/src/sections/points.astro

@@ -0,0 +1,33 @@
+---
+// examples/astro/src/sections/points.astro — the view of the section named "points"
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { pointsSchema } from "@/components/sections/Points.schema";
+
+type Props = SmoodlyProps<typeof pointsSchema>;
+const { heading, points, styles } = Astro.props;
+const m = smoodly.marks(pointsSchema);
+const icons: Record<string, string> = {
+  circle: '<circle cx="20" cy="20" r="18" />',
+  square: '<rect x="3" y="3" width="34" height="34" rx="4" />',
+  diamond: '<polygon points="20,2 38,20 20,38 2,20" />',
+};
+---
+<Section styles={styles} class="points">
+  <div class="container">
+    <h2 class="h2" {...m.field("heading")}>{heading}</h2>
+    <div class="points__grid">
+      {/* A real crash for the suite's guard test: `(points ?? []).map` on a string throws here, as in the React view. */}
+      {(points ?? []).map((point, i) => {
+        const p = m.item("points", i);
+        return (
+          <div class="point" {...p.attrs}>
+            <svg class="point__icon" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" {...p.field("icon")} set:html={icons[point.icon] ?? icons.circle}></svg>
+            <h3 class="point__heading" {...p.field("heading")}>{point.heading}</h3>
+            <p class="point__text" {...p.field("text")}>{point.text}</p>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+</Section>

package/templates/astro-lorem-intl/src/sections/quote.astro

@@ -0,0 +1,16 @@
+---
+// examples/astro/src/sections/quote.astro — the view of the section named "quote"
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { Section } from "smoodly/astro/components";
+import { quoteSchema } from "@/components/sections/Quote.schema";
+
+type Props = SmoodlyProps<typeof quoteSchema>;
+const { text, attribution, settings, styles } = Astro.props;
+const m = smoodly.marks(quoteSchema);
+---
+<Section styles={styles} class="quote" data-background={settings.background}>
+  <div class="quote__inner">
+    <blockquote class="quote__text">“<span {...m.field("text")}>{text}</span>”</blockquote>
+    <p class="quote__attribution" {...m.field("attribution")}>{attribution}</p>
+  </div>
+</Section>

package/templates/astro-lorem-intl/src/smoodly/collections.ts

@@ -0,0 +1,63 @@
+import { f, smoodly } from "smoodly";
+import { article } from "./toolsets";
+
+// A person's name is the same in every language; the role is translated.
+// Shared fields live on the entry, .localized() ones on its locale rows
+// (spec 2026-09-06 §7).
+export const people = smoodly.collection({
+  name: "people",
+  title: "People",
+  titleField: "name",
+  order: "manual",
+  fields: {
+    name: f.text(),
+    role: f.text().localized(),
+  },
+});
+
+// Articles are served at a path that is per locale — /posts/<slug> and
+// /fi/artikkelit/<slug> — and the Articles fixed page claims the same
+// segments, which makes it the collection's index page. Tags are f.tags(),
+// localized as a whole, so the Finnish row carries Finnish tags.
+export const articles = smoodly.collection({
+  name: "articles",
+  title: "Articles",
+  titleField: "title",
+  path: { en: "posts", fi: "artikkelit" },
+  order: { by: "date", direction: "desc" },
+  seo: { description: "excerpt", image: "image" },
+  fields: {
+    title: f.text().localized(),
+    image: f.image({ aspect: "3:2" }),
+    date: f.date(),
+    author: f.ref(() => people),
+    slug: f.slug({ from: "title" }),
+    excerpt: f.text().localized(),
+    // The article toolset: the default marks and blocks, body images and the elements.
+    body: f.richtext({ toolset: article }).localized(),
+    tags: f.tags().localized(),
+  },
+});
+
+// News lives under the company: a nested address, owned by code whole
+// (spec 2026-09-29 nested paths). The Company page at /company is an
+// editor's page; renaming it never moves the news. The News fixed page
+// claims the same address, which makes it
+// the collection's index page.
+export const news = smoodly.collection({
+  name: "news",
+  title: "News",
+  titleField: "title",
+  path: { en: "company/news", fi: "yritys/uutiset" },
+  order: { by: "date", direction: "desc" },
+  seo: { description: "excerpt" },
+  fields: {
+    title: f.text().localized(),
+    date: f.date(),
+    slug: f.slug({ from: "title" }),
+    excerpt: f.text().localized(),
+    body: f.richtext({ toolset: article }).localized(),
+  },
+});
+
+export const collections = [people, articles, news];

package/templates/astro-lorem-intl/src/smoodly/config.ts

@@ -0,0 +1,48 @@
+import { defineConfig } from "smoodly";
+import { collections } from "./collections";
+import { sections } from "./sections";
+import { globals } from "./globals";
+import { elements } from "./elements";
+import { article } from "./toolsets";
+import { homeSchema } from "@/components/pages/Home.schema";
+import { articlesSchema } from "@/components/pages/Articles.schema";
+import { pageSchema } from "@/components/pages/Page.schema";
+import { newsSchema } from "@/components/pages/News.schema";
+
+export { collections, sections, globals, elements };
+
+// The registry of schemas and the plain settings, one file. It imports
+// no component and no route file, so a script, the CLI and (later) an MCP
+// server can load it outside the app; the views are files by name under
+// src/. The locale set is below; astro.config.ts declares the same set.
+export const config = defineConfig({
+  registry: {
+    sections,
+    // Elements (block nodes spec 2026-09-08): what an article body may embed.
+    elements,
+    collections,
+    globals,
+    // Page types. The entry pages are views: src/entry-pages/<collection>.astro.
+    pages: [homeSchema, articlesSchema, pageSchema, newsSchema],
+  },
+  locales: { default: "en", supported: ["en", "fi"] },
+  // Editors pick dates and times in this zone; the views format with it (an IANA name, never an offset).
+  timeZone: "Europe/Helsinki",
+  // Smoodly's own default, spelled out: the record the site root serves.
+  homePageSlug: "home",
+  // Nesting on: an editor can put pages three deep.
+  pages: { tree: { depth: 3 } },
+  // Smoodly's styles set (spacing, width, align) renders inline from
+  // these CSS values; the site's stylesheet defines the variables per
+  // breakpoint. Default stores nothing — a section looks as written.
+  styles: {
+    spacing: { sm: "var(--space-sm)", md: "var(--space-md)", lg: "var(--space-lg)" },
+    width: { narrow: "var(--width-narrow)", wide: "var(--width-wide)", full: "none" },
+  },
+  // The custom-CSS box in a section's Advanced group (scoped, sanitized).
+  css: true,
+  // The custom section (spec 2026-09-14 §6): the editor's own rows of
+  // columns. The columns take the article toolset (headings, lists,
+  // images, Callout and Cta); the view's RichText renders them.
+  custom: { toolset: article },
+});

package/templates/astro-lorem-intl/src/smoodly/elements.ts

@@ -0,0 +1,6 @@
+// The element schemas a richtext body may embed; their views are
+// src/elements/<name>.astro files.
+import { calloutSchema } from "@/components/elements/Callout.schema";
+import { ctaSchema } from "@/components/elements/Cta.schema";
+
+export const elements = [calloutSchema, ctaSchema];

package/templates/astro-lorem-intl/src/smoodly/globals.ts

@@ -0,0 +1,29 @@
+// Global content (spec 2026-09-07): code-declared singletons stored as
+// entries. `header` and `footer` are visual — the layout renders them;
+// `contact` is an object the footer reads through the layout; `quote` is
+// visual and placed on pages from the picker's Global group. The three
+// the layout renders on every page are `layout: true`: they come with
+// the page's own read, so the layout's reads cost no database call.
+import { f, smoodly } from "smoodly";
+import { headerSchema } from "@/components/sections/Header.schema";
+import { footerSchema } from "@/components/sections/Footer.schema";
+import { quoteSchema } from "@/components/sections/Quote.schema";
+
+export const header = smoodly.global({ name: "header", title: "Header", section: headerSchema, layout: true });
+
+export const footer = smoodly.global({ name: "footer", title: "Footer", section: footerSchema, layout: true });
+
+export const contact = smoodly.global({
+  name: "contact",
+  title: "Contact details",
+  fields: {
+    email: f.text(),
+    phone: f.text().optional(),
+    address: f.text().localized(),
+  },
+  layout: true,
+});
+
+export const quote = smoodly.global({ name: "quote", title: "Quote", section: quoteSchema });
+
+export const globals = [header, footer, contact, quote];

package/templates/astro-lorem-intl/src/smoodly/sections.ts

@@ -0,0 +1,18 @@
+// The site's section schemas, in one list. config.ts puts it in the
+// registry; the views are src/sections/<name>.astro files.
+// Header and Footer are here because their global items render through
+// them; no zone lists them, so the "+" picker never offers them. Quote
+// is both: its global item renders through it, and the body zones list
+// it so the global quote can be placed (the picker offers a global item
+// only where its section is allowed).
+import { heroSchema } from "@/components/sections/Hero.schema";
+import { pageHeroSchema } from "@/components/sections/PageHero.schema";
+import { imageTextSchema } from "@/components/sections/ImageText.schema";
+import { pointsSchema } from "@/components/sections/Points.schema";
+import { favouriteArticlesSchema } from "@/components/sections/FavouriteArticles.schema";
+import { peopleSchema } from "@/components/sections/People.schema";
+import { quoteSchema } from "@/components/sections/Quote.schema";
+import { headerSchema } from "@/components/sections/Header.schema";
+import { footerSchema } from "@/components/sections/Footer.schema";
+
+export const sections = [heroSchema, pageHeroSchema, imageTextSchema, pointsSchema, favouriteArticlesSchema, peopleSchema, quoteSchema, headerSchema, footerSchema];

package/templates/astro-lorem-intl/src/smoodly/toolsets.ts

@@ -0,0 +1,16 @@
+// Toolsets are values, not registrations: a richtext field imports one.
+// `article` is the long-form set — the default marks and blocks plus body
+// images and the two elements. Elements are embedded by value; the
+// config must also register them (defineConfig checks). Relative imports
+// on purpose: collections.ts pulls this file into create-smoodly-app's
+// template build, which runs outside the app where the `@/` alias has
+// no mapping.
+import { smoodly } from "smoodly";
+import { calloutSchema } from "../components/elements/Callout.schema";
+import { ctaSchema } from "../components/elements/Cta.schema";
+
+export const article = smoodly.toolset({
+  marks: ["bold", "italic", "link"],
+  nodes: ["h2", "h3", "h4", "bulletList", "orderedList", "blockquote", "image"],
+  elements: [calloutSchema, ctaSchema],
+});

package/templates/astro-lorem-intl/src/strings.ts

@@ -0,0 +1,17 @@
+// examples/astro/src/strings.ts
+// The site's own UI strings in the page's language — what a view says that is not content: "All articles",
+// "min read". The messages are plain JSON under messages/; this seam reads them with no i18n library behind it.
+/// <reference types="vite/client" />
+import en from "@/messages/en.json";
+
+// Every messages/*.json, keyed by its file name: a locale the installer added (messages/de.json) is read with no edit here.
+const files = import.meta.glob<Record<string, string>>("@/messages/*.json", { eager: true, import: "default" });
+const messages: Record<string, Record<string, string>> = Object.fromEntries(
+  Object.entries(files).map(([path, json]) => [path.slice(path.lastIndexOf("/") + 1, -".json".length), json]),
+);
+export type StringKey = keyof typeof en;
+
+export function ui(locale: string): { t: (key: StringKey, values?: Record<string, string | number>) => string } {
+  const m = messages[locale] ?? en;
+  return { t: (key, values = {}) => (m[key] ?? en[key]).replace(/\{(\w+)\}/g, (_, name: string) => String(values[name] ?? "")) };
+}