nibula 1.2.6 → 1.3.0

package/.eleventy.js

@@ -70,7 +70,7 @@ module.exports = function (eleventyConfig) {
   watch: [`${OUTPUT_DIR}/js/**/*.js`]
   });
 
-  return {
+  return {  
     dir: {
       input: "src/frontend",
       output: OUTPUT_DIR,

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to Nibula are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2026-08-01
+
+### Added
+- A `global.js` module in `src/frontend/js/modules/`, for code that has to run
+  on every page — a header menu, a theme toggle, a cookie banner. Page entry
+  points import it once and it takes care of running the shared modules, so
+  there's no longer a line to remember in every single page.
+- `docs/Javascript.md` now covers the global module, with the header burger
+  menu as a worked example and a note on when a behaviour belongs in
+  `global.js` rather than in a page.
+
+### Changed
+- Page entry points, and the template new pages are created from, now start
+  with `import '../modules/global.js';`.
+
+### Notes
+- Existing projects keep working as they are. To adopt the global module, add
+  `src/frontend/js/modules/global.js` and the import line at the top of each
+  page entry point.
+
 ## [1.2.6] - 2026-08-01
 
 ### Fixed

package/docs/Javascript.md

@@ -11,6 +11,7 @@ Import only what the page needs.
 ### examplePage.js <small>(`src/frontend/js/pages/`)</small>
 
 ```js
+import '../modules/global.js';
 // import { initExampleModule } from '../modules/exampleModule.js';
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -20,6 +21,79 @@ document.addEventListener("DOMContentLoaded", () => {
 // 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/modules/`, every page entry point imports it, and it takes care of running the shared modules.
+
+### global.js <small>(`src/frontend/js/modules/`)</small>
+
+```js
+// import { initExampleModule } from './exampleModule.js';
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch this line
+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 '../modules/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:
+
+```js
+// src/frontend/js/modules/header.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 './header.js';
+
+function initGlobal() {
+    initHeader();
+}
+
+// Do not touch this line
+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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nibula",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "A beginner-friendly static site generator built on Eleventy that stays close to vanilla HTML, CSS and JS — with a page-management CLI, an optional PHP backend, and SEO files generated for you.",
   "keywords": [
     "static-site-generator",

package/src/frontend/js/modules/global.js

@@ -0,0 +1,10 @@
+// import { initExampleModule } from "./exampleModule.js";
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch this line
+document.addEventListener('DOMContentLoaded', initGlobal);

package/src/frontend/js/pages/404.js

@@ -1,4 +1,5 @@
-// import { initExampleModule } from '../modules/exampleModule.js';
+import '../modules/global.js';
+// import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", () => {
     // initExampleModule();

package/src/frontend/js/pages/homepage.js

@@ -1,4 +1,5 @@
-// import { initExampleModule } from '../modules/exampleModule.js';
+import '../modules/global.js';
+// import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", () => {
     // initExampleModule();

package/src/frontend/ts/modules/global.ts

@@ -0,0 +1,10 @@
+// import { initExampleModule } from "./exampleModule";
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch this line
+document.addEventListener('DOMContentLoaded', initGlobal);

package/src/frontend/ts/pages/404.ts

@@ -1,3 +1,4 @@
+import '../modules/global.js';
 // import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", (): void => {

package/src/frontend/ts/pages/homepage.ts

@@ -1,3 +1,4 @@
+import '../modules/global.js';
 // import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", (): void => {

package/tools/res/templates/template.js

@@ -1,4 +1,5 @@
-// import { initExampleModule } from '../modules/exampleModule.js';
+import '../modules/global.js';
+// import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", () => {
     // initExampleModule();

package/tools/res/templates/template.ts

@@ -1,3 +1,4 @@
+import '../modules/global.js';
 // import { initExampleModule } from '../modules/exampleModule';
 
 document.addEventListener("DOMContentLoaded", (): void => {