@janga/norna 0.7.1 → 0.7.3

package/starters/basic/site/content.md

@@ -1,21 +1,56 @@
 ---
-title: Example Gallery
+title: Example Site
 description: Minimal norna starter site.
 sections:
   - id: intro
     presentation:
       typography:
         preset: statement
-    gallery: []
   - id: work
-    gallery: []
+  - id: lorem1
+  - id: lorem2
+  - id: lorem3
 
 ---
-## Intro {#intro}
-
-This is a minimal starter site for norna. Use
-[highlighted inline text]{.highlight} when a short phrase needs emphasis.
 
+## Intro {#intro}
+This is a minimal starter site for norna. Since this site doesn't have any
+routes defined, the navigation menu will be a sticky bar with anchor links for
+ease of use on phones etc. [Highlighted inline text]{.highlight} when a short
+phrase needs emphasis
 ## Work {#work}
-
-Add gallery rows in frontmatter and matching source images under images/work/.
+Add image rows in frontmatter and matching source images under images/work/.
+## What is Lorem Ipsum? {#lorem1}
+Lorem Ipsum is simply dummy text of the printing and typesetting
+industry. Lorem Ipsum has been the industry's standard dummy text ever
+since 1966, when designers at Letraset and James Mosley, the librarian
+at St Bride Printing Library in London, took a 1914 Cicero translation
+and scrambled it to make dummy text for Letraset's Body Type
+sheets. It has survived not only many decades, but also the leap into
+electronic typesetting, remaining essentially unchanged. It was
+popularised thanks to these sheets and more recently with desktop
+publishing software like Aldus PageMaker and Microsoft Word including
+versions of Lorem Ipsum.
+## Why do we use it? {#lorem2}
+It is a long established fact that a reader will be distracted by the
+readable content of a page when looking at its layout. The point of
+using Lorem Ipsum is that it has a more-or-less normal distribution of
+letters, as opposed to using 'Content here, content here', making it
+look like readable English. Many desktop publishing packages and web
+page editors now use Lorem Ipsum as their default model text, and a
+search for 'lorem ipsum' will uncover many web sites still in their
+infancy. Various versions have evolved over the years, sometimes by
+accident, sometimes on purpose (injected humour and the like).
+## Where does it come from? {#lorem3}
+Contrary to popular belief, Lorem Ipsum is not simply random text. It
+has roots in a piece of classical Latin literature from 45 BC, making
+it over 2000 years old. Richard McClintock, a Latin professor at
+Hampden-Sydney College in Virginia, looked up one of the more obscure
+Latin words, consectetur, from a Lorem Ipsum passage, and going
+through the cites of the word in classical literature, discovered the
+undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
+1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
+Evil) by Cicero, written in 45 BC. This book is a treatise on the
+theory of ethics, very popular during the Renaissance. The first line
+of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
+section 1.10.32

package/starters/basic/site/theme.md

@@ -4,50 +4,147 @@
 # Active values below are ordinary YAML; this marked comment block is only help text.
 #
 # Available structure:
-# presentation:
-#   backgroundColor: quoted hex color, e.g. "#000000"
-#   textColor: quoted hex color, e.g. "#f7f4ee"
-#   inlineStyles:
-#     style-name:
-#       color: quoted hex color
-#   typography:
-#     preset: quiet-gallery | compact-gallery | text-forward | statement
-#     overrides:
-#       heading:
+# navigation:
+#   brand: site-wide brand/home text; defaults to the homepage title
+# layout:
+#   pageWidth: CSS length, e.g. 1180px
+#   gutter:
+#     desktop: CSS length or clamp(), e.g. clamp(1.25rem, 4vw, 3rem)
+#     mobile: CSS length, e.g. 1rem
+#   spacing:
+#     firstSectionTop:
+#       desktop: CSS length or clamp(), e.g. clamp(1.875rem, 3vw, 2.75rem)
+#       mobile: CSS length, e.g. 1.375rem
+#     sectionGap:
+#       desktop: CSS length or clamp(), e.g. clamp(2.55rem, 4.2vw, 3.9rem)
+#       mobile: CSS length, e.g. 2.25rem
+#     finalSectionBottom:
+#       desktop: CSS length or clamp(), e.g. clamp(2.55rem, 4.2vw, 3.9rem)
+#       mobile: CSS length, e.g. 2.25rem
+#     sectionHeadingToBody:
+#       desktop: CSS length or clamp(), e.g. clamp(0.5625rem, 1.25vw, 0.75rem)
+#       mobile: CSS length, e.g. 0.4375rem
+#     bodyToImages:
+#       desktop: CSS length or clamp(), e.g. clamp(1.25rem, 2.5vw, 2rem)
+#       mobile: CSS length, e.g. 1.25rem
+#     imageGap:
+#       desktop: CSS length or clamp(), e.g. clamp(1.5rem, 3.5vw, 2.75rem)
+#       mobile: CSS length, e.g. 2.75rem
+#     subheadingTop:
+#       desktop: CSS length, e.g. 2rem
+#       mobile: CSS length, e.g. 1.6rem
+#     subheadingRuleTop:
+#       desktop: CSS length, e.g. 1rem
+#       mobile: CSS length, e.g. 0.8rem
+# gallery:
+#   width: CSS length, e.g. 900px
+#   maxAvailableWidthPercent:
+#     desktop: number from 1 through 100
+#     mobile: number from 1 through 100
+#   maxAvailableHeightPercent:
+#     desktop: number from 1 through 100
+#     mobile: number from 1 through 100
+# typography:
+#   fontFamily: CSS font-family stack
+#   preset: quiet-gallery | compact-gallery | text-forward | statement
+#   overrides:
+#     headings:
+#       h2:
 #         align:
 #           desktop: left | center | right
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
 #         spacing: CSS length, e.g. 0.65em
-#       body:
+#       h3:
 #         align:
 #           desktop: left | center | right
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
-#         paragraphSpacing: CSS length, e.g. 0.85em
-#       caption:
+#         spacing: CSS length, e.g. 0.9rem
+#       h4:
 #         align:
 #           desktop: left | center | right
 #           mobile: left | center | right
 #         size: small | medium | large | xlarge
 #         lineHeight: number from 1 through 3
-#         spacing: CSS length, e.g. 0.5em
+#         spacing: CSS length, e.g. 0.85rem
+#     body:
+#       align:
+#         desktop: left | center | right
+#         mobile: left | center | right
+#       size: small | medium | large | xlarge
+#       lineHeight: number from 1 through 3
+#       paragraphSpacing: CSS length, e.g. 0.85em
+#     caption:
+#       align:
+#         desktop: left | center | right
+#         mobile: left | center | right
+#       size: small | medium | large | xlarge
+#       lineHeight: number from 1 through 3
+#       spacing: 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
 # norna:end theme-help
+navigation:
+  brand: Example Site
+layout:
+  pageWidth: 1180px
+  gutter:
+    desktop: clamp(1.25rem, 4vw, 3rem)
+    mobile: 1rem
+  spacing:
+    firstSectionTop:
+      desktop: clamp(1.875rem, 3vw, 2.75rem)
+      mobile: 1.375rem
+    sectionGap:
+      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
+      mobile: 2.25rem
+    finalSectionBottom:
+      desktop: clamp(2.55rem, 4.2vw, 3.9rem)
+      mobile: 2.25rem
+    sectionHeadingToBody:
+      desktop: clamp(0.5625rem, 1.25vw, 0.75rem)
+      mobile: 0.4375rem
+    bodyToImages:
+      desktop: clamp(1.25rem, 2.5vw, 2rem)
+      mobile: 1.25rem
+    imageGap:
+      desktop: clamp(1.5rem, 3.5vw, 2.75rem)
+      mobile: 2.75rem
+    subheadingTop:
+      desktop: 2rem
+      mobile: 1.6rem
+    subheadingRuleTop:
+      desktop: 1rem
+      mobile: 0.8rem
+gallery:
+  width: 900px
+  maxAvailableWidthPercent:
+    desktop: 100
+    mobile: 100
+  maxAvailableHeightPercent:
+    desktop: 74
+    mobile: 68
+typography:
+  fontFamily: "Arial, 'Helvetica Neue', Helvetica, sans-serif"
+  preset: quiet-gallery
 presentation:
   backgroundColor: "#000000"
   textColor: "#f7f4ee"
   inlineStyles:
     highlight:
       color: "#ffd84d"
-  typography:
-    preset: quiet-gallery
 frame:
   colors: presentation
 ---

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

@@ -0,0 +1,65 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: github-pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.18.0
+          cache: npm
+
+      - name: Install image tools
+        run: sudo apt-get update && sudo apt-get install -y imagemagick
+
+      - name: Restore generated images
+        uses: actions/cache@v4
+        with:
+          path: site/.norna/public/images/generated
+          key: norna-images-${{ hashFiles('site/.norna/generated-images.json') }}
+          restore-keys: |
+            norna-images-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Configure Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/starters/project/README.md

@@ -0,0 +1,72 @@
+# Project Starter
+
+This is a compact Norna starter for small open source projects, CLI tools,
+libraries, and similar project sites.
+
+## Setup
+
+```sh
+npm install
+npm run dev
+```
+
+If the standard local port is blocked, start with:
+
+```sh
+npm run dev -- --kill
+```
+
+## Files
+
+- `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, colors,
+  frame colors, and inline text styles.
+- `site/content.md`: homepage title, sections, project summary, links,
+  install command, example usage, features, and next steps.
+- `site/routes/guide/route-content.md`: short secondary page with realistic
+  project guide content.
+- `site/public/robots.txt`: static public file copied into the built site.
+
+The starter intentionally does not include generated output, `node_modules`, or
+a local Norna installation. It does include `package-lock.json` because the
+GitHub Pages workflow uses `npm ci`.
+
+## Adapt The Starter
+
+1. Replace the project name, tagline, links, install command, example usage,
+   features, and use cases in `site/content.md`.
+2. Replace the guide examples in `site/routes/guide/route-content.md`, or
+   delete the route if the homepage is enough.
+3. Edit `site/theme.md` for brand name, colors, frame colors, and inline text
+   styles.
+4. Edit `site/config.mjs` for public URL, GitHub repository, footer text, and
+   deploy workflow name.
+5. Update `package.json` with the site's package name and keep
+   `package-lock.json` committed.
+
+## Common Commands
+
+```sh
+npm run norna:check
+npm run norna:typography:show
+npm run build
+```
+
+To verify the same install path used by GitHub Pages:
+
+```sh
+npm ci
+npm run build
+```
+
+Generic Norna documentation lives in the Norna repository:
+
+- `docs/getting-started.md`
+- `docs/site-structure.md`
+- `docs/content.md`
+- `docs/theme.md`
+- `docs/typography.md`
+- `docs/routes.md`
+- `docs/configuration.md`
+- `docs/commands.md`