@crombolo/cli 0.13.2 → 0.14.4

package/templates/demo/harbourstone/files/css/site.css

@@ -162,6 +162,27 @@ main > article,
   color: var(--brass-deep);
 }
 
+/* The search box sits after the links, as small and quiet as they are. */
+.masthead__search input {
+  width: 9rem;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--card);
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.875rem;
+  transition:
+    border-color var(--ease),
+    width var(--ease);
+}
+
+.masthead__search input:focus-visible {
+  outline: none;
+  width: 13rem;
+  border-color: var(--brass);
+}
+
 .site-footer {
   margin-top: 5rem;
   border-top: 1px solid var(--line);
@@ -718,3 +739,95 @@ main > article,
     padding-block: 0;
   }
 }
+
+/* -------------------------------------------------------------- search */
+
+.search-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: stretch;
+  margin-top: 2rem;
+  max-width: 36rem;
+}
+
+.search-form input {
+  flex: 1;
+  min-width: 12rem;
+  padding: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--card);
+  color: var(--ink);
+  font: inherit;
+  font-size: 1rem;
+  transition: border-color var(--ease);
+}
+
+.search-form input:focus-visible {
+  outline: none;
+  border-color: var(--brass);
+}
+
+.search-form .button {
+  margin-top: 0;
+  background: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.search-results {
+  margin: 0;
+  padding: 0;
+  max-width: 44rem;
+  list-style: none;
+}
+
+.search-results li {
+  padding-block: 1.75rem;
+  border-top: 1px solid var(--line);
+}
+
+.search-results h2 {
+  margin: 0.5rem 0 0;
+  font-size: 1.5rem;
+}
+
+.search-results h2 a {
+  text-decoration: none;
+  transition: color var(--ease);
+}
+
+.search-results h2 a:hover {
+  color: var(--brass-deep);
+}
+
+.search-results p {
+  margin: 0.75rem 0 0;
+  color: var(--muted);
+}
+
+.search-results mark {
+  background: none;
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.search-pages {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  max-width: 44rem;
+  padding-top: 1.75rem;
+  border-top: 1px solid var(--line);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+nav.search-pages a {
+  color: var(--brass-deep);
+  text-decoration: none;
+}

package/templates/demo/harbourstone/files/schema/content-types/contact-page.toml

@@ -19,6 +19,7 @@ key = "753d8c52-4949-4e92-a76a-fa02da0fd199"
 alias = "eyebrow"
 name = "Eyebrow"
 type = "textstring"
+site-search = "low"
 
 [[tab.property]]
 key = "1e8f3a9d-5bdf-4a01-a6c7-cc4a055fae22"
@@ -26,6 +27,7 @@ alias = "title"
 name = "Title"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "cf4561c0-82bb-4ad5-9f88-bd3fbd210b7c"

package/templates/demo/harbourstone/files/schema/content-types/content-page.toml

@@ -17,6 +17,7 @@ alias = "eyebrow"
 name = "Eyebrow"
 description = "The small line above the heading"
 type = "textstring"
+site-search = "low"
 
 [[tab.property]]
 key = "4501d20d-3b78-40a4-97e4-dd25b2d8535a"
@@ -24,6 +25,7 @@ alias = "title"
 name = "Title"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "33199ac7-8128-4dc4-bae1-554b2a622447"

package/templates/demo/harbourstone/files/schema/content-types/expression.toml

@@ -16,6 +16,7 @@ alias = "title"
 name = "Title"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "25738367-ed14-4985-9843-04716417c88a"
@@ -24,6 +25,13 @@ name = "Kind"
 description = "House malt, Lightly peated, Sherry matured, Cask strength"
 type = "textstring"
 
+[[tab.property]]
+key = "96f868bf-a368-4457-843a-1f38accf6cc1"
+alias = "productType"
+name = "Product type"
+description = "What the bottling is, e.g. Whisky"
+type = "textstring"
+
 [[tab.property]]
 key = "f4238bf1-3d9d-4dbc-b6f4-9800e1dfdc79"
 alias = "summary"

package/templates/demo/harbourstone/files/schema/content-types/home-page.toml

@@ -5,7 +5,7 @@ name = "Home Page"
 description = "The site's landing page"
 icon = "icon-home"
 allow-at-root = true
-allow-children = ["contentPage", "whiskyList", "contactPage"]
+allow-children = ["contentPage", "whiskyList", "contactPage", "searchPage"]
 components = ["pages/homePage"]
 default-component = "pages/homePage"
 
@@ -18,6 +18,7 @@ alias = "eyebrow"
 name = "Eyebrow"
 description = "The small line above the heading"
 type = "textstring"
+site-search = "low"
 
 [[tab.property]]
 key = "be74a0df-3e9d-47f3-b60e-778a89682a80"
@@ -26,6 +27,7 @@ name = "Title"
 description = "Shown as the page heading"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "a540c93a-228b-49f6-931a-be1b986bedd1"
@@ -46,6 +48,7 @@ alias = "heroCtaLabel"
 name = "Hero button"
 description = "Links to the range. Leave empty for no button."
 type = "textstring"
+site-search = false
 
 [[tab]]
 name = "House style"
@@ -102,3 +105,4 @@ alias = "rangeCtaLabel"
 name = "Button"
 description = "Links to the range. Leave empty for no button."
 type = "textstring"
+site-search = false

package/templates/demo/harbourstone/files/schema/content-types/search-page.toml

@@ -0,0 +1,33 @@
+[content-type]
+key = "4308082e-5024-47fc-950d-1ee93a3e304f"
+alias = "searchPage"
+name = "Search Page"
+description = "Lists the pages matching what a visitor searched for"
+icon = "icon-search"
+components = ["pages/searchPage"]
+default-component = "pages/searchPage"
+site-search = false
+
+[[tab]]
+name = "Header"
+
+[[tab.property]]
+key = "3a5d2f03-8bf6-41e2-9971-3848df983f0a"
+alias = "eyebrow"
+name = "Eyebrow"
+description = "The small line above the heading"
+type = "textstring"
+
+[[tab.property]]
+key = "e5be09c2-12bd-4647-a6c9-2549459d97b4"
+alias = "title"
+name = "Title"
+type = "textstring"
+mandatory = true
+
+[[tab.property]]
+key = "16eab79f-e753-48ca-a3f8-7e326a3f513f"
+alias = "standfirst"
+name = "Standfirst"
+description = "A sentence under the heading, shown before anyone has searched"
+type = "textarea"

package/templates/demo/harbourstone/files/schema/content-types/whisky-list.toml

@@ -19,6 +19,7 @@ key = "13785a42-6d0a-4152-89ec-c765db766547"
 alias = "eyebrow"
 name = "Eyebrow"
 type = "textstring"
+site-search = "low"
 
 [[tab.property]]
 key = "727804c0-7d4a-43d9-a473-71c9e27397c0"
@@ -26,6 +27,7 @@ alias = "title"
 name = "Title"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "9c83bcea-a70e-4a3f-8185-ad04ddec55f1"

package/templates/starter/bundle/content/bundle.json

@@ -3,19 +3,20 @@
   "id": "da9fd74e-b964-44b4-8d61-afa7f65a28d2",
   "createdAt": "2026-10-01T00:00:00.000Z",
   "createdBy": "bun run build:template",
-  "integrity": "sha256-3ef21d4b047d85bfef8aeaac90255348bf636ba6ff3c0d0e155a06a2225269de",
+  "integrity": "sha256-c8b50fa21bb3bed8ecf30380427ef65894dafb97734e9bf17ed465080cba7866",
   "snapshot": "published",
   "provenance": {
     "siteName": "Starter",
     "schemaVersion": "1.0.0",
     "schemaRevision": "0",
-    "schemaHash": "81d3ebeb2c46ec1a17f0bf253e1bf711c47390ac49eb3f32a60b23e3ace89b16"
+    "schemaHash": "1d47f00fd4feb3085e530673fceb33320ddb1c604fbb385c73e631eaace62a73"
   },
   "selector": {
     "roots": [
       "64d95359-d91a-4050-b440-3e5124a74999",
       "634dd948-cf83-4cad-9b7b-7c938b33da76",
-      "d2997ebb-36ca-47cb-bbc8-31fefca787c0"
+      "d2997ebb-36ca-47cb-bbc8-31fefca787c0",
+      "c720ef2a-b5c8-48ec-a504-065e8188d4aa"
     ],
     "descendants": true,
     "asGiven": [
@@ -23,12 +24,13 @@
     ]
   },
   "counts": {
-    "document": 3
+    "document": 4
   },
   "dependencies": {
     "carried": [
       "634dd948-cf83-4cad-9b7b-7c938b33da76",
       "64d95359-d91a-4050-b440-3e5124a74999",
+      "c720ef2a-b5c8-48ec-a504-065e8188d4aa",
       "d2997ebb-36ca-47cb-bbc8-31fefca787c0"
     ],
     "expected": [],
@@ -37,10 +39,15 @@
         {
           "key": "8491ffa4-9b2f-48b0-a3c0-f40c1034216e",
           "alias": "contentPage"
+        },
+        {
+          "key": "938c7f88-8df2-45d2-a4a2-49ecb3e68db7",
+          "alias": "searchPage"
         }
       ],
       "components": [
-        "pages/contentPage"
+        "pages/contentPage",
+        "pages/searchPage"
       ],
       "languages": []
     }

package/templates/starter/bundle/content/nodes/c720ef2a-b5c8-48ec-a504-065e8188d4aa.json

@@ -0,0 +1,28 @@
+{
+  "key": "c720ef2a-b5c8-48ec-a504-065e8188d4aa",
+  "kind": "document",
+  "contentType": {
+    "key": "938c7f88-8df2-45d2-a4a2-49ecb3e68db7",
+    "alias": "searchPage"
+  },
+  "parent": "64d95359-d91a-4050-b440-3e5124a74999",
+  "sortOrder": 2,
+  "template": "pages/searchPage",
+  "variants": [
+    {
+      "culture": null,
+      "segment": null,
+      "name": "Search",
+      "published": true
+    }
+  ],
+  "values": [
+    {
+      "property": "title",
+      "culture": null,
+      "segment": null,
+      "editor": "Umbraco.TextBox",
+      "value": "Search"
+    }
+  ]
+}

package/templates/starter/bundle/package.json

@@ -6,7 +6,7 @@
     "content"
   ],
   "peerDependencies": {
-    "@crombolo/crombolo": ">=0.13.2"
+    "@crombolo/crombolo": ">=0.14.4"
   },
   "crombolo": {
     "id": "starter",

package/templates/starter/files/components/pages/searchPage.tsx

@@ -0,0 +1,57 @@
+import { type PageProps, search } from '@crombolo/crombolo'
+import { Layout } from '../shared/layout.tsx'
+
+const PER_PAGE = 10
+
+/** The pages matching `?q=`, best first, ten at a time, each with the text around the match. */
+export default async function SearchPage(props: PageProps) {
+  const { model, request } = props
+  const url = new URL(request.url)
+  const query = url.searchParams.get('q')?.trim() ?? ''
+  const page = Math.max(1, Number.parseInt(url.searchParams.get('page') ?? '1', 10) || 1)
+  const results = query
+    ? await search(query, { skip: (page - 1) * PER_PAGE, take: PER_PAGE })
+    : { total: 0, items: [] }
+  const pages = Math.ceil(results.total / PER_PAGE)
+  const link = (n: number) => `${model.url}?q=${encodeURIComponent(query)}&page=${n}`
+
+  return (
+    <Layout {...props}>
+      <h1>{model.text('title') || model.name}</h1>
+      <search>
+        <form class="search-form" action={model.url} method="get">
+          <input type="search" name="q" value={query} aria-label="Search the site" />
+          <button type="submit">Search</button>
+        </form>
+      </search>
+      {query ? (
+        <p class="search-summary">
+          {results.total === 0
+            ? `Nothing matches “${query}”.`
+            : `${results.total} ${results.total === 1 ? 'page matches' : 'pages match'} “${query}”.`}
+        </p>
+      ) : null}
+      <ol class="search-results">
+        {results.items.map((item) => (
+          <li>
+            <a href={item.url}>{item.content.text('title') || item.name}</a>
+            <p>
+              {item.excerpt.map((segment) =>
+                segment.match ? <mark>{segment.text}</mark> : segment.text,
+              )}
+            </p>
+          </li>
+        ))}
+      </ol>
+      {pages > 1 ? (
+        <nav class="search-pages" aria-label="Search results pages">
+          {page > 1 ? <a href={link(page - 1)}>Previous</a> : null}
+          <span>
+            Page {page} of {pages}
+          </span>
+          {page < pages ? <a href={link(page + 1)}>Next</a> : null}
+        </nav>
+      ) : null}
+    </Layout>
+  )
+}

package/templates/starter/files/components/shared/site-header.tsx

@@ -2,7 +2,7 @@ import type { Navigation, PublishedContent } from '@crombolo/crombolo'
 
 /**
  * The site name, from the config, and the primary nav: the home page followed by its children, so
- * adding a page in the backoffice adds it here.
+ * adding a page in the backoffice adds it here. A Search Page among them is the search box instead.
  */
 export function SiteHeader({
   model,
@@ -16,7 +16,9 @@ export function SiteHeader({
   const home = nav.root()[0]
   if (!home) return null
   const ancestry = model.path.split(',')
-  const links = [home, ...nav.children(home, { visibleOnly: true })]
+  const children = nav.children(home, { visibleOnly: true })
+  const searchPage = children.find((child) => child.contentType.alias === 'searchPage')
+  const links = [home, ...children.filter((child) => child !== searchPage)]
   return (
     <header class="site-header">
       <div class="container site-header__inner">
@@ -34,6 +36,13 @@ export function SiteHeader({
             )
           })}
         </nav>
+        {searchPage ? (
+          <search>
+            <form class="site-search" action={searchPage.url} method="get">
+              <input type="search" name="q" placeholder="Search" aria-label="Search the site" />
+            </form>
+          </search>
+        ) : null}
       </div>
     </header>
   )

package/templates/starter/files/css/site.css

@@ -75,6 +75,72 @@ main {
   font-weight: 600;
 }
 
+.site-search input,
+.search-form input {
+  font: inherit;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+}
+
+.search-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.search-form input {
+  flex: 1;
+  max-width: 32rem;
+}
+
+.search-form button {
+  font: inherit;
+  padding: 0.4rem 1rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+}
+
+.search-summary {
+  color: var(--muted);
+}
+
+.search-results {
+  list-style: none;
+  padding: 0;
+}
+
+.search-results li {
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.search-results li > a {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.search-results p {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+}
+
+.search-results mark {
+  background: none;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.search-pages {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  margin-top: 1.5rem;
+}
+
 h1 {
   font-size: 2.25rem;
   line-height: 1.2;

package/templates/starter/files/schema/content-types/content-page.toml

@@ -5,7 +5,7 @@ name = "Content Page"
 description = "A page with a main column and a sidebar"
 icon = "icon-document"
 allow-at-root = true
-allow-children = ["contentPage"]
+allow-children = ["contentPage", "searchPage"]
 compositions = ["seoFields"]
 components = ["pages/contentPage"]
 default-component = "pages/contentPage"
@@ -20,6 +20,7 @@ name = "Title"
 description = "Shown as the page heading"
 type = "textstring"
 mandatory = true
+site-search = "high"
 
 [[tab.property]]
 key = "7028eeb8-9739-4cc9-b3e1-8b424dd1e929"
@@ -42,6 +43,7 @@ key = "d049eba5-ae38-4fe9-9b05-64d1fa50b35e"
 alias = "sidebarHeading"
 name = "Heading"
 type = "textstring"
+site-search = "low"
 
 [[tab.property]]
 key = "fff4d170-e192-419a-9490-59affd2f6148"
@@ -49,3 +51,4 @@ alias = "sidebarText"
 name = "Text"
 description = "Leave empty for a single-column page"
 type = "richtext"
+site-search = "low"

package/templates/starter/files/schema/content-types/search-page.toml

@@ -0,0 +1,21 @@
+[content-type]
+key = "938c7f88-8df2-45d2-a4a2-49ecb3e68db7"
+alias = "searchPage"
+name = "Search Page"
+description = "Lists the pages matching what a visitor searched for"
+icon = "icon-search"
+compositions = ["seoFields"]
+components = ["pages/searchPage"]
+default-component = "pages/searchPage"
+site-search = false
+
+[[tab]]
+name = "Content"
+
+[[tab.property]]
+key = "324e2bbc-2c0e-4984-a5d0-37032a5bec74"
+alias = "title"
+name = "Title"
+description = "Shown as the page heading"
+type = "textstring"
+mandatory = true