create-berna-stencil 2.0.5 → 2.0.6

package/_tools/res/templates/template.js

@@ -1,11 +1,11 @@
-//==========================
+//===========================
 // JAVASCRIPT MODULES IMPORTS
-//==========================
+//===========================
 
 // Call anywhere
 import { showNotification } from '../modules/notification.js';
 
-// Example of pre-existing modules
+// Uncomment of pre-existing modules
 // import { initTextAreaAutoExpand } from '../modules/forms/textAreaAutoExpand.js';
 // import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
 

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.5',
+    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,7 +97,7 @@ To assign a dedicated key, add it to `config.php`:
 
 ```php
 'ENDPOINT_KEYS' => [
-    'admin/stats' => 'secret-stats-key',
+    'endpoint' => 'custom-key',
 ],
 ```
 
@@ -109,102 +109,9 @@ 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' })
-});
-```
-
 ## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "2.0.5",
+  "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/components/welcome.njk

@@ -41,26 +41,26 @@
     
     <div id="content-welcome" class="tab-content active">
       <div class="grid" style="display: flex; gap: 1rem; flex-wrap: wrap;">
-        <a href="https://bernastencil.com" class="card" target="_blank" rel="noopener noreferrer" style="flex: 1; min-width: 250px;">
+        <a href="https://github.com/rhaastrake/berna-stencil" class="card" target="_blank" rel="noopener noreferrer" style="flex: 1; min-width: 250px;">
           <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
           </svg>
-          <h3>Documentation</h3>
-          <p>Everything you need to get started, from setup to advanced topics and customizations</p>
-          <span class="card-link">Go to documentation 
+          <h3>Github repository</h3>
+          <p>Community-driven. Contributions, issues and PRs are welcome.</p>
+          <span class="card-link">Open the repository 
             <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="margin-left:4px;">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
             </svg>
           </span>
         </a>
-        <a href="https://github.com/rhaastrake/berna-stencil" class="card" target="_blank" rel="noopener noreferrer" style="flex: 1; min-width: 250px;">
+        <a href="https://github.com/Rhaastrake/Berna-Stencil/tree/main/docs" class="card" target="_blank" rel="noopener noreferrer" style="flex: 1; min-width: 250px;">
           <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
           </svg>
-          <h3>Github repository</h3>
-          <p>Community-driven. Contributions, issues and PRs are welcome.</p>
-          <span class="card-link">Open the repository 
+          <h3>Documentation</h3>
+          <p>Everything you need to get started, from setup to advanced topics and customizations</p>
+          <span class="card-link">Go to documentation 
             <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="margin-left:4px;">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
             </svg>
@@ -237,13 +237,13 @@ body {
         <h4>examplePage.js <small>(<code>src/frontend/js/pages/</code>)</small></h4>
         <pre><code class="language-js">import { showNotification } from '../modules/notification.js';
 
-      import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
+import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
 
-      document.addEventListener("DOMContentLoaded", () => {
-        initNormalizePhoneNumber();
-      });
+document.addEventListener("DOMContentLoaded", () => {
+  initNormalizePhoneNumber();
+});
 
-      showNotification("Page loaded", "success", 3000);</code></pre>
+showNotification("Page loaded", "success", 3000);</code></pre>
 
         <h2>Modules</h2>
         <p>Modules live in <code>src/frontend/js/modules/</code>. Some must be called inside <code>DOMContentLoaded</code> as they interact with the DOM; others create elements dynamically and can be called anywhere.</p>
@@ -287,10 +287,11 @@ body {
         <p>Create a new <code>.js</code> file in <code>src/frontend/js/modules/</code>. You can organize them into subfolders freely.</p>
         <p>Use ESM syntax — esbuild handles the bundling:</p>
 
-        <pre><code class="language-js">// _yourModule.js
-      export function yourFunction() {
-        // ...
-      }</code></pre>
+        <h4>yourModule.js <small>(<code>src/frontend/js/modules/</code>)</small></h4>
+        <pre><code class="language-js">
+export function yourFunction() {
+  // ...
+}</code></pre>
 
         <p>Then import it in the pages that need it:</p>
 
@@ -403,17 +404,17 @@ body {
         
         <h3>site.json <small>(<code>src/frontend/data/</code>)</small></h3>
         <pre><code>"site_name": "Site name",
-      "title": "Site title",
-      "description": "Site description",
-      "keywords": "keyword1, keyword2, keyword3",
-      "domain": "yoursite.com",
-      "url": "https://yoursite.com",
-      "lang": "en",
-      "author": "Name and surname",
-      "data_bs_theme": "dark",
-      "favicon": "/assets/brand/favicon.svg",
-      "logo": "/assets/brand/logo.svg",
-      ...</code></pre>
+"title": "Site title",
+"description": "Site description",
+"keywords": "keyword1, keyword2, keyword3",
+"domain": "yoursite.com",
+"url": "https://yoursite.com",
+"lang": "en",
+"author": "Name and surname",
+"data_bs_theme": "dark",
+"favicon": "/assets/brand/favicon.svg",
+"logo": "/assets/brand/logo.svg",
+...</code></pre>
 
         <h2>Per-page SEO and CDN</h2>
         <p>Each page entry is keyed by its camelCase <code>title</code> from the front matter:</p>
@@ -421,20 +422,20 @@ body {
         
         <h3>site.json <small>(<code>src/frontend/data/</code>)</small></h3>
         <pre><code>"pages": {
-          ...
-          "examplePage": {
-            "seo": {
-              "title": "Example Page",
-              "description": "description"
-            },
-            "cdn": {
-              // You can leave the [] empty
-              "css": ["https://example1.com/lib.min.css", "https://example2.com/lib.min.css"],
-              "js": ["https://example1.com/lib.min.js", "https://example2.com/lib.min.js"]
-            }
-          }
-          ...
-      }</code></pre>
+  ...
+  "examplePage": {
+    "seo": {
+      "title": "Example Page",
+      "description": "description"
+    },
+    "cdn": {
+      // You can leave the [] empty
+      "css": ["https://example1.com/lib.min.css", "https://example2.com/lib.min.css"],
+      "js": ["https://example1.com/lib.min.js", "https://example2.com/lib.min.js"]
+    }
+  }
+  ...
+}</code></pre>
 
         <h2>AI & SEO bots</h2>
         <p><code>llms.txt</code> and <code>robots.txt</code> are generated automatically from <code>site.json</code> via their respective <code>.njk</code> files — no manual editing needed.</p>
@@ -454,20 +455,21 @@ body {
         <h3>Customizing llms.txt</h3>
         <p><code>src/llms.njk</code> ships with a base template — <strong>replace the placeholders with your own content</strong>:</p>
 
-        <pre><code># Site name
+        <pre><code>{% raw %}# {{ site.site_name }}
 
-      > Site description
+> {{ site.description }}
 
-      Built by Name and surname — https://yoursite.com
+Built by {{ site.author }} — {{ site.url }}
 
-      ## Pages
+## Pages
 
-      - https://yoursite.com: Homepage
+- {{ site.url }}: Homepage
 
-      ## Notes
+## Notes
 
-      - Language: en
-      - All content may be used for AI indexing unless otherwise stated</code></pre>
+- Language: {{ site.lang }}
+- All content may be used for AI indexing unless otherwise stated
+{% endraw %}</code></pre>
 
         <blockquote>The more accurate and detailed your <code>llms.txt</code>, the better AI models will understand and reference your site.</blockquote>
 
@@ -494,52 +496,72 @@ body {
 
     <div id="content-backend" class="tab-content">
       <div class="markdown-body">
-        <h2>Backend</h2>
-        <p>The backend is a PHP REST API located in <code>src/backend/</code>, copied to the output directory automatically at build time.</p>
-        <h3>Structure</h3>
-        <pre><code>src/backend/
-├── api/
-│   ├── public/     # Endpoints accessible without an API key
-│   └── protected/    # Endpoints requiring X-Api-Key header
-├── database/
-│   ├── Database.php
-│   ├── models/
-│   └── migrations/
-├── config.php        # Your local config — never commit this
-└── config.example.php</code></pre>
-        <h3>Configuration</h3>
-        <p><code>config.php</code> works like a <code>.env</code> file — it holds secrets and environment settings that stay local and out of version control.</p>
-        <p>Copy <code>config.example.php</code> to <code>config.php</code> and fill in your values:</p>
-        <h4>config.php <small>(<code>src/backend/</code>)</small></h4>
-        <pre><code>return [
-    'APP_ENV' => 'development', // or 'production'
-    'API_KEY' => 'your-default-key',
-
-    'ENDPOINT_KEYS' => [
-        'subfolder/example-protected' => 'specific-key',
-    ],
-
-    'DB_HOST' => '127.0.0.1',
-    'DB_NAME' => 'example_db',
-    'DB_USER' => 'root',
-    'DB_PASS' => '',
+          <h2>Backend</h2>
+          <p>The backend is a PHP REST API located in <code>src/backend/</code>, copied to the output directory automatically at build time.</p>
+
+          <h3>Structure</h3>
+          <pre><code>src/backend/
+  ├── api/
+  │   ├── public/       # Endpoints accessible without an API key
+  │   └── protected/    # Endpoints requiring X-Api-Key header
+  ├── database/
+  │   ├── Database.php
+  │   ├── models/
+  │   └── migrations/
+  ├── config.php        # Your local config — never commit this
+  └── config.example.php</code></pre>
+
+          <h3>Configuration</h3>
+          <p><code>config.php</code> works like a <code>.env</code> file — it holds secrets and environment settings that stay local and out of version control.</p>
+          <p>Copy <code>config.example.php</code> to <code>config.php</code> and fill in your values:</p>
+
+          <h4>config.php <small>(<code>src/backend/</code>)</small></h4>
+          <pre><code class="language-php">return [
+  // Default key for protected endpoints that don't have a specific key in ENDPOINT_KEYS
+  'API_KEY' =&gt; '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' =&gt; [
+      'example-protected' =&gt; 'custom-key',
+  ],
+
+  'DB_HOST' =&gt; '127.0.0.1',
+  'DB_NAME' =&gt; 'example_db',
+  'DB_USER' =&gt; 'root',
+  'DB_PASS' =&gt; '',
 ];</code></pre>
-        <p><code>API_KEY</code> is the fallback key for all protected endpoints. Use <code>ENDPOINT_KEYS</code> to assign a different key to a specific endpoint — for subfolder endpoints, use the relative path as the key.</p>
-        <h3>How routing works</h3>
-        <p>The file path inside <code>api/</code> maps directly to the URL. Extra URL segments become route parameters available as <code>$requestParams[]</code>.</p>
-        <p>Every endpoint file has access to:</p>
-        <table>
-          <thead>
-            <tr><th>Variable</th><th>Description</th></tr>
-          </thead>
-          <tbody>
-            <tr><td><code>$method</code></td><td>HTTP method (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>PATCH</code>, <code>DELETE</code>)</td></tr>
-            <tr><td><code>$requestParams</code></td><td>Extra URL segments (e.g. <code>/api/posts/42</code> → <code>['42']</code>)</td></tr>
-          </tbody>
-        </table>
-        <h3>Creating a public endpoint</h3>
-        <p>Create a <code>.php</code> file anywhere inside <code>api/public/</code></p>
-        <pre><code>&lt;?php
+
+          <p><code>API_KEY</code> is the fallback key for all protected endpoints. Use <code>ENDPOINT_KEYS</code> to assign a different key to a specific endpoint — for subfolder endpoints, use the relative path as the key.</p>
+
+          <h3>How routing works</h3>
+          <p>The file path inside <code>api/</code> maps directly to the URL. Extra URL segments become route parameters available as <code>$requestParams[]</code>.</p>
+          <p>Every endpoint file has access to:</p>
+
+          <table>
+              <thead>
+                  <tr>
+                      <th>Variable</th>
+                      <th>Description</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td><code>$method</code></td>
+                      <td>HTTP method (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>PATCH</code>, <code>DELETE</code>)</td>
+                  </tr>
+                  <tr>
+                      <td><code>$requestParams</code></td>
+                      <td>Extra URL segments (e.g. <code>/api/posts/42</code> → <code>['42']</code>)</td>
+                  </tr>
+              </tbody>
+          </table>
+
+          <h3>Creating a public endpoint</h3>
+          <p>Create a <code>.php</code> file anywhere inside <code>api/public/</code></p>
+
+          <h4>api/public/example.php</h4>
+          <pre><code class="language-php">&lt;?php
 declare(strict_types=1);
 
 require_once CORE_PATH . '/modules/Response.php';
@@ -550,11 +572,13 @@ if ($method !== 'GET') {
 
 $id = isset($requestParams[0]) ? (int)$requestParams[0] : null;
 
-Response::success(['id' => $id]);</code></pre>
-        <p>Reachable at <code>/api/posts</code> or <code>/api/posts/42</code></p>
-        <h3>Creating a protected endpoint</h3>
-        <p>Create a <code>.php</code> file inside <code>api/protected/</code>. The API key check happens automatically before your file runs.</p>
-        <pre><code>&lt;?php
+Response::success(['id' =&gt; $id]);</code></pre>
+
+          <h3>Creating a protected endpoint</h3>
+          <p>Create a <code>.php</code> file inside <code>api/protected/</code>. The API key check happens automatically before your file runs.</p>
+
+          <h4>api/protected/example.php</h4>
+          <pre><code class="language-php">&lt;?php
 declare(strict_types=1);
 
 require_once CORE_PATH . '/modules/Response.php';
@@ -563,101 +587,40 @@ if ($method !== 'GET') {
     Response::error('Method not allowed', 405);
 }
 
-Response::success(['visits' => 1024]);</code></pre>
-        <p>To assign a dedicated key, add it to <code>config.php</code>:</p>
-        <pre><code>'ENDPOINT_KEYS' => [
-    'admin/stats' => 'secret-stats-key',
+Response::success(['visits' =&gt; 1024]);</code></pre>
+
+          <p>To assign a dedicated key, add it to <code>config.php</code>:</p>
+          <pre><code class="language-php">'ENDPOINT_KEYS' =&gt; [
+  'endpoint' =&gt; 'custom-key',
 ],</code></pre>
-        <h3>The Response helper</h3>
-        <pre><code>Response::success($data, $code);            // default 200
+
+          <h3>The Response helper</h3>
+          <pre><code class="language-php">Response::success($data, $code);            // default 200
 Response::error($message, $code, $details); // default 400
 Response::noContent();                      // 204</code></pre>
-        <h3>Handling multiple methods</h3>
-        <pre><code>$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);
-}</code></pre>
-        <h3>Using the database</h3>
-        <h4>database/models/Post.php</h4>
-        <pre><code>&lt;?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();
-    }
-}</code></pre>
-        <p>Then use it inside an endpoint:</p>
-        <pre><code>require_once __DIR__ . '/../../database/models/Post.php';
-
-$post = new Post();
-Response::success($post->getAll());</code></pre>
-        <p>Migrations live in <code>database/migrations/</code> as plain SQL files — run them manually against your database.</p>
-        <h3>Calling endpoints from the frontend</h3>
-        <pre><code>// 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' })
-});</code></pre>
-        <h3>Pre-built endpoints</h3>
-        <table>
-          <thead>
-            <tr><th>Route</th><th>Auth</th><th>Methods</th><th>Description</th></tr>
-          </thead>
-          <tbody>
-            <tr><td><code>/api/example-public</code></td><td>No</td><td><code>GET</code></td><td>Smoke test for public routing</td></tr>
-            <tr><td><code>/api/subfolder/example-protected</code></td><td>Yes</td><td><code>GET</code></td><td>Smoke test for protected routing</td></tr>
-            <tr><td><code>/api/auth/register</code></td><td>No</td><td><code>POST</code></td><td>Register a new user</td></tr>
-            <tr><td><code>/api/auth/login</code></td><td>No</td><td><code>POST</code></td><td>Login and retrieve user data</td></tr>
-            <tr><td><code>/api/auth-system</code></td><td>Yes</td><td><code>GET POST PUT PATCH DELETE</code></td><td>Full CRUD on users</td></tr>
-          </tbody>
-        </table>
+          <h3>Pre-built endpoints</h3>
+          <table>
+              <thead>
+                  <tr>
+                      <th>Route</th>
+                      <th>Method</th>
+                      <th>Description</th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td><code>/api/example-public</code></td>
+                      <td><code>GET</code></td>
+                      <td>Example endpoint that doesn't require any key</td>
+                  </tr>
+                  <tr>
+                      <td><code>/api/example-protected</code></td>
+                      <td><code>GET</code></td>
+                      <td>Example endpoint that requires X-API-KEY</td>
+                  </tr>
+              </tbody>
+          </table>
       </div>
     </div>
   </div>

package/src/frontend/js/pages/404.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/src/frontend/js/pages/homepage.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/src/frontend/llms.njk

@@ -15,4 +15,4 @@ Built by {{ site.author }} — {{ site.url }}
 ## Notes
 
 - Language: {{ site.lang }}
-- All content may be used for AI indexing unless otherwise stated
+- All content may be used for AI inde   xing unless otherwise stated

package/src/frontend/scss/modules/_global.scss

@@ -5,12 +5,14 @@
 // Getting root rules from _root.scss
 @use 'root' as root;
 
+// Frameworks imports
 @import "../modules/frameworks/bootstrap";
 // @import "../modules/frameworks/bulma";
 // @import "../modules/frameworks/foundation";
 // @import "../modules/frameworks/uikit";
 
 
+// Modules imports
 @import "typography";
 
 @import "header";
@@ -21,6 +23,10 @@
 
 @import "buttons";
 
+//==========================
+// Global css rules for the entire site
+//==========================
+
 *,
 *::before,
 *::after {

package/src/frontend/scss/pages/404.scss

@@ -13,7 +13,7 @@
 @import "../modules/notification";
 
 //==========================
-// PAGE CUSTOM CSS RULES FOR PAGE: 404
+// PAGE CUSTOM CSS RULES
 //==========================
 
 // Add any custom rule specific to this page below

package/src/frontend/scss/pages/homepage.scss

@@ -13,7 +13,7 @@
 @import "../modules/notification";
 
 //==========================
-// PAGE CUSTOM CSS RULES FOR PAGE: homepage
+// PAGE CUSTOM CSS RULES
 //==========================
 
 // Add any custom rule specific to this page below

package/src/backend/api/protected/auth-system.php

@@ -1,67 +0,0 @@
-<?php
-declare(strict_types=1);
-
-
-// 2. Richiamo il tuo modulo Response e il Modello
-require_once CORE_PATH . '/modules/Response.php';
-require_once __DIR__ . '/../../database/models/User.php';
-
-//
-// Your protected endpoint logic here. You can access route parameters in $requestParams array
-//
-
-$user = new User();
-$id = isset($requestParams[0]) ? (int)$requestParams[0] : null;
-$input = json_decode(file_get_contents('php://input'), true) ?? [];
-
-try {
-    switch ($method) {
-        case 'GET':
-            $data = $id ? $user->getById($id) : $user->getAll();
-            if ($id && !$data) {
-                Response::error('User not found', 404);
-            }
-            // Sostituito con Response::success()
-            Response::success($data);
-            break;
-
-        case 'POST':
-            if (empty($input['nickname']) || empty($input['email'])) {
-                Response::error('Missing fields', 400);
-            }
-            if (!filter_var($input['email'], FILTER_VALIDATE_EMAIL)) {
-                Response::error('Invalid email', 400);
-            }
-            
-            $newId = $user->create($input['nickname'], $input['email']);
-            http_response_code(201);
-            Response::success(['message' => 'Created', 'id' => $newId]);
-            break;
-
-        case 'PUT':
-        case 'PATCH':
-            if (!$id) Response::error('ID required', 400);
-            if (!$user->update($id, $input)) {
-                Response::error('Not found or no changes', 404);
-            }
-            Response::success(['message' => 'Updated']);
-            break;
-
-        case 'DELETE':
-            if (!$id) Response::error('ID required', 400);
-            if (!$user->delete($id)) {
-                Response::error('Not found', 404);
-            }
-            Response::success(['message' => 'Deleted']);
-            break;
-
-        default:
-            Response::error('Method not allowed', 405);
-            break;
-    }
-} catch (PDOException $e) {
-    if ($e->getCode() === '23000') {
-        Response::error('Nickname or email already exists', 409);
-    }
-    Response::error('Database error', 500);
-}

package/src/backend/api/public/auth/login.php

@@ -1,38 +0,0 @@
-<?php
-declare(strict_types=1);
-
-require_once CORE_PATH . '/modules/Response.php';
-require_once __DIR__ . '/../../../database/models/User.php';
-
-if ($method !== 'POST') {
-    Response::error('Method not allowed', 405);
-}
-
-//
-// Your protected endpoint logic here. You can access route parameters in $requestParams array
-//
-
-$input = json_decode(file_get_contents('php://input'), true) ?? [];
-
-$email    = trim(filter_var($input['email'] ?? '', FILTER_SANITIZE_EMAIL));
-$password = trim($input['password'] ?? '');
-
-if (empty($email) || empty($password)) {
-    Response::error('Missing fields', 400);
-}
-
-if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-    Response::error('Invalid email', 400);
-}
-
-$user  = new User();
-$found = $user->findByEmail($email);
-
-if (!$found || !password_verify($password, $found['password'])) {
-    Response::error('Invalid credentials', 401);
-}
-
-unset($found['password']);
-Response::success([
-    'user'    => $found,
-]);

package/src/backend/api/public/auth/register.php

@@ -1,44 +0,0 @@
-<?php
-declare(strict_types=1);
-
-require_once CORE_PATH . '/modules/Response.php';
-require_once __DIR__ . '/../../../database/models/User.php';
-
-if ($method !== 'POST') {
-    Response::error('Method not allowed', 405);
-}
-
-//
-// Your protected endpoint logic here. You can access route parameters in $requestParams array
-//
-
-
-$input = json_decode(file_get_contents('php://input'), true) ?? [];
-
-$nickname = htmlspecialchars(strip_tags(trim($input['nickname'] ?? '')));
-$email    = trim(filter_var($input['email'] ?? '', FILTER_SANITIZE_EMAIL));
-$password = trim($input['password'] ?? '');
-
-if (empty($nickname) || empty($email) || empty($password)) {
-    Response::error('Missing fields', 400);
-}
-
-if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-    Response::error('Invalid email', 400);
-}
-
-if (strlen($password) < 8) {
-    Response::error('Password must be at least 8 characters', 400);
-}
-
-try {
-    $user  = new User();
-    $newId = $user->create($nickname, $email, $password);
-    http_response_code(201);
-    Response::success(['id' => $newId]);
-} catch (PDOException $e) {
-    if ($e->getCode() === '23000') {
-        Response::error('Nickname or email already exists', 409);
-    }
-    Response::error('Database error', 500);
-}

package/src/backend/database/migrations/create_users_table.sql

@@ -1,9 +0,0 @@
-USE example_db;
-
-CREATE TABLE IF NOT EXISTS users (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nickname VARCHAR(50) NOT NULL UNIQUE,
-    email VARCHAR(255) NOT NULL UNIQUE,
-    password VARCHAR(255) NOT NULL,
-    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

package/src/backend/database/models/User.php

@@ -1,61 +0,0 @@
-<?php
-declare(strict_types=1);
-
-require_once __DIR__ . '/../Database.php';
-
-class User {
-    private PDO $db;
-
-    public function __construct() {
-        $this->db = Database::getInstance();
-    }
-
-    public function getAll(): array {
-        return $this->db->query("SELECT id, nickname, email, created_at FROM users")->fetchAll();
-    }
-
-    public function getById(int $id): ?array {
-        $stmt = $this->db->prepare("SELECT id, nickname, email, created_at FROM users WHERE id = :id");
-        $stmt->execute(['id' => $id]);
-        return $stmt->fetch() ?: null;
-    }
-
-    public function findByEmail(string $email): ?array {
-        $stmt = $this->db->prepare("SELECT id, nickname, email, password, created_at FROM users WHERE email = :email");
-        $stmt->execute(['email' => filter_var(trim($email), FILTER_SANITIZE_EMAIL)]);
-        return $stmt->fetch() ?: null;
-    }
-
-    public function create(string $nickname, string $email, string $password = ''): int {
-        $stmt = $this->db->prepare("INSERT INTO users (nickname, email, password) VALUES (:nickname, :email, :password)");
-        $stmt->execute([
-            'nickname' => htmlspecialchars(strip_tags(trim($nickname))),
-            'email'    => filter_var(trim($email), FILTER_SANITIZE_EMAIL),
-            'password' => $password !== '' ? password_hash($password, PASSWORD_BCRYPT) : '',
-        ]);
-        return (int)$this->db->lastInsertId();
-    }
-
-    public function update(int $id, array $data): bool {
-        $fields = [];
-        $params = ['id' => $id];
-
-        if (isset($data['nickname'])) {
-            $fields[] = 'nickname = :nickname';
-            $params['nickname'] = htmlspecialchars(strip_tags($data['nickname']));
-        }
-        if (isset($data['email'])) {
-            $fields[] = 'email = :email';
-            $params['email'] = filter_var($data['email'], FILTER_SANITIZE_EMAIL);
-        }
-
-        if (empty($fields)) return false;
-
-        $sql = "UPDATE users SET " . implode(', ', $fields) . " WHERE id = :id";
-        return $this->db->prepare($sql)->execute($params);
-    }
-
-    public function delete(int $id): bool {
-        return $this->db->prepare("DELETE FROM users WHERE id = :id")->execute(['id' => $id]);
-    }
-}