nibula 2.3.0 → 2.4.1

package/.eleventy.js

@@ -47,6 +47,23 @@ module.exports = function (eleventyConfig) {
   });
 
   eleventyConfig.amendLibrary("md", (markdownLibrary) => {
+    markdownLibrary.renderer.rules.link_open = function (
+      tokens,
+      idx,
+      options,
+      env,
+      self,
+    ) {
+      const href = tokens[idx].attrGet("href");
+
+      if (href && (href.startsWith("http://") || href.startsWith("https://"))) {
+        tokens[idx].attrSet("target", "_blank");
+        tokens[idx].attrSet("rel", "noopener noreferrer");
+      }
+
+      return self.renderToken(tokens, idx, options);
+    };
+
     markdownLibrary
       .use(markdownItAnchor, {
         level: ANCHOR_LEVELS,
@@ -70,6 +87,16 @@ module.exports = function (eleventyConfig) {
   // Passthrough copy
   // ---------------------------------------------------------------------------
 
+  eleventyConfig.addPassthroughCopy({
+    // Prism syntax highlighting theme
+    "node_modules/prismjs/themes/prism-tomorrow.css": "css/prism.css",
+
+    // Bootstrap
+    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js":
+      "js/bootstrap.bundle.min.js",
+    "node_modules/bootstrap-icons/font/fonts": "css/fonts",
+  });
+
   // Project assets
   eleventyConfig.addPassthroughCopy("src/frontend/assets");
   eleventyConfig.addPassthroughCopy("src/frontend/robots.txt");
@@ -80,12 +107,7 @@ module.exports = function (eleventyConfig) {
     "src/frontend/hosting/web.config": "web.config",
   });
 
-  // Prism syntax highlighting theme
-  eleventyConfig.addPassthroughCopy({
-    "node_modules/prismjs/themes/prism-tomorrow.css": "css/prism.css",
-  });
-
-  // CSS frameworks — uncomment the one you are using
+  // node_modules dependencies
   eleventyConfig.addPassthroughCopy({
     // Bootstrap
     "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js":
@@ -107,7 +129,7 @@ module.exports = function (eleventyConfig) {
   // ---------------------------------------------------------------------------
 
   eleventyConfig.addFilter(
-    "markdownPath",
+    "componentsPath",
     (name) => `${MARKDOWN_BASE_PATH}${name}`,
   );
 
@@ -145,7 +167,6 @@ module.exports = function (eleventyConfig) {
   // ---------------------------------------------------------------------------
 
   return {
-    markdownTemplateEngine: TEMPLATE_ENGINE,
     htmlTemplateEngine: TEMPLATE_ENGINE,
 
     dir: {

package/CHANGELOG.md

@@ -5,6 +5,31 @@ 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).
 
+## [2.4.1] 2026-08-24
+
+### Changed
+- Changed template.njk snippets for renderFile
+- markdown files used as components will now require {class="class"} or {id="id"} instead of {#id} or {.class}
+
+### Fixed
+- Fixed json data files passed in renderfile to markdown files not rendering
+
+## [2.4.0] - 2026-08-23
+
+### Added
+- `ignoreMissing` on header and footer includes in `base.njk`, so a project without those components still builds
+
+### Changed
+- Copyright notice centered below a rule in the footer
+- Removed `_animations.scss` and `_mobile.scss` from the default SCSS modules — responsive rules now live in the module they belong to
+- Reviewed commented snippets across SCSS, JS and TS templates
+- Raised scaffold dependency floors: `esbuild` to `^0.28.2` and `@11ty/eleventy-img` to `^7.0.0` close known advisories; `@11ty/eleventy`, `sass`, `uikit` and `concurrently` aligned to current releases
+- In new pages.njk files, renderfiel will be inside a div and not in an article tag
+
+### Fixed
+- Removing a page with the CLI no longer deletes its build output — the output directory is a build artifact and may be live in production
+- Corrected the local CLI version label
+
 ## [2.3.0] - 2026-08-19
 
 ### Added

package/bin/create.js

@@ -156,8 +156,8 @@ const PROJECT_PACKAGE = {
         "assistant": "nib cli"
     },
     dependencies: {
-        '@11ty/eleventy':     '^3.1.2',
-        '@11ty/eleventy-img': '^6.0.4',
+        '@11ty/eleventy':     '^3.1.6',
+        '@11ty/eleventy-img': '^7.0.0',
         '@11ty/eleventy-plugin-syntaxhighlight': '^5.0.2',
         'bootstrap':          '^5.3.8',
         'bootstrap-icons':    '^1.13.1',
@@ -166,13 +166,13 @@ const PROJECT_PACKAGE = {
         'glob':               '^13.0.6',
         'markdown-it-anchor': '^9.2.1',
         'markdown-it-attrs':  '^5.0.1',
-        'uikit':              '^3.25.13',
+        'uikit':              '^3.25.21',
     },
     devDependencies: {
         'nibula': `^${SELF_VERSION}`,
-        'concurrently':  '^9.2.1',
-        'esbuild':       '^0.27.3',
-        'sass':          '^1.77.0',
+        'concurrently':  '^9.2.4',
+        'esbuild':       '^0.28.2',
+        'sass':          '^1.103.1',
     },
 };
 

package/bin/delegate.js

@@ -1,8 +1,6 @@
 const fs = require('fs');
 const path = require('path');
 const { spawnSync } = require('child_process');
-const { color } = require('../tools/lib/colors');
-const { message } = require('../tools/lib/logger');
 
 const PACKAGE_NAME = 'nibula';
 const NODE_MODULES = 'node_modules';
@@ -22,14 +20,6 @@ function realPath(target) {
     }
 }
 
-function readVersion(packageRoot) {
-    try {
-        return JSON.parse(fs.readFileSync(path.join(packageRoot, PACKAGE_FILE), 'utf8')).version;
-    } catch {
-        return null;
-    }
-}
-
 function delegateToLocal(projectRoot) {
     if (process.env[LOCAL_FLAG] === LOCAL_FLAG_VALUE) return;
 
@@ -41,12 +31,6 @@ function delegateToLocal(projectRoot) {
     const localEntry = path.join(localRoot, ENTRY_FILE);
     if (!fs.existsSync(localEntry)) return;
 
-    const localVersion = readVersion(localRoot);
-
-    if (localVersion && localVersion !== globalVersion) {
-        console.log(`${color.dim}${message('cli.usingLocalVersion', { local: localVersion, global: globalVersion })}${color.reset}`);
-    }
-
     const result = spawnSync(process.execPath, [localEntry, ...process.argv.slice(2)], {
         stdio: 'inherit',
         cwd: process.cwd(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nibula",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "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": [
     "11ty",

package/src/frontend/components/global/footer.njk

@@ -5,21 +5,18 @@
   </div>
   <div>
     <h6>Legal</h6>
-    <small>
       <ul>
         <li><a href="{{ site.legal.privacy }}">Privacy Policy</a></li>
         <li><a href="{{ site.legal.cookie }}">Cookie Policy</a></li>
         <li><a href="{{ site.legal.terms }}">Terms and conditions</a></li>
       </ul>
-    </small>
   </div>
-  <div>
-    <h6>
-      &copy; {{ site.legal.copyright.year }}
-      {{ site.site_name }}
-    </h6>
-    <h6>
-      {{ site.legal.copyright.text }}
-    </h6>
+
+  <hr />
+
+  <div class="copyright">
+    <p>
+      &copy; {{ site.legal.copyright.year }} {{ site.site_name }} - {{ site.legal.copyright.text }}
+    </p>
   </div>
-</footer>
+</footer>

package/src/frontend/components/global/header.njk

@@ -1,7 +1,7 @@
 <header>
   <nav>
       <a class="logo" href="/">
-        <img src="{{ site.logo }}" alt="{{ site.title }}" height="40">
+        <img src="{{ site.logo }}"> {{ site.site_name }}
       </a>
   </nav>
 </header>

package/src/frontend/components/not-found.njk

@@ -1,4 +1,4 @@
-<div class="fade-in not-found">
+<div class="not-found">
   <h1>Oops! Page not found</h1>
   <a href="/">Return to homepage</a>
 </div>

package/src/frontend/data/site.json

@@ -10,9 +10,9 @@
   "theme": "dark",
   "logo": "/assets/brand/logo.svg",
   "legal": {
-    "privacy": "",
-    "cookie": "",
-    "terms": "",
+    "privacy": "/privacy/",
+    "cookie": "/cookies/",
+    "terms": "/terms/",
     "copyright": {
       "year": "2026",
       "text": "All rights reserved."

package/src/frontend/js/modules/exampleModule.js

@@ -1,3 +1,4 @@
 export function initExampleModule() {
     // Module logic here
+    alert("Example module is working!");
 }

package/src/frontend/layouts/base.njk

@@ -99,13 +99,13 @@
 
     <body>
 
-        {% include "global/header.njk" %}
+        {% include "global/header.njk" ignore missing %}
 
         <main>
             {{ content | safe }}
         </main>
 
-        {% include "global/footer.njk" %}
+        {% include "global/footer.njk" ignore missing %}
 
       {#╔══════════════════╗
         ║     SCRIPTS      ║

package/src/frontend/routes/404.njk

@@ -9,7 +9,7 @@ layout: base.njk
 
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {#
-<article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
-</article>
+<div class="markdown-body">
+    {% renderFile "your-file.md" | componentsPath, { alias: fileName }, "njk,md" %}
+</div>
 #}

package/src/frontend/routes/index.njk

@@ -9,7 +9,7 @@ layout: base.njk
 
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {#
-<article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
-</article>
+<div class="markdown-body">
+    {% renderFile "your-file.md" | componentsPath, { alias: fileName }, "njk,md" %}
+</div>
 #}

package/src/frontend/scss/_global.scss

@@ -1,9 +1,5 @@
-//==========================
-// CSS RULES FOR THE ENTIRE SITE
-//==========================
-
 // Getting root rules from _root.scss
-@use 'root' as root;
+@use 'root' as root; // Usage: root.$value-name
 
 // Frameworks imports
 @import "modules/frameworks/bootstrap";
@@ -20,13 +16,6 @@
 @import "modules/header";
 @import "modules/footer";
 
-@import "modules/animations";
-@import "modules/mobile";
-
-//==========================
-// Global css rules for the entire site
-//==========================
-
 *,
 *::before,
 *::after {
@@ -43,8 +32,4 @@ body {
 
 main {
     flex: 1;
-}
-
-a {
-    text-decoration: none !important;
 }

package/src/frontend/scss/_root.scss

@@ -3,12 +3,8 @@
 // overwritten by other imported files with the same variable names.
 // Use @use 'root' as root; to avoid namespace collisions.
 
-
-//==========================
-// STRUCTURE
-//==========================
 $header-height: 10vh;
 $header-padding-y: 15px;
 $header-padding-x: 15px;
 
-$primary-color: rgba(0, 0, 0, 0.5);
+$header-footer-color: #11474b;

package/src/frontend/scss/modules/_footer.scss

@@ -1,16 +1,13 @@
-//==========================
-// CSS RULES FOR FOOTER
-//==========================
-
 // Getting root rules from _root.scss
-@use "../root" as root;
+@use "../root" as root; // Usage: root.$value-name
 
 footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-around;
     width: 100%;
     padding: root.$header-padding-y root.$header-padding-x;
-    background-color: #2e7253;
+    background-color: root.$header-footer-color;
     
     h6 {
         margin-bottom: 0.75rem;
@@ -22,8 +19,19 @@ footer {
         margin: 0;
     }
 
-    small {
-        display: flex;
-        gap: 1rem;
+    hr {
+        width: 100%;
+        border: 0;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        margin: 1.5rem 0 1rem 0;
+    }
+
+    .copyright {
+        flex-basis: 100%;
+        text-align: center;
+        
+        p {
+            margin: 0;
+        }
     }
 }

package/src/frontend/scss/modules/_header.scss

@@ -1,27 +1,30 @@
-//==========================
-// CSS RULES FOR HEADER
-//==========================
-
 // Getting root rules from _root.scss
-@use "../root" as root;
+@use "../root" as root; // Usage: root.$value-name
 
 header {
-    height: root.$header-height;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: root.$header-padding-y root.$header-padding-x;
-    background-color: #2e7253;
+  height: root.$header-height;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: root.$header-padding-y root.$header-padding-x;
+  background-color: root.$header-footer-color;
 }
 
 nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 
-nav .logo {
-    padding: 10px;
-}
+  .logo {
+    max-height: root.$header-height;
+    width: auto;
+    text-decoration: none !important;
+    
+    img {
+      height: 50px;
+      width: auto;
+    }
+  }
+}

package/src/frontend/scss/modules/_typography.scss

@@ -1,9 +1,5 @@
-//==========================
-// CSS RULES FOR TYPOGRAPHY
-//==========================
-
 // Getting root rules from _root.scss
-@use "../root" as root;
+@use "../root" as root; // Usage: root.$value-name
 
 html {
   font-size: 16px;
@@ -12,8 +8,4 @@ html {
 
 body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-}
-
-a {
-  text-decoration: none;
 }

package/src/frontend/scss/pages/homepage.scss

@@ -1,10 +1,5 @@
-//==========================
-// CSS MODULES IMPORTS
-//==========================
-
-// Use @use with a namespace to avoid framework variable conflicts:
-// Example: root.$primary
-@use "../root" as root;
+// Getting root rules from _root.scss
+@use "../root" as root; // Usage: root.$value-name
 
 // This global module contains the import framework, necessary modules for each page and any other common styles
 @import "../global";
@@ -12,12 +7,7 @@
 // Import any other module you need by import down here
 // @import "../modules/moduleName";
 
-//==========================
-// PAGE CUSTOM CSS RULES
-//==========================
-
-// Add any custom rule specific to this page below
-// These rules override the framework and module styles
+// Add any custom rule specific to this page below:
 // body {
 //     background-color: root.$primary;
-// }
+// }

package/src/frontend/ts/global.ts

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

package/src/frontend/ts/modules/exampleModule.ts

@@ -1,3 +1,4 @@
 export function initExampleModule(): void {
     // Module logic here
+    alert("Example module is working!");
 }

package/tools/cli/ui.js

@@ -22,7 +22,7 @@ const LOCAL_VERSION = require('../../package.json').version;
 const GLOBAL_VERSION = process.env[GLOBAL_VERSION_FLAG];
 
 const TITLE_SUFFIX = GLOBAL_VERSION && GLOBAL_VERSION !== LOCAL_VERSION
-    ? ` (local v${LOCAL_VERSION})`
+    ? ` v${LOCAL_VERSION}`
     : '';
 
 const PLAIN_TITLE = `${BOX_TITLE}${TITLE_SUFFIX}`;

package/tools/config/messages.json

@@ -61,7 +61,6 @@
     "nothingToClean": "(i) nothing to clean \u2192 {path}"
   },
   "cli": {
-    "usingLocalVersion": "Nibula cli local version ({local})",
     "createPrompt": "Name of the new page: ",
     "removePrompt": "Name of the page to remove: ",
     "renameFromPrompt": "Page to rename: ",
@@ -70,7 +69,7 @@
     "menuPrompt": "Choose an option: ",
     "layoutPrompt": "Select a layout (arrow keys, Enter to confirm):",
     "currentOutputPath": "Current path: \"{path}\"",
-    "confirmRemove": "This permanently deletes all files for \"{name}\".",
+    "confirmRemove": "This permanently deletes the source files for \"{name}\". Rebuild to update the output.",
     "cancelled": "Cancelled.",
     "pageNotFound": "Page \"{name}\" does not exist.",
     "sameName": "Old and new name are the same.",

package/tools/config/settings.json

@@ -71,20 +71,10 @@
     "styleTemplate": "template.scss",
     "routeTemplate": "template.njk",
     "layoutExtension": "njk",
-    "outputFiles": [
-      "js/pages/{camelName}.js",
-      "css/pages/{camelName}.css",
-      "{pageName}.html",
-      "pages/{pageName}.html"
-    ],
-    "outputDirectories": [
-      "{pageName}",
-      "pages/{pageName}"
-    ],
     "defaultData": {
       "seo": {
         "title": "{title}",
-        "description": "description",
+        "description": "Description",
         "keywords": "",
         "noindex": false,
         "canonical": ""

package/tools/lib/pageActions.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const settings = require('../config/settings.json');
 const { PATHS } = require('./paths');
-const { exists, readText, writeText, copyFile, moveFile, removeFile, removeDirectory, removeDirectoryIfEmpty } = require('./files');
+const { exists, readText, writeText, copyFile, moveFile, removeFile, removeDirectoryIfEmpty } = require('./files');
 const { log } = require('./logger');
 const { formatText } = require('./text');
 const { languageSettings } = require('./project');
@@ -120,8 +120,8 @@ function removePage(pageName) {
     }
     if (!readPagesData()) return;
 
-    const { source, output } = getPageArtifacts(pageName);
-    const files = [source.style, source.script, source.route, ...output.files];
+    const { source } = getPageArtifacts(pageName);
+    const files = [source.style, source.script, source.route];
 
     for (const file of files) {
         try {
@@ -131,14 +131,6 @@ function removePage(pageName) {
         }
     }
 
-    for (const directory of output.directories) {
-        try {
-            if (removeDirectory(directory)) log('page.fileDeleted', { path: directory });
-        } catch (error) {
-            log('page.deleteFailed', { path: directory, error: error.message });
-        }
-    }
-
     removePageData(pageName);
 
     const sourceDirectories = [source.style, source.script, source.route].map(file => path.dirname(file));

package/tools/lib/pageArtifacts.js

@@ -3,18 +3,7 @@ const settings = require('../config/settings.json');
 const { PATHS } = require('./paths');
 const { exists } = require('./files');
 const { languageSettings, scriptPagesDirectory } = require('./project');
-const { getCurrentOutputPath } = require('./outputPath');
-const { toCamelCase, formatText } = require('./text');
-
-const PATH_SEPARATOR = '/';
-
-function outputRoot() {
-    return path.join(PATHS.root, getCurrentOutputPath() || settings.project.defaultOutputDirectory);
-}
-
-function resolveOutput(root, template, values) {
-    return path.join(root, ...formatText(template, values).split(PATH_SEPARATOR));
-}
+const { toCamelCase } = require('./text');
 
 function routeFile(pageName) {
     return path.join(PATHS.routes, `${pageName}.${settings.page.routeExtension}`);
@@ -26,8 +15,6 @@ function pageExists(pageName) {
 
 function getPageArtifacts(pageName) {
     const camelName = toCamelCase(pageName);
-    const values = { camelName, pageName };
-    const root = outputRoot();
 
     return {
         camelName,
@@ -36,11 +23,7 @@ function getPageArtifacts(pageName) {
             script: path.join(scriptPagesDirectory(), `${camelName}.${languageSettings().extension}`),
             route:  routeFile(pageName),
         },
-        output: {
-            files:       settings.page.outputFiles.map((template) => resolveOutput(root, template, values)),
-            directories: settings.page.outputDirectories.map((template) => resolveOutput(root, template, values)),
-        },
     };
 }
 
-module.exports = { getPageArtifacts, pageExists };
+module.exports = { getPageArtifacts, pageExists };

package/tools/res/templates/template.njk

@@ -9,7 +9,7 @@ layout: base.njk
 
 {# Markdown files live in components/ too. Pass the data the file needs #}
 {# 
-<article class="markdown-body">
-    {% renderFile "your-file.md" | markdownPath, { site: site }, "md" %}
-</article>
+<div class="markdown-body">
+    {% renderFile "your-file.md" | componentsPath, { alias: fileName }, "njk,md" %}
+</div>
 #}

package/tools/res/templates/template.scss

@@ -1,10 +1,5 @@
-//==========================
-// CSS MODULES IMPORTS
-//==========================
-
-// Use @use with a namespace to avoid framework variable conflicts:
-// Example: root.$primary
-@use "../root" as root;
+// Getting root rules from _root.scss
+@use "../root" as root; // Usage: root.$value-name
 
 // This global module contains the import framework, necessary modules for each page and any other common styles
 @import "../global";
@@ -12,12 +7,7 @@
 // Import any other module you need by import down here
 // @import "../modules/moduleName";
 
-//==========================
-// PAGE CUSTOM CSS RULES
-//==========================
-
-// Add any custom rule specific to this page below
-// These rules override the framework and module styles
+// Add any custom rule specific to this page below:
 // body {
-//     background-color: root.$primary-color;
-// }
+//     background-color: root.$primary;
+// }

package/src/frontend/scss/modules/_animations.scss

@@ -1,25 +0,0 @@
-//==========================
-// CSS RULES FOR ANIMATIONS
-//==========================
-
-// Getting root rules from _root.scss
-@use "../root" as root;
-
-.fade-in {
-  animation: fadeIn 1s;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-}

package/src/frontend/scss/modules/_mobile.scss

@@ -1,30 +0,0 @@
-//==========================
-// CSS RULES FOR RESPONSIVE
-//==========================
-
-// Getting root rules from _root.scss
-@use "../root" as root;
-
-//==========================
-// MEDIA QUERIES
-//==========================
-
-@media (max-width: 1400px) {
-    
-}
-
-@media (max-width: 1200px) {
-    
-}
-
-@media (max-width: 992px) {
-    
-}
-
-@media (max-width: 768px) {
-
-}
-
-@media (max-width: 576px) {
-    
-}