create-berna-stencil 2.2.1 → 2.4.0

package/README.md

@@ -12,7 +12,7 @@ Building a website from scratch involves a lot of moving parts: templating engin
 - 📁 **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.2.1-blue)
+![Version](https://img.shields.io/badge/version-2.4.0-blue)
 ![License](https://img.shields.io/badge/license-Apache--2.0-blue)
 ![Eleventy](https://img.shields.io/badge/11ty-v3.1.2-black)
 

package/_tools/assistant.js

@@ -2,7 +2,16 @@ const readline = require('readline');
 const { addPage, removePage, renamePage } = require('./modules/updatePage');
 const { updateOutputPath, getCurrentOutputPath } = require('./modules/updateOutputPath');
 
-// --- Setup ---
+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 readerInterface = readline.createInterface({
     input: process.stdin,
@@ -10,67 +19,73 @@ const readerInterface = readline.createInterface({
     terminal: true
 });
 
-const PROTECTED_PAGES = ['homepage', '404'];
-
-// --- Utility ---
+const PROTECTED_PAGES  = ['homepage', '404'];
+const MAX_NAME_LENGTH  = 50;
 
-// Converts any string to kebab-case
 function toKebabCase(str) {
     return str.trim().toLowerCase()
+        .replace(/[^a-z0-9\s_-]/g, '')
         .replace(/[\s_]+/g, '-')
-        .replace(/-+/g, '-');
+        .replace(/-+/g, '-')
+        .replace(/^-+|-+$/g, '');
 }
 
-// Returns an error message if the name is invalid, null otherwise
 function validatePageName(name) {
-    if (!name)                      return 'Invalid name.';
-    if (/^\d/.test(name))           return 'Page name cannot start with a number.';
-    if (PROTECTED_PAGES.includes(name)) return `"${name}" is a protected page 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;
 }
 
-// Wraps readerInterface.question in a Promise for use with async/await
+function sanitizeInput(str) {
+    return str.replace(/[\x00-\x1F\x7F]/g, '').trim();
+}
+
 function ask(prompt) {
     return new Promise(resolve =>
-        readerInterface.question(prompt, answer => resolve(answer))
+        readerInterface.question(prompt, answer => resolve(sanitizeInput(answer)))
     );
 }
 
-// Asks for a page name, converts it to kebab-case, validates it,
-// logs the error and returns null if invalid
 async function askPageName(prompt) {
     const raw = await ask(prompt);
     const name = toKebabCase(raw);
     const error = validatePageName(name);
     if (error) {
-        console.log(`(!) ${error}`);
+        console.log(`\n${c.red}✖ ${error}${c.reset}`);
         return null;
     }
     return name;
 }
 
-// --- Handlers ---
-
 async function handleCreateRequest() {
-    const name = await askPageName('\n> Enter the name of the new page: ');
+    const name = await askPageName(`\n${c.green}❯${c.reset} Enter the name of the new page: `);
     if (name) addPage(name, null);
 }
 
 async function handleRemoveRequest() {
-    const name = await askPageName('\n> Enter the name of the page to remove: ');
+    const name = await askPageName(`\n${c.red}❯${c.reset} Enter the name of the page to remove: `);
     if (name) removePage(name);
 }
 
 async function handleRenameRequest() {
-    const oldName = await askPageName('\n> Enter the name of the page to rename: ');
+    const oldName = await askPageName(`\n${c.yellow}❯${c.reset} Enter the name of the page to rename: `);
     if (!oldName) return;
 
-    const newName = await askPageName('> Enter the new name: ');
+    const newName = await askPageName(`${c.yellow}❯${c.reset} Enter the new name: `);
     if (!newName) return;
 
-    // Extra check: old and new name must differ
     if (oldName === newName) {
-        console.log('(!) Old and new name are the same.');
+        console.log(`\n${c.yellow}⚠ Old and new name are the same.${c.reset}`);
         return;
     }
 
@@ -79,19 +94,17 @@ async function handleRenameRequest() {
 
 async function handleOutputPathRequest() {
     const current = getCurrentOutputPath();
-    const label = current ? ` Current path: "${current}"\n` : '';
-    const input = await ask(`${label} Enter the new output path: `);
+    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: `);
 
-    if (!input.trim()) {
-        console.log('(!) Invalid path.');
+    const error = validateOutputPath(input);
+    if (error) {
+        console.log(`\n${c.red}✖ ${error}${c.reset}`);
     } else {
         updateOutputPath(input);
     }
 }
 
-// --- Menu ---
-
-// Maps each menu choice to its handler function
 const MENU_ACTIONS = {
     '1': handleCreateRequest,
     '2': handleRemoveRequest,
@@ -99,19 +112,17 @@ const MENU_ACTIONS = {
     '4': handleOutputPathRequest,
 };
 
-// Displays the menu, waits for input, executes the chosen action,
-// then calls itself again to keep the CLI alive (async recursion, no stack buildup)
 async function displayMainMenu() {
-    console.log('\n========================');
-    console.log('  Berna-Stencil CLI      ');
-    console.log('========================\n');
-    console.log('1. Create page');
-    console.log('2. Remove page');
-    console.log('3. Rename page');
-    console.log('4. Configure output path');
-    console.log('\nCTRL/CMD + C to exit');
+    console.log(`\n${c.cyan}${c.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('\nChoose an option: ')).trim();
+    const choice = (await ask(`${c.cyan}❯${c.reset} Choose an option: `)).trim();
 
     if (choice === '0') {
         readerInterface.close();
@@ -120,13 +131,15 @@ async function displayMainMenu() {
 
     const action = MENU_ACTIONS[choice];
     if (action) {
-        await action();
+        try {
+            await action();
+        } catch (err) {
+            console.log(`\n${c.red}✖ Unexpected error: ${err.message}${c.reset}`);
+        }
     } else {
-        console.log('(!) Invalid option.');
+        console.log(`\n${c.red}✖ Invalid option.${c.reset}`);
     }
 
-    // Recurse to redisplay the menu after each action.
-    // Safe because each iteration fully resolves before the next one starts.
     displayMainMenu();
 }
 

package/_tools/modules/updateData.js

@@ -1,27 +1,8 @@
 const fileSystem = require('fs');
+const { toCamelCase, toNiceTitle } = require('./utils');
 
 const SITE_DATA_PATH = 'src/frontend/data/site.json';
 
-// --- Utility ---
-
-// Converts a kebab-case string to camelCase
-// slice(1) removes the delimiter character reliably, avoiding the regex flag bug
-// of a double replace('-', '') without the /g flag
-function toCamelCase(str) {
-    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
-        group.slice(1).toUpperCase()
-    );
-}
-
-// 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))
-        .join(' ');
-}
-
 // Returns the parsed site.json content, or null if the file doesn't exist
 function readSiteData() {
     if (!fileSystem.existsSync(SITE_DATA_PATH)) return null;

package/_tools/modules/updateOutputPath.js

@@ -1,5 +1,6 @@
-const fs = require('fs');
+const fs   = require('fs');
 const path = require('path');
+const { isTypeScriptProject } = require('./utils');
 
 const ELEVENTY_CONFIG = path.resolve(__dirname, '../../.eleventy.js');
 const PACKAGE_JSON    = path.resolve(__dirname, '../../package.json');
@@ -14,10 +15,6 @@ function parseOutputDir(content) {
     return match ? match[1] : null;
 }
 
-function isTypeScriptProject() {
-    return fs.existsSync(TSCONFIG);
-}
-
 // --- Updaters ---
 
 function updateEleventyConfig(newPath) {

package/_tools/modules/updatePage.js

@@ -4,18 +4,10 @@ const path = require('path');
 const { addSiteData, removeSiteData, renameSiteData } = require('./updateData');
 const { addLayout, removeLayout, renameLayout } = require('./updateIncludes');
 const { getCurrentOutputPath } = require('./updateOutputPath');
-const { toCamelCase } = require('./utils');
+const { toCamelCase, isTypeScriptProject } = require('./utils');
 
 const TEMPLATES_DIR = path.join(__dirname, '..', 'res', 'templates');
-const TSCONFIG      = path.resolve(__dirname, '../../tsconfig.json');
 
-// --- Helpers ---
-
-function isTypeScriptProject() {
-    return fileSystem.existsSync(TSCONFIG);
-}
-
-// Returns the three file targets (scss, js/ts, njk) for a given page name
 function getPageTargets(pageName) {
     const camelName = toCamelCase(pageName);
     const usesTs    = isTypeScriptProject();
@@ -39,8 +31,6 @@ function getPageTargets(pageName) {
     ];
 }
 
-// --- Public API ---
-
 function addPage(pageName) {
     const camelName = toCamelCase(pageName);
 
@@ -86,8 +76,16 @@ function renamePage(oldName, newName) {
             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);
@@ -95,10 +93,10 @@ function renamePage(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 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 = [

package/_tools/modules/utils.js

@@ -1,3 +1,8 @@
+const fs   = require('fs');
+const path = require('path');
+
+const TSCONFIG = path.resolve(__dirname, '../../tsconfig.json');
+
 // Shared utility functions used across modules
 
 // Converts a kebab-case or snake_case string to camelCase.
@@ -9,4 +14,17 @@ function toCamelCase(str) {
     );
 }
 
-module.exports = { toCamelCase };
+// 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))
+        .join(' ');
+}
+
+function isTypeScriptProject() {
+    return fs.existsSync(TSCONFIG);
+}
+
+module.exports = { toCamelCase, toNiceTitle, isTypeScriptProject };

package/bin/create.js

@@ -120,7 +120,7 @@ src/backend/config.php
 
 const PROJECT_PACKAGE = {
     name:      path.basename(targetDir),
-    version:   '2.2.1',
+    version:   '2.4.0',
     private:   true,
     outputDir: 'out',
     "scripts": {

package/docs/Backend.md

@@ -1,5 +1,11 @@
 # Backend
 
+> **PHP requirement** — the backend runs only on servers with PHP support:
+> - **Apache** (shared hosting, VPS) ✅
+> - **Nginx** + PHP-FPM (VPS) ✅
+> - **IIS** + FastCGI (Windows Server) ✅
+> - **Static hosting** (Netlify, Vercel, GitHub Pages, Cloudflare Pages) ❌
+
 The backend is a PHP REST API located in `src/backend/`, copied to the output directory automatically at build time.
 
 ## Structure
@@ -30,9 +36,9 @@ return [
     'API_KEY' => 'default-key',
 
     // If you want restrict access to protected endpoints to specific clients, you can define custom keys for each endpoint
-    // For subfolder endpoints, use the relative path ('subfolder/endpoint')
     'ENDPOINT_KEYS' => [
-        'example-protected' => 'custom-key',
+    // For subfolder endpoints, use the relative path ('subfolder/endpoint')
+    // 'subfolder/endpoint'    => 'example-key',
     ],
 
     'DB_HOST' => '127.0.0.1',

package/docs/Deploy.md

@@ -0,0 +1,55 @@
+# Server Configuration
+
+Berna-Stencil includes ready-made server configuration for Apache and IIS. For Nginx, a reference config is provided in the project root.
+
+## Apache
+
+`.htaccess` files at `src/frontend/` and `src/backend/` are automatically copied to the build output by Eleventy. No additional setup required.
+
+Covers:
+- Directory listing disabled
+- 403 / 404 → `/404.html`
+- Sensitive files blocked (`web.config`, dotfiles, etc.)
+- `/api/*` → `backend/_core/index.php`
+- HTTPS redirect
+
+## IIS
+
+`web.config` files at `src/frontend/` and `src/backend/` are automatically copied to the build output by Eleventy. No additional setup required.
+
+Covers the same rules as the Apache configuration above.
+
+## Nginx
+
+Nginx does not support per-directory configuration files. The `nginx.conf` in the project root is a reference config that must be manually placed on the server.
+
+### Setup
+
+1. Copy `nginx.conf` to the server:
+```bash
+scp nginx.conf user@server:/etc/nginx/sites-available/your-site
+```
+
+2. Edit `server_name` and `root` to match your environment:
+```nginx
+server_name example.com;
+root /var/www/html/out;
+```
+
+3. Add your SSL certificate paths.
+
+4. Enable and reload:
+```bash
+ln -s /etc/nginx/sites-available/your-site /etc/nginx/sites-enabled/
+nginx -t && systemctl reload nginx
+```
+
+### PHP-FPM socket
+
+The default socket path in `nginx.conf` targets RHEL / Fedora systems. Adjust for your distro:
+
+| Distro | Path |
+|---|---|
+| RHEL / Fedora | `unix:/run/php-fpm/php-fpm.sock` |
+| Debian / Ubuntu | `unix:/run/php/php-fpm.sock` |
+| TCP fallback | `127.0.0.1:9000` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
   "keywords": [],
   "author": "Michele Garofalo",
@@ -48,13 +48,13 @@
     "esbuild": "^0.27.3",
     "sass": "^1.77.0"
   },
-"scripts": {
-    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",
-    "build:js": "node _tools/buildJs.js",
+  "scripts": {
+    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet",
+    "build:js": "esbuild \"src/frontend/ts/pages/*.ts\" --bundle --outdir=out/js/pages --minify",
     "build:11ty": "eleventy",
     "build": "npm run clean && npm run build:css && npm run build:js && npm run build:11ty",
-    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet --load-path=node_modules",
-    "serve:js": "node _tools/buildJs.js --watch",
+    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet",
+    "serve:js": "esbuild \"src/frontend/ts/pages/*.ts\" --bundle --outdir=out/js/pages --watch",
     "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\"",

package/src/backend/config.php

@@ -6,9 +6,9 @@ return [
     'API_KEY' => 'DEFAULT_KEY',
 
     // If you want restrict access to protected endpoints to specific clients, you can define custom keys for each endpoint
-    // For subfolder endpoints, use the relative path ('subfolder/endpoint')
     'ENDPOINT_KEYS' => [
-    'subfolder/example-protected'    => 'example-key',
+    // For subfolder endpoints, use the relative path ('subfolder/endpoint')
+    // 'subfolder/endpoint'    => 'example-key',
     ],
 
     // Database configuration

package/src/frontend/components/welcome.njk

@@ -35,6 +35,10 @@
       <input type="radio" name="guide-filter" value="backend" />
       <span class="filter-pill">Backend</span>
     </label>
+    <label>
+      <input type="radio" name="guide-filter" value="deploy" />
+      <span class="filter-pill">Deploy</span>
+    </label>
   </div>
 
   <div class="tabs-container">
@@ -90,6 +94,9 @@
     <div id="content-backend" class="tab-content markdown-body">
       {% mdFile "docs/backend.md" %}
     </div>
+    <div id="content-deploy" class="tab-content markdown-body">
+      {% mdFile "docs/deploy.md" %}
+    </div>
 
   </div>
 </div>

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

@@ -1,12 +1,12 @@
-// ===========================
+//===========================
 // TYPESCRIPT MODULES IMPORTS
-// ===========================
+//===========================
 
 // import { initExampleModule } from '../modules/exampleModule';
 
-// ==========================
+//==========================
 // PAGE CUSTOM TYPESCRIPT
-// ==========================
+//==========================
 
 document.addEventListener("DOMContentLoaded", (): void => {
     // initExampleModule();

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

@@ -1,12 +1,12 @@
-// ===========================
+//===========================
 // TYPESCRIPT MODULES IMPORTS
-// ===========================
+//===========================
 
 // import { initExampleModule } from '../modules/exampleModule';
 
-// ==========================
+//==========================
 // PAGE CUSTOM TYPESCRIPT
-// ==========================
+//==========================
 
 document.addEventListener("DOMContentLoaded", (): void => {
     // initExampleModule();

package/tsconfig.json

@@ -19,6 +19,7 @@
     "isolatedModules": true,
     "noUncheckedSideEffectImports": true,
     "moduleDetection": "force",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "experimentalDecorators": true
   }
 }