create-smoodly-app 0.0.44 → 0.0.46

package/templates/astro-blank/src/components/elements/Button.schema.ts

@@ -0,0 +1,22 @@
+import { f, smoodly } from "smoodly";
+
+// An Element: a small registered block editors insert inside richtext
+// (the `richtext` context). This one is a link styled as a button;
+// src/elements/button.astro is its view. To add another element, copy
+// both files, name the view after the schema, and list the schema in
+// src/smoodly/elements.ts and in the toolsets that may embed it
+// (src/smoodly/toolsets.ts).
+// Relative imports only in this file and in smoodly/toolsets.ts: the
+// template build imports them outside the app, where `@/` has no mapping.
+export const buttonSchema = smoodly.schema.element({
+  name: "button",
+  title: "Button",
+  icon: "→",
+  description: "A link styled as a button.",
+  contexts: ["richtext"],
+  fields: {
+    label: f.text().max(60),
+    href: f.link(),
+  },
+  sample: { label: "Read more", href: "/" },
+});

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

@@ -0,0 +1,17 @@
+import { smoodly, z } from "smoodly";
+import { textSchema } from "../sections/Text.schema";
+
+// A page type's schema: its zones and what each allows. Its view,
+// src/page-types/home.astro, places them with <Zone />. `slug` makes it fixed — one record
+// editors can neither delete nor duplicate — and the config's
+// homePageSlug maps that record to "/". The body is a freeform zone over
+// the section schemas listed here.
+export const homeSchema = smoodly.schema.page({
+  name: "home",
+  title: "Home",
+  slug: "home",
+  zones: {
+    body: z.freeform({ sections: [textSchema], custom: true }),
+  },
+  seo: true,
+});

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

@@ -0,0 +1,14 @@
+import { smoodly, z } from "smoodly";
+import { textSchema } from "../sections/Text.schema";
+
+// An open page type: no `slug`, so editors create as many as they like,
+// anywhere in the tree the config allows. src/page-types/page.astro is the view;
+// its `page` prop is where the page sits (title, path, ancestors, children).
+export const pageSchema = smoodly.schema.page({
+  name: "page",
+  title: "Page",
+  zones: {
+    body: z.freeform({ sections: [textSchema], custom: true }),
+  },
+  seo: true,
+});

package/templates/astro-blank/src/components/sections/Text.schema.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+import { text } from "@/smoodly/toolsets";
+
+// A section's schema: a title and a richtext body. Its view is
+// src/sections/text.astro. To add another section, copy both files, name the
+// view after the new schema, list the schema in src/smoodly/sections.ts
+// and allow it in a page type's zone (src/components/pages/*.schema.ts).
+// This file imports no component.
+export const textSchema = smoodly.schema.section({
+  name: "text",
+  title: "Text",
+  description: "A title and a body of text.",
+  fields: {
+    title: f.text(),
+    body: f.richtext({ toolset: text }),
+  },
+  settings: {
+    background: f.radio([{ value: "paper", label: "Paper" }, { value: "ink", label: "Ink" }]).default("paper"),
+  },
+  sample: {
+    title: "Hello",
+    body: { type: "doc", content: [{ type: "paragraph", content: [{ type: "text", text: "Write something here." }] }] },
+  },
+});

package/templates/astro-blank/src/elements/button.astro

@@ -0,0 +1,10 @@
+---
+// src/elements/button.astro — the view of the element named "button": a link styled as a button, inserted inside
+// richtext. An editor typed the href, so it goes through safeHref: a scheme the page must not carry renders no link.
+import { safeHref, type Props as SmoodlyProps } from "smoodly";
+import { buttonSchema } from "@/components/elements/Button.schema";
+
+type Props = SmoodlyProps<typeof buttonSchema>;
+const { label, href } = Astro.props;
+---
+<a class="button" href={safeHref(href)}>{label}</a>

package/templates/astro-blank/src/entry-pages/posts.astro

@@ -0,0 +1,23 @@
+---
+// src/entry-pages/posts.astro — the entry page of the collection "posts", served at /posts/<slug>. An entry page
+// is a file by the collection's name; it receives the entry as a read returns it, with its locale alternates.
+import type { EntryFields, EntryItem } from "smoodly";
+import { RichText } from "smoodly/astro/components";
+import type { PageHead } from "smoodly/astro/runtime";
+import type { posts } from "@/smoodly/collections";
+import Layout from "../layouts/Layout.astro";
+import LocaleNav from "../components/LocaleNav.astro";
+
+type Props = { entry: EntryItem<EntryFields<typeof posts>>; head: PageHead };
+const { entry, head } = Astro.props;
+const { locale, locales } = entry;
+const post = entry.fields;
+---
+<Layout head={head} locale={locale}>
+  <LocaleNav locale={locale} locales={locales} />
+  <article class="container prose">
+    <h1>{post.title}</h1>
+    {post.date && <p><time datetime={post.date}>{post.date.slice(0, 10)}</time></p>}
+    <RichText doc={post.body} />
+  </article>
+</Layout>

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

@@ -0,0 +1,25 @@
+---
+// src/layouts/Layout.astro — the site's own document: every page type and entry page renders inside it. The
+// `site` global item (src/smoodly/globals.ts) gives the title and the footer line, read as a live entry per
+// locale, null until published there. 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 type { PageHead } from "smoodly/astro/runtime";
+import "../styles/global.css";
+
+type Props = { head: PageHead; locale: string };
+const { head, locale } = Astro.props;
+const { entry: site } = await getLiveEntry("site", { locale });
+---
+<!doctype html>
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Head of={head} fallback={site?.data.fields.name ?? "Smoodly site"} />
+  </head>
+  <body>
+    <main><slot /></main>
+    {site && <footer class="container site-footer">{site.data.fields.name} · {site.data.fields.tagline}</footer>}
+  </body>
+</html>

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

@@ -0,0 +1,13 @@
+// src/live.config.ts — Smoodly's content as live collections: one loader per collection, global item and the pages,
+// from the package; this file only names them. A view reads with getLiveCollection / getLiveEntry from astro:content.
+import { defineLiveCollection } from "astro:content";
+import { entriesLoader, globalLoader, pageLoader, pageTreeLoader } from "smoodly/astro/content";
+import { posts } from "@/smoodly/collections";
+import { site } from "@/smoodly/globals";
+
+export const collections = {
+  pages: defineLiveCollection({ loader: pageLoader() }),
+  pageTree: defineLiveCollection({ loader: pageTreeLoader() }),
+  posts: defineLiveCollection({ loader: entriesLoader(posts) }),
+  site: defineLiveCollection({ loader: globalLoader(site) }),
+};

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

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

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

@@ -0,0 +1,15 @@
+---
+// src/page-types/page.astro — the view of the page type named "page", which editors create many of: one freeform body zone inside the layout.
+import type { PageContext } from "smoodly";
+import { Zone } from "smoodly/astro/components";
+import type { PageHead, ZoneContent } from "smoodly/astro/runtime";
+import Layout from "../layouts/Layout.astro";
+import LocaleNav from "../components/LocaleNav.astro";
+
+type Props = { page: PageContext; zones: Record<string, ZoneContent>; head: PageHead };
+const { page, zones, head } = Astro.props;
+---
+<Layout head={head} locale={page.locale}>
+  <LocaleNav locale={page.locale} locales={page.locales} />
+  <Zone of={zones.body} />
+</Layout>

package/templates/astro-blank/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-blank/src/sections/text.astro

@@ -0,0 +1,18 @@
+---
+// src/sections/text.astro — the view of the section named "text". <Section> renders the root element, Smoodly's
+// styles set inline and the node id; a setting the CSS reads — here `background` — is the view's own data
+// attribute. Marks tie the rendered elements to their fields, so the editor can select and edit them in place.
+import { smoodly, type Props as SmoodlyProps } from "smoodly";
+import { RichText, Section } from "smoodly/astro/components";
+import { textSchema } from "@/components/sections/Text.schema";
+
+type Props = SmoodlyProps<typeof textSchema>;
+const { title, body, settings, styles } = Astro.props;
+const m = smoodly.marks(textSchema);
+---
+<Section styles={styles} class="text" data-background={settings.background}>
+  <div class="container prose">
+    <h2 {...m.field("title")}>{title}</h2>
+    <div {...m.field("body")}><RichText doc={body} /></div>
+  </div>
+</Section>

package/templates/astro-blank/src/smoodly/collections.ts

@@ -0,0 +1,24 @@
+import { f, smoodly } from "smoodly";
+import { text } from "./toolsets";
+
+// A collection: structured content with its own admin list, served at
+// `path` by its entry page (src/entry-pages/posts.astro). Fields marked
+// .localized() are stored per locale; the rest are shared across
+// locales. To add a collection: copy this block, add it to
+// `collections`, run `npx smoodly migrate` and apply the file it writes
+// (supabase db push, or supabase migration up locally).
+export const posts = smoodly.collection({
+  name: "posts",
+  title: "Posts",
+  titleField: "title",
+  path: "posts",
+  order: { by: "date", direction: "desc" },
+  fields: {
+    title: f.text().localized(),
+    slug: f.slug({ from: "title" }),
+    date: f.date(),
+    body: f.richtext({ toolset: text }).localized(),
+  },
+});
+
+export const collections = [posts];

package/templates/astro-blank/src/smoodly/config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "smoodly";
+import { collections } from "./collections";
+import { sections } from "./sections";
+import { globals } from "./globals";
+import { elements } from "./elements";
+import { homeSchema } from "@/components/pages/Home.schema";
+import { pageSchema } from "@/components/pages/Page.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 and the CLI can load it
+// outside the app; the views are files by name under src/.
+export const config = defineConfig({
+  registry: {
+    sections,
+    elements,
+    collections,
+    globals,
+    // Page types. The entry page is a view: src/entry-pages/posts.astro.
+    pages: [homeSchema, pageSchema],
+  },
+  locales: { default: "en", supported: ["en"] },
+  // The record the site root serves.
+  homePageSlug: "home",
+  // Editors can nest pages three deep.
+  pages: { tree: { depth: 3 } },
+});

package/templates/astro-blank/src/smoodly/elements.ts

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

package/templates/astro-blank/src/smoodly/globals.ts

@@ -0,0 +1,18 @@
+// Global content: code-declared singletons, edited once under Globals
+// and read anywhere. `site` is an object item — fields code consumes;
+// the layout reads it as a live entry, getLiveEntry("site"): a layout
+// global: it comes with the page's own read. A visual item
+// (`section: someSectionSchema`) renders through a section instead.
+import { f, smoodly } from "smoodly";
+
+export const site = smoodly.global({
+  name: "site",
+  title: "Site",
+  fields: {
+    name: f.text(),
+    tagline: f.text().localized(),
+  },
+  layout: true,
+});
+
+export const globals = [site];

package/templates/astro-blank/src/smoodly/sections.ts

@@ -0,0 +1,5 @@
+// The section schemas the config registers; the views are
+// src/sections/<name>.astro files.
+import { textSchema } from "@/components/sections/Text.schema";
+
+export const sections = [textSchema];

package/templates/astro-blank/src/smoodly/toolsets.ts

@@ -0,0 +1,14 @@
+// Toolsets are values, not registrations: a richtext field names one.
+// `text` is the starter's one set — the default marks and block nodes,
+// plus the Button element. Elements are embedded by value; the config
+// must also register them (smoodly/elements.ts; defineConfig checks).
+// Relative imports on purpose: collections.ts pulls this file into
+// create-smoodly-app's template build, which runs outside the app.
+import { smoodly } from "smoodly";
+import { buttonSchema } from "../components/elements/Button.schema";
+
+export const text = smoodly.toolset({
+  marks: ["bold", "italic", "link"],
+  nodes: ["h2", "h3", "bulletList", "orderedList", "blockquote"],
+  elements: [buttonSchema],
+});

package/templates/astro-blank/src/styles/global.css

@@ -0,0 +1,57 @@
+/* The blank starter's one stylesheet: a reset, a system font, a
+   container, prose defaults, the button element, and the two backgrounds
+   the Text section's setting selects. The editor's Spacing & layout
+   steps (Smoodly's styles set, smoodly/config.ts) render inline through
+   the section wrapper and read the --space-* / --width-* variables.
+   Replace freely. */
+
+:root {
+  /* Smoodly's styles set reads these (smoodly/config.ts): editor steps become padding, width, alignment. */
+  --space-sm: 1.5rem; --space-md: 3rem; --space-lg: 4.5rem;
+  --width-narrow: 40rem; --width-wide: 90rem;
+
+  --paper: #ffffff;
+  --ink: #1a1a1a;
+  --muted: #666666;
+  --container: 720px;
+  --smd-gutter: 1rem; /* the custom section's rows share the container's side gutter */
+}
+@media (min-width: 768px) { :root { --space-sm: 2rem; --space-md: 4rem; --space-lg: 6rem; } }
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+main { flex: 1; }
+a { color: inherit; }
+
+/* The container reads the editor's width step; without one, the design's width. */
+.container { width: min(var(--smd-width, var(--container)), 100% - 2rem); margin-inline: auto; }
+
+/* The Text section: its own padding, and the background its setting selects. */
+.text { padding-block: 3rem; }
+[data-background="paper"] { background: var(--paper); color: var(--ink); }
+[data-background="ink"] { background: var(--ink); color: var(--paper); }
+
+.prose > * + *, .smd-col > * + * { margin-top: 1em; } /* the custom section's columns read like prose */
+.prose h1, .prose h2, .prose h3, .smd-col h1, .smd-col h2, .smd-col h3 { line-height: 1.2; }
+
+/* The Button element, inside richtext. */
+.button {
+  display: inline-block;
+  padding: 0.6em 1.2em;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.site-footer { padding-block: 2rem; color: var(--muted); font-size: 0.875rem; }
+.locales { display: flex; gap: 0.75rem; padding-block: 1rem; font-size: 0.875rem; }
+.locales a[aria-current="page"] { font-weight: 600; }