create-smoodly-app 0.0.7 → 0.0.9

package/templates/next/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/components/sections/Footer.tsx

@@ -0,0 +1,69 @@
+import { f, smoodly, type Props } from "smoodly";
+
+// 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 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.",
+  },
+});
+
+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} 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>
+  );
+}
+
+export const Footer = smoodly.section(footerSchema, FooterView);

package/templates/next/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);

package/templates/next/components/sections/Hero.tsx

@@ -1,22 +1,47 @@
 import { f, smoodly, type Props } from "smoodly";
 
+// The home page opener: kicker, heading, text, up to two buttons and a
+// portrait photo. Home locks it (`z.locked(Hero)`): 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: {
-    heading: f.text(),
     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(),
   },
-  styles: {
-    tone: f.select(["light", "dark"]).default("light"),
+  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" }],
+    image: { url: "/images/hero_image.jpg", alt: "Office interior" },
   },
 });
 
-function HeroView({ heading, kicker, styles }: Props<typeof heroSchema>) {
+function HeroView({ kicker, heading, text, buttons, image, styles }: Props<typeof heroSchema>) {
   return (
-    <smoodly.Section styles={styles}>
-      {kicker ? <p>{kicker}</p> : null}
-      <h1>{heading}</h1>
+    <smoodly.Section styles={styles} className="hero">
+      <div className="container hero__grid">
+        <div className="hero__copy">
+          {kicker && <p className="kicker">{kicker}</p>}
+          <h1 className="hero__heading">{heading}</h1>
+          <p className="hero__text">{text}</p>
+          {buttons?.length > 0 && (
+            <div className="hero__buttons">
+              {buttons.map((b, i) => (
+                <a key={i} className={i === 0 ? "button" : "button button--outline"} href={b.href}>{b.label}</a>
+              ))}
+            </div>
+          )}
+        </div>
+        {image?.url && <img className="hero__image" src={image.url} alt={image.alt ?? ""} />}
+      </div>
     </smoodly.Section>
   );
 }

package/templates/next/components/sections/ImageText.tsx

@@ -0,0 +1,59 @@
+import { f, RichText, smoodly, type Props } from "smoodly";
+
+// A photo beside a heading and richtext, the photo on either side (a
+// style, not a field: styles 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().optional(),
+    heading: f.text(),
+    text: f.richtext(),
+    link: f.object({ label: f.text(), href: f.link() }).optional(),
+  },
+  styles: {
+    imageSide: f.select(["left", "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." }] }],
+    },
+  },
+});
+
+function ImageTextView({ image, heading, text, link, styles }: Props<typeof imageTextSchema>) {
+  const body = (
+    <>
+      <div className="prose"><RichText doc={text} /></div>
+      {link?.href && <a className="link-accent" href={link.href}>{link.label}</a>}
+    </>
+  );
+  return (
+    <smoodly.Section styles={styles} className="image-text">
+      <div className="container image-text__grid">
+        {image?.url ? (
+          <>
+            <img className="image-text__image" src={image.url} alt={image.alt ?? ""} />
+            <div className="image-text__copy">
+              <h2 className="h2">{heading}</h2>
+              {body}
+            </div>
+          </>
+        ) : (
+          <>
+            <h2 className="h2">{heading}</h2>
+            <div className="image-text__copy">{body}</div>
+          </>
+        )}
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const ImageText = smoodly.section(imageTextSchema, ImageTextView);

package/templates/next/components/sections/PageHero.tsx

@@ -0,0 +1,38 @@
+import { f, smoodly, type Props } 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().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.",
+  },
+});
+
+function PageHeroView({ kicker, heading, text, image, styles }: Props<typeof pageHeroSchema>) {
+  return (
+    <smoodly.Section styles={styles} className="page-hero">
+      <div className="container page-hero__inner">
+        <div className="page-hero__copy">
+          {kicker && <p className="kicker">{kicker}</p>}
+          <h1 className="page-hero__heading">{heading}</h1>
+          <p className="page-hero__text">{text}</p>
+        </div>
+        {image?.url && <img className="page-hero__image" src={image.url} alt={image.alt ?? ""} />}
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const PageHero = smoodly.section(pageHeroSchema, PageHeroView);

package/templates/next/components/sections/People.tsx

@@ -0,0 +1,36 @@
+import { f, smoodly, type Props } 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: [] },
+});
+
+function PeopleView({ heading, people: persons, styles }: Props<typeof peopleSchema>) {
+  return (
+    <smoodly.Section styles={styles} className="people">
+      <div className="container">
+        <h2 className="h2">{heading}</h2>
+        <div className="people__grid">
+          {(persons ?? []).filter(Boolean).map((person, i) => (
+            <div key={i} className="person">
+              <span className="person__mark" aria-hidden="true">{person.name?.charAt(0)}</span>
+              <span className="person__name">{person.name}</span>
+              <span className="person__role">{person.role}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const People = smoodly.section(peopleSchema, PeopleView);

package/templates/next/components/sections/Points.tsx

@@ -0,0 +1,50 @@
+import { f, smoodly, type Props } 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(["circle", "square", "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." }],
+  },
+});
+
+const ICONS = {
+  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" />,
+};
+
+function PointsView({ heading, points, styles }: Props<typeof pointsSchema>) {
+  return (
+    <smoodly.Section styles={styles} className="points">
+      <div className="container">
+        <h2 className="h2">{heading}</h2>
+        <div className="points__grid">
+          {(points ?? []).map((point, i) => (
+            <div key={i} className="point">
+              <svg className="point__icon" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5">
+                {ICONS[point.icon] ?? ICONS.circle}
+              </svg>
+              <h3 className="point__heading">{point.heading}</h3>
+              <p className="point__text">{point.text}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const Points = smoodly.section(pointsSchema, PointsView);

package/templates/next/components/sections/Quote.tsx

@@ -0,0 +1,33 @@
+import { f, smoodly, type Props } from "smoodly";
+
+// A pull quote. Registered as a shared item (smoodly/shared.ts): one row
+// edited under Shared content, placed on pages from the "+" picker's
+// Shared group as a linked node. The body zones also list it, because
+// the picker offers a shared 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(),
+  },
+  sample: {
+    text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.",
+    attribution: "Jane Doe, Founder",
+  },
+});
+
+function QuoteView({ text, attribution, styles }: Props<typeof quoteSchema>) {
+  return (
+    <smoodly.Section styles={styles} className="quote">
+      <div className="quote__inner">
+        <blockquote className="quote__text">“{text}”</blockquote>
+        <p className="quote__attribution">{attribution}</p>
+      </div>
+    </smoodly.Section>
+  );
+}
+
+export const Quote = smoodly.section(quoteSchema, QuoteView);

package/templates/next/components/strings.ts

@@ -0,0 +1,23 @@
+// The one seam for the site's own UI strings and the request locale —
+// what a view says that is not content: "All articles", "min read",
+// "Related articles". A single-language site has one locale and one
+// message map, so no i18n library sits behind this: it reads
+// messages/en.json directly, and `url` is the identity because there is
+// no locale prefix to add. (The multilingual scaffold's copy reads
+// next-intl instead.)
+import en from "@/messages/en.json";
+
+export type StringKey = keyof typeof en;
+export type UI = {
+  locale: string;
+  t: (key: StringKey, values?: Record<string, string | number>) => string;
+  url: (path: string) => string;
+};
+
+export async function ui(): Promise<UI> {
+  return {
+    locale: "en",
+    t: (key, values = {}) => en[key].replace(/\{(\w+)\}/g, (_, name: string) => String(values[name] ?? "")),
+    url: (path) => path,
+  };
+}

package/templates/next/messages/en.json

@@ -0,0 +1,5 @@
+{
+  "allArticles": "All articles",
+  "relatedArticles": "Related articles",
+  "minRead": "{minutes} min read"
+}

package/templates/next/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "seed": "tsx scripts/seed.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -13,12 +14,14 @@
     "next": "^16.3.4",
     "react": "^19",
     "react-dom": "^19",
-    "smoodly": "0.0.7"
+    "smoodly": "0.0.9"
   },
   "devDependencies": {
+    "@next/env": "^16.3.4",
     "@types/node": "^26.4.1",
     "@types/react": "^19",
     "@types/react-dom": "^19.2.5",
+    "tsx": "^4",
     "typescript": "^5"
   }
 }