nibula 1.5.3 → 1.6.1

package/src/frontend/js/global.js

@@ -0,0 +1,11 @@
+// import { initExampleModule } from "./modules/exampleModule.js";
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch
+// This instruction starts global.js itself
+document.addEventListener('DOMContentLoaded', initGlobal);

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

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

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

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

package/src/frontend/layouts/base.njk

@@ -1,22 +1,19 @@
 <!-- This is the base of every page that you will create -->
 
 <!DOCTYPE html>
-<html lang="{{ site.lang or 'en' }}" data-bs-theme="{{ site.theme or 'light' }}">
+<html lang="{{ site.lang or 'en' }}" data-theme="{{ site.theme or 'light' }}" data-bs-theme="{{ site.theme or 'light' }}">
 
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="color-scheme" content="{{ site.theme or 'light' }}">
 
-        {# Preconnect hints — establish early connections to external origins #}
-        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
-
       {#╔══════════════════╗
         ║    PAGE DATA     ║
         ╚══════════════════╝#}
 
         {% set pageKey = title %}
-        {% set pageData = site.pages[pageKey] %}
+        {% set pageData = pages[pageKey] %}
 
       {#╔══════════════════╗
         ║       SEO        ║
@@ -27,15 +24,15 @@
         <meta name="description" content="{{ pageData.seo.description or site.description }}">
         <meta name="keywords" content="{{ pageData.seo.keywords or site.keywords }}">
         <meta name="author" content="{{ site.author }}">
-        <meta name="theme-color" content="{{ site.theme_color }}">
+        <meta name="theme-color" content="{{ site.theme }}">
 
         {% if pageData.seo.noindex %}
         <meta name="robots" content="noindex, follow">
         {% endif %}
 
         {# Open Graph #}
-        <meta property="og:title" content="{{ pageData.seo.title }}">
-        <meta property="og:description" content="{{ pageData.seo.description }}">
+        <meta property="og:title" content="{{ pageData.seo.title or title or site.title }}">
+        <meta property="og:description" content="{{ pageData.seo.description or site.description }}">
         <meta property="og:type" content="website">
         <meta property="og:url" content="{{ site.url }}{{ page.url }}">
         <meta property="og:image" content="{{ site.url }}{{ site.logo }}">
@@ -43,8 +40,8 @@
 
         {# Twitter Card #}
         <meta name="twitter:card" content="summary_large_image">
-        <meta name="twitter:title" content="{{ pageData.seo.title }}">
-        <meta name="twitter:description" content="{{ pageData.seo.description }}">
+        <meta name="twitter:title" content="{{ pageData.seo.title or title or site.title }}">
+        <meta name="twitter:description" content="{{ pageData.seo.description or site.description }}">
         <meta name="twitter:image" content="{{ site.url }}{{ site.logo }}">
 
       {#╔══════════════════════════════════════════╗
@@ -77,16 +74,16 @@
         ║     FAVICON      ║
         ╚══════════════════╝#}
 
-        <link rel="icon" type="image/svg+xml" href="/assets/brand/favicon.svg">
-        <link rel="icon" type="image/png" sizes="32x32" href="/assets/brand/favicon-32.png">
-        <link rel="apple-touch-icon" sizes="180x180" href="/assets/brand/apple-touch-icon.png">
+        <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 }}">
 
       {#╔══════════════════╗
         ║       CSS        ║
         ╚══════════════════╝#}
 
         {# Page CSS #}
-        <link rel="stylesheet" href="/css/pages/{{ title }}.css"/>
+        <link rel="stylesheet" href="{{ ('/css/pages/' + title + '.css') | url }}"/>
 
         {# Per-page CDN CSS #}
         {% if pageData and pageData.cdn and pageData.cdn.css %}
@@ -112,10 +109,17 @@
         ╚══════════════════╝#}
 
         {# Framework — uncomment the one you are using #}
-        <script src="/js/bootstrap.bundle.min.js" defer></script>
-        {# <script src="/js/foundation.min.js" defer></script> #}
-        {# <script src="/js/uikit.min.js" defer></script> #}
-        {# <script src="/js/uikit-icons.min.js" defer></script> #}
+        
+        {# Bootstrap JS #}
+        <script src="{{ '/js/bootstrap.bundle.min.js' | url }}" defer></script>
+
+        {# Foundation JS #}
+        {# <script src="{{ '/js/foundation.min.js' | url }}" defer></script> #}
+
+        {# UIkit JS #}
+        {# <script src="{{ '/js/uikit.min.js' | url }}" defer></script> #}
+        {# <script src="{{ '/js/uikit-icons.min.js' | url }}" defer></script> #}
+
         {# Bulma — no JS needed #}
 
         {# Per-page CDN JS #}
@@ -126,7 +130,7 @@
         {% endif %}
 
         {# Page JS #}
-        <script src="/js/pages/{{ title }}.js"></script>
+        <script src="{{ ('/js/pages/' + title + '.js') | url }}"></script>
 
     </body>
 

package/src/frontend/scss/{modules/_global.scss → _global.scss}

@@ -6,20 +6,19 @@
 @use 'root' as root;
 
 // Frameworks imports
-@import "../modules/frameworks/bootstrap";
-// @import "../modules/frameworks/bulma";
-// @import "../modules/frameworks/foundation";
-// @import "../modules/frameworks/uikit";
-
+@import "modules/frameworks/bootstrap";
+// @import "modules/frameworks/bulma";
+// @import "modules/frameworks/foundation";
+// @import "modules/frameworks/uikit";
 
 // Modules imports
-@import "typography";
+@import "modules/typography";
 
-@import "header";
-@import "footer";
+@import "modules/header";
+@import "modules/footer";
 
-@import "animations";
-@import "mobile";
+@import "modules/animations";
+@import "modules/mobile";
 
 //==========================
 // Global css rules for the entire site

package/src/frontend/scss/_root.scss

@@ -0,0 +1,14 @@
+// NOTE: This file contains only Sass variables (no CSS output).
+// When imported with @import, all variables are global and may be
+// 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);

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

@@ -3,7 +3,7 @@
 //==========================
 
 // Getting root rules from _root.scss
-@use 'root' as root;
+@use "../root" as root;
 
 .fade-in {
   animation: fadeIn 1s;

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

@@ -2,7 +2,8 @@
 // CSS RULES FOR FOOTER
 //==========================
 
-@use 'root' as root;
+// Getting root rules from _root.scss
+@use "../root" as root;
 
 footer {
     display: flex;

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

@@ -3,7 +3,7 @@
 //==========================
 
 // Getting root rules from _root.scss
-@use 'root' as root;
+@use "../root" as root;
 
 header {
     height: root.$header-height;
@@ -12,7 +12,6 @@ header {
     justify-content: center;
     align-items: center;
     padding: root.$header-padding-y root.$header-padding-x;
-    background-color: root.$primary;
     background-color: #2e7253;
 }
 

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

@@ -3,7 +3,7 @@
 //==========================
 
 // Getting root rules from _root.scss
-@use 'root' as root;
+@use "../root" as root;
 
 //==========================
 // MEDIA QUERIES

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

@@ -1,5 +1,9 @@
+//==========================
+// CSS RULES FOR TYPOGRAPHY
+//==========================
+
 // Getting root rules from _root.scss
-@use "root" as root;
+@use "../root" as root;
 
 html {
   font-size: 16px;

package/src/frontend/scss/pages/404.scss

@@ -4,10 +4,10 @@
 
 // Use @use with a namespace to avoid framework variable conflicts:
 // Example: root.$primary
-@use "../modules/root" as root;
+@use "../root" as root;
 
 // This global module contains the import framework, necessary modules for each page and any other common styles
-@import "../modules/global";
+@import "../global";
 
 // Import any other module you need by import down here
 // @import "../modules/moduleName";

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

@@ -4,10 +4,10 @@
 
 // Use @use with a namespace to avoid framework variable conflicts:
 // Example: root.$primary
-@use "../modules/root" as root;
+@use "../root" as root;
 
 // This global module contains the import framework, necessary modules for each page and any other common styles
-@import "../modules/global";
+@import "../global";
 
 // Import any other module you need by import down here
 // @import "../modules/moduleName";

package/src/frontend/sitemap.njk

@@ -5,7 +5,7 @@ eleventyExcludeFromCollections: true
 <?xml version="1.0" encoding="utf-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     {% for page in collections.all %}
-        {% set pageMeta = site.pages[page.data.title] %}
+        {% set pageMeta = pages[page.data.title] %}
         {% if not page.data.draft and '/404' not in page.url and not (pageMeta and pageMeta.seo.noindex) %}
             <url>
                 <loc>{{ site.url }}{{ page.url | lower }}</loc>

package/src/frontend/ts/global.ts

@@ -0,0 +1,12 @@
+// import { initExampleModule } from "/exampleModule";
+import { initExampleModule } from "./modules/exampleModule"
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch
+// This instruction starts global.ts itself
+document.addEventListener('DOMContentLoaded', initGlobal);

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

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

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

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

package/tools/cli/ui.js

@@ -5,7 +5,6 @@ const { message } = require('../lib/logger');
 const SYMBOLS = settings.cli.symbols;
 const COLORS = settings.cli.colors;
 const MENU = settings.cli.menu;
-const BOX_WIDTH = settings.cli.boxWidth;
 const BOX_TITLE = settings.cli.title;
 const BOX_TOP_LEFT = '\u256d';
 const BOX_TOP_RIGHT = '\u256e';
@@ -16,6 +15,17 @@ const BOX_VERTICAL = '\u2502';
 const NEW_LINE = '\n';
 const SPACE = ' ';
 
+const LOCAL_FLAG = 'NIBULA_LOCAL';
+const LOCAL_FLAG_VALUE = '1';
+const TITLE_PADDING = 2;
+
+const TITLE_SUFFIX = process.env[LOCAL_FLAG] === LOCAL_FLAG_VALUE
+    ? ` (local v${require('../../package.json').version})`
+    : '';
+
+const PLAIN_TITLE = `${BOX_TITLE}${TITLE_SUFFIX}`;
+const BOX_WIDTH = Math.max(settings.cli.boxWidth, PLAIN_TITLE.length + TITLE_PADDING);
+
 function line(colorName, text) {
     return `${color[colorName]}${text}${color.reset}`;
 }
@@ -41,10 +51,14 @@ function noticePrefix(text) {
 }
 
 function centeredTitle() {
-    const padding = BOX_WIDTH - BOX_TITLE.length;
+    const padding = BOX_WIDTH - PLAIN_TITLE.length;
     const left = SPACE.repeat(Math.ceil(padding / 2));
     const right = SPACE.repeat(Math.floor(padding / 2));
-    return `${left}${BOX_TITLE}${right}`;
+
+    if (!TITLE_SUFFIX) return `${left}${BOX_TITLE}${right}`;
+
+    const suffix = `${color.dim}${TITLE_SUFFIX}${color.reset}${color[COLORS.box]}${color.bold}`;
+    return `${left}${BOX_TITLE}${suffix}${right}`;
 }
 
 function renderMenu() {

package/tools/config/messages.json

@@ -34,14 +34,15 @@
     "blockRemoved": "[cleaned] page block removed for \"{name}\"",
     "blockRenamed": "[renamed] page block \"{source}\" \u2192 \"{destination}\""
   },
-  "siteData": {
-    "fileMissing": "[skip] not found: {path}",
-    "parseFailed": "[error] cannot parse {file}: {error}",
-    "recordExists": "[skip] record \"{name}\" already exists",
-    "recordMissing": "[skip] record \"{name}\" not found",
-    "recordAdded": "[updated] record \"{name}\" added",
-    "recordRemoved": "[cleaned] record \"{name}\" removed",
-    "recordRenamed": "[updated] record \"{source}\" renamed to \"{destination}\""
+  "pagesData": {
+      "fileMissing": "[skip] not found: {path}",
+      "invalidStructure": "[error] {file} must contain an object of pages",
+      "parseFailed": "[error] cannot parse {file}: {error}",
+      "recordExists": "[skip] record \"{name}\" already exists",
+      "recordMissing": "[skip] record \"{name}\" not found",
+      "recordAdded": "[updated] record \"{name}\" added",
+      "recordRemoved": "[cleaned] record \"{name}\" removed",
+      "recordRenamed": "[updated] record \"{source}\" renamed to \"{destination}\""
   },
   "output": {
     "emptyPath": "[skip] empty output path",
@@ -58,6 +59,7 @@
     "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: ",

package/tools/config/settings.json

@@ -11,6 +11,7 @@
     "typescriptConfig": "tsconfig.json",
     "routes": "src/frontend/routes",
     "stylePages": "src/frontend/scss/pages",
+    "pagesData": "src/frontend/data/pages.json",
     "siteData": "src/frontend/data/site.json",
     "pageComponents": "src/frontend/layouts/page-components.njk",
     "templates": "tools/res/templates"
@@ -79,11 +80,6 @@
       "{pageName}",
       "pages/{pageName}"
     ],
-    "dataKeys": {
-      "pages": "pages",
-      "seo": "seo",
-      "title": "title"
-    },
     "defaultData": {
       "seo": {
         "title": "{title}",
@@ -101,7 +97,7 @@
   "pageComponents": {
     "anchor": "{% else %}",
     "condition": "{% elif title == \"{camelName}\" %}",
-    "include": "{% include \"component.njk\" ignore missing %}"
+    "include": "{% include \"component-name.njk\" ignore missing %}"
   },
   "frontMatter": {
     "title": "title: \"{camelName}\"",

package/tools/lib/pageActions.js

@@ -6,7 +6,7 @@ const { log } = require('./logger');
 const { formatText } = require('./text');
 const { languageSettings } = require('./project');
 const { getPageArtifacts, pageExists } = require('./pageArtifacts');
-const { addSiteData, removeSiteData, renameSiteData } = require('./siteData');
+const { readPagesData, addPageData, removePageData, renamePageData } = require('./pagesData');
 const { addPageBlock, removePageBlock, renamePageBlock } = require('./pageComponents');
 
 const FRONT_MATTER_PATTERNS = Object.freeze({
@@ -63,7 +63,7 @@ function addPage(pageName) {
     }
 
     addPageBlock(pageName);
-    addSiteData(pageName);
+    addPageData(pageName);
 }
 
 function renamePage(oldName, newName) {
@@ -75,6 +75,7 @@ function renamePage(oldName, newName) {
         log('page.targetExists', { name: newName });
         return;
     }
+    if (!readPagesData()) return;
 
     const current = getPageArtifacts(oldName);
     const next = getPageArtifacts(newName);
@@ -104,13 +105,15 @@ function renamePage(oldName, newName) {
     }
 
     renamePageBlock(oldName, newName);
-    renameSiteData(oldName, newName);
+    renamePageData(oldName, newName);
 }
 
 function removePage(pageName) {
     if (!pageExists(pageName)) {
         log('page.doesNotExist', { name: pageName });
+        return;
     }
+    if (!readPagesData()) return;
 
     const { source, output } = getPageArtifacts(pageName);
     const files = [source.style, source.script, source.route, ...output.files];
@@ -132,7 +135,7 @@ function removePage(pageName) {
     }
 
     removePageBlock(pageName);
-    removeSiteData(pageName);
+    removePageData(pageName);
 
     const sourceDirectories = [source.style, source.script, source.route].map(file => path.dirname(file));
 
@@ -141,4 +144,4 @@ function removePage(pageName) {
     }
 }
 
-module.exports = { addPage, removePage, renamePage };
+module.exports = { addPage, removePage, renamePage };

package/tools/lib/pagesData.js

@@ -0,0 +1,88 @@
+const path = require('path');
+const settings = require('../config/settings.json');
+const { PATHS } = require('./paths');
+const { exists, readText, writeJson } = require('./files');
+const { log } = require('./logger');
+const { toCamelCase, toTitleCase, formatValue } = require('./text');
+
+function readPagesData() {
+    if (!exists(PATHS.pagesData)) {
+        log('pagesData.fileMissing', { path: PATHS.pagesData });
+        return null;
+    }
+    try {
+        const data = JSON.parse(readText(PATHS.pagesData));
+        if (!data || typeof data !== 'object' || Array.isArray(data)) {
+            log('pagesData.invalidStructure', { file: path.basename(PATHS.pagesData) });
+            return null;
+        }
+        return data;
+    } catch (error) {
+        log('pagesData.parseFailed', { file: path.basename(PATHS.pagesData), error: error.message });
+        return null;
+    }
+}
+
+function writePagesData(data) {
+    writeJson(PATHS.pagesData, data);
+}
+
+function createRecord(pageName) {
+    return formatValue(settings.page.defaultData, { title: toTitleCase(pageName) });
+}
+
+function addPageData(pageName) {
+    const data = readPagesData();
+    if (!data) return;
+
+    const camelName = toCamelCase(pageName);
+    if (data[camelName]) {
+        log('pagesData.recordExists', { name: camelName });
+        return;
+    }
+
+    data[camelName] = createRecord(pageName);
+
+    writePagesData(data);
+    log('pagesData.recordAdded', { name: camelName });
+}
+
+function removePageData(pageName) {
+    const data = readPagesData();
+    if (!data) return;
+
+    const camelName = toCamelCase(pageName);
+    if (!data[camelName]) {
+        log('pagesData.recordMissing', { name: camelName });
+        return;
+    }
+
+    delete data[camelName];
+    writePagesData(data);
+    log('pagesData.recordRemoved', { name: camelName });
+}
+
+function renamePageData(oldName, newName) {
+    const data = readPagesData();
+    if (!data) return;
+
+    const oldCamelName = toCamelCase(oldName);
+    const newCamelName = toCamelCase(newName);
+
+    if (!data[oldCamelName]) {
+        log('pagesData.recordMissing', { name: oldCamelName });
+        return;
+    }
+    if (data[newCamelName]) {
+        log('pagesData.recordExists', { name: newCamelName });
+        return;
+    }
+
+    data[newCamelName] = data[oldCamelName];
+    delete data[oldCamelName];
+
+    writePagesData(data);
+    log('pagesData.recordRenamed', { source: oldCamelName, destination: newCamelName });
+}
+
+module.exports = { readPagesData, addPageData, removePageData, renamePageData };

package/tools/lib/paths.js

@@ -2,11 +2,9 @@ const fs = require('fs');
 const path = require('path');
 const settings = require('../config/settings.json');
 const { paint } = require('./colors');
-const { message } = require('./logger');
 
 const PACKAGE_ROOT = path.resolve(__dirname, '..', '..');
 const PATH_SEPARATOR = '/';
-const NOT_INSIDE_PROJECT_MESSAGE = paint('red', message('project.notInside'));
 
 let cachedProjectRoot = null;
 
@@ -24,7 +22,7 @@ function projectRoot() {
     if (cachedProjectRoot) return cachedProjectRoot;
     const root = findProjectRoot();
     if (!root) {
-        console.error(NOT_INSIDE_PROJECT_MESSAGE);
+        console.error(paint('red', require('./logger').message('project.notInside')));
         process.exit(1);
     }
     cachedProjectRoot = root;
@@ -47,15 +45,20 @@ const PATHS = Object.freeze({
     get routes()           { return resolveFromProject(settings.paths.routes); },
     get stylePages()       { return resolveFromProject(settings.paths.stylePages); },
     get siteData()         { return resolveFromProject(settings.paths.siteData); },
+    get pagesData()        { return resolveFromProject(settings.paths.pagesData); },
     get pageComponents()   { return resolveFromProject(settings.paths.pageComponents); },
     get templates()        { return resolveFromPackage(settings.paths.templates); },
 });
 
+function getNotInsideProjectMessage() {
+    return paint('red', require('./logger').message('project.notInside'));
+}
+
 module.exports = {
     PATHS,
     PACKAGE_ROOT,
-    NOT_INSIDE_PROJECT_MESSAGE,
+    getNotInsideProjectMessage,
     findProjectRoot,
     resolveFromProject,
     resolveFromPackage,
-};
+};

package/tools/lib/validation.js

@@ -12,6 +12,7 @@ function requiredFiles() {
         { label: settings.paths.eleventyConfig,  path: PATHS.eleventyConfig },
         { label: settings.paths.packageJson,     path: PATHS.packageJson },
         { label: settings.paths.siteData,        path: PATHS.siteData },
+        { label: settings.paths.pagesData,       path: PATHS.pagesData },
         { label: settings.paths.pageComponents,  path: PATHS.pageComponents },
         { label: message('validation.templatesLabel'), path: PATHS.templates },
     ];

package/tools/res/templates/template.js

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

package/tools/res/templates/template.scss

@@ -4,10 +4,10 @@
 
 // Use @use with a namespace to avoid framework variable conflicts:
 // Example: root.$primary
-@use "../modules/root" as root;
+@use "../root" as root;
 
 // This global module contains the import framework, necessary modules for each page and any other common styles
-@import "../modules/global";
+@import "../global";
 
 // Import any other module you need by import down here
 // @import "../modules/moduleName";
@@ -19,5 +19,5 @@
 // Add any custom rule specific to this page below
 // These rules override the framework and module styles
 // body {
-//     background-color: root.$primary;
+//     background-color: root.$primary-color;
 // }

package/tools/res/templates/template.ts

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