@janga/norna 0.7.9 → 0.7.11

package/starters/basic/site/theme.md

@@ -4,8 +4,6 @@
 # Active values below are ordinary YAML; this marked comment block is only help text.
 #
 # Available structure:
-# navigation:
-#   brand: site-wide brand/home text; defaults to the homepage title
 # layout:
 #   density: compact | normal | airy
 #   pageWidth: CSS length, e.g. 1180px
@@ -22,9 +20,12 @@
 #     finalSectionBottom:
 #       desktop: CSS length or clamp(), e.g. clamp(1.4rem, 3vw, 2.75rem)
 #       mobile: CSS length, e.g. 1.5rem
-#     bodyToImages:
-#       desktop: CSS length, e.g. 1.25rem
-#       mobile: CSS length, e.g. 1rem
+#     headingToBlock:
+#       desktop: CSS length, e.g. 0.75em
+#       mobile: CSS length, e.g. 0.7em
+#     blockGap:
+#       desktop: CSS length, e.g. 1.5em
+#       mobile: CSS length, e.g. 1.25em
 #     imageGap:
 #       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.8vw, 2rem)
 #       mobile: CSS length, e.g. 1.5rem
@@ -81,19 +82,11 @@
 #       lineHeight: number from 1 through 3
 #       spacingBefore: CSS length, e.g. 0.5em
 # presentation:
-#   backgroundColor: quoted hex color, e.g. "#000000"
-#   textColor: quoted hex color, e.g. "#f7f4ee"
-#   inlineStyles:
-#     style-name:
-#       color: quoted hex color
-# frame:
-#   colors: presentation | theme
-#   colors:
-#     backgroundColor: quoted hex color
-#     textColor: quoted hex color
+#   palette: dark  # Alternatives: light, paper
+#   sectionSurfaces:
+#     mode: none | cycle
+#     sequence: [base, soft, emphasis]
 # norna:end theme-help
-navigation:
-  brand: Example Site
 layout:
   density: normal
   pageWidth: 1180px
@@ -113,11 +106,7 @@ typography:
   preset: quiet-gallery
   rhythm: normal
 presentation:
-  backgroundColor: "#000000"
-  textColor: "#f7f4ee"
-  inlineStyles:
-    highlight:
-      color: "#ffd84d"
-frame:
-  colors: presentation
+  palette: dark  # Alternatives: light, paper
+  sectionSurfaces:
+    mode: cycle
 ---

package/starters/project/.github/workflows/deploy.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build
+      - name: Check and build
         run: npm run build
 
       - name: Configure Pages

package/starters/project/README.md

@@ -20,8 +20,9 @@ npm run dev -- --kill
 
 - `site/config.mjs`: technical settings such as URL, language labels, GitHub
   repository, and deploy workflow.
-- `site/theme.md`: site-wide visual settings such as brand text, layout
-  density, typography rhythm, colors, frame colors, and inline text styles.
+- `site/sitewide-content.md`: shared brand or logo, banners and footer content.
+- `site/theme.md`: site-wide visual settings such as layout density, typography
+  rhythm, palettes, section surfaces, and typography.
 - `site/content.md`: homepage title, sections, placeholders, project summary,
   links, install command, example usage, benefits, next steps, managed media
   blocks, and license.
@@ -39,13 +40,14 @@ GitHub Pages workflow uses `npm ci`.
    benefits, use cases, and license in `site/content.md`.
 2. Replace the guide examples in `site/routes/010-guide/route-content.md`, or
    delete the route if the homepage is enough.
-3. Edit `site/theme.md` for brand name, layout density, typography rhythm,
-   colors, frame colors, and inline text styles.
-4. Put any local source images in the image folder for the Markdown section
+3. Edit `site/sitewide-content.md` for the brand or logo, banners and footer.
+4. Edit `site/theme.md` for layout density, typography rhythm, palette, section
+   surfaces, and typography.
+5. Put any local source images in the image folder for the Markdown section
    that references them, for example `site/images/intro/`.
-5. Edit `site/config.mjs` for public URL, GitHub repository, footer text, and
-   deploy workflow name.
-6. Update `package.json` with the site's package name and keep
+6. Edit `site/config.mjs` for public URL, GitHub repository and deploy workflow
+   name.
+7. Update `package.json` with the site's package name and keep
    `package-lock.json` committed.
 
 ## Common Commands

package/starters/project/package.json

@@ -14,6 +14,7 @@
     "norna:config:check": "norna config:check",
     "norna:content:check": "norna content:check",
     "norna:sync": "norna content:sync",
+    "norna:theme:export": "norna theme:export",
     "norna:typography:presets": "norna typography presets",
     "norna:typography:show": "norna typography show",
     "norna:public": "norna site:public",

package/starters/project/site/config.mjs

@@ -22,19 +22,6 @@ export default {
 			gallery: 'Images',
 		},
 	},
-	footer: {
-		copyrightMessage: '(c) Project contributors.',
-		buildInfo: {
-			enabled: true,
-			text: 'Built',
-			dateTimeFormat: {
-				locale: 'en-GB',
-				timeZone: 'UTC',
-				dateStyle: 'short',
-				timeStyle: 'short',
-			},
-		},
-	},
 	github: {
 		repo: 'owner/project-name',
 		branch: 'main',

package/starters/project/site/sitewide-content.md

@@ -0,0 +1,14 @@
+---
+navigation:
+  brand: Project Name
+footer:
+  copyrightMessage: (c) Project contributors.
+  buildInfo:
+    enabled: true
+    text: Built
+    dateTimeFormat:
+      locale: en-GB
+      timeZone: UTC
+      dateStyle: short
+      timeStyle: short
+---

package/starters/project/site/theme.md

@@ -1,7 +1,5 @@
 ---
 # Site-wide visual defaults. Remove a value to use the engine default.
-navigation:
-  brand: Project Name
 layout:
   density: compact
   pageWidth: 1120px
@@ -31,13 +29,7 @@ typography:
   preset: text-forward
   rhythm: compact
 presentation:
-  backgroundColor: "#001314"
-  textColor: "#f6f1e8"
-  inlineStyles:
-    accent:
-      color: "#8fd3ff"
-    muted:
-      color: "#b8b1a6"
-frame:
-  colors: presentation
+  palette: dark  # Alternatives: light, paper
+  sectionSurfaces:
+    mode: cycle
 ---

package/examples/dog-gallery/site/.norna/generated-images.json

@@ -1,226 +0,0 @@
-{
-  "black-puppy-meadow.png": {
-    "outputVersion": 2,
-    "sourceHash": "7255e3d9148c1ded01ae6ae6809b9a8261b553a1516d3f8f4de0554bc321f652",
-    "width": 1536,
-    "height": 1024,
-    "variants": [
-      {
-        "src": "/images/generated/black-dogs/black-puppy-meadow-7255e3d9-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/black-dogs/black-puppy-meadow-7255e3d9-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/black-dogs/black-puppy-meadow-7255e3d9-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/black-dogs/black-puppy-meadow-7255e3d9-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/black-dogs/black-puppy-meadow-7255e3d9-1536.webp",
-        "width": 1536
-      }
-    ]
-  },
-  "photo-of-a-black-dog.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "5cf614d2863ca8f86b6162c7b477fd2690adbc101816206c9e675bf36d9962d0",
-    "width": 960,
-    "height": 1600,
-    "variants": [
-      {
-        "src": "/images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/black-dogs/photo-of-a-black-dog-5cf614d2-960.webp",
-        "width": 960
-      }
-    ]
-  },
-  "brown-dog.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "50ef114e49ae48491c015157b4a25f4f1fd69140170fe6d4202c551858c3e03d",
-    "width": 3939,
-    "height": 2626,
-    "variants": [
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-1920.webp",
-        "width": 1920
-      },
-      {
-        "src": "/images/generated/brown-dogs/brown-dog-50ef114e-3939.webp",
-        "width": 3939
-      }
-    ]
-  },
-  "dog-accompanies-master.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "7ef804d5ebe27724409f4ffa94389c7b1102c2c8bb9c1dae29ecbd4c56e61af9",
-    "width": 2400,
-    "height": 1800,
-    "variants": [
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-1920.webp",
-        "width": 1920
-      },
-      {
-        "src": "/images/generated/brown-dogs/dog-accompanies-master-7ef804d5-2400.webp",
-        "width": 2400
-      }
-    ]
-  },
-  "golden-retriever.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "f797fd880d6c3b112ceb3408f468fbeaf442efc792f935fd6c9954b812fdc838",
-    "width": 1600,
-    "height": 1200,
-    "variants": [
-      {
-        "src": "/images/generated/golden-dogs/golden-retriever-f797fd88-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/golden-dogs/golden-retriever-f797fd88-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/golden-dogs/golden-retriever-f797fd88-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/golden-dogs/golden-retriever-f797fd88-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/golden-dogs/golden-retriever-f797fd88-1600.webp",
-        "width": 1600
-      }
-    ]
-  },
-  "toller-puppy.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "a2a8fbc0d599deb019d45f7b11de98bcbcb4f1fd609e931073161dcb88cbf63f",
-    "width": 2576,
-    "height": 1932,
-    "variants": [
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-1920.webp",
-        "width": 1920
-      },
-      {
-        "src": "/images/generated/golden-dogs/toller-puppy-a2a8fbc0-2576.webp",
-        "width": 2576
-      }
-    ]
-  },
-  "white-cute-dog.jpg": {
-    "outputVersion": 2,
-    "sourceHash": "077a06891d97eafb4593cfcaa5c9b04fdb1e3a6206d56acd4ebd3eadb83356bf",
-    "width": 1277,
-    "height": 1060,
-    "variants": [
-      {
-        "src": "/images/generated/white-dogs/white-cute-dog-077a0689-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/white-dogs/white-cute-dog-077a0689-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/white-dogs/white-cute-dog-077a0689-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/white-dogs/white-cute-dog-077a0689-1277.webp",
-        "width": 1277
-      }
-    ]
-  },
-  "white-puppy-garden.png": {
-    "outputVersion": 2,
-    "sourceHash": "d3ab2ca04fb37dfbf010e7f9f3adf2ba8401553bd1946e3b388cb662eac58ee9",
-    "width": 1536,
-    "height": 1024,
-    "variants": [
-      {
-        "src": "/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-480.webp",
-        "width": 480
-      },
-      {
-        "src": "/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-768.webp",
-        "width": 768
-      },
-      {
-        "src": "/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1080.webp",
-        "width": 1080
-      },
-      {
-        "src": "/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1440.webp",
-        "width": 1440
-      },
-      {
-        "src": "/images/generated/white-dogs/white-puppy-garden-d3ab2ca0-1536.webp",
-        "width": 1536
-      }
-    ]
-  }
-}

package/examples/dog-gallery/site/config.mjs

@@ -1,67 +0,0 @@
-const siteUrl = 'http://localhost:4321/';
-
-export default {
-	site: {
-		// Public canonical URL for this site.
-		url: siteUrl,
-
-		// URL path prefix. Use "/" for root sites and "/repository-name/" for
-		// GitHub Pages project sites without a custom domain.
-		basePath: '/',
-	},
-	navigation: {
-		smoothScroll: {
-			// Set to false to make section links jump directly to the target anchor.
-			enabled: true,
-
-			// Minimum and maximum animation time for controlled anchor navigation.
-			minimumDurationMs: 2_000,
-			maximumDurationMs: 4_000,
-
-			// Additional duration per pixel of scroll distance, before min/max clamping.
-			durationPerPixelMs: 0.22,
-		},
-	},
-	locale: {
-		lang: 'en',
-		labels: {
-			skipToContent: 'Skip to content',
-			sectionNavigation: 'Sections',
-			gallery: 'Images',
-		},
-	},
-	footer: {
-		// Omit this value to hide the copyright sentence.
-		copyrightMessage: 'Dog images from Wikimedia Commons; see image captions for license details.',
-
-		// Set enabled to false to hide the build timestamp while keeping its config.
-		buildInfo: {
-			enabled: true,
-
-			// Text shown before the formatted build timestamp.
-			text: 'Built',
-
-			// Standard Intl.DateTimeFormat options for the build timestamp.
-			dateTimeFormat: {
-				locale: 'en-GB',
-				timeZone: 'UTC',
-				dateStyle: 'short',
-				timeStyle: 'short',
-			},
-		},
-	},
-	github: {
-		// Example repository and workflow details used by deploy scripts.
-		repo: 'owner/example-site',
-		branch: 'main',
-		pagesWorkflow: 'Deploy to GitHub Pages',
-	},
-	deploy: {
-		watch: {
-			// Defaults for npm run deploy:watch.
-			intervalMs: 10_000,
-			timeoutMs: 15 * 60_000,
-			runLimit: 10,
-		},
-	},
-};

package/examples/dog-gallery/site/content.md

@@ -1,128 +0,0 @@
----
-title: Local Dog Example
-description: A small norna example with free dog images.
-navigation:
-  label: Dog site!
-sections:
-  summer-dogs:
-    visible:
-      from: "2026-08-01"
-      until: "2026-09-01"
----
-
-## Black Dogs {#black-dogs}
-
-Black-coated dogs from the local norna development collection. This
-sentence contains [yellow highlighted text]{.highlight} for inline style
-inspection.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
-ante venenatis dapibus posuere velit aliquet.
-
-### Coat notes
-
-This `###` heading should follow `typography.headings.h3`.
-
-#### Small detail
-
-This `####` heading should follow `typography.headings.h4`.
-
-Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget
-metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-
-```norna-image-stack
-- image: photo-of-a-black-dog.jpg
-  alt: A black dog sitting outdoors and looking at the camera.
-  caption: Photo of a dog. ContaDeletada2906, CC0 1.0, via Wikimedia Commons.
-- image: black-puppy-meadow.png
-  alt: A black puppy standing in a grassy meadow and looking at the camera.
-  caption: AI-generated image.
-```
-
-## Summer Dogs {#summer-dogs}
-
-This temporary section is visible during August 2026. It is here to demonstrate
-date-controlled sections and [warm alert text]{.alert} in the local dog example.
-
-Lorem ipsum dolor sit amet.
-
-Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis
-interdum. Nullam quis risus eget urna mollis ornare vel eu leo.
-
-## Brown Dogs {#brown-dogs}
-
-Brown dogs provide a second image section for local navigation checks.
-
-Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac
-cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
-amet risus.
-
-Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus,
-porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at
-lobortis.
-
-```norna-image-stack
-- image: brown-dog.jpg
-  alt: A brown dog looking directly at the camera.
-  caption: DogBrown. Frank-3, CC0 1.0, via Wikimedia Commons.
-- image: dog-accompanies-master.jpg
-  alt: A man walks outdoors with a dog at his side.
-  caption: Dog accompanies his master. Steve Hillebrand, U.S. Fish and Wildlife Service, public domain.
-```
-
-## Golden Dogs {#golden-dogs}
-
-Golden-coated retrievers add a third image section and more scrolling depth.
-
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
-
-### Training note
-
-This `###` heading follows the site-wide `headings.h3` style.
-
-Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis
-dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem
-lacinia quam venenatis vestibulum.
-
-```norna-image-stack
-- image: golden-retriever.jpg
-  alt: A golden retriever standing outdoors.
-  caption: Golden Retriever. Ribo, public domain, via Wikimedia Commons.
-- image: toller-puppy.jpg
-  alt: A young Nova Scotia Duck Tolling Retriever puppy sitting on grass.
-  caption: Nova Scotia Duck Tolling Retriever puppy. RM, public domain, via Wikimedia Commons.
-```
-
-## White Dogs {#white-dogs}
-
-A white dog completes the colour-based image sequence.
-
-Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta
-gravida at eget metus.
-
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum
-dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vestibulum id
-ligula porta felis euismod semper.
-
-```norna-image-stack
-- image: white-cute-dog.jpg
-  alt: A white dog looking toward the camera.
-  caption: White cute dog. Neal Ziring, public domain, via Wikimedia Commons.
-- image: white-puppy-garden.png
-  alt: A fluffy white puppy standing on grass in a garden.
-  caption: AI-generated image.
-```
-
-## Sources {#sources}
-
-Most images are sourced from Wikimedia Commons pages that list CC0 or
-public-domain licensing:
-
-- [Photo of a dog](https://commons.wikimedia.org/wiki/File:Photo_of_a_dog.jpg)
-- [DogBrown](https://commons.wikimedia.org/wiki/File:DogBrown.jpg)
-- [Dog accompanies his master](https://commons.wikimedia.org/wiki/File:Dog_accompanies_his_master.jpg)
-- [Golden Retriever](https://commons.wikimedia.org/wiki/File:Golden_Retriever.jpg)
-- [Toller pup7wks2](https://commons.wikimedia.org/wiki/File:Toller_pup7wks2.JPG)
-- [White cute dog](https://commons.wikimedia.org/wiki/File:White_cute_dog.jpg)
-
-The black and white puppy images are AI-generated.

package/examples/dog-gallery/site/public/favicon.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-	<rect width="128" height="128" rx="24" fill="#111111" />
-	<circle cx="40" cy="43" r="13" fill="#ffffff" />
-	<circle cx="64" cy="34" r="13" fill="#ffffff" />
-	<circle cx="88" cy="43" r="13" fill="#ffffff" />
-	<path fill="#ffffff" d="M31 83c0-18 15-31 33-31s33 13 33 31c0 12-9 18-20 14-7-3-19-3-26 0-11 4-20-2-20-14Z" />
-</svg>

package/examples/dog-gallery/site/routes/010-dog-care/route-content.md

@@ -1,38 +0,0 @@
----
-title: Dog care
-description: A small route for testing multi-page norna navigation.
-navigation:
-  label: Dog care
----
-
-## Daily rhythm {#daily-rhythm}
-
-Dogs often settle into a home when the day has a clear rhythm. Meals, walks,
-rest and play do not need to be dramatic events, but they become easier to
-understand when they happen in a predictable order.
-
-Short routines also make a media page easier to scan. This route exists mainly
-to test how page navigation and site navigation behave together.
-
-### Morning checks
-
-This `###` heading tests route-level body subheadings.
-
-#### Quiet detail
-
-This `####` heading should stay smaller than the `###` above it.
-
-## Calm training {#calm-training}
-
-Good training can be quiet. A short session with one clear task is often more
-useful than a long session with many competing signals.
-
-The same principle applies to navigation. The page should show where the visitor
-is in the site first, and then offer a simple way to jump within the current
-page.
-
-## Media notes {#media-notes}
-
-This section is intentionally text-only. Image routes can be added later, but a
-first navigation test should make it easy to judge menus, active states and
-anchor positions without layout noise from new media.