@janga/norna 0.7.16 → 0.7.18

package/examples/feature-demos/media-and-surfaces/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2,9,10,91,92,112,113],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":\"jsx\",\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"127.0.0.1\",\"port\":61329,\"allowedHosts\":[\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\"]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"dangerouslyProcessSVG\":false,\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"processor\":{\"name\":\"satteri\",\"options\":{\"mdastPlugins\":[],\"hastPlugins\":[],\"features\":{}}}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fetchFile\":\"fetch\",\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"collectionStorage\":\"single-file\"},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","7.1.3","content-config-digest","ef24ddbc7d731e37","site",["Map",11,12,35,36,63,64],"site-content",{"id":11,"data":13,"body":19,"filePath":20,"digest":21,"rendered":22},{"title":14,"description":15,"navigation":16,"sections":18},"Media and Surfaces","A visual test bench for Norna's managed media and presentation surfaces.",{"label":17},"Home",{},"## Media and surfaces {#intro}\n\nThis site is a focused test bench for Norna's managed media blocks, sidenotes,\npalettes and section-surface controls.\n\nUse [Media blocks](/media/) to compare image stacks, carousels, card lists and\nsidenotes. Use [Surfaces](/surfaces/) to inspect palettes and automatic section\nsurface sequences.\n\nSite identity, banners and footers have their own\n[sitewide content demo](https://janga.github.io/norna/examples/feature-demos/sitewide-content/).","site/content.md","78ec072eba5fb94d",{"html":23,"metadata":24},"\u003Ch2 id=\"media-and-surfaces-intro\">Media and surfaces {#intro}\u003C/h2>\n\u003Cp>This site is a focused test bench for Norna’s managed media blocks, sidenotes,\npalettes and section-surface controls.\u003C/p>\n\u003Cp>Use \u003Ca href=\"/media/\">Media blocks\u003C/a> to compare image stacks, carousels, card lists and\nsidenotes. Use \u003Ca href=\"/surfaces/\">Surfaces\u003C/a> to inspect palettes and automatic section\nsurface sequences.\u003C/p>\n\u003Cp>Site identity, banners and footers have their own\n\u003Ca href=\"https://janga.github.io/norna/examples/feature-demos/sitewide-content/\">sitewide content demo\u003C/a>.\u003C/p>\n",{"headings":25,"localImagePaths":30,"remoteImagePaths":31,"frontmatter":32,"imagePaths":34},[26],{"depth":27,"slug":28,"text":29},2,"media-and-surfaces-intro","Media and surfaces {#intro}",[],[],{"title":14,"description":15,"navigation":33},{"label":17},[],"site-route-010-media",{"id":35,"data":37,"body":42,"filePath":43,"digest":44,"rendered":45},{"title":38,"description":39,"navigation":40,"sections":41},"Media blocks","Compare Norna's managed image stacks, carousels and card lists.",{"label":38},{},"## Image stack {#stack}\n\nAn image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section's image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\n\n{note: Local image references are validated against the image folder for this section before the site is built.}\n\n```norna-image-stack\n- image: stack-one.svg\n  alt: A pale panel with a single large circle.\n  caption: One image can introduce a visual idea.\n- image: stack-two.svg\n  alt: A dark panel with three aligned blocks.\n  caption: A stack can contain several related images.\n```\n\n## Image carousel {#carousel}\n\nA carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\n\n{note: The carousel provides controls, keyboard interaction and readable position status without route-specific components.}\n\n```norna-image-carousel\n- image: carousel-one.svg\n  alt: A green panel with a diagonal line.\n  caption: First frame: a broad direction.\n- image: carousel-two.svg\n  alt: A blue panel with two overlapping circles.\n  caption: Second frame: a closer relationship.\n- image: carousel-three.svg\n  alt: A red panel with a compact grid.\n  caption: Third frame: a denser detail.\n```\n\n## Card list {#cards}\n\nCards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\n\n{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\n\n```norna-card-list\nlayout: image-top\nflow: grid\nsize: m\nwidth: normal\n\n- title: Prepare source files\n  text: Keep related content and images together before building the site.\n  image: card-stack.svg\n- title: Review presentation\n  text: Check the result at wide and narrow browser widths.\n  image: card-carousel.svg\n- title: Publish the result\n  text: Build validated static output when the site is ready.\n  image: card-surfaces.svg\n```\n\nEach example is an ordinary Markdown block with a bounded presentation model.","site/routes/010-media/route-content.md","05bcd9122ddb040c",{"html":46,"metadata":47},"\u003Ch2 id=\"image-stack-stack\">Image stack {#stack}\u003C/h2>\n\u003Cp>An image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section’s image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\u003C/p>\n\u003Cp>{note: Local image references are validated against the image folder for this section before the site is built.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: A stack can contain several related images.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"image-carousel-carousel\">Image carousel {#carousel}\u003C/h2>\n\u003Cp>A carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\u003C/p>\n\u003Cp>{note: The carousel provides controls, keyboard interaction and readable position status without route-specific components.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: carousel-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A green panel with a diagonal line.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: First frame: a broad direction.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A blue panel with two overlapping circles.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Second frame: a closer relationship.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-three.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A red panel with a compact grid.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Third frame: a denser detail.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"card-list-cards\">Card list {#cards}\u003C/h2>\n\u003Cp>Cards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\u003C/p>\n\u003Cp>{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>layout: image-top\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>flow: grid\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>size: m\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>width: normal\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Prepare source files\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Keep related content and images together before building the site.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-stack.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Review presentation\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Check the result at wide and narrow browser widths.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-carousel.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Publish the result\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Build validated static output when the site is ready.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-surfaces.svg\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>Each example is an ordinary Markdown block with a bounded presentation model.\u003C/p>\n",{"headings":48,"localImagePaths":58,"remoteImagePaths":59,"frontmatter":60,"imagePaths":62},[49,52,55],{"depth":27,"slug":50,"text":51},"image-stack-stack","Image stack {#stack}",{"depth":27,"slug":53,"text":54},"image-carousel-carousel","Image carousel {#carousel}",{"depth":27,"slug":56,"text":57},"card-list-cards","Card list {#cards}",[],[],{"title":38,"description":39,"navigation":61},{"label":38},[],"site-route-020-surfaces",{"id":63,"data":65,"body":70,"filePath":71,"digest":72,"rendered":73},{"title":66,"description":67,"navigation":68,"sections":69},"Surfaces","See how palette defaults and section surfaces work together.",{"label":66},{},"## Palette options {#palette-options}\n\nNorna provides a small set of named palettes. The theme chooses one\nfor the whole site:\n\n```yaml\npresentation:\n  palette: dark\n```\n\nThe available choices are `dark`, `light` and `paper`. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\n\n## Emphasis surface {#emphasis-surface}\n\nThe route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\n\n```yaml\npresentation:\n  sectionSurfaces:\n    mode: cycle\n    sequence: [base, soft, emphasis]\n```\n\nThe theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\n\n## A practical rule {#practical-rule}\n\nUse the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\n\nTypography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.","site/routes/020-surfaces/route-content.md","0566cc76e3c9f696",{"html":74,"metadata":75},"\u003Ch2 id=\"palette-options-palette-options\">Palette options {#palette-options}\u003C/h2>\n\u003Cp>Norna provides a small set of named palettes. The theme chooses one\nfor the whole site:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">dark\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The available choices are \u003Ccode>dark\u003C/code>, \u003Ccode>light\u003C/code> and \u003Ccode>paper\u003C/code>. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\u003C/p>\n\u003Ch2 id=\"emphasis-surface-emphasis-surface\">Emphasis surface {#emphasis-surface}\u003C/h2>\n\u003Cp>The route theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">presentation\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  sectionSurfaces\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    mode\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycle\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">    sequence\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: [\u003C/span>\u003Cspan style=\"color:#9ECBFF\">base\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">soft\u003C/span>\u003Cspan style=\"color:#E1E4E8\">, \u003C/span>\u003Cspan style=\"color:#9ECBFF\">emphasis\u003C/span>\u003Cspan style=\"color:#E1E4E8\">]\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\u003C/p>\n\u003Ch2 id=\"a-practical-rule-practical-rule\">A practical rule {#practical-rule}\u003C/h2>\n\u003Cp>Use the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\u003C/p>\n\u003Cp>Typography presets and media blocks can vary the content inside that system;\nsurfaces provide the route-level rhythm around it.\u003C/p>\n",{"headings":76,"localImagePaths":86,"remoteImagePaths":87,"frontmatter":88,"imagePaths":90},[77,80,83],{"depth":27,"slug":78,"text":79},"palette-options-palette-options","Palette options {#palette-options}",{"depth":27,"slug":81,"text":82},"emphasis-surface-emphasis-surface","Emphasis surface {#emphasis-surface}",{"depth":27,"slug":84,"text":85},"a-practical-rule-practical-rule","A practical rule {#practical-rule}",[],[],{"title":66,"description":67,"navigation":89},{"label":66},[],"sitewide",["Map",93,94],"site-sitewide",{"id":93,"data":95,"filePath":100,"digest":101,"rendered":102},{"navigation":96,"banners":97,"footer":98},{"brand":14},[],{"copyrightMessage":99},"Norna media and surfaces example.","site/sitewide-content.md","a62822e81bc10bcf",{"html":103,"metadata":104},"",{"headings":105,"localImagePaths":106,"remoteImagePaths":107,"frontmatter":108,"imagePaths":111},[],[],[],{"navigation":109,"footer":110},{"brand":14},{"copyrightMessage":99},[],"theme",["Map",114,115],"theme.md",{"id":114,"data":116,"filePath":118,"digest":119,"rendered":120},{"preset":117},"project","site/theme.md","d19ab283a10fb060",{"html":103,"metadata":121},{"headings":122,"localImagePaths":123,"remoteImagePaths":124,"frontmatter":125,"imagePaths":126},[],[],[],{"preset":117},[]]
+[["Map",1,2,9,10,91,92,102,103],"meta::meta",["Map",3,4,5,6,7,8],"astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":\"jsx\",\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":\"127.0.0.1\",\"port\":57231,\"allowedHosts\":[\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\",\"127.0.0.1\"]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"dangerouslyProcessSVG\":false,\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{\"yml\":\"yaml\"},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"processor\":{\"name\":\"satteri\",\"options\":{\"mdastPlugins\":[],\"hastPlugins\":[],\"features\":{}}}},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"csp\":false,\"actionBodySizeLimit\":1048576,\"serverIslandBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"prerenderConflictBehavior\":\"warn\",\"fetchFile\":\"fetch\",\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"chromeDevtoolsWorkspace\":false,\"collectionStorage\":\"single-file\"},\"legacy\":{\"collectionsBackwardsCompat\":false}}","astro-version","7.1.3","content-config-digest","f24a59e28ae86af5","site",["Map",11,12,32,33,62,63],"site-page-000-home",{"id":11,"data":13,"body":16,"filePath":17,"digest":18,"rendered":19},{"page":14},{"description":15},"A visual test bench for Norna's image and card blocks and presentation surfaces.","# Media and Surfaces\nThis site is a focused test bench for Norna's image and card blocks, sidenotes,\npalettes and section-surface controls.\n\nUse [Media blocks](/media/) to compare image stacks, carousels, card lists and\nsidenotes. Use [Surfaces](/surfaces/) to inspect palettes and automatic section\nsurface sequences.\n\nLogo handling, banners and footers have their own\n[sitewide content demo](https://janga.github.io/norna/examples/feature-demos/sitewide-content/).","site/pages/000-home/content.md","a50d42325ab61e2c",{"html":20,"metadata":21},"\u003Ch1 id=\"media-and-surfaces\">Media and Surfaces\u003C/h1>\n\u003Cp>This site is a focused test bench for Norna’s image and card blocks, sidenotes,\npalettes and section-surface controls.\u003C/p>\n\u003Cp>Use \u003Ca href=\"/media/\">Media blocks\u003C/a> to compare image stacks, carousels, card lists and\nsidenotes. Use \u003Ca href=\"/surfaces/\">Surfaces\u003C/a> to inspect palettes and automatic section\nsurface sequences.\u003C/p>\n\u003Cp>Logo handling, banners and footers have their own\n\u003Ca href=\"https://janga.github.io/norna/examples/feature-demos/sitewide-content/\">sitewide content demo\u003C/a>.\u003C/p>\n",{"headings":22,"localImagePaths":27,"remoteImagePaths":28,"frontmatter":29,"imagePaths":31},[23],{"depth":24,"slug":25,"text":26},1,"media-and-surfaces","Media and Surfaces",[],[],{"page":30},{"description":15},[],"site-page-010-media",{"id":32,"data":34,"body":37,"filePath":38,"digest":39,"rendered":40},{"page":35},{"description":36},"Compare Norna's managed image stacks, carousels and card lists.","# Media blocks\n\n\n## Image stack {#stack}\n\nAn image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section's image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\n\n{note: Local image references are validated against the image folder for this section before the site is built.}\n\n```norna-image-stack\n- image: stack-one.svg\n  alt: A pale panel with a single large circle.\n  caption: One image can introduce a visual idea.\n- image: stack-two.svg\n  alt: A dark panel with three aligned blocks.\n  caption: A stack can contain several related images.\n```\n\n## Image carousel {#carousel}\n\nA carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\n\n{note: The carousel provides controls, keyboard interaction and readable position status without page-specific components.}\n\n```norna-image-carousel\n- image: carousel-one.svg\n  alt: A green panel with a diagonal line.\n  caption: First frame: a broad direction.\n- image: carousel-two.svg\n  alt: A blue panel with two overlapping circles.\n  caption: Second frame: a closer relationship.\n- image: carousel-three.svg\n  alt: A red panel with a compact grid.\n  caption: Third frame: a denser detail.\n```\n\n## Card list {#cards}\n\nCards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\n\n{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\n\n```norna-card-list\nlayout: image-top\nflow: grid\nsize: m\nwidth: normal\n\n- title: Prepare source files\n  text: Keep related content and images together before building the site.\n  image: card-stack.svg\n- title: Review presentation\n  text: Check the result at wide and narrow browser widths.\n  image: card-carousel.svg\n- title: Publish the result\n  text: Build validated static output when the site is ready.\n  image: card-surfaces.svg\n```\n\nEach example is an ordinary Markdown block with a bounded presentation model.","site/pages/010-media/content.md","c8e70857585cc188",{"html":41,"metadata":42},"\u003Ch1 id=\"media-blocks\">Media blocks\u003C/h1>\n\u003Ch2 id=\"image-stack-stack\">Image stack {#stack}\u003C/h2>\n\u003Cp>An image stack places one or more managed images in the normal Markdown flow.\nEach source file belongs in the section’s image folder, and Norna creates the\nresponsive output used by the browser.{note-ref}\u003C/p>\n\u003Cp>{note: Local image references are validated against the image folder for this section before the site is built.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: stack-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A pale panel with a single large circle.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: One image can introduce a visual idea.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: stack-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A dark panel with three aligned blocks.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: A stack can contain several related images.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"image-carousel-carousel\">Image carousel {#carousel}\u003C/h2>\n\u003Cp>A carousel keeps a related group together while showing one image at a time.\nThe controls, keyboard interaction and current position are provided by\nNorna.{note-ref}\u003C/p>\n\u003Cp>{note: The carousel provides controls, keyboard interaction and readable position status without page-specific components.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>- image: carousel-one.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A green panel with a diagonal line.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: First frame: a broad direction.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-two.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A blue panel with two overlapping circles.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Second frame: a closer relationship.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- image: carousel-three.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  alt: A red panel with a compact grid.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  caption: Third frame: a denser detail.\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"card-list-cards\">Card list {#cards}\u003C/h2>\n\u003Cp>Cards are useful when several short items need the same visual treatment. The\nblock controls the layout and size without requiring a component for each\ncard.{note-ref}\u003C/p>\n\u003Cp>{note: Card layout stays within named options, so the same content remains predictable at narrow widths.}\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"plaintext\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan>layout: image-top\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>flow: grid\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>size: m\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>width: normal\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Prepare source files\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Keep related content and images together before building the site.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-stack.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Review presentation\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Check the result at wide and narrow browser widths.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-carousel.svg\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>- title: Publish the result\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  text: Build validated static output when the site is ready.\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan>  image: card-surfaces.svg\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>Each example is an ordinary Markdown block with a bounded presentation model.\u003C/p>\n",{"headings":43,"localImagePaths":57,"remoteImagePaths":58,"frontmatter":59,"imagePaths":61},[44,47,51,54],{"depth":24,"slug":45,"text":46},"media-blocks","Media blocks",{"depth":48,"slug":49,"text":50},2,"image-stack-stack","Image stack {#stack}",{"depth":48,"slug":52,"text":53},"image-carousel-carousel","Image carousel {#carousel}",{"depth":48,"slug":55,"text":56},"card-list-cards","Card list {#cards}",[],[],{"page":60},{"description":36},[],"site-page-020-surfaces",{"id":62,"data":64,"body":67,"filePath":68,"digest":69,"rendered":70},{"page":65},{"description":66},"See how palette defaults and section surfaces work together.","# Surfaces\n\n\n## Palette options {#palette-options}\n\nNorna provides a small set of named palettes. The theme chooses one\nfor the whole site:\n\n```yaml\npalette: dark\n```\n\nThe available choices are `dark`, `light` and `paper`. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\n\n## Emphasis surface {#emphasis-surface}\n\nThe page theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\n\n```yaml\nsections:\n  backgroundPattern: cycling\n```\n\nThe theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\n\n## A practical rule {#practical-rule}\n\nUse the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\n\nTypography profiles and Norna blocks can vary the content inside that system;\nsurfaces provide the page-level rhythm around it.","site/pages/020-surfaces/content.md","84a9ac97f9b706ad",{"html":71,"metadata":72},"\u003Ch1 id=\"surfaces\">Surfaces\u003C/h1>\n\u003Ch2 id=\"palette-options-palette-options\">Palette options {#palette-options}\u003C/h2>\n\u003Cp>Norna provides a small set of named palettes. The theme chooses one\nfor the whole site:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">palette\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">dark\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The available choices are \u003Ccode>dark\u003C/code>, \u003Ccode>light\u003C/code> and \u003Ccode>paper\u003C/code>. A palette defines the\npage, navigation, frame and section colours together, so these parts stay in\nbalance.\u003C/p>\n\u003Ch2 id=\"emphasis-surface-emphasis-surface\">Emphasis surface {#emphasis-surface}\u003C/h2>\n\u003Cp>The page theme uses a palette and a surface sequence when a visual pause or\nchange of rhythm helps the reader. This is not a free-form colour override:\u003C/p>\n\u003Cpre class=\"astro-code github-dark\" style=\"background-color:#24292e;color:#e1e4e8; overflow-x: auto;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">sections\u003C/span>\u003Cspan style=\"color:#E1E4E8\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#85E89D\">  backgroundPattern\u003C/span>\u003Cspan style=\"color:#E1E4E8\">: \u003C/span>\u003Cspan style=\"color:#9ECBFF\">cycling\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The theme can cycle through the selected surfaces automatically. Individual\nsections do not select their own colours.\u003C/p>\n\u003Ch2 id=\"a-practical-rule-practical-rule\">A practical rule {#practical-rule}\u003C/h2>\n\u003Cp>Use the site palette for the overall tone. Use soft and emphasis surfaces for a\nsmall number of meaningful transitions, not to make every section look\nunrelated.\u003C/p>\n\u003Cp>Typography profiles and Norna blocks can vary the content inside that system;\nsurfaces provide the page-level rhythm around it.\u003C/p>\n",{"headings":73,"localImagePaths":86,"remoteImagePaths":87,"frontmatter":88,"imagePaths":90},[74,77,80,83],{"depth":24,"slug":75,"text":76},"surfaces","Surfaces",{"depth":48,"slug":78,"text":79},"palette-options-palette-options","Palette options {#palette-options}",{"depth":48,"slug":81,"text":82},"emphasis-surface-emphasis-surface","Emphasis surface {#emphasis-surface}",{"depth":48,"slug":84,"text":85},"a-practical-rule-practical-rule","A practical rule {#practical-rule}",[],[],{"page":89},{"description":66},[],"sitewide",["Map",93,94],"site-sitewide",{"id":93,"data":95,"filePath":100,"digest":101},{"banners":96,"footer":97},[],{"copyrightMessage":98,"buildInfo":99},"Norna media and surfaces example.",false,"site/sitewide-content.yaml","f836baa25ba25a92","theme",["Map",104,105],"site-theme",{"id":104,"data":106,"filePath":108,"digest":109},{"preset":107},"project","site/theme.yaml","dbaab11724ca485c"]

package/examples/feature-demos/media-and-surfaces/.astro/dev.log

@@ -8,17 +8,7 @@
 [Shiki] The language "norna-image-carousel" doesn't exist, falling back to "plaintext".
 [Shiki] The language "norna-card-list" doesn't exist, falling back to "plaintext".
 {"message":"Synced content","label":"content","level":"info"}
-{"message":" astro  v7.1.3 ready in 1203 ms\n┃ Local    http://127.0.0.1:4414/","label":"SKIP_FORMAT","level":"info"}
-{"message":"watching for file changes...","label":null,"level":"info"}
-{"message":"[200] / 54ms","label":null,"level":"info"}
-{"message":"[200] / 5ms","label":null,"level":"info"}
-[Shiki] The language "norna-image-stack" doesn't exist, falling back to "plaintext".
-[Shiki] The language "norna-image-carousel" doesn't exist, falling back to "plaintext".
-[Shiki] The language "norna-card-list" doesn't exist, falling back to "plaintext".
-{"message":"Reloaded data from routes/010-media/route-content.md","label":"glob-loader","level":"info"}
-{"message":"[200] / 14ms","label":null,"level":"info"}
-{"message":"A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/favicon.ico`.\n\nPossible dynamic routes being matched: ../../../src/pages/[slug].astro.","label":"router","level":"warn"}
-{"message":"[200] / 5ms","label":null,"level":"info"}
-{"message":"[200] /media/ 33ms","label":null,"level":"info"}
-{"message":"✨ new dependencies optimized: embla-carousel","label":"vite","level":"info"}
-{"message":"[200] /surfaces/ 12ms","label":null,"level":"info"}
+listen EPERM: operation not permitted 127.0.0.1:4322
+  Stack trace:
+    at Server.setupListenHandle [as _listen2] (node:net:2302:21)
+    at node:net:2662:7

package/examples/feature-demos/media-and-surfaces/README.md

@@ -16,6 +16,6 @@ Run it from the repository root with:
 node bin/norna.mjs --site-dir examples/feature-demos/media-and-surfaces/site dev:local
 ```
 
-The site has a home page plus routes for Norna blocks and surfaces. Sitewide
-identity, banners and footers are demonstrated separately in
+The site has a home page plus pages for Norna blocks and surfaces. Sitewide
+logo handling, banners and footers are demonstrated separately in
 `examples/feature-demos/sitewide-content/`.

package/examples/feature-demos/media-and-surfaces/node_modules/.vite/deps/_metadata.json

@@ -1,37 +1,37 @@
 {
-  "hash": "8628106a",
-  "configHash": "703f8416",
-  "lockfileHash": "808f2e8e",
-  "browserHash": "4117db40",
+  "hash": "412ad33b",
+  "configHash": "1b883a3e",
+  "lockfileHash": "79c26dec",
+  "browserHash": "bf42c455",
   "optimized": {
     "astro > aria-query": {
       "src": "../../../../../../node_modules/aria-query/lib/index.js",
       "file": "astro_n_aria-query.js",
-      "fileHash": "f2224a32",
+      "fileHash": "b4eacce9",
       "needsInterop": true
     },
     "astro > axobject-query": {
       "src": "../../../../../../node_modules/axobject-query/lib/index.js",
       "file": "astro_n_axobject-query.js",
-      "fileHash": "6ccc4ef0",
+      "fileHash": "d13a0864",
       "needsInterop": true
     },
     "astro > html-escaper": {
       "src": "../../../../../../node_modules/html-escaper/esm/index.js",
       "file": "astro_n_html-escaper.js",
-      "fileHash": "aef09322",
+      "fileHash": "cb07bdab",
       "needsInterop": false
     },
     "astro/runtime/client/dev-toolbar/entrypoint.js": {
       "src": "../../../../../../node_modules/astro/dist/runtime/client/dev-toolbar/entrypoint.js",
       "file": "astro_runtime_client_dev-toolbar_entrypoint__js.js",
-      "fileHash": "31ae3c6f",
+      "fileHash": "9b1eac0c",
       "needsInterop": false
     },
     "embla-carousel": {
       "src": "../../../../../../node_modules/embla-carousel/esm/embla-carousel.esm.js",
       "file": "embla-carousel.js",
-      "fileHash": "40891a4f",
+      "fileHash": "8fd0515b",
       "needsInterop": false
     }
   },

package/examples/feature-demos/media-and-surfaces/site/.norna/generated-images.json

@@ -1,65 +1,65 @@
 {
-  "routes/010-media/images/cards/card-carousel.svg": {
+  "pages/010-media/images/card-carousel.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "1447ec44c3cfe2f9041237dfd8aff42a21b82bc6762b840ab2c22d17b0454f8b",
-    "src": "/images/original/routes/010-media/images/cards/card-carousel-1447ec44.svg",
+    "src": "/images/original/pages/010-media/images/card-carousel-1447ec44.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/cards/card-stack.svg": {
+  "pages/010-media/images/card-stack.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "00e6c2d553b7cb23cc8a13d0fbca72d25a046a76db828faa5de8ccb6b2e4b2ae",
-    "src": "/images/original/routes/010-media/images/cards/card-stack-00e6c2d5.svg",
+    "src": "/images/original/pages/010-media/images/card-stack-00e6c2d5.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/cards/card-surfaces.svg": {
+  "pages/010-media/images/card-surfaces.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "094c43e8bad8f1b8e497d21996f5cf66588f3b4c1ab9ced6dd40a3f67d827fb4",
-    "src": "/images/original/routes/010-media/images/cards/card-surfaces-094c43e8.svg",
+    "src": "/images/original/pages/010-media/images/card-surfaces-094c43e8.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/carousel/carousel-one.svg": {
+  "pages/010-media/images/carousel-one.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "b2d1e7c0642cd1ec7b36a26da54b58739804b61db9e986fe054eb7fe3c811e88",
-    "src": "/images/original/routes/010-media/images/carousel/carousel-one-b2d1e7c0.svg",
+    "src": "/images/original/pages/010-media/images/carousel-one-b2d1e7c0.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/carousel/carousel-three.svg": {
+  "pages/010-media/images/carousel-three.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "08e70e38babec81507497a81dfe0136a7b9993fb885ac06155b346bfc8413cac",
-    "src": "/images/original/routes/010-media/images/carousel/carousel-three-08e70e38.svg",
+    "src": "/images/original/pages/010-media/images/carousel-three-08e70e38.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/carousel/carousel-two.svg": {
+  "pages/010-media/images/carousel-two.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "ba65261788ba8cc8dd5162dd0a748919a01aa925f2f8e3f844745e0c54af28be",
-    "src": "/images/original/routes/010-media/images/carousel/carousel-two-ba652617.svg",
+    "src": "/images/original/pages/010-media/images/carousel-two-ba652617.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/stack/stack-one.svg": {
+  "pages/010-media/images/stack-one.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "c835acc71775886a86829989398b2e498fb2ccedafa465ee03f97dd8f6695c69",
-    "src": "/images/original/routes/010-media/images/stack/stack-one-c835acc7.svg",
+    "src": "/images/original/pages/010-media/images/stack-one-c835acc7.svg",
     "width": 1200,
     "height": 700
   },
-  "routes/010-media/images/stack/stack-two.svg": {
+  "pages/010-media/images/stack-two.svg": {
     "kind": "static",
     "outputVersion": 2,
     "sourceHash": "83c64b1c1dd3b4745100baf272db7e91921b2e2967a51f0d31a9cd30cf045881",
-    "src": "/images/original/routes/010-media/images/stack/stack-two-83c64b1c.svg",
+    "src": "/images/original/pages/010-media/images/stack-two-83c64b1c.svg",
     "width": 1200,
     "height": 700
   }

package/examples/feature-demos/media-and-surfaces/site/{content.md → pages/000-home/content.md}

@@ -1,12 +1,9 @@
 ---
-title: Media and Surfaces
-description: A visual test bench for Norna's image and card blocks and presentation surfaces.
-navigation:
-  label: Home
+page:
+  description: A visual test bench for Norna's image and card blocks and presentation surfaces.
 ---
 
-## Media and surfaces {#intro}
-
+# Media and Surfaces
 This site is a focused test bench for Norna's image and card blocks, sidenotes,
 palettes and section-surface controls.
 
@@ -14,5 +11,5 @@ Use [Media blocks](/media/) to compare image stacks, carousels, card lists and
 sidenotes. Use [Surfaces](/surfaces/) to inspect palettes and automatic section
 surface sequences.
 
-Site identity, banners and footers have their own
+Logo handling, banners and footers have their own
 [sitewide content demo](https://janga.github.io/norna/examples/feature-demos/sitewide-content/).

package/examples/feature-demos/media-and-surfaces/site/{routes → pages}/010-media/content.md

@@ -1,10 +1,11 @@
 ---
-title: Media blocks
-description: Compare Norna's managed image stacks, carousels and card lists.
-navigation:
-  label: Media blocks
+page:
+  description: Compare Norna's managed image stacks, carousels and card lists.
 ---
 
+# Media blocks
+
+
 ## Image stack {#stack}
 
 An image stack places one or more managed images in the normal Markdown flow.
@@ -28,7 +29,7 @@ A carousel keeps a related group together while showing one image at a time.
 The controls, keyboard interaction and current position are provided by
 Norna.{note-ref}
 
-{note: The carousel provides controls, keyboard interaction and readable position status without route-specific components.}
+{note: The carousel provides controls, keyboard interaction and readable position status without page-specific components.}
 
 ```norna-image-carousel
 - image: carousel-one.svg

package/examples/feature-demos/media-and-surfaces/site/{routes → pages}/020-surfaces/content.md

@@ -1,10 +1,11 @@
 ---
-title: Surfaces
-description: See how palette defaults and section surfaces work together.
-navigation:
-  label: Surfaces
+page:
+  description: See how palette defaults and section surfaces work together.
 ---
 
+# Surfaces
+
+
 ## Palette options {#palette-options}
 
 Norna provides a small set of named palettes. The theme chooses one
@@ -20,11 +21,12 @@ balance.
 
 ## Emphasis surface {#emphasis-surface}
 
-The route theme uses a palette and a surface sequence when a visual pause or
+The page theme uses a palette and a surface sequence when a visual pause or
 change of rhythm helps the reader. This is not a free-form colour override:
 
 ```yaml
-sectionSurfaces: [base, soft, emphasis]
+sections:
+  backgroundPattern: cycling
 ```
 
 The theme can cycle through the selected surfaces automatically. Individual
@@ -37,4 +39,4 @@ small number of meaningful transitions, not to make every section look
 unrelated.
 
 Typography profiles and Norna blocks can vary the content inside that system;
-surfaces provide the route-level rhythm around it.
+surfaces provide the page-level rhythm around it.

package/examples/feature-demos/media-and-surfaces/site/pages/020-surfaces/theme.yaml

@@ -0,0 +1,2 @@
+sections:
+  backgroundPattern: cycling

package/examples/feature-demos/media-and-surfaces/site/sitewide-content.yaml

@@ -1,4 +1,2 @@
-navigation:
-  label: Media and Surfaces
 footer:
   copyrightMessage: Norna media and surfaces example.

package/examples/feature-demos/sitewide-content/README.md

@@ -1,7 +1,7 @@
 # Sitewide content
 
-This feature demo shows content and identity shared by every page: a
-convention-based logo, route navigation, dismissible banners and a footer with
+This feature demo shows content and logo display settings shared by every page: a
+convention-based logo, site navigation, dismissible banners and a footer with
 build information.
 
 [Live demo](https://janga.github.io/norna/examples/feature-demos/sitewide-content/)
@@ -14,7 +14,7 @@ Run it from the repository root with:
 node bin/norna.mjs --site-dir examples/feature-demos/sitewide-content/site dev:local
 ```
 
-Move between the routes to verify that the same sitewide elements remain in
+Move between the pages to verify that the same sitewide elements remain in
 place. Banner dismissals are stored locally in the browser.
 
 <!-- norna-image-provenance:

package/examples/feature-demos/sitewide-content/site/pages/000-home/content.md

@@ -0,0 +1,17 @@
+---
+page:
+  description: See how Norna keeps shared logo settings, notices and footer content consistent across pages.
+---
+
+# Sitewide Content
+
+
+## Shared across the site {#intro}
+
+This demo separates page content from elements that belong to the site as a
+whole. Logo display settings, banners and footer come from shared files
+and remain consistent as you move between pages.
+
+Visit [Logo and navigation](/logo-and-navigation/) to inspect the logo and navigation model,
+[Notices](/notices/) to inspect the banner stack and dismissal behaviour, and
+[Footer](/footer/) to inspect persistent footer content and build information.

package/examples/feature-demos/sitewide-content/site/pages/010-logo-and-navigation/content.md

@@ -0,0 +1,17 @@
+---
+page:
+  description: See how a convention-based logo and page-title navigation work across a Norna site.
+---
+
+# Logo and navigation
+The logo is discovered from `public/logo.svg`. The homepage Markdown H1
+provides its alt text, and an optional top-level `logo` setting in
+`sitewide-content.yaml` can adjust its displayed height.
+
+The logo is a separate home link without a section menu. The homepage remains
+the first ordinary navigation item and exposes its sections like any page.
+
+## Navigation context {#navigation}
+
+The page links come from the site's page structure. The shared logo returns to
+Home, while the active page is indicated in the same navigation row.

package/examples/feature-demos/sitewide-content/site/{routes → pages}/020-notices/content.md

@@ -1,10 +1,11 @@
 ---
-title: Notices
-description: Inspect Norna's shared banner stack, visibility and dismissal behaviour.
-navigation:
-  label: Notices
+page:
+  description: Inspect Norna's shared banner stack, visibility and dismissal behaviour.
 ---
 
+# Notices
+
+
 ## Banner stack {#banner-stack}
 
 The two notices above the page content are defined in `sitewide-content.yaml`.
@@ -13,10 +14,10 @@ List order controls their order, and each notice keeps its own identity.
 ## Dismissal {#dismissal}
 
 Use the close button to dismiss either banner. The choice is stored locally in
-the browser and applies on every route. Changing a banner's content gives it a
+the browser and applies on every page. Changing a banner's content gives it a
 new dismissal key, allowing an updated notice to appear again.
 
 ## Visibility {#visibility}
 
 A banner can optionally have `from` and `until` dates. Norna filters the stack
-before rendering, using the same date-window rules as temporary sections.
+before rendering. `from` is inclusive and `until` is exclusive.

package/examples/feature-demos/sitewide-content/site/{routes → pages}/030-footer/content.md

@@ -1,14 +1,15 @@
 ---
-title: Footer
-description: Inspect content and build information shared in the Norna site footer.
-navigation:
-  label: Footer
+page:
+  description: Inspect content and build information shared in the Norna site footer.
 ---
 
+# Footer
+
+
 ## Persistent footer content {#footer-content}
 
 The footer below this page is defined once in `sitewide-content.yaml`. Its
-copyright message remains the same across routes.
+copyright message remains the same across pages.
 
 ## Build information {#build-information}
 

package/examples/feature-demos/sitewide-content/site/sitewide-content.yaml

@@ -1,23 +1,14 @@
-navigation:
-  label: Shared Frame
-  logo:
-    height: 2.8rem
+logo:
+  height: 2.8rem
 banners:
   - id: preview-environment
     tone: warning
     title: Preview environment
-    text: This sitewide notice appears on every route in the demo.
+    text: This sitewide notice appears on every page in the demo.
   - id: content-review
     tone: warning
     title: Content review
     text: Dismiss each notice independently with its close button.
 footer:
   copyrightMessage: Shared Frame sitewide-content example.
-  buildInfo:
-    enabled: true
-    text: Built
-    dateTimeFormat:
-      locale: en-GB
-      timeZone: UTC
-      dateStyle: medium
-      timeStyle: short
+  buildInfo: true

package/examples/feature-demos/theme-preset-documentation/README.md

@@ -0,0 +1,16 @@
+# Documentation Theme Preset
+
+This site demonstrates the complete `documentation` preset without overrides.
+
+[Live demo](https://janga.github.io/norna/examples/feature-demos/theme-preset-documentation/)
+|
+[View source](https://github.com/janga/norna/tree/main/examples/feature-demos/theme-preset-documentation)
+
+Run it from the repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/feature-demos/theme-preset-documentation/site dev:local
+```
+
+The dog photos are CC0 images by Bicanski, sourced from Pixnio. Attribution is
+included in the captions even though the licence does not require it.

package/examples/feature-demos/theme-preset-documentation/site/.norna/generated-images.json

@@ -0,0 +1,74 @@
+{
+  "pages/000-home/images/black-schnauzer.jpg": {
+    "outputVersion": 2,
+    "sourceHash": "569922b4aa71096cc8e3a245f0ddccf74f941881b823084723854580078b50b0",
+    "width": 1200,
+    "height": 800,
+    "variants": [
+      {
+        "src": "/images/generated/pages/000-home/images/black-schnauzer-569922b4-480.webp",
+        "width": 480
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/black-schnauzer-569922b4-768.webp",
+        "width": 768
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/black-schnauzer-569922b4-1080.webp",
+        "width": 1080
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/black-schnauzer-569922b4-1200.webp",
+        "width": 1200
+      }
+    ]
+  },
+  "pages/000-home/images/retriever-portrait.jpg": {
+    "outputVersion": 2,
+    "sourceHash": "c441ca2935debeb008a43e2a7fd510bfd6776682f84160151fd5c8605bfb8cae",
+    "width": 1200,
+    "height": 800,
+    "variants": [
+      {
+        "src": "/images/generated/pages/000-home/images/retriever-portrait-c441ca29-480.webp",
+        "width": 480
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/retriever-portrait-c441ca29-768.webp",
+        "width": 768
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/retriever-portrait-c441ca29-1080.webp",
+        "width": 1080
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/retriever-portrait-c441ca29-1200.webp",
+        "width": 1200
+      }
+    ]
+  },
+  "pages/000-home/images/schnauzer-portrait.jpg": {
+    "outputVersion": 2,
+    "sourceHash": "545b0427b8e15846fe73656758da6eb3b8612dabf2b2879c31197986f8deb9b5",
+    "width": 1200,
+    "height": 900,
+    "variants": [
+      {
+        "src": "/images/generated/pages/000-home/images/schnauzer-portrait-545b0427-480.webp",
+        "width": 480
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/schnauzer-portrait-545b0427-768.webp",
+        "width": 768
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/schnauzer-portrait-545b0427-1080.webp",
+        "width": 1080
+      },
+      {
+        "src": "/images/generated/pages/000-home/images/schnauzer-portrait-545b0427-1200.webp",
+        "width": 1200
+      }
+    ]
+  }
+}

package/examples/feature-demos/{theme-presets/site/routes/020-documentation → theme-preset-documentation/site/pages/000-home}/content.md

@@ -1,13 +1,10 @@
 ---
-title: Documentation
-description: A complete theme preset for guides and explanatory writing.
-navigation:
-  label: Documentation
+page:
+  description: A complete theme preset for guides and explanatory writing.
 ---
 
-## Documentation {#documentation}
-
-This route uses the complete `documentation` preset without overrides. It
+# Documentation
+This site uses the complete `documentation` preset without overrides. It
 favours readable explanatory text, compact vertical rhythm and restrained
 surface changes for longer guides.
 

package/examples/feature-demos/theme-preset-documentation/site/sitewide-content.yaml

@@ -0,0 +1,3 @@
+footer:
+  copyrightMessage: Dog photos by Bicanski, CC0, via Pixnio.
+  buildInfo: true

package/examples/feature-demos/theme-preset-portfolio/README.md

@@ -0,0 +1,16 @@
+# Portfolio Theme Preset
+
+This site demonstrates the complete `portfolio` preset without overrides.
+
+[Live demo](https://janga.github.io/norna/examples/feature-demos/theme-preset-portfolio/)
+|
+[View source](https://github.com/janga/norna/tree/main/examples/feature-demos/theme-preset-portfolio)
+
+Run it from the repository root:
+
+```sh
+node bin/norna.mjs --site-dir examples/feature-demos/theme-preset-portfolio/site dev:local
+```
+
+The dog photos are CC0 images by Bicanski, sourced from Pixnio. Attribution is
+included in the captions even though the licence does not require it.