@crombolo/cli 0.0.0-stage → 0.10.0

package/templates/demo/harbourstone/bundle/content/nodes/f36dd4a9-927c-4ca3-a790-c9c859ac7302.json

@@ -0,0 +1,35 @@
+{
+  "key": "f36dd4a9-927c-4ca3-a790-c9c859ac7302",
+  "kind": "element",
+  "contentType": {
+    "key": "55138391-faf2-4795-9ed6-43d581d350a4",
+    "alias": "tastingNote"
+  },
+  "parent": null,
+  "sortOrder": 16,
+  "template": null,
+  "variants": [
+    {
+      "culture": null,
+      "segment": null,
+      "name": "Finish — Dry and long. Tannin held in…",
+      "published": true
+    }
+  ],
+  "values": [
+    {
+      "property": "aspect",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.TextBox",
+      "value": "Finish"
+    },
+    {
+      "property": "note",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.TextArea",
+      "value": "Dry and long. Tannin held in check by brine."
+    }
+  ]
+}

package/templates/demo/harbourstone/bundle/content/nodes/fd337567-df67-41ca-ae94-9d84d8d6042f.json

@@ -0,0 +1,60 @@
+{
+  "key": "fd337567-df67-41ca-ae94-9d84d8d6042f",
+  "kind": "media",
+  "contentType": {
+    "key": "cc07b313-0843-4aa8-bbda-871c8da728c8",
+    "alias": "Image"
+  },
+  "parent": null,
+  "sortOrder": 2,
+  "template": null,
+  "variants": [
+    {
+      "culture": null,
+      "segment": null,
+      "name": "Casks in the sea-facing warehouse",
+      "published": false
+    }
+  ],
+  "values": [
+    {
+      "property": "umbracoBytes",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.Label",
+      "value": "113141"
+    },
+    {
+      "property": "umbracoExtension",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.Label",
+      "value": "jpg"
+    },
+    {
+      "property": "umbracoFile",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.ImageCropper",
+      "value": {
+        "src": "/media/fd337567/casks-in-the-sea-facing-warehouse.jpg",
+        "crops": [],
+        "focalPoint": null
+      }
+    },
+    {
+      "property": "umbracoHeight",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.Label",
+      "value": 800
+    },
+    {
+      "property": "umbracoWidth",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.Label",
+      "value": 1200
+    }
+  ]
+}

package/templates/demo/harbourstone/bundle/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "demo-harbourstone",
+  "version": "1.0.0",
+  "private": true,
+  "files": [
+    "content"
+  ],
+  "peerDependencies": {
+    "@crombolo/crombolo": "^0.10.0"
+  },
+  "crombolo": {
+    "id": "demo-harbourstone",
+    "name": "Harbourstone Distillery",
+    "content": "content"
+  }
+}

package/templates/demo/harbourstone/files/components/pages/contactPage.tsx

@@ -0,0 +1,36 @@
+import { Form, type PageProps, type SchemaForm } from '@crombolo/crombolo'
+import { Layout } from '../shared/layout.tsx'
+import { Eyebrow, PageHeader } from '../shared/section-intro.tsx'
+
+export default function ContactPage({ model, nav, submission }: PageProps) {
+  // A `formPicker` property arrives as the definition itself, so there is
+  // nothing to look up here. `value()` is untyped — `crombolo generate` is what
+  // types a model — so the cast is what a hand-written view pays.
+  //
+  // `submission` is what just happened to a post on this page: passing it
+  // through is what makes a refused submission come back with its errors inside
+  // this layout rather than on a bare page.
+  const form = model.value('enquiryForm') as SchemaForm | null
+  const image = model.media('asideImage')[0]
+  return (
+    <Layout model={model} nav={nav}>
+      <PageHeader model={model} />
+      <section class="contact">
+        <div class="contact__form">
+          {form ? <Form form={form} submission={submission} /> : null}
+        </div>
+        <aside class="contact__aside">
+          <Eyebrow>{model.text('asideEyebrow')}</Eyebrow>
+          <h2>{model.text('asideHeading')}</h2>
+          <div
+            class="prose"
+            setInnerHTML={{ __html: model.text('asideBody'), dangerously: true }}
+          />
+          {image ? (
+            <img src={image.cropUrl({ width: 1200, height: 800 })} alt={image.name} />
+          ) : null}
+        </aside>
+      </section>
+    </Layout>
+  )
+}

package/templates/demo/harbourstone/files/components/pages/contentPage.tsx

@@ -0,0 +1,54 @@
+import type { PageProps } from '@crombolo/crombolo'
+import { HighlightRows, highlightsOf } from '../shared/highlights.tsx'
+import { Layout } from '../shared/layout.tsx'
+import { PageHeader, SectionIntro } from '../shared/section-intro.tsx'
+
+export default function ContentPage({ model, nav }: PageProps) {
+  const image = model.media('heroImage')[0]
+  const highlights = highlightsOf(model, 'highlights')
+  const highlightsImage = model.media('highlightsImage')[0]
+  return (
+    <Layout model={model} nav={nav}>
+      <PageHeader model={model} />
+
+      <section class="split split--image-first">
+        {image ? (
+          <img
+            class="split__image"
+            src={image.cropUrl({ width: 1200, height: 800 })}
+            alt={image.name}
+          />
+        ) : null}
+        <div>
+          <SectionIntro
+            eyebrow={model.text('sectionEyebrow')}
+            heading={model.text('sectionHeading')}
+          />
+          <div class="prose" setInnerHTML={{ __html: model.text('bodyText'), dangerously: true }} />
+        </div>
+      </section>
+
+      {highlights.length > 0 ? (
+        <section class="band band--dark">
+          <div class="split">
+            <div>
+              <SectionIntro
+                eyebrow={model.text('highlightsEyebrow')}
+                heading={model.text('highlightsHeading')}
+                tone="light"
+              />
+              <HighlightRows items={highlights} />
+            </div>
+            {highlightsImage ? (
+              <img
+                class="split__image"
+                src={highlightsImage.cropUrl({ width: 1200, height: 800 })}
+                alt={highlightsImage.name}
+              />
+            ) : null}
+          </div>
+        </section>
+      ) : null}
+    </Layout>
+  )
+}

package/templates/demo/harbourstone/files/components/pages/expression.tsx

@@ -0,0 +1,33 @@
+import type { PageProps, PublishedElement } from '@crombolo/crombolo'
+import { specOf, TastingNotes } from '../shared/bottling.tsx'
+import { Layout } from '../shared/layout.tsx'
+import { Eyebrow } from '../shared/section-intro.tsx'
+
+export default function Expression({ model, nav }: PageProps) {
+  const bottle = model.media('bottleImage')[0]
+  const notes = (model.value('tastingNotes') ?? []) as PublishedElement[]
+  const range = nav.parent(model)
+  return (
+    <Layout model={model} nav={nav}>
+      <article class="bottling">
+        <div class="bottling__image">
+          {bottle ? (
+            <img src={bottle.cropUrl({ width: 760, height: 1140 })} alt={bottle.name} />
+          ) : null}
+        </div>
+        <div class="bottling__text">
+          <Eyebrow>{specOf(model)}</Eyebrow>
+          <h1>{model.text('title')}</h1>
+          {model.hasValue('summary') ? <p class="standfirst">{model.text('summary')}</p> : null}
+          <div class="prose" setInnerHTML={{ __html: model.text('bodyText'), dangerously: true }} />
+          <TastingNotes notes={notes} />
+          {range ? (
+            <p class="back">
+              <a href={range.url}>Back to {range.text('title')}</a>
+            </p>
+          ) : null}
+        </div>
+      </article>
+    </Layout>
+  )
+}

package/templates/demo/harbourstone/files/components/pages/homePage.tsx

@@ -0,0 +1,71 @@
+import type { PageProps } from '@crombolo/crombolo'
+import { BottlingCard } from '../shared/bottling.tsx'
+import { Figures, highlightsOf } from '../shared/highlights.tsx'
+import { Layout } from '../shared/layout.tsx'
+import { Eyebrow, SectionIntro } from '../shared/section-intro.tsx'
+
+export default function HomePage({ model, nav }: PageProps) {
+  const hero = model.media('heroImage')[0]
+  const styleImage = model.media('styleImage')[0]
+  // The range is whichever child is the list, rather than a hard-coded path:
+  // rename or move it in the backoffice and these two sections follow.
+  const range = nav.children(model).find((child) => child.contentType.alias === 'whiskyList')
+  const bottlings = range ? nav.children(range) : []
+  return (
+    <Layout model={model} nav={nav}>
+      <section class="hero">
+        {hero ? (
+          <img
+            class="hero__image"
+            src={hero.cropUrl({ width: 1600, height: 900 })}
+            alt={hero.name}
+          />
+        ) : null}
+        <div class="hero__text">
+          <Eyebrow tone="light">{model.text('eyebrow')}</Eyebrow>
+          <h1>{model.text('title')}</h1>
+          <p class="strapline">{model.text('strapline')}</p>
+          {range && model.hasValue('heroCtaLabel') ? (
+            <a class="button button--light" href={range.url}>
+              {model.text('heroCtaLabel')}
+            </a>
+          ) : null}
+        </div>
+      </section>
+
+      <section class="split">
+        <div>
+          <SectionIntro eyebrow={model.text('styleEyebrow')} heading={model.text('styleHeading')} />
+          <div
+            class="prose"
+            setInnerHTML={{ __html: model.text('styleIntro'), dangerously: true }}
+          />
+          <Figures items={highlightsOf(model, 'stats')} />
+        </div>
+        {styleImage ? (
+          <img
+            class="split__image"
+            src={styleImage.cropUrl({ width: 1200, height: 800 })}
+            alt={styleImage.name}
+          />
+        ) : null}
+      </section>
+
+      {range ? (
+        <section class="band">
+          <SectionIntro eyebrow={model.text('rangeEyebrow')} heading={model.text('rangeHeading')} />
+          <ul class="bottlings bottlings--brief">
+            {bottlings.map((bottling) => (
+              <BottlingCard bottling={bottling} />
+            ))}
+          </ul>
+          {model.hasValue('rangeCtaLabel') ? (
+            <a class="button" href={range.url}>
+              {model.text('rangeCtaLabel')}
+            </a>
+          ) : null}
+        </section>
+      ) : null}
+    </Layout>
+  )
+}

package/templates/demo/harbourstone/files/components/pages/whiskyList.tsx

@@ -0,0 +1,19 @@
+import type { PageProps } from '@crombolo/crombolo'
+import { BottlingCard } from '../shared/bottling.tsx'
+import { Layout } from '../shared/layout.tsx'
+import { PageHeader } from '../shared/section-intro.tsx'
+
+export default function WhiskyList({ model, nav }: PageProps) {
+  return (
+    <Layout model={model} nav={nav}>
+      <PageHeader model={model} />
+      <section>
+        <ul class="bottlings">
+          {nav.children(model).map((bottling) => (
+            <BottlingCard bottling={bottling} detailed />
+          ))}
+        </ul>
+      </section>
+    </Layout>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/bottling.tsx

@@ -0,0 +1,59 @@
+import type { PublishedContent, PublishedElement } from '@crombolo/crombolo'
+
+/**
+ * The line over a bottling's name: kind, strength, and either an age or a
+ * batch. Composed here rather than typed into a field, so an editor who changes
+ * the age does not also have to remember to change a string that repeats it.
+ */
+export function specOf(bottling: PublishedContent): string {
+  const parts = [bottling.text('kind'), bottling.text('abv')]
+  if (bottling.hasValue('age')) parts.push(`${bottling.text('age')} years`)
+  else if (bottling.hasValue('batch')) parts.push(`Batch ${bottling.text('batch')}`)
+  return parts.filter(Boolean).join(' · ')
+}
+
+export function TastingNotes({ notes }: { notes: PublishedElement[] }) {
+  if (notes.length === 0) return null
+  return (
+    <dl class="tasting">
+      {notes.map((note) => (
+        <div>
+          <dt>{note.text('aspect')}</dt>
+          <dd>{note.text('note')}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/**
+ * One bottling, as it appears in a list. `detailed` is what the range page
+ * shows and the home page does not: the bottle itself and the tasting notes.
+ */
+export function BottlingCard({
+  bottling,
+  detailed,
+}: {
+  bottling: PublishedContent
+  detailed?: boolean
+}) {
+  const bottle = bottling.media('bottleImage')[0]
+  const notes = (bottling.value('tastingNotes') ?? []) as PublishedElement[]
+  return (
+    <li class="bottling-card">
+      {detailed && bottle ? (
+        <a class="bottling-card__image" href={bottling.url}>
+          <img src={bottle.cropUrl({ width: 760, height: 1140 })} alt={bottle.name} />
+        </a>
+      ) : null}
+      <div class="bottling-card__text">
+        <p class="eyebrow">{specOf(bottling)}</p>
+        <h3>
+          <a href={bottling.url}>{bottling.text('title')}</a>
+        </h3>
+        {bottling.hasValue('summary') ? <p>{bottling.text('summary')}</p> : null}
+        {detailed ? <TastingNotes notes={notes} /> : null}
+      </div>
+    </li>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/highlights.tsx

@@ -0,0 +1,39 @@
+import type { PublishedContent, PublishedElement } from '@crombolo/crombolo'
+
+/**
+ * An element picker always yields a list, as Umbraco's converter does, even
+ * where the data type allows a single pick.
+ */
+export function highlightsOf(model: PublishedContent, alias: string): PublishedElement[] {
+  return (model.value(alias) ?? []) as PublishedElement[]
+}
+
+/** The figures beside the house style: a heading set large, a line under it. */
+export function Figures({ items }: { items: PublishedElement[] }) {
+  if (items.length === 0) return null
+  return (
+    <dl class="figures">
+      {items.map((item) => (
+        <div>
+          <dt>{item.text('heading')}</dt>
+          <dd>{item.text('detail')}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}
+
+/** The same elements as a divided list: a short word, then the line beside it. */
+export function HighlightRows({ items }: { items: PublishedElement[] }) {
+  if (items.length === 0) return null
+  return (
+    <ul class="highlight-rows">
+      {items.map((item) => (
+        <li>
+          <span class="highlight-rows__heading">{item.text('heading')}</span>
+          <span>{item.text('detail')}</span>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/layout.tsx

@@ -0,0 +1,49 @@
+import type { Child, Navigation, PublishedContent } from '@crombolo/crombolo'
+import { SiteFooter } from './site-footer.tsx'
+import { SiteHeader } from './site-header.tsx'
+
+/**
+ * The shell every page shares. Nothing here is a template, because no document
+ * type names it — which is the only thing that decides, so `shared/` is a
+ * folder chosen for readers rather than a rule.
+ *
+ * The two faces come from Google Fonts rather than from files in this template:
+ * nothing binary ships, and deleting the two <link> tags is the whole cost of
+ * taking the third-party request out. `site.css` names a fallback for each, so
+ * a blocked request degrades to the system serif and sans rather than to
+ * nothing.
+ */
+export function Layout({
+  model,
+  nav,
+  children,
+}: {
+  model: PublishedContent
+  nav: Navigation
+  children?: Child
+}) {
+  const home = nav.root()[0]
+  const siteName = home?.text('title') || 'Harbourstone'
+  const heading = model.text('title') || model.name
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{home && home.key !== model.key ? `${heading} — ${siteName}` : siteName}</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Outfit:wght@300;400;500&display=swap"
+        />
+        <link rel="stylesheet" href="/css/site.css" />
+      </head>
+      <body>
+        <SiteHeader model={model} nav={nav} />
+        <main>{children}</main>
+        <SiteFooter />
+      </body>
+    </html>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/section-intro.tsx

@@ -0,0 +1,40 @@
+import type { Child, PublishedContent } from '@crombolo/crombolo'
+
+/** The small letter-spaced line that sits above every heading on this site. */
+export function Eyebrow({ children, tone }: { children?: Child; tone?: 'light' }) {
+  if (!children) return null
+  return <p class={tone === 'light' ? 'eyebrow eyebrow--light' : 'eyebrow'}>{children}</p>
+}
+
+/**
+ * The header at the top of a page: eyebrow, title, standfirst. Reads the three
+ * properties by the aliases every page type here shares, so a new page type
+ * gets the same header by naming its properties the same way.
+ */
+export function PageHeader({ model }: { model: PublishedContent }) {
+  return (
+    <header class="page-header">
+      <Eyebrow>{model.text('eyebrow')}</Eyebrow>
+      <h1>{model.text('title')}</h1>
+      {model.hasValue('standfirst') ? <p class="standfirst">{model.text('standfirst')}</p> : null}
+    </header>
+  )
+}
+
+/** An eyebrow and a heading, for a section inside a page. */
+export function SectionIntro({
+  eyebrow,
+  heading,
+  tone,
+}: {
+  eyebrow: string
+  heading: string
+  tone?: 'light'
+}) {
+  return (
+    <>
+      <Eyebrow tone={tone}>{eyebrow}</Eyebrow>
+      {heading ? <h2>{heading}</h2> : null}
+    </>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/site-footer.tsx

@@ -0,0 +1,14 @@
+import { Wordmark } from './site-header.tsx'
+
+export function SiteFooter() {
+  return (
+    <footer class="site-footer">
+      <div class="site-footer__inner">
+        <p>
+          <Wordmark /> Distillery · Cove of Stenwick, Caithness
+        </p>
+        <p>A demonstration site. Nothing here is real, and nothing here is for sale.</p>
+      </div>
+    </footer>
+  )
+}

package/templates/demo/harbourstone/files/components/shared/site-header.tsx

@@ -0,0 +1,57 @@
+import type { Navigation, PublishedContent } from '@crombolo/crombolo'
+
+/**
+ * The masthead and the primary nav.
+ *
+ * The nav is the home page followed by its children, labelled with each node's
+ * name rather than its title — the About page's title is a sentence, and a nav
+ * wants a word. Adding a page in the backoffice adds it here; there is no list
+ * of links to keep in step.
+ *
+ * There is no hamburger because there is no client-side JavaScript on this
+ * site: below the breakpoint the links wrap under the wordmark instead, which
+ * `site.css` does with flex-wrap alone.
+ */
+export function SiteHeader({ model, nav }: { model: PublishedContent; nav: Navigation }) {
+  const home = nav.root()[0]
+  if (!home) return null
+  const ancestry = model.path.split(',')
+  const links = [home, ...nav.children(home)]
+  return (
+    <header class="masthead">
+      <div class="masthead__inner">
+        <a class="wordmark" href={home.url}>
+          <Wordmark />
+        </a>
+        <nav aria-label="Primary">
+          {links.map((link) => {
+            const here =
+              link.key === home.key ? model.key === home.key : ancestry.includes(String(link.id))
+            return (
+              <a
+                href={link.url}
+                class={here ? 'here' : undefined}
+                aria-current={here ? 'page' : undefined}
+              >
+                {link.key === home.key ? 'Home' : link.name}
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+    </header>
+  )
+}
+
+/**
+ * Written out rather than read from the home page's title: a wordmark is a mark
+ * with two colours in it, which makes it part of the design and not a value an
+ * editor should have to reproduce. The page title stays the editable one.
+ */
+export function Wordmark() {
+  return (
+    <>
+      Harbour<span>stone</span>
+    </>
+  )
+}