create-berna-stencil 2.6.0 → 2.6.2

package/_tools/modules/updatePage.js

@@ -1,135 +1,162 @@
-const fileSystem = require('fs');
+const fs = require('fs');
 const path = require('path');
 
+const { PATHS } = require('./constants');
+const { toCamelCase, isTypeScriptProject } = require('./utils');
 const { addSiteData, removeSiteData, renameSiteData } = require('./updateData');
-const { addLayout, removeLayout, renameLayout } = require('./updateIncludes');
+const { addPageBlock, removePageBlock, renamePageBlock } = require('./pageComponents');
 const { getCurrentOutputPath } = require('./updateOutputPath');
-const { toCamelCase, isTypeScriptProject } = require('./utils');
-
-const TEMPLATES_DIR = path.join(__dirname, '..', 'res', 'templates');
-
-function getPageTargets(pageName) {
-    const camelName = toCamelCase(pageName);
-    const usesTs    = isTypeScriptProject();
 
-    return [
-        {
-            folder:       'src/frontend/scss/pages',
-            templateFile: 'template.scss',
-            fileName:     `${camelName}.scss`,
-        },
-        {
-            folder:       usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages',
-            templateFile: usesTs ? 'template.ts'           : 'template.js',
-            fileName:     usesTs ? `${camelName}.ts`       : `${camelName}.js`,
+function getPageArtifacts(pageName) {
+    const camelName  = toCamelCase(pageName);
+    const usesTs     = isTypeScriptProject();
+    const scriptDir  = usesTs ? PATHS.tsPages : PATHS.jsPages;
+    const scriptExt  = usesTs ? 'ts' : 'js';
+    const outputRoot = path.join(PATHS.root, getCurrentOutputPath() || 'out');
+
+    return {
+        camelName,
+        source: {
+            scss:   path.join(PATHS.scssPages, `${camelName}.scss`),
+            script: path.join(scriptDir, `${camelName}.${scriptExt}`),
+            route:  path.join(PATHS.routes, `${pageName}.njk`),
         },
-        {
-            folder:       'src/frontend/_routes',
-            templateFile: 'template.njk',
-            fileName:     `${pageName}.njk`,
+        output: {
+            files: [
+                path.join(outputRoot, 'js', 'pages',  `${camelName}.js`),
+                path.join(outputRoot, 'css', 'pages', `${camelName}.css`),
+                path.join(outputRoot, `${pageName}.html`),
+                path.join(outputRoot, 'pages', `${pageName}.html`),
+            ],
+            folders: [
+                path.join(outputRoot, pageName),
+                path.join(outputRoot, 'pages', pageName),
+            ],
         },
-    ];
+    };
 }
 
-function addPage(pageName) {
-    const camelName = toCamelCase(pageName);
-
-    getPageTargets(pageName).forEach(({ folder, templateFile, fileName }) => {
-        const destPath = path.join(folder, fileName);
-        fileSystem.mkdirSync(folder, { recursive: true });
-
-        if (fileSystem.existsSync(destPath)) return;
-
-        const srcPath = path.join(TEMPLATES_DIR, templateFile);
+function pageExists(pageName) {
+    return fs.existsSync(path.join(PATHS.routes, `${pageName}.njk`));
+}
 
-        if (templateFile === 'template.njk') {
-            const content = fileSystem.readFileSync(srcPath, 'utf8')
-                .replace(/^title:.*$/m,     `title: "${camelName}"`)
-                .replace(/^permalink:.*$/m, `permalink: "/${pageName}/"`);
-            fileSystem.writeFileSync(destPath, content);
-        } else {
-            fileSystem.copyFileSync(srcPath, destPath);
-        }
+function applyRouteFrontMatter(filePath, camelName, pageName) {
+    const content = fs.readFileSync(filePath, 'utf8')
+        .replace(/^title:.*$/m,     `title: "${camelName}"`)
+        .replace(/^permalink:.*$/m, `permalink: "/${pageName}/"`);
+    fs.writeFileSync(filePath, content);
+}
 
-        console.log(`[created file] ${destPath}`);
-    });
+function addPage(pageName) {
+    if (pageExists(pageName)) {
+        console.log(`[skip] page "${pageName}" already exists`);
+        return;
+    }
+
+    const { camelName, source } = getPageArtifacts(pageName);
+    const usesTs = isTypeScriptProject();
+
+    const creations = [
+        { dest: source.scss,   template: 'template.scss',                       isRoute: false },
+        { dest: source.script, template: usesTs ? 'template.ts' : 'template.js', isRoute: false },
+        { dest: source.route,  template: 'template.njk',                        isRoute: true  },
+    ];
 
-    addLayout(pageName);
+    try {
+        creations.forEach(({ dest, template, isRoute }) => {
+            const templatePath = path.join(PATHS.templates, template);
+            if (!fs.existsSync(templatePath)) {
+                console.log(`[skip] template not found: ${templatePath}`);
+                return;
+            }
+
+            fs.mkdirSync(path.dirname(dest), { recursive: true });
+            fs.copyFileSync(templatePath, dest);
+            if (isRoute) applyRouteFrontMatter(dest, camelName, pageName);
+
+            console.log(`[created] ${dest}`);
+        });
+    } catch (err) {
+        console.log(`[error] could not create page files: ${err.message}`);
+        return;
+    }
+
+    addPageBlock(pageName);
     addSiteData(pageName);
 }
 
 function renamePage(oldName, newName) {
-    const oldCamel = toCamelCase(oldName);
-    const newCamel = toCamelCase(newName);
-    const usesTs   = isTypeScriptProject();
-    const ext      = usesTs ? 'ts' : 'js';
-    const jsFolder = usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages';
-
-    const filesToRename = [
-        { src: `src/frontend/scss/pages/${oldCamel}.scss`, dest: `src/frontend/scss/pages/${newCamel}.scss` },
-        { src: `${jsFolder}/${oldCamel}.${ext}`,           dest: `${jsFolder}/${newCamel}.${ext}`           },
-        { src: `src/frontend/_routes/${oldName}.njk`,      dest: `src/frontend/_routes/${newName}.njk`      },
+    if (!pageExists(oldName)) {
+        console.log(`[skip] page "${oldName}" does not exist`);
+        return;
+    }
+    if (pageExists(newName)) {
+        console.log(`[skip] target page "${newName}" already exists`);
+        return;
+    }
+
+    const oldArtifacts = getPageArtifacts(oldName);
+    const newArtifacts = getPageArtifacts(newName);
+
+    const moves = [
+        { src: oldArtifacts.source.scss,   dest: newArtifacts.source.scss   },
+        { src: oldArtifacts.source.script, dest: newArtifacts.source.script },
+        { src: oldArtifacts.source.route,  dest: newArtifacts.source.route  },
     ];
 
-    filesToRename.forEach(({ src, dest }) => {
-        if (!fileSystem.existsSync(src)) {
-            console.log(`[skip] not found: ${src}`);
-            return;
-        }
-        
-        fileSystem.renameSync(src, dest);
-        console.log(`[renamed] ${src} → ${dest}`);
-
-        if (dest.endsWith('.njk')) {
-            const content = fileSystem.readFileSync(dest, 'utf8')
-                .replace(/^title:.*$/m,     `title: "${newCamel}"`)
-                .replace(/^permalink:.*$/m, `permalink: "/${newName}/"`);
-            fileSystem.writeFileSync(dest, content);
-        }
-    });
-
-    renameLayout(oldName, newName);
+    try {
+        moves.forEach(({ src, dest }) => {
+            if (!fs.existsSync(src)) {
+                console.log(`[skip] not found: ${src}`);
+                return;
+            }
+            fs.mkdirSync(path.dirname(dest), { recursive: true });
+            fs.renameSync(src, dest);
+            console.log(`[renamed] ${src} → ${dest}`);
+
+            if (dest.endsWith('.njk')) applyRouteFrontMatter(dest, newArtifacts.camelName, newName);
+        });
+    } catch (err) {
+        console.log(`[error] could not rename page files: ${err.message}`);
+        return;
+    }
+
+    renamePageBlock(oldName, newName);
     renameSiteData(oldName, newName);
 }
 
 function removePage(pageName) {
-    const camelName  = toCamelCase(pageName);
-    const usesTs     = isTypeScriptProject();
-    const ext        = usesTs ? 'ts' : 'js';
-    const jsFolder   = usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages';
-    const OUTPUT_DIR = getCurrentOutputPath() || 'out';
-
-    const filesToDelete = [
-        `src/frontend/scss/pages/${camelName}.scss`,
-        `${jsFolder}/${camelName}.${ext}`,
-        `src/frontend/_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}`);
+    if (!pageExists(pageName)) {
+        console.log(`[skip] page "${pageName}" does not exist`);
+    }
+
+    const { source, output } = getPageArtifacts(pageName);
+    const filesToDelete = [source.scss, source.script, source.route, ...output.files];
+
+    filesToDelete.forEach((file) => {
+        try {
+            if (fs.existsSync(file)) {
+                fs.unlinkSync(file);
+                console.log(`[deleted] ${file}`);
+            }
+        } catch (err) {
+            console.log(`[error] ${file}: ${err.message}`);
         }
     });
 
-    foldersToDelete.forEach(folder => {
-        if (fileSystem.existsSync(folder)) {
-            fileSystem.rmSync(folder, { recursive: true, force: true });
-            console.log(`[deleted folder] ${folder}`);
+    output.folders.forEach((folder) => {
+        try {
+            if (fs.existsSync(folder)) {
+                fs.rmSync(folder, { recursive: true, force: true });
+                console.log(`[deleted] ${folder}`);
+            }
+        } catch (err) {
+            console.log(`[error] ${folder}: ${err.message}`);
         }
     });
 
-    removeLayout(pageName);
+    removePageBlock(pageName);
     removeSiteData(pageName);
 }
 
-module.exports = { addPage, removePage, renamePage };
+module.exports = { addPage, removePage, renamePage, pageExists };

package/_tools/modules/utils.js

@@ -1,30 +1,27 @@
-const fs   = require('fs');
-const path = require('path');
+const fs = require('fs');
+const { PATHS } = require('./constants');
 
-const TSCONFIG = path.resolve(__dirname, '../../tsconfig.json');
-
-// Shared utility functions used across modules
+function toCamelCase(value) {
+    return value.toLowerCase().replace(/[-_][a-z0-9]/g, (group) => group.slice(1).toUpperCase());
+}
 
-// Converts a kebab-case or snake_case string to camelCase.
-// Uses slice(1) to remove the delimiter, avoiding the double-replace bug
-// that occurs when using .replace('-', '') without the /g flag.
-function toCamelCase(str) {
-    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
-        group.slice(1).toUpperCase()
-    );
+function toKebabCase(value) {
+    return value.trim().toLowerCase()
+        .replace(/[^a-z0-9\s_-]/g, '')
+        .replace(/[\s_]+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-+|-+$/g, '');
 }
 
-// Converts a kebab-case page name to a human-readable title
-// e.g. "about-us" → "About Us"
 function toNiceTitle(pageName) {
-    return pageName
-        .split('-')
-        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    return pageName.split('-')
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
 
 function isTypeScriptProject() {
-    return fs.existsSync(TSCONFIG);
+    return fs.existsSync(PATHS.tsconfig);
 }
 
-module.exports = { toCamelCase, toNiceTitle, isTypeScriptProject };
+module.exports = { toCamelCase, toKebabCase, toNiceTitle, isTypeScriptProject };

package/_tools/modules/validation.js

@@ -0,0 +1,20 @@
+const { MAX_PAGE_NAME_LENGTH, PROTECTED_PAGES } = require('./constants');
+
+function validatePageName(name) {
+    if (!name)                              return 'Invalid name.';
+    if (name.length > MAX_PAGE_NAME_LENGTH) return `Name must be ${MAX_PAGE_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) {
+    const value = (input ?? '').trim();
+    if (!value)                    return 'Invalid path.';
+    if (value.includes('..'))      return 'Path cannot contain "..".';
+    if (/[<>|?*"']/.test(value))   return 'Path contains invalid characters.';
+    return null;
+}
+
+module.exports = { validatePageName, validateOutputPath };

package/bin/create.js

@@ -4,6 +4,19 @@ const fs = require('fs');
 const path = require('path');
 const readline = require('readline');
 const { writeSync } = require('fs');
+const { spawnSync } = require('child_process');
+
+const color = {
+    reset:   '\x1b[0m',
+    bold:    '\x1b[1m',
+    dim:     '\x1b[2m',
+    red:     '\x1b[31m',
+    green:   '\x1b[32m',
+    yellow:  '\x1b[33m',
+    blue:    '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan:    '\x1b[36m',
+};
 
 // ── PATHS ────────────────────────────────────────────────────────────────────
 
@@ -134,8 +147,7 @@ const PROJECT_PACKAGE = {
         "serve:11ty": "eleventy --serve --quiet",
         "clean": "node _tools/cleanOutput.js",
         "serve": "npm run clean && concurrently \"npm run serve:11ty\" \"npm run serve:css\" \"npm run serve:js\"",
-        "assistant": "node _tools/assistant.js",
-        "postinstall": "cd src/backend/_core && composer install --quiet"
+        "assistant": "node _tools/assistant.js"
     },
     dependencies: {
         '@11ty/eleventy':     '^3.1.2',
@@ -161,6 +173,10 @@ function log(msg) {
     writeSync(1, msg + '\n');
 }
 
+function logAdd(name) {
+    log(`${color.green}+${color.reset} ${name}`);
+}
+
 function escapeRegex(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -209,6 +225,48 @@ function njkUncomment(content, line) {
     return content.split(`{# ${line} #}`).join(line);
 }
 
+function installDependencies() {
+    const backendCore = path.join(targetDir, 'src', 'backend', '_core');
+
+    log(`${color.blue}\n>> Installing Node modules...${color.reset}`);
+    const npm = spawnSync('npm', ['install'], {
+        cwd: targetDir,
+        stdio: 'inherit',
+        shell: process.platform === 'win32',
+    });
+
+    if (npm.status !== 0) {
+        log('\n(!) npm install failed. Finish manually:');
+        if (process.argv[2]) log(`      cd ${process.argv[2]}`);
+        log('      npm install\n');
+        return false;
+    }
+
+    if (!fs.existsSync(path.join(backendCore, 'composer.json'))) {
+        return true;
+    }
+
+    const probe = spawnSync('composer', ['--version'], {
+        stdio: 'ignore',
+        shell: process.platform === 'win32',
+    });
+
+    if (probe.status !== 0) {
+        log('\n(!) Composer not found — skipping backend dependencies.');
+        log('    Install Composer, then run: cd src/backend/_core && composer install\n');
+        return true;
+    }
+
+    log(`\n${color.blue}>> Installing Composer modules...${color.reset}\n`);
+    spawnSync('composer', ['install'], {
+        cwd: backendCore,
+        stdio: 'inherit',
+        shell: process.platform === 'win32',
+    });
+
+    return true;
+}
+
 // ── APPLY ─────────────────────────────────────────────────────────────────────
 
 function applyFramework(framework) {
@@ -313,25 +371,27 @@ function askChoice(question, choices) {
 async function init() {
     if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true });
 
-    log(`\n>> Creating berna-stencil project in ${targetDir}\n`);
+    log(`\n>> ${color.magenta}Creating berna-stencil project in ${targetDir}\n${color.reset}`);
 
     const language  = await askChoice('Select a language',      LANGUAGE_CHOICES);
     const framework = await askChoice('Select a CSS framework', FRAMEWORK_CHOICES);
 
+    log('');
+
     for (const target of MANDATORY_COPY) {
         const src  = path.join(templateDir, target);
         const dest = path.join(targetDir, target);
         if (!fs.existsSync(src)) continue;
         const exclude = target === 'src/frontend' ? FRONTEND_EXCLUDE[language] : [];
         copyRecursive(src, dest, exclude);
-        log(`+ ${target}`);
+        logAdd(target);
     }
 
     const configDest    = path.join(targetDir, 'src/backend/config.php');
     const configExample = path.join(targetDir, 'src/backend/config.example.php');
     if (!fs.existsSync(configDest) && fs.existsSync(configExample)) {
         fs.copyFileSync(configExample, configDest);
-        log('+ src/backend/config.php');
+        logAdd('src/backend/config.php');
     }
     deleteFileRecursive(targetDir, 'config.example.php');
 
@@ -341,15 +401,15 @@ async function init() {
         const tsSrc  = path.join(templateDir, 'tsconfig.json');
         const tsDest = path.join(targetDir, 'tsconfig.json');
         fs.copyFileSync(tsSrc, tsDest);
-        log('+ tsconfig.json');
+        logAdd('tsconfig.json');
         pkg.devDependencies = { ...pkg.devDependencies, typescript: 'latest' };
     }
 
     fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(pkg, null, 2));
-    log('+ package.json');
+    logAdd('package.json');
 
     fs.writeFileSync(path.join(targetDir, '.gitignore'), GITIGNORE_CONTENT);
-    log('+ .gitignore');
+    logAdd('.gitignore');
 
     for (const dir of CREATE_DIRS) {
         fs.mkdirSync(path.join(targetDir, dir), { recursive: true });
@@ -358,10 +418,12 @@ async function init() {
     applyFramework(framework);
     applyLanguage(language);
 
-    log(`\n>> Done! Now run:\n`);
-    if (process.argv[2]) log(`cd ${process.argv[2]}`);
-    log('npm install');
-    log('npm run serve\n');
+    installDependencies();
+
+    log(`\n${color.green}>> Done!${color.reset}`);
+    log(`${color.yellow}\nNow run:\n${color.reset}`);
+    if (process.argv[2]) log(`  ${color.yellow}cd ${process.argv[2]}${color.reset}`);
+    log(`  ${color.yellow}npm run serve${color.reset}\n`);
 }
 
 init();

package/out/.htaccess

@@ -0,0 +1,16 @@
+Options -Indexes
+ErrorDocument 404 /404.html
+ErrorDocument 403 /404.html
+
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteBase /
+
+    RewriteRule ^(web\.config|llms\.txt|robots\.txt|sitemap\.xml|\..*)$ /404.html [L,NC]
+
+    RewriteRule ^api/(.*)$ backend/_core/index.php [QSA,L]
+
+    RewriteCond %{REQUEST_FILENAME} -f [OR]
+    RewriteCond %{REQUEST_FILENAME} -d
+    RewriteRule ^ - [L]
+</IfModule>

package/out/404.html

@@ -0,0 +1,163 @@
+<!-- This is the base of every page that you will create -->
+
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+
+      
+
+        
+        
+
+      
+
+        <link rel="canonical" href="https://yoursite.com/404.html"/>
+        <title>404 - Not found</title>
+        <meta name="description" content="Site description">
+        <meta name="keywords" content="keyword1, keyword2, keyword3">
+        <meta name="author" content="Name and surname">
+        <meta name="theme-color" content="">
+
+        
+        <meta property="og:title" content="404 - Not found">
+        <meta property="og:description" content="">
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="https://yoursite.com/404.html">
+        <meta property="og:image" content="https://yoursite.com/assets/brand/logo.svg">
+        <meta property="og:site-name" content="NaN">
+
+        
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="404 - Not found">
+        <meta name="twitter:description" content="">
+        <meta name="twitter:image" content="https://yoursite.com/assets/brand/logo.svg">
+
+      
+
+        <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            "name": "404 - Not found",
+            "description": "Site description",
+            "url": "https://yoursite.com/404.html",
+            "author": {
+                "@type": "Person",
+                "name": "Name and surname"
+            },
+            "publisher": {
+                "@type": "Organization",
+                "name": "Site name",
+                "logo": {
+                    "@type": "ImageObject",
+                    "url": "https://yoursite.com/assets/brand/logo.svg"
+                }
+            }
+        }
+        </script>
+
+      
+
+        <link rel="icon" type="image/svg+xml" href="/assets/brand/favicon.svg">
+        
+
+      
+
+        
+        
+        <link rel="stylesheet" href="/css/github-markdown-dark.css">
+        
+
+        
+        <link rel="stylesheet" href="/css/pages/404.css"/>
+
+        
+        
+            
+        
+
+    </head>
+
+    <body>
+
+        <header>
+  <nav>
+      <a class="logo" href="/">
+        <img src="/assets/brand/logo.svg" alt="Site title" height="40">
+      </a>
+    <div class="nav-links">
+      <a class="btn" href="/">Homepage</a>
+      <a class="btn" href="/example-page">Example page</a>
+    </div>
+  </nav>
+</header>
+
+        <main>
+            
+<!-- !IMPORTANT -->
+<!-- This is the only page that you need to modify statically -->
+
+<div class="fade-in not-found">
+  <h1>Oops! Page not found</h1>
+  <a href="/">Return to homepage</a>
+</div>
+
+
+
+
+        </main>
+
+        <footer>
+    <div>
+      <h6>Site title</h6>
+      <p>Site description</p>
+    </div>
+
+    <div>
+      <h6>Sitemap</h6>
+      <ul>
+        <li><a href="/">Homepage</a></li>
+      </ul>
+    </div>
+    <div>
+      &copy; 2026  Copyright text
+    </div>
+    <div>
+      <h6>Legal</h6>
+      <small>
+        <ul>
+          <li><a href="">Privacy Policy</a></li>
+          <li><a href="">Cookie Policy</a></li>
+          <li><a href="">Terms and conditions</a></li>
+        </ul>
+      </small>
+    </div>
+  </div>
+</footer>
+
+      
+
+        
+        <script src="/js/bootstrap.bundle.min.js" defer></script>
+        
+        
+        
+        
+
+        
+        
+            
+        
+
+        
+        <script src="/js/pages/404.js"></script>
+
+    </body>
+
+</html>