create-berna-stencil 1.0.1

package/src/scss/pages/404.scss

@@ -0,0 +1,20 @@
+//==========================
+// CSS MODULES IMPORTS
+//==========================
+// Use @use with a namespace to avoid framework variable conflicts:
+@use "../modules/root" as root;
+
+// Page layout modules — comment out any section you don't need
+@import "../modules/global";
+// Import any other module you need by import down here
+@import "../modules/notification";
+
+//==========================
+// PAGE CUSTOM CSS RULES FOR PAGE: 404
+//==========================
+
+// Add any custom rule specific to this page below
+// These rules override the framework and module styles
+// body {
+//     background-color: root.$primary;
+// }

package/src/scss/pages/anotherPage.scss

@@ -0,0 +1,21 @@
+//==========================
+// CSS MODULES IMPORTS
+//==========================
+
+// Use @use with a namespace to avoid framework variable conflicts:
+@use "../modules/root" as root;
+
+// Page layout modules — comment out any section you don't need
+@import "../modules/global";
+// Import any other module you need by import down here
+@import "../modules/notification";
+
+//==========================
+// PAGE CUSTOM CSS RULES FOR PAGE: another-page
+//==========================
+
+// Add any custom rule specific to this page below
+// These rules override the framework and module styles
+// body {
+//     background-color: root.$primary;
+// }

package/src/scss/pages/homepage.scss

@@ -0,0 +1,21 @@
+//==========================
+// CSS MODULES IMPORTS
+//==========================
+
+// Use @use with a namespace to avoid framework variable conflicts:
+@use "../modules/root" as root;
+
+// Page layout modules — comment out any section you don't need
+@import "../modules/global";
+// Import any other module you need by import down here
+@import "../modules/notification";
+
+//==========================
+// PAGE CUSTOM CSS RULES FOR PAGE: homepage
+//==========================
+
+// Add any custom rule specific to this page below
+// These rules override the framework and module styles
+// body {
+//     background-color: root.$primary;
+// }

package/src/sitemap.njk

@@ -0,0 +1,17 @@
+---
+permalink: /sitemap.xml
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    {% for page in collections.all %}
+        {% if not page.data.draft and '/404' not in page.url %}
+            <url>
+                <loc>{{ site.url }}{{ page.url | lower }}</loc>
+                <lastmod>{{ page.date.toISOString() }}</lastmod>
+                <changefreq>weekly</changefreq>
+                <priority>{{ '1.0' if page.url == '/' else '0.8' }}</priority>
+            </url>
+        {% endif %}
+    {% endfor %}
+</urlset>

package/tools/assistant.js

@@ -0,0 +1,127 @@
+const readline = require('readline');
+const { addPage, removePage, renamePage } = require('./modules/updatePage');
+const { updateOutputPath, getCurrentOutputPath } = require('./modules/updateOutputPath');
+
+const readerInterface = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+    terminal: true
+});
+
+const PROTECTED_PAGES = ['homepage', '404'];
+
+function toKebabCase(str) {
+    return str.trim().toLowerCase()
+        .replace(/[\s_]+/g, '-')
+        .replace(/-+/g, '-');
+}
+
+function handleCreateRequest() {
+    readerInterface.question('\n> enter the name of the new page: ', (inputName) => {
+        const kebabName = toKebabCase(inputName);
+        if (!kebabName) {
+            console.log('(!) invalid name.');
+        } else if (/^\d/.test(kebabName)) {
+            console.log('(!) invalid name. Page name cannot start with a number.');
+        } else if (PROTECTED_PAGES.includes(kebabName)) {
+            console.log(`(!) "${kebabName}" is a protected page and cannot be created.`);
+        } else {
+            readerInterface.question('> parent path (leave empty for root): ', (inputParent) => {
+                const parentPath = inputParent.trim().toLowerCase().replace(/\\/g, '/').replace(/^\/|\/$/g, '');
+                addPage(kebabName, parentPath || null);
+                displayMainMenu();
+            });
+            return;
+        }
+        displayMainMenu();
+    });
+}
+
+function handleRenameRequest() {
+    readerInterface.question('\n> enter the name of the page to rename: ', (inputOld) => {
+        const oldName = toKebabCase(inputOld);
+        if (!oldName) {
+            console.log('(!) invalid name.');
+            return displayMainMenu();
+        }
+        if (PROTECTED_PAGES.includes(oldName)) {
+            console.log(`(!) "${oldName}" is a protected page and cannot be renamed.`);
+            return displayMainMenu();
+        }
+        readerInterface.question('> enter the new name: ', (inputNew) => {
+            const newName = toKebabCase(inputNew);
+            if (!newName) {
+                console.log('(!) invalid name.');
+            } else if (/^\d/.test(newName)) {
+                console.log('(!) invalid name. Page name cannot start with a number.');
+            } else if (PROTECTED_PAGES.includes(newName)) {
+                console.log(`(!) "${newName}" is a protected page name.`);
+            } else if (oldName === newName) {
+                console.log('(!) old and new name are the same.');
+            } else {
+                renamePage(oldName, newName);
+            }
+            displayMainMenu();
+        });
+    });
+}
+
+function handleRemoveRequest() {
+    readerInterface.question('\n> enter the name of the page to remove: ', (inputName) => {
+        const kebabName = toKebabCase(inputName);
+        if (!kebabName) {
+            console.log('(!) invalid name.');
+        } else if (PROTECTED_PAGES.includes(kebabName)) {
+            console.log(`(!) "${kebabName}" is a protected page and cannot be removed.`);
+        } else {
+            removePage(kebabName);
+        }
+        displayMainMenu();
+    });
+}
+
+function handleOutputPathRequest() {
+    const current = getCurrentOutputPath();
+    const currentLabel = current ? ` (current: "${current}")` : '';
+
+    readerInterface.question(`\n> enter the new output path${currentLabel}\n  (e.g. C:/laragon/www or . for root): `, (inputPath) => {
+        if (!inputPath.trim()) {
+            console.log('(!) invalid path.');
+        } else {
+            updateOutputPath(inputPath);
+        }
+        displayMainMenu();
+    });
+}
+
+function displayMainMenu() {
+    console.log('\n========================');
+    console.log('  Berna-Stencil CLI      ');
+    console.log('========================\n');
+    console.log('1. Create page');
+    console.log('2. Rename page');
+    console.log('3. Remove page');
+    console.log('4. Configure output path');
+    console.log('\nCTRL/CMD + C to exit');
+
+    readerInterface.question('\nChoose an option: ', (choice) => {
+        const cleanChoice = choice.trim();
+        if (cleanChoice === '1') {
+            handleCreateRequest();
+        } else if (cleanChoice === '2') {
+            handleRenameRequest();
+        } else if (cleanChoice === '3') {
+            handleRemoveRequest();
+        } else if (cleanChoice === '4') {
+            handleOutputPathRequest();
+        } else if (cleanChoice === '0') {
+            readerInterface.close();
+            process.exit(0);
+        } else {
+            console.log('(!) Invalid option.');
+            displayMainMenu();
+        }
+    });
+}
+
+displayMainMenu();

package/tools/cleanOutput.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+
+const ELEVENTY_CONFIG = path.resolve(__dirname, '../.eleventy.js');
+
+const content = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
+const match = content.match(/const OUTPUT_DIR\s*=\s*['"`]([^'"`]*)['"`]/);
+
+if (!match) {
+    console.log('(!) OUTPUT_DIR not found in .eleventy.js');
+    process.exit(1);
+}
+
+const outputDir = match[1];
+const absPath = path.isAbsolute(outputDir)
+    ? outputDir
+    : path.resolve(__dirname, '..', outputDir);
+
+if (fs.existsSync(absPath)) {
+    fs.rmSync(absPath, { recursive: true, force: true });
+    console.log(`(✓) cleaned → ${absPath}`);
+} else {
+    console.log(`(i) nothing to clean → ${absPath}`);
+}

package/tools/modules/updateData.js

@@ -0,0 +1,58 @@
+const fileSystem = require('fs');
+const SITE_DATA_PATH = 'src/data/site.json';
+
+function toCamelCase(str) {
+    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
+        group.toUpperCase().replace('-', '').replace('_', '')
+    );
+}
+
+function addSiteData(pageName) {
+    if (!fileSystem.existsSync(SITE_DATA_PATH)) return;
+
+    const data = JSON.parse(fileSystem.readFileSync(SITE_DATA_PATH, 'utf8'));
+    const camelName = toCamelCase(pageName);
+
+    if (data.pages[camelName]) {
+        console.log(`[SKIP] Record "${camelName}" already exists.`);
+        return;
+    }
+
+    const niceTitle = pageName
+        .split('-')
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+
+    data.pages[camelName] = {
+        seo: {
+            title: niceTitle,
+            description: "description",
+        },
+        cdn: {
+            css: [],
+            js: []
+        }
+    };
+
+    fileSystem.writeFileSync(SITE_DATA_PATH, JSON.stringify(data, null, 2));
+    console.log(`[UPDATED] Record "${camelName}" added.`);
+}
+
+function removeSiteData(pageName) {
+    if (!fileSystem.existsSync(SITE_DATA_PATH)) return;
+
+    const data = JSON.parse(fileSystem.readFileSync(SITE_DATA_PATH, 'utf8'));
+    const camelName = toCamelCase(pageName);
+
+    if (!data.pages[camelName]) {
+        console.log(`[SKIP] Record "${camelName}" not found.`);
+        return;
+    }
+
+    delete data.pages[camelName];
+
+    fileSystem.writeFileSync(SITE_DATA_PATH, JSON.stringify(data, null, 2));
+    console.log(`[CLEANED] Record "${camelName}" removed.`);
+}
+
+module.exports = { addSiteData, removeSiteData };

package/tools/modules/updateIncludes.js

@@ -0,0 +1,45 @@
+const fileSystem = require('fs');
+const INCLUDES_PATH = 'src/components/layouts/includes.njk';
+
+function toCamelCase(str) {
+    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
+        group.toUpperCase().replace('-', '').replace('_', '')
+    );
+}
+
+function addLayout(pageName) {
+    const camelName = toCamelCase(pageName);
+    if (!fileSystem.existsSync(INCLUDES_PATH)) return;
+
+    let content = fileSystem.readFileSync(INCLUDES_PATH, 'utf8');
+
+    if (content.includes(`{% elif title == "${camelName}" %}`)) return;
+
+    const newElif = `{% elif title == "${camelName}" %}\n  {#{% include "exampleComponent.njk" %}#}\n\n`;
+    const updatedContent = content.replace('{% else %}', `${newElif}{% else %}`);
+
+    fileSystem.writeFileSync(INCLUDES_PATH, updatedContent);
+    console.log(`[UPDATED] Layout block added for "${camelName}".`);
+}
+
+function removeLayout(pageName) {
+    const camelName = toCamelCase(pageName);
+    if (!fileSystem.existsSync(INCLUDES_PATH)) return;
+
+    let content = fileSystem.readFileSync(INCLUDES_PATH, 'utf8');
+
+    const regex = new RegExp(`[ \\t]*\\{%\\s*elif\\s+title\\s*==\\s*"${camelName}"\\s*%\\}[\\s\\S]*?(?=[ \\t]*\\{%\\s*(?:elif|else|endif))`, 'g');
+
+    if (!regex.test(content)) {
+        console.log(`[DEBUG] Layout block for "${camelName}" not found. Skipped.`);
+        return;
+    }
+
+    let updatedContent = content.replace(regex, '');
+    updatedContent = updatedContent.replace(/\n\s*\n\s*\n/g, '\n\n');
+
+    fileSystem.writeFileSync(INCLUDES_PATH, updatedContent);
+    console.log(`[CLEANED] Layout block removed for "${camelName}".`);
+}
+
+module.exports = { addLayout, removeLayout };

package/tools/modules/updateOutputPath.js

@@ -0,0 +1,91 @@
+const fs = require('fs');
+const path = require('path');
+
+const ELEVENTY_CONFIG = path.resolve(__dirname, '../../.eleventy.js');
+const PACKAGE_JSON = path.resolve(__dirname, '../../package.json');
+
+function updateEleventyConfig(newPath) {
+    let content = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
+
+    const updated = content.replace(
+        /const OUTPUT_DIR\s*=\s*['"`][^'"`]*['"`]/,
+        `const OUTPUT_DIR = "${newPath}"`
+    );
+
+    if (content === updated) {
+        console.log('(!) OUTPUT_DIR not found in .eleventy.js');
+        return false;
+    }
+
+    fs.writeFileSync(ELEVENTY_CONFIG, updated, 'utf-8');
+    console.log(`(✓) .eleventy.js updated → ${newPath}`);
+    return true;
+}
+
+function updatePackageJson(newPath) {
+    const raw = fs.readFileSync(PACKAGE_JSON, 'utf-8');
+    const pkg = JSON.parse(raw);
+
+    pkg.scripts['build:css'] = `sass src/scss:${newPath}/css --no-source-map --style=compressed --quiet`;
+    pkg.scripts['build:js'] = `esbuild "src/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --minify`;
+    pkg.scripts['serve:css'] = `sass --watch src/scss:${newPath}/css --no-source-map --quiet`;
+    pkg.scripts['serve:js'] = `esbuild "src/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --watch`;
+
+    fs.writeFileSync(PACKAGE_JSON, JSON.stringify(pkg, null, 2), 'utf-8');
+    console.log(`(✓) package.json updated → ${newPath}`);
+    return true;
+}
+
+function updateOutputPath(newPath) {
+    const trimmed = newPath.trim().replace(/\\/g, '/');
+
+    let normalizedPath;
+    if (trimmed === '.') {
+        normalizedPath = 'out';
+    } else {
+        const projectName = path.basename(process.cwd());
+        normalizedPath = trimmed.replace(/\/$/, '') + '/' + projectName + '-out';
+    }
+
+    const eleventyContent = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
+    const match = eleventyContent.match(/const OUTPUT_DIR\s*=\s*['"`]([^'"`]*)['"`]/);
+    const oldPath = match ? match[1] : null;
+
+    if (oldPath) {
+        const oldAbsPath = path.resolve(__dirname, '../../', oldPath);
+        if (fs.existsSync(oldAbsPath)) {
+            fs.rmSync(oldAbsPath, { recursive: true, force: true });
+            console.log(`(✓) folder deleted → ${oldAbsPath}`);
+        } else {
+            console.log(`(i) folder not found, nothing to delete → ${oldAbsPath}`);
+        }
+    }
+
+    console.log(`\nupdating output path → "${normalizedPath}"...`);
+
+    updatePackageJson(normalizedPath);
+    updateEleventyConfig(normalizedPath);
+}
+
+function getCurrentOutputPath() {
+    try {
+        const content = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
+        const match = content.match(/const OUTPUT_DIR\s*=\s*['"`]([^'"`]*)['"`]/);
+        if (!match) return null;
+
+        const outputDir = match[1];
+
+        if (!path.isAbsolute(outputDir)) {
+            return 'project root/out';
+        }
+
+        const parent = path.dirname(outputDir);
+        const projectName = path.basename(outputDir);
+
+        return `${parent}/${projectName}`;
+    } catch {
+        return null;
+    }
+}
+
+module.exports = { updateOutputPath, getCurrentOutputPath };

package/tools/modules/updatePage.js

@@ -0,0 +1,150 @@
+const fileSystem = require("fs");
+const path = require("path");
+
+const { addSiteData, removeSiteData } = require("./updateData");
+const { addLayout, removeLayout } = require("./updateIncludes");
+
+const TEMPLATE_FILE_PATH = path.join(__dirname, '..', 'res', 'templates.json');
+
+function toCamelCase(str) {
+    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
+        group.toUpperCase().replace('-', '').replace('_', '')
+    );
+}
+
+function getFileInitialContent(pageName, extension) {   
+    try {
+        const rawData = fileSystem.readFileSync(TEMPLATE_FILE_PATH, "utf8");
+        const templates = JSON.parse(rawData);
+        let selectedTemplate = templates[extension];
+        if (!selectedTemplate) return "";
+
+        const content = Array.isArray(selectedTemplate) ? selectedTemplate.join("\n") : selectedTemplate;
+        
+        const kebabName = pageName; 
+        const camelName = toCamelCase(pageName); 
+
+        let processedContent = content
+            .replace(/{{pageName}}/g, kebabName)
+            .replace(/{{camelName}}/g, camelName);
+
+        if (extension === '.njk') {
+            processedContent = processedContent.replace(/^title:\s*.*$/m, `title: "${camelName}"`);
+            
+            if (processedContent.includes('permalink:')) {
+                processedContent = processedContent.replace(/^permalink:\s*.*$/m, `permalink: "/${kebabName}/"`);
+            } else {
+                processedContent = processedContent.replace(`title: "${camelName}"`, `title: "${camelName}"\npermalink: "/${kebabName}/"`);
+            }
+        }
+
+        return processedContent;
+    } catch (error) {
+        console.error(`[error] ${error.message}`);
+        return "";
+    }
+}
+
+function addPage(pageName) {
+    const camelName = toCamelCase(pageName);
+    
+    const targets = [
+        { folder: "src/scss/pages", extension: ".scss", fileName: camelName },
+        { folder: "src/js/pages", extension: ".js", fileName: camelName },
+        { folder: "src/_routes", extension: ".njk", fileName: pageName },
+    ];
+
+    targets.forEach((target) => {
+        const filePath = path.join(target.folder, `${target.fileName}${target.extension}`);
+        fileSystem.mkdirSync(target.folder, { recursive: true });
+        
+        if (!fileSystem.existsSync(filePath)) {
+            const fileContent = getFileInitialContent(pageName, target.extension);
+            fileSystem.writeFileSync(filePath, fileContent);
+            console.log(`[created file] ${filePath}`);
+        }
+    });
+
+    addLayout(pageName);
+    addSiteData(pageName);
+}
+
+function renamePage(oldName, newName) {
+    const oldCamel = toCamelCase(oldName);
+    const newCamel = toCamelCase(newName);
+
+    const filesToRename = [
+        {
+            src: `src/scss/pages/${oldCamel}.scss`,
+            dest: `src/scss/pages/${newCamel}.scss`,
+        },
+        {
+            src: `src/js/pages/${oldCamel}.js`,
+            dest: `src/js/pages/${newCamel}.js`,
+        },
+        {
+            src: `src/_routes/${oldName}.njk`,
+            dest: `src/_routes/${newName}.njk`,
+        },
+    ];
+
+    filesToRename.forEach(({ src, dest }) => {
+        if (!fileSystem.existsSync(src)) {
+            console.log(`[skip] not found: ${src}`);
+            return;
+        }
+        let content = fileSystem.readFileSync(src, 'utf8');
+        content = content
+            .replace(new RegExp(oldName, 'g'), newName)
+            .replace(new RegExp(oldCamel, 'g'), newCamel);
+        fileSystem.writeFileSync(dest, content);
+        fileSystem.unlinkSync(src);
+        console.log(`[renamed] ${src} → ${dest}`);
+    });
+
+    removeLayout(oldName);
+    addLayout(newName);
+    removeSiteData(oldName);
+    addSiteData(newName);
+}
+
+function removePage(pageName) {
+    const camelName = toCamelCase(pageName);
+    const OUTPUT_DIR = "out";
+    
+    const filesToDelete = [
+        `src/scss/pages/${camelName}.scss`,
+        `src/js/pages/${camelName}.js`,
+        `src/_routes/${pageName}.njk`,
+        
+        path.join(OUTPUT_DIR, "js/pages", `${camelName}.js`),
+        path.join(OUTPUT_DIR, "css/pages", `${camelName}.css`),
+        
+        path.join(OUTPUT_DIR, `${pageName}.html`),
+        path.join(OUTPUT_DIR, "pages", `${pageName}.html`) 
+    ];
+
+    const foldersToDelete = [
+        path.join(OUTPUT_DIR, pageName),
+        path.join(OUTPUT_DIR, "pages", pageName)
+    ];
+
+    filesToDelete.forEach(f => { 
+        if (fileSystem.existsSync(f)) {
+            fileSystem.unlinkSync(f); 
+            console.log(`[deleted file] ${f}`);
+        }
+    });
+
+    foldersToDelete.forEach(folder => {
+        if (fileSystem.existsSync(folder)) {
+            fileSystem.rmSync(folder, { recursive: true, force: true });
+            console.log(`[deleted folder] ${folder}`);
+        }
+    });
+
+    removeLayout(pageName);
+    removeSiteData(pageName);
+}
+
+module.exports = { addPage, removePage, renamePage };

package/tools/res/templates.json

@@ -0,0 +1,56 @@
+{
+  ".scss": [
+    "//==========================",
+    "// CSS MODULES IMPORTS",
+    "//==========================",
+    "",
+    "@use \"../modules/root\" as root;",
+    "",
+    "@import \"../modules/global\";",
+    "// Import any other module you need by import down here",
+    "@import \"../modules/notification\";",
+    "",
+    "//==========================",
+    "// PAGE CUSTOM CSS RULES FOR PAGE: {{pageName}}",
+    "//==========================",
+    "",
+    "// body {",
+    "//     background-color: root.$primary;",
+    "// }"
+  ],
+  ".njk": [
+    "---",
+    "title: {{pageName}}",
+    "permalink: /{{ title | slug }}/",
+    "layout: includes.njk",
+    "---",
+    "",
+    "<!-- Add content via components in src/components/, not directly here.",
+    "     Register them in src/layouts/includes.njk. -->"
+  ],
+  ".js": [
+    "//==========================",
+    "// JAVASCRIPT MODULES IMPORTS",
+    "//==========================",
+    "",
+    "// Call inside DOMContentLoaded",
+    "import { initLangSwitcher } from '../modules/langSwitcher.js';",
+    "",
+    "// Call anywhere",
+    "import { showNotification } from '../modules/notification.js';",
+    "",
+    "// Uncomment to enable optional modules (call inside DOMContentLoaded)",
+    "// import { initTextAreaAutoExpand } from '../modules/textAreaAutoExpand.js';",
+    "// import { initNormalizePhoneNumber } from '../modules/normalizePhoneNumber.js';",
+    "",
+    "//==========================",
+    "// \"{{pageName}}\" PAGE CUSTOM JAVASCRIPT",
+    "//==========================",
+    "",
+    "document.addEventListener(\"DOMContentLoaded\", () => {",
+    "  initLangSwitcher();",
+    "});",
+    "",
+    "showNotification(\"{{pageName}} notification\", \"success\", 3000);"
+  ]
+}