create-berna-stencil 2.0.4 → 2.0.6

package/_tools/res/templates/template.js

@@ -1,11 +1,11 @@
-//==========================
+//===========================
 // JAVASCRIPT MODULES IMPORTS
-//==========================
+//===========================
 
 // Call anywhere
 import { showNotification } from '../modules/notification.js';
 
-// Uncomment to enable optional modules (call inside DOMContentLoaded)
+// Uncomment of pre-existing modules
 // import { initTextAreaAutoExpand } from '../modules/forms/textAreaAutoExpand.js';
 // import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
 
@@ -14,6 +14,8 @@ import { showNotification } from '../modules/notification.js';
 //==========================
 
 document.addEventListener("DOMContentLoaded", () => {
+    // initTextAreaAutoExpand();
+    // initNormalizePhoneNumber();
 });
 
 showNotification("Example notification", "success", 3000);

package/bin/create.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const readline = require('readline');
 
 const targetDir = process.argv[2] ? path.resolve(process.argv[2]) : process.cwd();
 const templateDir = path.join(__dirname, '..');
@@ -15,7 +16,7 @@ const COPY_TARGETS = [
 
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '2.0.4',
+    version: '2.0.6',
     private: true,
     scripts: {
         "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",
@@ -54,12 +55,63 @@ out/
 src/backend/config.php
 `;
 
+// Framework configurations
+const FRAMEWORKS = {
+    bootstrap: {
+        label: 'Bootstrap',
+        scss: 'bootstrap',
+        njk: [
+            '<script src="/js/bootstrap.bundle.min.js" defer></script>',
+        ],
+        eleventy: [
+            '"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",',
+            '"node_modules/bootstrap-icons/font/fonts": "css/fonts",',
+        ],
+    },
+    bulma: {
+        label: 'Bulma',
+        scss: 'bulma',
+        njk: [],
+        eleventy: [],
+    },
+    foundation: {
+        label: 'Foundation',
+        scss: 'foundation',
+        njk: ['<script src="/js/foundation.min.js" defer></script>'],
+        eleventy: ['"node_modules/foundation-sites/dist/js/foundation.min.js": "js/foundation.min.js",'],
+    },
+    uikit: {
+        label: 'UIkit',
+        scss: 'uikit',
+        njk: [
+            '<script src="/js/uikit.min.js" defer></script>',
+            '<script src="/js/uikit-icons.min.js" defer></script>',
+        ],
+        eleventy: [
+            '"node_modules/uikit/dist/js/uikit.min.js": "js/uikit.min.js",',
+            '"node_modules/uikit/dist/js/uikit-icons.min.js": "js/uikit-icons.min.js",',
+        ],
+    },
+    none: {
+        label: 'None',
+        scss: null,
+        njk: [],
+        eleventy: [],
+    },
+};
+
+const ALL_FRAMEWORKS = ['bootstrap', 'bulma', 'foundation', 'uikit'];
+
 const { writeSync } = require('fs');
 
 function log(msg) {
     writeSync(1, msg + '\n');
 }
 
+function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 function copyRecursive(src, dest) {
     const stat = fs.statSync(src);
     if (stat.isDirectory()) {
@@ -85,45 +137,171 @@ function deleteFileRecursive(dir, filename) {
     }
 }
 
-if (!fs.existsSync(targetDir)) {
-    fs.mkdirSync(targetDir, { recursive: true });
+function slashComment(content, line) {
+    content = content.replace(new RegExp(`^([ \\t]*)// (${escapeRegex(line)})$`, 'gm'), '$1$2');
+    return content.replace(new RegExp(`^([ \\t]*)(${escapeRegex(line)})$`, 'gm'), '$1// $2');
 }
 
-log(`\n>> Creating berna-stencil project in ${targetDir}\n`);
+function slashUncomment(content, line) {
+    return content.replace(new RegExp(`^([ \\t]*)// (${escapeRegex(line)})$`, 'gm'), '$1$2');
+}
+
+function njkComment(content, line) {
+    content = content.split(`{# ${line} #}`).join(line);
+    return content.split(line).join(`{# ${line} #}`);
+}
+
+function njkUncomment(content, line) {
+    return content.split(`{# ${line} #}`).join(line);
+}
+
+function applyFramework(framework) {
+    const config = FRAMEWORKS[framework];
+
+    const globalScssPath = path.join(targetDir, 'src/frontend/scss/modules/_global.scss');
+    if (fs.existsSync(globalScssPath)) {
+        let content = fs.readFileSync(globalScssPath, 'utf8');
+        ALL_FRAMEWORKS.forEach(fw => {
+            content = slashComment(content, `@import "../modules/frameworks/${fw}";`);
+        });
+        if (config.scss) {
+            content = slashUncomment(content, `@import "../modules/frameworks/${config.scss}";`);
+        }
+        fs.writeFileSync(globalScssPath, content);
+    }
+
+    const baseNjkPath = path.join(targetDir, 'src/frontend/components/layouts/base.njk');
+    if (fs.existsSync(baseNjkPath)) {
+        let content = fs.readFileSync(baseNjkPath, 'utf8');
+        ALL_FRAMEWORKS.forEach(fw => {
+            FRAMEWORKS[fw].njk.forEach(line => {
+                content = njkComment(content, line);
+            });
+        });
+        config.njk.forEach(line => {
+            content = njkUncomment(content, line);
+        });
+        fs.writeFileSync(baseNjkPath, content);
+    }
 
-for (const target of COPY_TARGETS) {
-    const src = path.join(templateDir, target);
-    const dest = path.join(targetDir, target);
-    if (fs.existsSync(src)) {
-        copyRecursive(src, dest);
-        log(`+ ${target}`);
+    const eleventyPath = path.join(targetDir, '.eleventy.js');
+    if (fs.existsSync(eleventyPath)) {
+        let content = fs.readFileSync(eleventyPath, 'utf8');
+        ALL_FRAMEWORKS.forEach(fw => {
+            FRAMEWORKS[fw].eleventy.forEach(line => {
+                content = slashComment(content, line);
+            });
+        });
+        config.eleventy.forEach(line => {
+            content = slashUncomment(content, line);
+        });
+        fs.writeFileSync(eleventyPath, content);
     }
 }
 
-// config.php
-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');
+function askFramework() {
+    return new Promise((resolve) => {
+        const choices = [
+            { label: 'Bootstrap', value: 'bootstrap' },
+            { label: 'Bulma', value: 'bulma' },
+            { label: 'Foundation', value: 'foundation' },
+            { label: 'UIkit', value: 'uikit' },
+            { label: 'None', value: 'none' }
+        ];
+        let selectedIndex = 0;
+
+        log('\n>> Select a CSS framework (Use arrow keys and press Enter):\n');
+
+        const render = (firstTime = false) => {
+            if (!firstTime) {
+                process.stdout.write(`\x1B[${choices.length}A`);
+            }
+            let output = '';
+            choices.forEach((choice, index) => {
+                if (index === selectedIndex) {
+                    output += `  \x1b[36m◉ ${choice.label}\x1b[0m\x1B[K\n`;
+                } else {
+                    output += `  * ${choice.label}\x1B[K\n`;
+                }
+            });
+            process.stdout.write(output);
+        };
+
+        readline.emitKeypressEvents(process.stdin);
+        if (process.stdin.isTTY) {
+            process.stdin.setRawMode(true);
+        }
+        process.stdin.resume();
+
+        const onKeyPress = (str, key) => {
+            if (key.ctrl && key.name === 'c') {
+                process.exit();
+            } else if (key.name === 'up') {
+                selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : choices.length - 1;
+                render();
+            } else if (key.name === 'down') {
+                selectedIndex = selectedIndex < choices.length - 1 ? selectedIndex + 1 : 0;
+                render();
+            } else if (key.name === 'return' || key.name === 'enter') {
+                process.stdin.removeListener('keypress', onKeyPress);
+                if (process.stdin.isTTY) {
+                    process.stdin.setRawMode(false);
+                }
+                process.stdin.pause();
+                resolve(choices[selectedIndex].value);
+            }
+        };
+
+        process.stdin.on('keypress', onKeyPress);
+        render(true);
+    });
 }
-deleteFileRecursive(targetDir, 'config.example.php');
-
-fs.writeFileSync(
-    path.join(targetDir, 'package.json'),
-    JSON.stringify(PROJECT_PACKAGE, null, 2)
-);
-log('+ package.json');
-
-fs.writeFileSync(
-    path.join(targetDir, '.gitignore'),
-    GITIGNORE_CONTENT
-);
-log('+ .gitignore');
-
-log(`\n>> Done! Now run:\n`);
-if (process.argv[2]) {
-    log(`cd ${process.argv[2]}`);
+
+async function init() {
+    if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+    }
+
+    log(`\n>> Creating berna-stencil project in ${targetDir}\n`);
+
+    for (const target of COPY_TARGETS) {
+        const src = path.join(templateDir, target);
+        const dest = path.join(targetDir, target);
+        if (fs.existsSync(src)) {
+            copyRecursive(src, dest);
+            log(`+ ${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');
+    }
+    deleteFileRecursive(targetDir, 'config.example.php');
+
+    fs.writeFileSync(
+        path.join(targetDir, 'package.json'),
+        JSON.stringify(PROJECT_PACKAGE, null, 2)
+    );
+    log('+ package.json');
+
+    fs.writeFileSync(
+        path.join(targetDir, '.gitignore'),
+        GITIGNORE_CONTENT
+    );
+    log('+ .gitignore');
+
+    const framework = await askFramework();
+    applyFramework(framework);
+
+    log(`\n>> Done! Now run:\n`);
+    if (process.argv[2]) {
+        log(`cd ${process.argv[2]}`);
+    }
+    log('npm install');
+    log('npm run serve\n');
 }
-log('npm install');
-log('npm run serve\n');
+
+init();

package/docs/Backend.md

@@ -9,7 +9,7 @@ src/backend/
 ├── api/
 │   ├── public/       # Endpoints accessible without an API key
 │   └── protected/    # Endpoints requiring X-Api-Key header
-├── database/
+├── db/
 │   ├── Database.php
 │   ├── models/
 │   └── migrations/
@@ -26,11 +26,13 @@ Copy `config.example.php` to `config.php` and fill in your values:
 ### config.php <small>(`src/backend/`)</small>
 ```php
 return [
-    'APP_ENV' => 'development', // or 'production'
-    'API_KEY' => 'your-default-key',
+    // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+    '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' => 'specific-key',
+        'example-protected' => 'custom-key',
     ],
 
     'DB_HOST' => '127.0.0.1',
@@ -57,7 +59,7 @@ Every endpoint file has access to:
 
 Create a `.php` file anywhere inside `api/public/`
 
-### api/public/posts.php
+### api/public/example.php
 ```php
 <?php
 declare(strict_types=1);
@@ -73,13 +75,11 @@ $id = isset($requestParams[0]) ? (int)$requestParams[0] : null;
 Response::success(['id' => $id]);
 ```
 
-Reachable at `/api/posts` or `/api/posts/42`
-
 ## Creating a protected endpoint
 
 Create a `.php` file inside `api/protected/`. The API key check happens automatically before your file runs.
 
-### api/protected/admin/stats.php
+### api/protected/example.php
 ```php
 <?php
 declare(strict_types=1);
@@ -97,114 +97,21 @@ To assign a dedicated key, add it to `config.php`:
 
 ```php
 'ENDPOINT_KEYS' => [
-    'admin/stats' => 'secret-stats-key',
+    'endpoint' => 'custom-key',
 ],
 ```
 
 ## The Response helper
 
 ```php
-Response::success($data, $code);          // default 200
+Response::success($data, $code);            // default 200
 Response::error($message, $code, $details); // default 400
-Response::noContent();                    // 204
-```
-
-## Handling multiple methods
-
-```php
-$id    = isset($requestParams[0]) ? (int)$requestParams[0] : null;
-$input = json_decode(file_get_contents('php://input'), true) ?? [];
-
-switch ($method) {
-    case 'GET':
-        Response::success(['id' => $id]);
-        break;
-
-    case 'POST':
-        if (empty($input['title'])) Response::error('Missing title', 400);
-        Response::success(['message' => 'Created'], 201);
-        break;
-
-    case 'DELETE':
-        if (!$id) Response::error('ID required', 400);
-        Response::success(['message' => 'Deleted']);
-        break;
-
-    default:
-        Response::error('Method not allowed', 405);
-}
-```
-
-## Using the database
-
-### database/models/Post.php
-```php
-<?php
-declare(strict_types=1);
-
-require_once __DIR__ . '/../Database.php';
-
-class Post {
-    private PDO $db;
-
-    public function __construct() {
-        $this->db = Database::getInstance();
-    }
-
-    public function getAll(): array {
-        return $this->db->query("SELECT * FROM posts")->fetchAll();
-    }
-
-    public function getById(int $id): ?array {
-        $stmt = $this->db->prepare("SELECT * FROM posts WHERE id = :id");
-        $stmt->execute(['id' => $id]);
-        return $stmt->fetch() ?: null;
-    }
-
-    public function create(string $title): int {
-        $stmt = $this->db->prepare("INSERT INTO posts (title) VALUES (:title)");
-        $stmt->execute(['title' => htmlspecialchars(strip_tags(trim($title)))]);
-        return (int)$this->db->lastInsertId();
-    }
-}
-```
-
-Then use it inside an endpoint:
-
-```php
-require_once __DIR__ . '/../../database/models/Post.php';
-
-$post = new Post();
-Response::success($post->getAll());
-```
-
-Migrations live in `database/migrations/` as plain SQL files — run them manually against your database.
-
-## Calling endpoints from the frontend
-
-```js
-// Public
-const res = await fetch('/api/posts/42');
-
-// Protected
-const res = await fetch('/api/admin/stats', {
-    headers: { 'X-Api-Key': 'secret-stats-key' }
-});
-
-// POST
-const res = await fetch('/api/posts', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json', 'X-Api-Key': 'your-key' },
-    body: JSON.stringify({ title: 'Hello world' })
-});
+Response::noContent();                      // 204
 ```
 
 ## Pre-built endpoints
 
-| Route | Auth | Methods | Description |
-|---|---|---|---|
-| `/api/example-public` | No | `GET` | Smoke test for public routing |
-| `/api/subfolder/example-protected` | Yes | `GET` | Smoke test for protected routing |
-| `/api/auth/register` | No | `POST` | Register a new user |
-| `/api/auth/login` | No | `POST` | Login and retrieve user data |
-| `/api/auth-system` | Yes | `GET POST PUT PATCH DELETE` | Full CRUD on users |
+| Route | Method | Description |
+|---|---|---|
+| `/api/example-public` | `GET` | Example endpoint that doesn't require any key |
+| `/api/example-protected` | `GET` | Example endpoint that requires X-API-KEY |

package/docs/Javascript.md

@@ -10,11 +10,12 @@ Import only what the page needs.
 
 ### examplePage.js <small>(`src/frontend/js/pages/`)</small>
 ```js
-import { initLangSwitcher } from '../modules/langSwitcher.js';
 import { showNotification } from '../modules/notification.js';
 
+import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
+
 document.addEventListener("DOMContentLoaded", () => {
-  initLangSwitcher();
+  initNormalizePhoneNumber();
 });
 
 showNotification("Page loaded", "success", 3000);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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",
@@ -58,4 +58,4 @@
     "assistant": "node _tools/assistant.js",
     "postinstall": "cd src/backend/_core && composer install --quiet"
   }
-}
+}

package/src/backend/config.example.php

@@ -2,12 +2,13 @@
 declare(strict_types=1);
 
 return [
-    'API_KEY' => 'DEFAULT_KEY', // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+    // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+    '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',
+    'subfolder/example-protected'    => 'custom-key',
     ],
 
     // Database configuration

package/src/backend/config.php

@@ -2,7 +2,8 @@
 declare(strict_types=1);
 
 return [
-    'API_KEY' => 'DEFAULT_KEY', // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+    // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+    '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')

package/src/frontend/404.njk

@@ -7,7 +7,7 @@ layout: base.njk
 <!-- !IMPORTANT -->
 <!-- This is the only page that you need to modify statically -->
 
-<div class="fade-in d-flex flex-column justify-content-center align-items-center" style="min-height: 60vh">
+<div class="fade-in center">
   <h1>Oops! Page not found</h1>
   <a href="/">Return to homepage</a>
 </div>