create-berna-stencil 2.5.0 → 2.6.1

package/.eleventy.js

@@ -87,7 +87,7 @@ module.exports = function (eleventyConfig) {
       input: "src/frontend",
       output: OUTPUT_DIR,
       includes: "components",
-      layouts: "components/layouts",
+      layouts: "layouts",
       data: "data",
     },
   };

package/.gitignore

@@ -1,4 +1,5 @@
-node_modules/
-src/backend/_core/vendor/
-out/
-src/backend/config.php
+
+node_modules/
+src/backend/_core/vendor/
+out/
+src/backend/config.php

package/README.md

@@ -1,18 +1,22 @@
 # ✏️ Berna-Stencil
 **Berna-Stencil** is an open source static site generator built on top of [Eleventy](https://www.11ty.dev/), designed with one clear mission: make web development simple, approachable, and enjoyable — for everyone.
 
+Berna-Stencil stays deliberately close to plain, vanilla web development — you work with real HTML, CSS, and JavaScript, not a heavy abstraction layer to learn first. That means a gentle, fast learning curve: the skills you build here are the same ones you'd use anywhere on the web.
+
 Whether you're a seasoned developer looking for a clean starting point or a beginner taking your first steps into the world of web creation, Berna-Stencil gives you everything you need, right out of the box. No complicated setup, no hours spent reading documentation, no frustration — just a solid, well-structured foundation ready to become your next website.
 
 ### ✨ Why Berna-Stencil?
 
 Building a website from scratch involves a lot of moving parts: templating engines, build pipelines, asset management, backend logic, project structure. Berna-Stencil takes care of all of that for you, so you can focus on what actually matters — **your content and your ideas**.
 
+Because it keeps you close to the fundamentals instead of hiding them, you spend your time actually learning the web — not memorizing a framework's conventions that stop being useful the moment you switch tool.
+
 - 🔧 **Zero-config ready** — clone, install, and you're live in minutes
 - 🔗 **Integrated backend** — essential server-side functionality included, no extra setup required
 - 📁 **Scalable structure** — a clean, opinionated project layout that grows with your needs
 - 🌍 **Open source** — free to use, free to modify, free to share
 
-![Version](https://img.shields.io/badge/version-2.5.0-blue)
+![Version](https://img.shields.io/badge/version-2.6.1-blue)
 ![License](https://img.shields.io/badge/license-Apache--2.0-blue)
 ![Eleventy](https://img.shields.io/badge/11ty-v3.1.2-black)
 
@@ -33,11 +37,6 @@ Building a website from scratch involves a lot of moving parts: templating engin
    cd your-project
    ```
 
-* Install all the node_modules
-   ```bash
-   npm install
-   ```
-
 * Run the command to launch the live server and build the site, then visit localhost:8080:
    ```bash
    npm run serve

package/_tools/assistant.js

@@ -1,146 +1,150 @@
 const readline = require('readline');
-const { addPage, removePage, renamePage } = require('./modules/updatePage');
-const { updateOutputPath, getCurrentOutputPath } = require('./modules/updateOutputPath');
 
-const c = {
-    reset: "\x1b[0m",
-    bold: "\x1b[1m",
-    dim: "\x1b[2m",
-    red: "\x1b[31m",
-    green: "\x1b[32m",
-    yellow: "\x1b[33m",
-    magenta: "\x1b[35m",
-    cyan: "\x1b[36m"
+const { addPage, removePage, renamePage, pageExists } = require('./modules/updatePage');
+const { updateOutputPath, getCurrentOutputPath } = require('./modules/updateOutputPath');
+const { validatePageName, validateOutputPath } = require('./modules/validation');
+const { toKebabCase } = require('./modules/utils');
+
+const color = {
+    reset:   '\x1b[0m',
+    bold:    '\x1b[1m',
+    dim:     '\x1b[2m',
+    red:     '\x1b[31m',
+    green:   '\x1b[32m',
+    yellow:  '\x1b[33m',
+    magenta: '\x1b[35m',
+    cyan:    '\x1b[36m',
 };
 
-const readerInterface = readline.createInterface({
+const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout,
-    terminal: true
+    terminal: true,
 });
 
-const PROTECTED_PAGES  = ['homepage', '404'];
-const MAX_NAME_LENGTH  = 50;
-
-function toKebabCase(str) {
-    return str.trim().toLowerCase()
-        .replace(/[^a-z0-9\s_-]/g, '')
-        .replace(/[\s_]+/g, '-')
-        .replace(/-+/g, '-')
-        .replace(/^-+|-+$/g, '');
-}
-
-function validatePageName(name) {
-    if (!name)                                 return 'Invalid name.';
-    if (name.length > MAX_NAME_LENGTH)         return `Name must be ${MAX_NAME_LENGTH} characters or fewer.`;
-    if (!/^[a-z0-9-]+$/.test(name))            return 'Page name can only contain lowercase letters, numbers, and hyphens.';
-    if (/^\d/.test(name))                      return 'Page name cannot start with a number.';
-    if (PROTECTED_PAGES.includes(name))        return `"${name}" is a protected page name.`;
-    return null;
-}
-
-function validateOutputPath(input) {
-    if (!input.trim())           return 'Invalid path.';
-    if (input.includes('..'))    return 'Path cannot contain "..".';
-    if (/[<>|?*"']/.test(input)) return 'Path contains invalid characters.';
-    return null;
+function sanitizeInput(value) {
+    return (value ?? '').replace(/[\x00-\x1F\x7F]/g, '').trim();
 }
 
-function sanitizeInput(str) {
-    return str.replace(/[\x00-\x1F\x7F]/g, '').trim();
+function ask(prompt) {
+    return new Promise((resolve) => {
+        const onClose = () => resolve(null);
+        rl.once('close', onClose);
+        rl.question(prompt, (answer) => {
+            rl.off('close', onClose);
+            resolve(sanitizeInput(answer));
+        });
+    });
 }
 
-function ask(prompt) {
-    return new Promise(resolve =>
-        readerInterface.question(prompt, answer => resolve(sanitizeInput(answer)))
-    );
+async function confirm(prompt) {
+    const answer = await ask(`${prompt} ${color.dim}[y/N]${color.reset} `);
+    return /^y(es)?$/i.test((answer ?? '').trim());
 }
 
 async function askPageName(prompt) {
     const raw = await ask(prompt);
+    if (raw === null) return null;
+
     const name = toKebabCase(raw);
     const error = validatePageName(name);
     if (error) {
-        console.log(`\n${c.red}✖ ${error}${c.reset}`);
+        console.log(`\n${color.red}✖ ${error}${color.reset}`);
         return null;
     }
     return name;
 }
 
-async function handleCreateRequest() {
-    const name = await askPageName(`\n${c.green}❯${c.reset} Enter the name of the new page: `);
-    if (name) addPage(name, null);
+async function handleCreate() {
+    const name = await askPageName(`\n${color.green}❯${color.reset} Name of the new page: `);
+    if (name) addPage(name);
 }
 
-async function handleRemoveRequest() {
-    const name = await askPageName(`\n${c.red}❯${c.reset} Enter the name of the page to remove: `);
-    if (name) removePage(name);
+async function handleRemove() {
+    const name = await askPageName(`\n${color.red}❯${color.reset} Name of the page to remove: `);
+    if (!name) return;
+
+    if (!pageExists(name)) {
+        console.log(`\n${color.yellow}⚠ Page "${name}" does not exist.${color.reset}`);
+        return;
+    }
+
+    const confirmed = await confirm(`This permanently deletes all files for "${name}".`);
+    if (!confirmed) {
+        console.log(`\n${color.dim}Cancelled.${color.reset}`);
+        return;
+    }
+    removePage(name);
 }
 
-async function handleRenameRequest() {
-    const oldName = await askPageName(`\n${c.yellow}❯${c.reset} Enter the name of the page to rename: `);
+async function handleRename() {
+    const oldName = await askPageName(`\n${color.yellow}❯${color.reset} Page to rename: `);
     if (!oldName) return;
 
-    const newName = await askPageName(`${c.yellow}❯${c.reset} Enter the new name: `);
+    const newName = await askPageName(`${color.yellow}❯${color.reset} New name: `);
     if (!newName) return;
 
     if (oldName === newName) {
-        console.log(`\n${c.yellow}⚠ Old and new name are the same.${c.reset}`);
+        console.log(`\n${color.yellow}⚠ Old and new name are the same.${color.reset}`);
         return;
     }
-
     renamePage(oldName, newName);
 }
 
-async function handleOutputPathRequest() {
+async function handleOutputPath() {
     const current = getCurrentOutputPath();
-    const label   = current ? `\n${c.dim}Current path: "${current}"${c.reset}\n` : '\n';
-    const input   = await ask(`${label}${c.magenta}❯${c.reset} Enter the new output path: `);
+    const label = current ? `\n${color.dim}Current path: "${current}"${color.reset}\n` : '\n';
+
+    const input = await ask(`${label}${color.magenta}❯${color.reset} New output path: `);
+    if (input === null) return;
 
     const error = validateOutputPath(input);
     if (error) {
-        console.log(`\n${c.red}✖ ${error}${c.reset}`);
-    } else {
-        updateOutputPath(input);
+        console.log(`\n${color.red}✖ ${error}${color.reset}`);
+        return;
     }
+    updateOutputPath(input);
 }
 
 const MENU_ACTIONS = {
-    '1': handleCreateRequest,
-    '2': handleRemoveRequest,
-    '3': handleRenameRequest,
-    '4': handleOutputPathRequest,
+    '1': handleCreate,
+    '2': handleRemove,
+    '3': handleRename,
+    '4': handleOutputPath,
 };
 
-async function displayMainMenu() {
-    console.log(`\n${c.cyan}${c.bold}╭────────────────────────╮`);
+function renderMenu() {
+    console.log(`\n${color.cyan}${color.bold}╭────────────────────────╮`);
     console.log(`│    Berna-Stencil CLI   │`);
-    console.log(`╰────────────────────────╯${c.reset}\n`);
-    console.log(`  ${c.green}1.${c.reset} Create page`);
-    console.log(`  ${c.red}2.${c.reset} Remove page`);
-    console.log(`  ${c.yellow}3.${c.reset} Rename page`);
-    console.log(`  ${c.magenta}4.${c.reset} Configure output path`);
-    console.log(`\n  ${c.dim}CTRL/CMD + C to exit${c.reset}\n`);
-
-    const choice = (await ask(`${c.cyan}❯${c.reset} Choose an option: `)).trim();
-
-    if (choice === '0') {
-        readerInterface.close();
-        process.exit(0);
-    }
+    console.log(`╰────────────────────────╯${color.reset}\n`);
+    console.log(`  ${color.green}1.${color.reset} Create page`);
+    console.log(`  ${color.red}2.${color.reset} Remove page`);
+    console.log(`  ${color.yellow}3.${color.reset} Rename page`);
+    console.log(`  ${color.magenta}4.${color.reset} Configure output path`);
+    console.log(`  ${color.dim}CTRL + C to exit\n`);
+}
+
+async function main() {
+    while (true) {
+        renderMenu();
+
+        const choice = await ask(`${color.cyan}❯${color.reset} Choose an option: `);
+
+        const action = MENU_ACTIONS[choice];
+        if (!action) {
+            console.log(`\n${color.red}✖ Invalid option.${color.reset}`);
+            continue;
+        }
 
-    const action = MENU_ACTIONS[choice];
-    if (action) {
         try {
             await action();
         } catch (err) {
-            console.log(`\n${c.red}✖ Unexpected error: ${err.message}${c.reset}`);
+            console.log(`\n${color.red}✖ Unexpected error: ${err.message}${color.reset}`);
         }
-    } else {
-        console.log(`\n${c.red}✖ Invalid option.${c.reset}`);
     }
 
-    displayMainMenu();
+    rl.close();
+    process.exit(0);
 }
 
-displayMainMenu();
+main();

package/_tools/modules/constants.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+const FRONTEND_DIR = path.join(ROOT, 'src', 'frontend');
+
+const MAX_PAGE_NAME_LENGTH = 50;
+const PROTECTED_PAGES = Object.freeze(['homepage', '404']);
+
+const PATHS = Object.freeze({
+    root:           ROOT,
+    routes:         path.join(FRONTEND_DIR, '_routes'),
+    scssPages:      path.join(FRONTEND_DIR, 'scss', 'pages'),
+    jsPages:        path.join(FRONTEND_DIR, 'js', 'pages'),
+    tsPages:        path.join(FRONTEND_DIR, 'ts', 'pages'),
+    siteData:       path.join(FRONTEND_DIR, 'data', 'site.json'),
+    pageComponents: path.join(FRONTEND_DIR, 'layouts', 'pageComponents.njk'),
+    templates:      path.join(ROOT, '_tools', 'res', 'templates'),
+    eleventyConfig: path.join(ROOT, '.eleventy.js'),
+    packageJson:    path.join(ROOT, 'package.json'),
+    tsconfig:       path.join(ROOT, 'tsconfig.json'),
+});
+
+module.exports = { PATHS, MAX_PAGE_NAME_LENGTH, PROTECTED_PAGES };

package/_tools/modules/pageComponents.js

@@ -0,0 +1,77 @@
+const fs = require('fs');
+const { PATHS } = require('./constants');
+const { toCamelCase } = require('./utils');
+
+function readPageComponents() {
+    if (!fs.existsSync(PATHS.pageComponents)) {
+        console.log(`[skip] not found: ${PATHS.pageComponents}`);
+        return null;
+    }
+    return fs.readFileSync(PATHS.pageComponents, 'utf8');
+}
+
+function writePageComponents(content) {
+    fs.writeFileSync(PATHS.pageComponents, content);
+}
+
+function elifBlockRegex(camelName) {
+    return new RegExp(
+        `[ \\t]*\\{%\\s*elif\\s+title\\s*==\\s*"${camelName}"\\s*%\\}[\\s\\S]*?(?=[ \\t]*\\{%\\s*(?:elif|else|endif))`,
+    );
+}
+
+function addPageBlock(pageName) {
+    const content = readPageComponents();
+    if (!content) return;
+
+    const camelName = toCamelCase(pageName);
+    if (content.includes(`{% elif title == "${camelName}" %}`)) return;
+
+    if (!content.includes('{% else %}')) {
+        console.log('[skip] no {% else %} anchor in pageComponents.njk');
+        return;
+    }
+
+    const block =
+        `{% elif title == "${camelName}" %}\n` +
+        `  {#{% include "component.njk" %}#}\n\n`;
+
+    writePageComponents(content.replace('{% else %}', `${block}{% else %}`));
+    console.log(`[updated] page block added for "${camelName}"`);
+}
+
+function removePageBlock(pageName) {
+    const content = readPageComponents();
+    if (!content) return;
+
+    const camelName = toCamelCase(pageName);
+    if (!elifBlockRegex(camelName).test(content)) {
+        console.log(`[skip] page block for "${camelName}" not found`);
+        return;
+    }
+
+    const updated = content
+        .replace(elifBlockRegex(camelName), '')
+        .replace(/\n\s*\n\s*\n/g, '\n\n');
+
+    writePageComponents(updated);
+    console.log(`[cleaned] page block removed for "${camelName}"`);
+}
+
+function renamePageBlock(oldName, newName) {
+    const content = readPageComponents();
+    if (!content) return;
+
+    const oldLine = `{% elif title == "${toCamelCase(oldName)}" %}`;
+    const newLine = `{% elif title == "${toCamelCase(newName)}" %}`;
+
+    if (!content.includes(oldLine)) {
+        console.log(`[skip] page block for "${toCamelCase(oldName)}" not found`);
+        return;
+    }
+
+    writePageComponents(content.replace(oldLine, newLine));
+    console.log(`[renamed] page block "${toCamelCase(oldName)}" → "${toCamelCase(newName)}"`);
+}
+
+module.exports = { addPageBlock, removePageBlock, renamePageBlock };

package/_tools/modules/updateData.js

@@ -1,72 +1,60 @@
-const fileSystem = require('fs');
+const fs = require('fs');
+const { PATHS } = require('./constants');
 const { toCamelCase, toNiceTitle } = require('./utils');
 
-const SITE_DATA_PATH = 'src/frontend/data/site.json';
-
-// Returns the parsed site.json content, or null if the file doesn't exist
 function readSiteData() {
-    if (!fileSystem.existsSync(SITE_DATA_PATH)) return null;
-    return JSON.parse(fileSystem.readFileSync(SITE_DATA_PATH, 'utf8'));
+    if (!fs.existsSync(PATHS.siteData)) {
+        console.log(`[skip] not found: ${PATHS.siteData}`);
+        return null;
+    }
+    try {
+        const data = JSON.parse(fs.readFileSync(PATHS.siteData, 'utf8'));
+        if (!data.pages || typeof data.pages !== 'object') data.pages = {};
+        return data;
+    } catch (err) {
+        console.log(`[error] cannot parse site.json: ${err.message}`);
+        return null;
+    }
 }
 
-// Serializes and writes the data object back to site.json
 function writeSiteData(data) {
-    fileSystem.writeFileSync(SITE_DATA_PATH, JSON.stringify(data, null, 2));
+    fs.writeFileSync(PATHS.siteData, `${JSON.stringify(data, null, 2)}\n`);
 }
 
-// --- Public API ---
-
-// Adds a new page record to site.json
-// Skips silently if the file doesn't exist or the record is already present
 function addSiteData(pageName) {
     const data = readSiteData();
     if (!data) return;
 
     const camelName = toCamelCase(pageName);
-
     if (data.pages[camelName]) {
-        console.log(`[SKIP] Record "${camelName}" already exists.`);
+        console.log(`[skip] record "${camelName}" already exists`);
         return;
     }
 
-    // Build the default page record with SEO metadata and empty CDN arrays
     data.pages[camelName] = {
-        seo: {
-            title: toNiceTitle(pageName),
-            description: 'description',
-        },
-        cdn: {
-            css: [],
-            js: []
-        }
+        seo: { title: toNiceTitle(pageName), description: 'description' },
+        cdn: { css: [], js: [] },
     };
 
     writeSiteData(data);
-    console.log(`[UPDATED] Record "${camelName}" added.`);
+    console.log(`[updated] record "${camelName}" added`);
 }
 
-// Removes a page record from site.json
-// Skips silently if the file doesn't exist or the record is not found
 function removeSiteData(pageName) {
     const data = readSiteData();
     if (!data) return;
 
     const camelName = toCamelCase(pageName);
-
     if (!data.pages[camelName]) {
-        console.log(`[SKIP] Record "${camelName}" not found.`);
+        console.log(`[skip] record "${camelName}" not found`);
         return;
     }
 
     delete data.pages[camelName];
-
     writeSiteData(data);
-    console.log(`[CLEANED] Record "${camelName}" removed.`);
+    console.log(`[cleaned] record "${camelName}" removed`);
 }
 
-// Renames a page record in site.json
-// Preserves all existing fields (cdn, etc.) and only updates the SEO title
-// Skips if the source record doesn't exist or the target name is already taken
 function renameSiteData(oldName, newName) {
     const data = readSiteData();
     if (!data) return;
@@ -75,29 +63,22 @@ function renameSiteData(oldName, newName) {
     const newCamel = toCamelCase(newName);
 
     if (!data.pages[oldCamel]) {
-        console.log(`[SKIP] Record "${oldCamel}" not found.`);
+        console.log(`[skip] record "${oldCamel}" not found`);
         return;
     }
-
     if (data.pages[newCamel]) {
-        console.log(`[SKIP] Record "${newCamel}" already exists.`);
+        console.log(`[skip] record "${newCamel}" already exists`);
         return;
     }
 
-    // Spread the existing record to preserve cdn and any future fields,
-    // then override only the seo.title with the new page name
     data.pages[newCamel] = {
         ...data.pages[oldCamel],
-        seo: {
-            ...data.pages[oldCamel].seo,
-            title: toNiceTitle(newName),
-        }
+        seo: { ...data.pages[oldCamel].seo, title: toNiceTitle(newName) },
     };
-
     delete data.pages[oldCamel];
 
     writeSiteData(data);
-    console.log(`[UPDATED] Record "${oldCamel}" renamed to "${newCamel}".`);
+    console.log(`[updated] record "${oldCamel}" renamed to "${newCamel}"`);
 }
 
 module.exports = { addSiteData, removeSiteData, renameSiteData };