@janga/norna 0.7.9 → 0.7.10

package/docs/typography.md

@@ -23,11 +23,21 @@ Available presets:
 
 If theme typography is omitted, `quiet-gallery` is used.
 
-Presets define alignment, size, and line height for `headings.h1` through
-`headings.h4`, `body`, and `caption`. Built-in presets use `medium` as the
-default size for every text role. Visual heading hierarchy comes from the
-Markdown heading level, so `h1` is larger than `h2`, `h2` is larger than `h3`,
-and so on.
+Presets define alignment, size, weight, and line height for `headings.h1`
+through `headings.h4`, `body`, and `caption`. They also choose a readable body
+text width. Built-in presets use `medium` as the default size for every text
+role. Visual heading hierarchy comes from the Markdown heading level, so `h1`
+is larger than `h2`, `h2` is larger than `h3`, and so on.
+
+The presets use these controls deliberately:
+
+- `quiet-gallery` uses restrained heading weights and a normal reading width.
+- `compact-gallery` uses stronger headings and a wider text column for short,
+  scannable content.
+- `text-forward` uses a narrower reading width and more generous body line
+  height.
+- `statement` uses the strongest heading weights and a narrow text column for
+  short, declarative content.
 
 `rhythm` defines text-near spacing for headings, paragraphs, and captions.
 Available rhythms are `compact`, `normal`, and `airy`. Built-in rhythm values
@@ -62,12 +72,14 @@ typography:
     headings:
       h2:
         size: medium
+        weight: 600
         spacingAfter: 0.55em
       h3:
         size: medium
         spacingBefore: 1.5em
         spacingAfter: 0.5em
     body:
+      width: narrow
       paragraphSpacing: 0.8em
     caption:
       spacingBefore: 0.5em
@@ -104,21 +116,31 @@ follows the Markdown level the user wrote: `##` uses `headings.h2`.
 `spacingAfter`, and `paragraphSpacing` are CSS lengths such as `0`, `0.8em`,
 `1rem`, or `12px`. Use `em` for spacing that should track the text size.
 
+`weight` is a controlled heading weight. Allowed values are `400`, `500`,
+`600`, and `700`. `body.width` is the readable text width and accepts
+`narrow`, `normal`, or `wide`. It controls the prose column, not the page's
+maximum width or the width of image blocks.
+
 Supported override fields:
 
-- `headings.h1.align`, `headings.h1.size`, `headings.h1.lineHeight`,
+- `headings.h1.align`, `headings.h1.size`, `headings.h1.weight`,
+  `headings.h1.lineHeight`,
   `headings.h1.spacingBefore`, `headings.h1.spacingAfter`
-- `headings.h2.align`, `headings.h2.size`, `headings.h2.lineHeight`,
+- `headings.h2.align`, `headings.h2.size`, `headings.h2.weight`,
+  `headings.h2.lineHeight`,
   `headings.h2.spacingBefore`, `headings.h2.spacingAfter`
-- `headings.h3.align`, `headings.h3.size`, `headings.h3.lineHeight`,
+- `headings.h3.align`, `headings.h3.size`, `headings.h3.weight`,
+  `headings.h3.lineHeight`,
   `headings.h3.spacingBefore`, `headings.h3.spacingAfter`
-- `headings.h4.align`, `headings.h4.size`, `headings.h4.lineHeight`,
+- `headings.h4.align`, `headings.h4.size`, `headings.h4.weight`,
+  `headings.h4.lineHeight`,
   `headings.h4.spacingBefore`, `headings.h4.spacingAfter`
-- `body.align`, `body.size`, `body.lineHeight`, `body.paragraphSpacing`
+- `body.align`, `body.size`, `body.width`, `body.lineHeight`,
+  `body.paragraphSpacing`
 - `caption.align`, `caption.size`, `caption.lineHeight`,
   `caption.spacingBefore`
 
-## Inheritance
+## Route Themes
 
 Theme typography is the site-wide base:
 
@@ -130,30 +152,20 @@ typography:
   rhythm: normal
 ```
 
-A page-level `presentation.typography.preset` changes the typographic character
-for that page. A section-level
-`sections.<section-id>.presentation.typography.preset` changes the typographic
-character for that section. `rhythm` is inherited separately, so changing
-preset does not change spacing unless `rhythm` is also set.
-
-If a section sets `typography.rhythm`, that section changes text-near spacing.
-If a section only sets `typography.overrides`, it keeps the resolved page
-preset and rhythm and changes only the specified values.
+A route-local `theme.md` can give that route a different typographic character.
+The route theme replaces the root visual theme rather than inheriting from it,
+so repeat any non-default `fontFamily`, `rhythm`, or `overrides` that the route
+still needs.
 
-Example section override:
+Example route theme:
 
 ```yaml
-sections:
-  intro:
-    presentation:
-      typography:
-        preset: statement
-        overrides:
-          body:
-            paragraphSpacing: 0.7em
+# site/routes/010-introduction/theme.md
+typography:
+  preset: statement
+  rhythm: normal
 ```
 
-Centered text uses narrower text widths. Left- or right-aligned heading and body
-text use the calculated image layout width so text edges line up with images
-after layout gutters and image limits are applied. Captions are normally
-centered.
+The `body.width` value controls the prose column independently of the page and
+image widths. Captions are normally centered, but `text-forward` uses
+left-aligned captions to support longer explanatory text.

package/examples/001-dog-shelter-single-page/README.md

@@ -0,0 +1,9 @@
+# Dog Shelter single-page example
+
+A small Norna site with two homepage sections and no routes.
+
+Run it from the Norna repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/001-dog-shelter-single-page/site dev:local
+```

package/examples/001-dog-shelter-single-page/site/config.mjs

@@ -0,0 +1,27 @@
+export default {
+	site: {
+		url: 'http://localhost:4321/',
+		basePath: '/',
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 600,
+			maximumDurationMs: 1_200,
+			durationPerPixelMs: 0.2,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/dog-shelter',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/001-dog-shelter-single-page/site/content.md

@@ -0,0 +1,38 @@
+---
+title: Home
+description: A single-page dog shelter website built with Norna.
+---
+
+## What we do {#what-we-do}
+
+We rescue and rehome dogs.
+
+<!-- norna-image-provenance:
+image: dog-house.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw a simple flat vector dog house with a friendly dog at the entrance,
+using a small paper, red and dark-brown palette. No text and no external assets.
+-->
+
+```norna-image-stack
+- image: dog-house.svg
+  alt: A brown dog standing at the entrance to a red dog house.
+  caption: Time to recover before adoption.
+```
+
+## You can help {#you-can-help}
+
+Adopt. Foster. Donate.
+
+<!-- norna-image-provenance:
+image: heart.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw two simple hands holding a red heart as a flat vector illustration,
+using a small paper, red and dark-brown palette. No text or external assets.
+-->
+
+```norna-image-stack
+- image: heart.svg
+  alt: Two open hands holding a red heart.
+  caption: Foster care helps another dog.
+```

package/examples/001-dog-shelter-single-page/site/images/what-we-do/dog-house.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 520" role="img" aria-labelledby="title desc">
+  <title id="title">Dog at a shelter house</title>
+  <desc id="desc">A friendly brown dog stands at the entrance to a red wooden dog house.</desc>
+  <rect width="800" height="520" rx="32" fill="#eef3ef"/>
+  <path d="M0 405 Q180 365 380 405 T800 390 V520 H0Z" fill="#cad8bd"/>
+  <g stroke="#493c2b" stroke-width="8" stroke-linejoin="round">
+    <path d="M190 247 L400 82 L610 247" fill="#9f493a"/>
+    <path d="M236 222 H564 V432 H236Z" fill="#c8674f"/>
+    <path d="M327 432 V300 Q327 234 400 234 Q473 234 473 300 V432Z" fill="#332d29"/>
+    <path d="M213 244 L400 94 L587 244" fill="none" stroke="#7f3f32" stroke-width="24" stroke-linecap="round"/>
+  </g>
+  <g transform="translate(310 250)" stroke="#493c2b" stroke-width="6" stroke-linejoin="round">
+    <path d="M40 119 C47 80 93 64 142 76 C181 86 196 119 184 158 H58 C42 151 34 135 40 119Z" fill="#b8794d"/>
+    <path d="M62 94 C45 61 58 23 96 13 C133 3 169 27 168 64 C167 93 145 108 112 109 H76Z" fill="#b8794d"/>
+    <path d="M76 32 L53 3 L98 17" fill="#8c573a"/>
+    <path d="M143 25 L171 3 L164 46" fill="#8c573a"/>
+    <circle cx="92" cy="53" r="6" fill="#272522" stroke="none"/>
+    <circle cx="140" cy="53" r="6" fill="#272522" stroke="none"/>
+    <ellipse cx="116" cy="76" rx="25" ry="19" fill="#dca477"/>
+    <circle cx="116" cy="70" r="7" fill="#272522" stroke="none"/>
+    <path d="M105 84 Q116 96 129 84" fill="none" stroke-linecap="round"/>
+    <path d="M59 154 V188 M94 154 V188 M145 154 V188" fill="none" stroke-linecap="round"/>
+    <path d="M177 105 Q220 80 211 39" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/images/you-can-help/heart.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 520" role="img" aria-labelledby="title desc">
+  <title id="title">Hands holding a heart</title>
+  <desc id="desc">Two open hands support a large red heart.</desc>
+  <rect width="800" height="520" rx="32" fill="#f3eee5"/>
+  <circle cx="400" cy="250" r="176" fill="#e5dccd"/>
+  <path d="M400 354 C368 316 263 252 263 166 C263 108 309 79 354 92 C379 99 394 116 400 135 C406 116 421 99 446 92 C491 79 537 108 537 166 C537 252 432 316 400 354Z" fill="#b84f45" stroke="#493c2b" stroke-width="8" stroke-linejoin="round"/>
+  <g fill="#d5a071" stroke="#493c2b" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M74 368 C144 330 211 328 291 365 L363 407 C382 420 373 451 350 450 L268 426 C228 414 191 421 154 451 L92 502 L30 429Z"/>
+    <path d="M726 368 C656 330 589 328 509 365 L437 407 C418 420 427 451 450 450 L532 426 C572 414 609 421 646 451 L708 502 L770 429Z"/>
+    <path d="M290 365 L350 349 C369 344 383 360 376 378 L363 407"/>
+    <path d="M510 365 L450 349 C431 344 417 360 424 378 L437 407"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Dog Shelter paw mark">
+  <rect width="64" height="64" rx="12" fill="#f8f5ee"/>
+  <g fill="#7f3f32">
+    <ellipse cx="32" cy="39" rx="16" ry="13"/>
+    <circle cx="16" cy="25" r="7"/>
+    <circle cx="29" cy="18" r="7"/>
+    <circle cx="43" cy="20" r="7"/>
+    <circle cx="50" cy="32" r="7"/>
+  </g>
+</svg>

package/examples/001-dog-shelter-single-page/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/examples/001-dog-shelter-single-page/site/sitewide-content.md

@@ -0,0 +1,6 @@
+---
+navigation:
+  brand: Dog Shelter
+footer:
+  copyrightMessage: Dog Shelter example site.
+---

package/examples/001-dog-shelter-single-page/site/theme.md

@@ -0,0 +1,25 @@
+---
+layout:
+  density: normal
+  pageWidth: 1180px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+gallery:
+  width: 760px
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 72
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: text-forward
+  rhythm: normal
+presentation:
+  palette: paper
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft]
+---

package/examples/002-dog-shelter-multi-page/README.md

@@ -0,0 +1,9 @@
+# Dog Shelter multi-page example
+
+A small Norna site with a homepage and ordered routes for dogs and adoption.
+
+Run it from the Norna repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/002-dog-shelter-multi-page/site dev:local
+```

package/examples/002-dog-shelter-multi-page/site/config.mjs

@@ -0,0 +1,27 @@
+export default {
+	site: {
+		url: 'http://localhost:4321/',
+		basePath: '/',
+	},
+	navigation: {
+		smoothScroll: {
+			enabled: true,
+			minimumDurationMs: 600,
+			maximumDurationMs: 1_200,
+			durationPerPixelMs: 0.2,
+		},
+	},
+	locale: {
+		lang: 'en',
+		labels: {
+			skipToContent: 'Skip to content',
+			sectionNavigation: 'Sections',
+			gallery: 'Images',
+		},
+	},
+	github: {
+		repo: 'owner/dog-shelter',
+		branch: 'main',
+		pagesWorkflow: 'Deploy to GitHub Pages',
+	},
+};

package/examples/002-dog-shelter-multi-page/site/content.md

@@ -0,0 +1,12 @@
+---
+title: Home
+description: A multi-page dog shelter website built with Norna.
+---
+
+## Dog Shelter {#intro}
+
+We rescue dogs, help them recover and introduce them to families ready to give
+them a permanent home.
+
+Visit **Dogs** to meet two current residents, or **Adopt** to learn how the
+adoption process works.

package/examples/002-dog-shelter-multi-page/site/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Dog Shelter paw mark">
+  <rect width="64" height="64" rx="12" fill="#f8f5ee"/>
+  <g fill="#7f3f32">
+    <ellipse cx="32" cy="39" rx="16" ry="13"/>
+    <circle cx="16" cy="25" r="7"/>
+    <circle cx="29" cy="18" r="7"/>
+    <circle cx="43" cy="20" r="7"/>
+    <circle cx="50" cy="32" r="7"/>
+  </g>
+</svg>

package/examples/002-dog-shelter-multi-page/site/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/examples/002-dog-shelter-multi-page/site/routes/010-dogs/images/dogs/rex.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" role="img" aria-labelledby="title desc">
+  <title id="title">Rex</title>
+  <desc id="desc">A gentle golden dog with one floppy ear and a curved tail.</desc>
+  <rect width="800" height="560" rx="32" fill="#f3eee3"/>
+  <ellipse cx="404" cy="462" rx="270" ry="36" fill="#ddd1b8"/>
+  <g stroke="#493c2b" stroke-width="9" stroke-linejoin="round">
+    <path d="M218 316 C265 240 386 219 527 258 C594 277 623 343 589 404 H278 C221 391 196 354 218 316Z" fill="#e3c681"/>
+    <path d="M274 275 C237 202 279 112 370 91 C458 71 538 132 528 218 C520 285 464 318 389 317 H307Z" fill="#e3c681"/>
+    <path d="M309 134 L264 52 L365 91" fill="#c49b51"/>
+    <path d="M465 111 Q560 96 551 181 Q529 214 488 197Z" fill="#c49b51"/>
+    <circle cx="346" cy="187" r="11" fill="#272522" stroke="none"/>
+    <circle cx="451" cy="187" r="11" fill="#272522" stroke="none"/>
+    <ellipse cx="399" cy="239" rx="61" ry="45" fill="#f1dca9"/>
+    <circle cx="399" cy="225" r="14" fill="#272522" stroke="none"/>
+    <path d="M377 254 Q399 280 427 254" fill="none" stroke-linecap="round"/>
+    <path d="M281 400 V479 M374 400 V479 M511 400 V479" fill="none" stroke-linecap="round"/>
+    <path d="M568 294 Q676 330 642 420" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

package/examples/002-dog-shelter-multi-page/site/routes/010-dogs/images/dogs/rover.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560" role="img" aria-labelledby="title desc">
+  <title id="title">Rover</title>
+  <desc id="desc">A friendly brown dog with upright ears and a curled tail.</desc>
+  <rect width="800" height="560" rx="32" fill="#eaf2ec"/>
+  <ellipse cx="404" cy="462" rx="270" ry="36" fill="#c8d9c7"/>
+  <g stroke="#493c2b" stroke-width="9" stroke-linejoin="round">
+    <path d="M215 313 C251 231 372 209 518 246 C590 265 622 332 593 402 H278 C220 391 191 354 215 313Z" fill="#b8794d"/>
+    <path d="M259 271 C220 195 256 105 348 83 C438 61 526 118 523 208 C520 278 468 314 389 316 H294Z" fill="#b8794d"/>
+    <path d="M291 128 L236 50 L340 86" fill="#8c573a"/>
+    <path d="M454 109 L526 43 L505 159" fill="#8c573a"/>
+    <circle cx="333" cy="181" r="11" fill="#272522" stroke="none"/>
+    <circle cx="449" cy="181" r="11" fill="#272522" stroke="none"/>
+    <ellipse cx="391" cy="236" rx="60" ry="45" fill="#dca477"/>
+    <circle cx="391" cy="222" r="14" fill="#272522" stroke="none"/>
+    <path d="M369 251 Q391 277 419 251" fill="none" stroke-linecap="round"/>
+    <path d="M278 396 V479 M365 396 V479 M508 396 V479" fill="none" stroke-linecap="round"/>
+    <path d="M565 280 Q680 224 660 120 Q646 81 618 103" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

package/examples/002-dog-shelter-multi-page/site/routes/010-dogs/route-content.md

@@ -0,0 +1,30 @@
+---
+title: Dogs
+description: Meet dogs currently waiting for adoption.
+---
+
+## Dogs {#dogs}
+
+Meet Rover and Rex.
+
+<!-- norna-image-provenance:
+image: rover.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw a friendly brown cartoon dog standing in profile on a pale green
+background. Flat vector style, dark outlines, no text or external assets.
+
+image: rex.svg
+source: AI-assisted, hand-authored SVG
+prompt: Draw a friendly golden cartoon dog standing in profile on a pale cream
+background. Make it visibly distinct from Rover. Flat vector style, dark
+outlines, no text or external assets.
+-->
+
+```norna-image-stack
+- image: rover.svg
+  alt: Rover, a brown dog with upright ears and a curled tail.
+  caption: Rover needs daily walks.
+- image: rex.svg
+  alt: Rex, a golden dog with one floppy ear and a gently curved tail.
+  caption: Rex needs a patient home.
+```

package/examples/002-dog-shelter-multi-page/site/routes/020-adopt/route-content.md

@@ -0,0 +1,12 @@
+---
+title: Adopt
+description: Learn how to adopt from Dog Shelter.
+---
+
+## Adopt {#adopt}
+
+Adoption begins with a conversation about your home, routines and experience
+with dogs. We then arrange a meeting with dogs whose needs appear to match.
+
+The goal is not the quickest placement. It is a stable home where both the dog
+and the family have the support they need.

package/examples/002-dog-shelter-multi-page/site/sitewide-content.md

@@ -0,0 +1,6 @@
+---
+navigation:
+  brand: Dog Shelter
+footer:
+  copyrightMessage: Dog Shelter example site.
+---

package/examples/002-dog-shelter-multi-page/site/theme.md

@@ -0,0 +1,25 @@
+---
+layout:
+  density: normal
+  pageWidth: 1180px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+gallery:
+  width: 760px
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 72
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: text-forward
+  rhythm: normal
+presentation:
+  palette: paper
+  sectionSurfaces:
+    mode: cycle
+    sequence: [base, soft]
+---