nibula 1.6.0 → 1.6.2

package/docs/Head and SEO.md

@@ -1,140 +1,140 @@
-# Head & SEO
-
-Global settings live in `src/frontend/data/pages.json` and are available everywhere via `{{ pages.* }}`.
-
-## Global fields
-
-```json
-{
-  "site_name": "Site name",
-  "title": "Site title",
-  "description": "Site description",
-  "keywords": "keyword1, keyword2, keyword3",
-  "domain": "yoursite.com",
-  "url": "https://yoursite.com",
-  "lang": "en",
-  "author": "Name and surname",
-  "theme": "dark",
-  "logo": "/assets/brand/logo.svg",
-  "legal": {
-    "privacy": "",
-    "cookie": "",
-    "cookieControls": "",
-    "terms": "",
-    "copyright": {
-      "year": "2026",
-      "text": "Copyright text"
-    }
-  }
-}
-```
-
-| Field | Purpose |
-|---|---|
-| `site_name` | Brand name (used in meta tags and JSON-LD) |
-| `title` | Default page title — fallback when a page has no `seo.title` |
-| `description` | Default meta description — fallback for pages |
-| `keywords` | Default meta keywords — fallback for pages |
-| `domain` / `url` | Canonical URLs, `og:url`, JSON-LD |
-| `lang` | HTML `lang` attribute |
-| `author` | Meta author and JSON-LD author |
-| `theme` | Site color scheme (`light` / `dark`) — sets `data-theme`, `data-bs-theme` and `color-scheme` |
-| `theme_color` | Browser UI / PWA bar color — should match the chosen `theme` |
-| `logo` | Path to the logo, also used as social image |
-| `legal.privacy` / `cookie` / `cookieControls` / `terms` | Legal page URLs |
-| `legal.copyright.year` / `text` | Footer copyright |
-
-## Per-page SEO and CDN
-
-Per-page settings live in `src/frontend/data/pages.json`, available via `{{ pages.* }}`. Each page is keyed by its camelCase `title` from the front matter, at the root of the file:
-
-```json
-{
-  "examplePage": {
-    "seo": {
-      "title": "Example Page",
-      "description": "Description",
-      "keywords": "",
-      "noindex": false,
-      "canonical": ""
-    },
-    "cdn": {
-      "css": ["https://example.com/lib.min.css"],
-      "js": ["https://example.com/lib.min.js"]
-    }
-  }
-}
-```
-
-| Field | Purpose | If empty / absent |
-|---|---|---|
-| `seo.title` | Page title | Falls back to global `title` |
-| `seo.description` | Meta description | Falls back to global `description` |
-| `seo.keywords` | Meta keywords | Falls back to global `keywords` |
-| `seo.noindex` | If `true`, emits `<meta name="robots" content="noindex, follow">` and drops the page from the sitemap | Page is indexable |
-| `seo.canonical` | Absolute canonical URL override | Computed as `url + page.url` |
-| `cdn.css` / `cdn.js` | Extra per-page CDN links | No extra links loaded |
-
-## Fallback logic
-
-Global values are defaults, not duplicates. A page value is used when present; otherwise the global one applies:
-
-```njk
-{{ pageData.seo.title or title or site.title }}
-{{ pageData.seo.description or site.description }}
-{{ pageData.seo.keywords or site.keywords }}
-```
-
-`noindex` and `canonical` have no global default: `noindex` defaults to indexable behavior, `canonical` is computed from the URL. They exist per-page only.
-
-## Theme
-
-`theme` is a single fixed value that drives the whole site:
-
-```njk
-<html data-theme="{{ site.theme }}" data-bs-theme="{{ site.theme }}">
-<meta name="color-scheme" content="{{ site.theme }}">
-<meta name="theme-color" content="{{ site.theme_color }}">
-```
-
-| Attribute | Purpose |
-|---|---|
-| `data-theme` | Your own hook — target it in SCSS to define theme variables |
-| `data-bs-theme` | Bootstrap's color mode. Ignored (harmless) if you use another framework |
-| `color-scheme` | Standard CSS — makes scrollbars, form controls and autofill follow the theme |
-| `theme-color` | Color of the browser UI bar on mobile |
-
-Keep `theme` and `theme_color` consistent: a `dark` theme with a white `theme_color` gives a white browser bar over a dark page.
-
-See the SCSS docs for how to hook your variables to `data-theme`.
-
-## Favicon
-
-The three favicon tags are hardcoded in `base.njk`. To change the icons, replace the files in `src/frontend/assets/brand/` keeping the same names:
-
-```html
-<link rel="icon" type="image/svg+xml" href="{{ '/assets/brand/favicon.svg' | url }}">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/brand/favicon-32.png' | url }}">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/brand/apple-touch-icon.png' | url }}">
-```
-
-| File | Purpose |
-|---|---|
-| `favicon.svg` | Modern browsers, scales to any size |
-| `favicon-48.png` | Fallback for older browsers and some crawlers |
-| `favicon-32.png` | Fallback for older browsers and some crawlers |
-| `apple-touch-icon.png` | iOS home screen icon — 180×180, must be opaque (iOS renders transparency as black) |
-
-> ⚠️ Without `apple-touch-icon.png`, iOS uses a screenshot of the page as the home screen icon.
-
-## AI & SEO bots
-
-`llms.txt`, `robots.txt` and `sitemap.xml` are generated from `.njk` templates and are publicly reachable (they must not be blocked by the server config).
-
-| File | Purpose | Reachable at |
-|---|---|---|
-| `llms.njk` | Tells AI models what the site is about | `yoursite.com/llms.txt` |
-| `robots.njk` | Controls search-engine crawling | `yoursite.com/robots.txt` |
-| `sitemap.njk` | Lists indexable pages (skips drafts, 404, and `noindex`) | `yoursite.com/sitemap.xml` |
-
+# Head & SEO
+
+Global settings live in `src/frontend/data/pages.json` and are available everywhere via `{{ pages.* }}`.
+
+## Global fields
+
+```json
+{
+  "site_name": "Site name",
+  "title": "Site title",
+  "description": "Site description",
+  "keywords": "keyword1, keyword2, keyword3",
+  "domain": "yoursite.com",
+  "url": "https://yoursite.com",
+  "lang": "en",
+  "author": "Name and surname",
+  "theme": "dark",
+  "logo": "/assets/brand/logo.svg",
+  "legal": {
+    "privacy": "",
+    "cookie": "",
+    "cookieControls": "",
+    "terms": "",
+    "copyright": {
+      "year": "2026",
+      "text": "Copyright text"
+    }
+  }
+}
+```
+
+| Field | Purpose |
+|---|---|
+| `site_name` | Brand name (used in meta tags and JSON-LD) |
+| `title` | Default page title — fallback when a page has no `seo.title` |
+| `description` | Default meta description — fallback for pages |
+| `keywords` | Default meta keywords — fallback for pages |
+| `domain` / `url` | Canonical URLs, `og:url`, JSON-LD |
+| `lang` | HTML `lang` attribute |
+| `author` | Meta author and JSON-LD author |
+| `theme` | Site color scheme (`light` / `dark`) — sets `data-theme`, `data-bs-theme` and `color-scheme` |
+| `theme_color` | Browser UI / PWA bar color — should match the chosen `theme` |
+| `logo` | Path to the logo, also used as social image |
+| `legal.privacy` / `cookie` / `cookieControls` / `terms` | Legal page URLs |
+| `legal.copyright.year` / `text` | Footer copyright |
+
+## Per-page SEO and CDN
+
+Per-page settings live in `src/frontend/data/pages.json`, available via `{{ pages.* }}`. Each page is keyed by its camelCase `title` from the front matter, at the root of the file:
+
+```json
+{
+  "examplePage": {
+    "seo": {
+      "title": "Example Page",
+      "description": "Description",
+      "keywords": "",
+      "noindex": false,
+      "canonical": ""
+    },
+    "cdn": {
+      "css": ["https://example.com/lib.min.css"],
+      "js": ["https://example.com/lib.min.js"]
+    }
+  }
+}
+```
+
+| Field | Purpose | If empty / absent |
+|---|---|---|
+| `seo.title` | Page title | Falls back to global `title` |
+| `seo.description` | Meta description | Falls back to global `description` |
+| `seo.keywords` | Meta keywords | Falls back to global `keywords` |
+| `seo.noindex` | If `true`, emits `<meta name="robots" content="noindex, follow">` and drops the page from the sitemap | Page is indexable |
+| `seo.canonical` | Absolute canonical URL override | Computed as `url + page.url` |
+| `cdn.css` / `cdn.js` | Extra per-page CDN links | No extra links loaded |
+
+## Fallback logic
+
+Global values are defaults, not duplicates. A page value is used when present; otherwise the global one applies:
+
+```njk
+{{ pageData.seo.title or title or site.title }}
+{{ pageData.seo.description or site.description }}
+{{ pageData.seo.keywords or site.keywords }}
+```
+
+`noindex` and `canonical` have no global default: `noindex` defaults to indexable behavior, `canonical` is computed from the URL. They exist per-page only.
+
+## Theme
+
+`theme` is a single fixed value that drives the whole site:
+
+```njk
+<html data-theme="{{ site.theme }}" data-bs-theme="{{ site.theme }}">
+<meta name="color-scheme" content="{{ site.theme }}">
+<meta name="theme-color" content="{{ site.theme_color }}">
+```
+
+| Attribute | Purpose |
+|---|---|
+| `data-theme` | Your own hook — target it in SCSS to define theme variables |
+| `data-bs-theme` | Bootstrap's color mode. Ignored (harmless) if you use another framework |
+| `color-scheme` | Standard CSS — makes scrollbars, form controls and autofill follow the theme |
+| `theme-color` | Color of the browser UI bar on mobile |
+
+Keep `theme` and `theme_color` consistent: a `dark` theme with a white `theme_color` gives a white browser bar over a dark page.
+
+See the SCSS docs for how to hook your variables to `data-theme`.
+
+## Favicon
+
+The three favicon tags are hardcoded in `base.njk`. To change the icons, replace the files in `src/frontend/assets/brand/` keeping the same names:
+
+```html
+<link rel="icon" type="image/svg+xml" href="{{ '/assets/brand/favicon.svg' | url }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/brand/favicon-32.png' | url }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/brand/apple-touch-icon.png' | url }}">
+```
+
+| File | Purpose |
+|---|---|
+| `favicon.svg` | Modern browsers, scales to any size |
+| `favicon-48.png` | Fallback for older browsers and some crawlers |
+| `favicon-32.png` | Fallback for older browsers and some crawlers |
+| `apple-touch-icon.png` | iOS home screen icon — 180×180, must be opaque (iOS renders transparency as black) |
+
+> ⚠️ Without `apple-touch-icon.png`, iOS uses a screenshot of the page as the home screen icon.
+
+## AI & SEO bots
+
+`llms.txt`, `robots.txt` and `sitemap.xml` are generated from `.njk` templates and are publicly reachable (they must not be blocked by the server config).
+
+| File | Purpose | Reachable at |
+|---|---|---|
+| `llms.njk` | Tells AI models what the site is about | `yoursite.com/llms.txt` |
+| `robots.njk` | Controls search-engine crawling | `yoursite.com/robots.txt` |
+| `sitemap.njk` | Lists indexable pages (skips drafts, 404, and `noindex`) | `yoursite.com/sitemap.xml` |
+
 To customize, edit `src/frontend/llms.njk` or `src/frontend/robots.njk` directly.

package/docs/Javascript.md

@@ -1,127 +1,127 @@
-# JavaScript
-
-> Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (`.ts` instead of `.js`), that imports do **not** include the extension, and that paths use `src/frontend/ts/` instead of `src/frontend/js/`.
-
-## Page JS
-
-Each page has its own JS entry point in `src/frontend/js/pages/`, bundled and minified by esbuild and loaded automatically by `base.njk`.
-
-Import only what the page needs.
-
-### examplePage.js <small>(`src/frontend/js/pages/`)</small>
-
-```js
-import '../global.js';
-
-// import { initExampleModule } from '../modules/exampleModule.js';
-
-document.addEventListener("DOMContentLoaded", () => {
-    // initExampleModule();
-});
-
-// Page logic here
-```
-
-## Global JS
-
-Some code has to run on every page: a header menu, a theme toggle, a cookie banner. Repeating it in every page entry point means you'll eventually forget it on one of them, and the bug only shows up on that single page.
-
-That's what `global.js` is for. It lives in `src/frontend/js/`, every page entry point imports it, and it takes care of running the shared modules.
-
-### global.js <small>(`src/frontend/js/`)</small>
-
-```js
-// import { initExampleModule } from './exampleModule.js';
-
-function initGlobal() {
-    // initExampleModule();
-}
-
-// Global logic here
-
-// Do not touch
-// This instruction starts global.js itself
-document.addEventListener('DOMContentLoaded', initGlobal);
-```
-
-Pages import it without curly braces, since there is nothing to export — the module runs on its own as soon as it's part of the bundle:
-
-```js
-import '../global.js';
-```
-
-Note that the import path inside `global.js` is `'./exampleModule.js'` and not `'../modules/exampleModule.js'`: `global.js` already sits in the modules folder, next to the modules it imports.
-
-### A concrete example: the header menu
-
-A responsive header has a burger button that opens the navigation on small screens. The header is included in `base.njk`, so it's on every page — a textbook case for `global.js`.
-
-Write the behaviour as a normal module:
-
-### header.js <small>(`src/frontend/js/modules/`)</small>
-```js
-export function initHeader() {
-    const toggle = document.querySelector('.menu-toggle');
-    const menu = document.querySelector('.menu');
-
-    if (!toggle || !menu) return;
-
-    toggle.addEventListener('click', () => {
-        menu.classList.toggle('is-open');
-    });
-}
-```
-
-Then wire it up once, in `global.js`:
-
-```js
-import { initHeader } from './modules/header.js';
-
-function initGlobal() {
-    initHeader();
-}
-
-// Do not touch
-// This instruction starts global.js itself
-document.addEventListener('DOMContentLoaded', initGlobal);
-```
-
-The burger now works on every page, and no page entry point had to change. Adding another global behaviour later is two lines: one import, one call inside `initGlobal()`.
-
-The early `return` matters: if a page has no header, the module does nothing instead of throwing an error that would stop your other scripts.
-
-### Global or page module?
-
-Use `global.js` for behaviour tied to something present on every page — anything included in `base.njk`, essentially.
-
-Keep it in the page entry point when only one or two pages need it. Everything imported by `global.js` ends up in *every* page bundle, so a heavy module used by a single page belongs in that page instead.
-
-## Modules
-
-Modules live in `src/frontend/js/modules/`. Modules that interact with the DOM must be called inside `DOMContentLoaded`; others can be called anywhere.
-
-## Adding a module
-
-Create a new `.js` file in `src/frontend/js/modules/`. Subfolders are allowed.
-
-Use ESM syntax — esbuild handles the bundling:
-
-### exampleModule.js <small>(`src/frontend/js/modules/`)</small>
-
-```js
-export function exampleModule() {
-    // Module logic here
-}
-```
-
-Then import it in the pages that need it:
-
-```js
-import { exampleModule } from '../modules/exampleModule.js';
-```
-
-In TypeScript, omit the extension:
-
-```ts
-import { exampleModule } from '../modules/exampleModule';
+# JavaScript
+
+> Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (`.ts` instead of `.js`), that imports do **not** include the extension, and that paths use `src/frontend/ts/` instead of `src/frontend/js/`.
+
+## Page JS
+
+Each page has its own JS entry point in `src/frontend/js/pages/`, bundled and minified by esbuild and loaded automatically by `base.njk`.
+
+Import only what the page needs.
+
+### examplePage.js <small>(`src/frontend/js/pages/`)</small>
+
+```js
+import '../global.js';
+
+// import { initExampleModule } from '../modules/exampleModule.js';
+
+document.addEventListener("DOMContentLoaded", () => {
+    // initExampleModule();
+});
+
+// Page logic here
+```
+
+## Global JS
+
+Some code has to run on every page: a header menu, a theme toggle, a cookie banner. Repeating it in every page entry point means you'll eventually forget it on one of them, and the bug only shows up on that single page.
+
+That's what `global.js` is for. It lives in `src/frontend/js/`, every page entry point imports it, and it takes care of running the shared modules.
+
+### global.js <small>(`src/frontend/js/`)</small>
+
+```js
+// import { initExampleModule } from './exampleModule.js';
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch
+// This instruction starts global.js itself
+document.addEventListener('DOMContentLoaded', initGlobal);
+```
+
+Pages import it without curly braces, since there is nothing to export — the module runs on its own as soon as it's part of the bundle:
+
+```js
+import '../global.js';
+```
+
+Note that the import path inside `global.js` is `'./exampleModule.js'` and not `'../modules/exampleModule.js'`: `global.js` already sits in the modules folder, next to the modules it imports.
+
+### A concrete example: the header menu
+
+A responsive header has a burger button that opens the navigation on small screens. The header is included in `base.njk`, so it's on every page — a textbook case for `global.js`.
+
+Write the behaviour as a normal module:
+
+### header.js <small>(`src/frontend/js/modules/`)</small>
+```js
+export function initHeader() {
+    const toggle = document.querySelector('.menu-toggle');
+    const menu = document.querySelector('.menu');
+
+    if (!toggle || !menu) return;
+
+    toggle.addEventListener('click', () => {
+        menu.classList.toggle('is-open');
+    });
+}
+```
+
+Then wire it up once, in `global.js`:
+
+```js
+import { initHeader } from './modules/header.js';
+
+function initGlobal() {
+    initHeader();
+}
+
+// Do not touch
+// This instruction starts global.js itself
+document.addEventListener('DOMContentLoaded', initGlobal);
+```
+
+The burger now works on every page, and no page entry point had to change. Adding another global behaviour later is two lines: one import, one call inside `initGlobal()`.
+
+The early `return` matters: if a page has no header, the module does nothing instead of throwing an error that would stop your other scripts.
+
+### Global or page module?
+
+Use `global.js` for behaviour tied to something present on every page — anything included in `base.njk`, essentially.
+
+Keep it in the page entry point when only one or two pages need it. Everything imported by `global.js` ends up in *every* page bundle, so a heavy module used by a single page belongs in that page instead.
+
+## Modules
+
+Modules live in `src/frontend/js/modules/`. Modules that interact with the DOM must be called inside `DOMContentLoaded`; others can be called anywhere.
+
+## Adding a module
+
+Create a new `.js` file in `src/frontend/js/modules/`. Subfolders are allowed.
+
+Use ESM syntax — esbuild handles the bundling:
+
+### exampleModule.js <small>(`src/frontend/js/modules/`)</small>
+
+```js
+export function exampleModule() {
+    // Module logic here
+}
+```
+
+Then import it in the pages that need it:
+
+```js
+import { exampleModule } from '../modules/exampleModule.js';
+```
+
+In TypeScript, omit the extension:
+
+```ts
+import { exampleModule } from '../modules/exampleModule';
 ```