create-berna-stencil 1.0.51 → 1.0.53

package/_tools/modules/updatePage.js

@@ -1,45 +1,49 @@
-const fileSystem = require("fs");
-const path = require("path");
+const fileSystem = require('fs');
+const path = require('path');
 
-const { addSiteData, removeSiteData } = require("./updateData");
-const { addLayout, removeLayout } = require("./updateIncludes");
+const { addSiteData, removeSiteData, renameSiteData } = require('./updateData');
+const { addLayout, removeLayout, renameLayout } = require('./updateIncludes');
+const { getCurrentOutputPath } = require('./updateOutputPath');
+const { toCamelCase } = require('./utils');
 
 const TEMPLATES_DIR = path.join(__dirname, '..', 'res', 'templates');
 
-function toCamelCase(str) {
-    return str.toLowerCase().replace(/[-_][a-z0-9]/g, (group) =>
-        group.toUpperCase().replace('-', '').replace('_', '')
-    );
+// --- Helpers ---
+
+// Returns the three file targets (scss, js, njk) for a given page name
+function getPageTargets(pageName) {
+    const camelName = toCamelCase(pageName);
+    return [
+        { folder: 'src/frontend/scss/pages', templateFile: 'template.scss', fileName: `${camelName}.scss` },
+        { folder: 'src/frontend/js/pages',   templateFile: 'template.js',   fileName: `${camelName}.js`   },
+        { folder: 'src/frontend/_routes',    templateFile: 'template.njk',  fileName: `${pageName}.njk`   },
+    ];
 }
 
+// --- Public API ---
+
 function addPage(pageName) {
     const camelName = toCamelCase(pageName);
 
-        const targets = [
-            { folder: "src/frontend/scss/pages", templateFile: "template.scss", fileName: `${camelName}.scss` },
-            { folder: "src/frontend/js/pages",   templateFile: "template.js",   fileName: `${camelName}.js`   },
-            { folder: "src/frontend/_routes",    templateFile: "template.njk",  fileName: `${pageName}.njk`   },
-        ];
-
-    targets.forEach(({ folder, templateFile, fileName }) => {
+    getPageTargets(pageName).forEach(({ folder, templateFile, fileName }) => {
         const destPath = path.join(folder, fileName);
         fileSystem.mkdirSync(folder, { recursive: true });
 
-        if (!fileSystem.existsSync(destPath)) {
-            const srcPath = path.join(TEMPLATES_DIR, templateFile);
+        if (fileSystem.existsSync(destPath)) return;
 
-            if (templateFile === "template.njk") {
-                let content = fileSystem.readFileSync(srcPath, 'utf8');
-                content = content
-                    .replace(/^title:.*$/m, `title: "${camelName}"`)
-                    .replace(/^permalink:.*$/m, `permalink: "/${pageName}/"`);
-                fileSystem.writeFileSync(destPath, content);
-            } else {
-                fileSystem.copyFileSync(srcPath, destPath);
-            }
+        const srcPath = path.join(TEMPLATES_DIR, templateFile);
 
-            console.log(`[created file] ${destPath}`);
+        if (templateFile === 'template.njk') {
+            // Patch the frontmatter placeholders with the actual page values
+            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);
         }
+
+        console.log(`[created file] ${destPath}`);
     });
 
     addLayout(pageName);
@@ -50,10 +54,11 @@ function renamePage(oldName, newName) {
     const oldCamel = toCamelCase(oldName);
     const newCamel = toCamelCase(newName);
 
+    // Use consistent src/frontend/ paths (matching addPage)
     const filesToRename = [
-        { src: `src/scss/pages/${oldCamel}.scss`, dest: `src/scss/pages/${newCamel}.scss` },
-        { src: `src/js/pages/${oldCamel}.js`,     dest: `src/js/pages/${newCamel}.js`     },
-        { src: `src/_routes/${oldName}.njk`,      dest: `src/_routes/${newName}.njk`      },
+        { src: `src/frontend/scss/pages/${oldCamel}.scss`, dest: `src/frontend/scss/pages/${newCamel}.scss` },
+        { src: `src/frontend/js/pages/${oldCamel}.js`,     dest: `src/frontend/js/pages/${newCamel}.js`     },
+        { src: `src/frontend/_routes/${oldName}.njk`,      dest: `src/frontend/_routes/${newName}.njk`      },
     ];
 
     filesToRename.forEach(({ src, dest }) => {
@@ -65,29 +70,30 @@ function renamePage(oldName, newName) {
         console.log(`[renamed] ${src} → ${dest}`);
     });
 
-    removeLayout(oldName);
-    addLayout(newName);
-    removeSiteData(oldName);
-    addSiteData(newName);
+    // Use atomic rename helpers instead of remove + add separately
+    renameLayout(oldName, newName);
+    renameSiteData(oldName, newName);
 }
 
 function removePage(pageName) {
     const camelName = toCamelCase(pageName);
-    const OUTPUT_DIR = "out";
+
+    // Read the actual current output dir instead of hardcoding "out"
+    const OUTPUT_DIR = getCurrentOutputPath() || 'out';
 
     const filesToDelete = [
         `src/frontend/scss/pages/${camelName}.scss`,
         `src/frontend/js/pages/${camelName}.js`,
         `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, '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`),
+        path.join(OUTPUT_DIR, 'pages', `${pageName}.html`),
     ];
 
     const foldersToDelete = [
         path.join(OUTPUT_DIR, pageName),
-        path.join(OUTPUT_DIR, "pages", pageName),
+        path.join(OUTPUT_DIR, 'pages', pageName),
     ];
 
     filesToDelete.forEach(f => {

package/_tools/modules/utils.js

@@ -0,0 +1,12 @@
+// Shared utility functions used across modules
+
+// 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()
+    );
+}
+
+module.exports = { toCamelCase };

package/docs/Assistant CLI.md

@@ -1,36 +1,59 @@
-# To be finished...
-
 # Assistant CLI
 
-`assistant.js` is a CLI tool to manage pages and project configuration without editing files manually.
+An interactive CLI to manage pages without touching files manually.
+
+```
+npm run assistant
+```
+
+## Menu
 
-## Run
-```bash
-node assistant.js
+```
+1. Create page
+2. Remove page
+3. Rename page
+4. Configure output path
 ```
 
-## Options
+Use `CTRL/CMD + C` to exit.
 
-### 1. Create a page
-Enter a page name in kebab-case (e.g. `contact-us`). The CLI generates:
+## Create page
+
+Enter a page name in any format — the CLI converts it to kebab-case automatically.
+
+For a page named `my-page`, the following files are created:
 
 | File | Purpose |
 |---|---|
-| `src/pages/contact-us.njk` | Page template |
-| `src/scss/pages/contactUs.scss` | Page styles |
-| `src/js/pages/contactUs.js` | Page scripts |
+| `src/frontend/scss/pages/myPage.scss` | SCSS entry point |
+| `src/frontend/js/pages/myPage.js` | JS entry point |
+| `src/frontend/_routes/my-page.njk` | Nunjucks template |
+
+It also adds an `elif` block in `includes.njk` and a stub entry in `site.json`:
+
+```json
+"myPage": {
+  "seo": {
+    "title": "My Page",
+    "description": "description"
+  },
+  "cdn": {
+    "css": [],
+    "js": []
+  }
+}
+```
+
+## Remove page
+
+Deletes all source files for the page and cleans up the output directory, `includes.njk`, and `site.json`.
 
-It also registers the page automatically in:
-- `src/layouts/includes.njk` — adds an `elif` block for component routing
-- `src/data/site.json` — adds an SEO entry under `pages`
+## Rename page
 
-> Protected pages (`homepage`, `404`) cannot be created or removed.
+Renames all three source files, updates the `elif` block in `includes.njk`, and renames the record in `site.json` while preserving all existing fields.
 
-### 2. Remove a page
-Enter the page name to delete all related files and clean up registrations.
+## Configure output path
 
-### 3. Configure output path
-Change the build output directory. Updates both `.eleventy.js` and `package.json` automatically.
+Updates the output directory across `.eleventy.js` and all relevant `package.json` scripts in one shot. The old output folder is deleted automatically.
 
-## Naming conventions
-Page names are always kebab-case for URLs and file names (`contact-us`), and camelCase for SCSS and JS (`contactUs`). The CLI handles the conversion automatically.
+> ⚠️ `homepage` and `404` are protected — they cannot be created, removed, or renamed via the CLI.

package/docs/Backend.md

@@ -0,0 +1,210 @@
+# Backend
+
+The backend is a PHP REST API located in `src/backend/`, copied to the output directory automatically at build time.
+
+## Structure
+
+```
+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
+```
+
+## Configuration
+
+`config.php` works like a `.env` file — it holds secrets and environment settings that stay local and out of version control.
+
+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',
+
+    'ENDPOINT_KEYS' => [
+        'subfolder/example-protected' => 'specific-key',
+    ],
+
+    'DB_HOST' => '127.0.0.1',
+    'DB_NAME' => 'example_db',
+    'DB_USER' => 'root',
+    'DB_PASS' => '',
+];
+```
+
+`API_KEY` is the fallback key for all protected endpoints. Use `ENDPOINT_KEYS` to assign a different key to a specific endpoint — for subfolder endpoints, use the relative path as the key.
+
+## How routing works
+
+The file path inside `api/` maps directly to the URL. Extra URL segments become route parameters available as `$requestParams[]`.
+
+Every endpoint file has access to:
+
+| Variable | Description |
+|---|---|
+| `$method` | HTTP method (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`) |
+| `$requestParams` | Extra URL segments (e.g. `/api/posts/42` → `['42']`) |
+
+## Creating a public endpoint
+
+Create a `.php` file anywhere inside `api/public/`
+
+### api/public/posts.php
+```php
+<?php
+declare(strict_types=1);
+
+require_once CORE_PATH . '/modules/Response.php';
+
+if ($method !== 'GET') {
+    Response::error('Method not allowed', 405);
+}
+
+$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
+```php
+<?php
+declare(strict_types=1);
+
+require_once CORE_PATH . '/modules/Response.php';
+
+if ($method !== 'GET') {
+    Response::error('Method not allowed', 405);
+}
+
+Response::success(['visits' => 1024]);
+```
+
+To assign a dedicated key, add it to `config.php`:
+
+```php
+'ENDPOINT_KEYS' => [
+    'admin/stats' => 'secret-stats-key',
+],
+```
+
+## The Response helper
+
+```php
+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' })
+});
+```
+
+## 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 |

package/docs/Head and SEO.md

@@ -3,7 +3,7 @@
 
 This json holds global settings used across all pages in `base.njk` and other components:
 
-### site.json <small>`src/frontend/data/`</small>
+### site.json <small>`(src/frontend/data/)`</small>
 ```json
 "site_name": "Site name",
 "title": "Site title",
@@ -25,7 +25,7 @@ Each page entry is keyed by its camelCase `title` from the front matter:
 
 If you don't want to use a particular cdn inserting it in `base.njk` for all pages, you can add extra specific cdn (css, js) by inserting the link in each page of site.json separating them with a `,` and setting them in ""
 
-### site.json <small>`src/frontend/data/`</small>
+### site.json <small>`(src/frontend/data/)`</small>
 ```json
 "pages": {
     ...

package/docs/Javascript.md

@@ -1,14 +1,30 @@
-# To be finished...
-
 # JavaScript
 
-## Page files
+## Page JS
+
+Each page has its own JS entry point in `src/frontend/js/pages/`
 
-Each page has a JS entry point in `src/js/pages/`. It is bundled by esbuild and loaded automatically by `base.njk`. Import only what the page needs.
+It is bundled and minified by esbuild and loaded automatically by `base.njk`
 
-## Module categories
+Import only what the page needs.
 
-**Call inside `DOMContentLoaded`** — these interact with the DOM and require the page to be fully loaded:
+### examplePage.js <small>(`src/frontend/js/pages/`)</small>
+```js
+import { initLangSwitcher } from '../modules/langSwitcher.js';
+import { showNotification } from '../modules/notification.js';
+
+document.addEventListener("DOMContentLoaded", () => {
+  initLangSwitcher();
+});
+
+showNotification("Page loaded", "success", 3000);
+```
+
+## Modules
+
+Modules live in `src/frontend/js/modules/`. Some must be called inside `DOMContentLoaded` as they interact with the DOM; others create elements dynamically and can be called anywhere.
+
+### Call inside `DOMContentLoaded`
 
 | Module | Function |
 |---|---|
@@ -17,26 +33,13 @@ Each page has a JS entry point in `src/js/pages/`. It is bundled by esbuild and
 | `modules/forms/textAreaAutoExpand.js` | `initTextAreaAutoExpand()` |
 | `modules/forms/normalizePhoneNumber.js` | `initNormalizePhoneNumber()` |
 
-**Call anywhere** — these create DOM elements dynamically and can be called at any point after the script loads:
+### Call anywhere
 
 | Module | Function |
 |---|---|
 | `modules/notification.js` | `showNotification(text, type, duration)` |
 
-## Usage example
-
-```js
-import { initLangSwitcher } from '../modules/langSwitcher.js';
-import { showNotification } from '../modules/notification.js';
-
-document.addEventListener("DOMContentLoaded", () => {
-  initLangSwitcher();
-});
-
-showNotification("Page loaded", "success", 3000);
-```
-
-## `showNotification` reference
+### `showNotification` parameters
 
 | Parameter | Type | Default | Values |
 |---|---|---|---|
@@ -46,8 +49,21 @@ showNotification("Page loaded", "success", 3000);
 
 ## Adding a module
 
-Create a file in `src/js/modules/`, export your function, and import it in the pages that need it. Use ESM syntax (`import` / `export`) — this code is processed by esbuild.
+Create a new `.js` file in `src/frontend/js/modules/`. You can organize them into subfolders freely.
+
+Use ESM syntax — esbuild handles the bundling:
+
+```js
+// _yourModule.js
+export function yourFunction() {
+  // ...
+}
+```
+
+Then import it in the pages that need it:
 
-## `assistant_utils/`
+```js
+import { yourFunction } from '../modules/yourModule.js';
+```
 
-These scripts run directly in Node.js without a bundler. Use CommonJS syntax (`require` / `module.exports`) here, not ESM.
+> ⚠️ Files inside `_tools/` run directly in Node.js without a bundler — use CommonJS (`require` / `module.exports`) there, not ESM.

package/docs/Styling with SCSS.md

@@ -28,6 +28,58 @@ body {
 }
 ```
 
+## Global Variables
+
+Instead of using `:root` in your custom modules or pages, the best thing to do is to centralize all your variables in a single file (that will be tree-shaken automatically by Sass)
+
+### _root.scss <small>(`src/frontend/scss/modules/`)</small>
+```scss
+$header-height: 10vh;
+
+// Usage example (in any other file): 
+header {
+  height: root.$header-height;
+}
+```
+## Scss modules
+You can create your custom css modules by creating a new `.scss` file in `src/frontend/scss/modules/` (the name of the file must start with `_`)
+
+You can create subfolders if you want to refactor the structure, but be sure to update the relative paths in the pages that import them
+
+### _yourModule.scss <small>(`src/frontend/scss/modules/subfolder/`)</small>
+```scss
+@use '../root' as root;
+
+body {
+  background-color: root.$primary;
+}
+```
+
+### examplePage.scss
+```scss
+@import "../modules/subfolder/yourModule";
+
+// This page will now inherit the body tag rules
+// If the same property is declared in both, the last imported one wins
+body {
+  color: root.$dark;
+}
+```
+
+### Pre-existing modules
+
+| File | Purpose |
+|---|---|
+| `_root.scss` | Global variables (colors, spacing) |
+| `_global.scss` | Site-wide base rules and frameworks |
+| `_typography.scss` | Font rules
+| `_header.scss` | Header styles |
+| `_footer.scss` | Footer styles |
+| `_mobile.scss` | Media query rules |
+| `_buttons.scss` | Style and hovers for buttons 
+| `_animations.scss` | Keyframe animations (`fade-in`, `spin`) |
+| `_notification.scss` | Notification component style |
+
 ## CSS Framework
 
 Some of the most popular css frameworks that supports scss with modules are already installed in `node_modules`
@@ -85,56 +137,4 @@ To reduce the bundle size, open the corresponding framework file (`src/frontend/
 ```scss
 @import "bootstrap/scss/card"; // Cards
 @import "bootstrap/scss/carousel"; // Carousel
-```
-
-## Global Variables
-
-Instead of using `:root` in your custom modules or pages, the best thing to do is to centralize all your variables in a single file (that will be tree-shaken automatically by Sass)
-
-### _root.scss <small>(`src/frontend/scss/modules/`)</small>
-```scss
-$header-height: 10vh;
-
-// Usage example (in any other file): 
-header {
-  height: root.$header-height;
-}
-```
-## Scss modules
-You can create your custom css modules by creating a new `.scss` file in `src/frontend/scss/modules/` (the name of the file must start with `_`)
-
-You can create subfolders if you want to refactor the structure, but be sure to update the relative paths in the pages that import them
-
-### _yourModule.scss <small>(`src/frontend/scss/modules/subfolder/`)</small>
-```scss
-@use '../root' as root;
-
-body {
-  background-color: root.$primary;
-}
-```
-
-### examplePage.scss
-```scss
-@import "../modules/subfolder/yourModule";
-
-// This page will now inherit the body tag rules
-// If the same property is declared in both, the last imported one wins
-body {
-  color: root.$dark;
-}
-```
-
-### Pre-existing modules
-
-| File | Purpose |
-|---|---|
-| `_root.scss` | Global variables (colors, spacing) |
-| `_global.scss` | Site-wide base rules and frameworks |
-| `_typography.scss` | Font rules
-| `_header.scss` | Header styles |
-| `_footer.scss` | Footer styles |
-| `_mobile.scss` | Media query rules |
-| `_buttons.scss` | Style and hovers for buttons 
-| `_animations.scss` | Keyframe animations (`fade-in`, `spin`) |
-| `_notification.scss` | Notification component style |
+```