create-berna-stencil 2.0.4 → 2.0.5

package/_tools/res/templates/template.js

@@ -5,7 +5,7 @@
 // Call anywhere
 import { showNotification } from '../modules/notification.js';
 
-// Uncomment to enable optional modules (call inside DOMContentLoaded)
+// Example 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

@@ -15,7 +15,7 @@ const COPY_TARGETS = [
 
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '2.0.4',
+    version: '2.0.5',
     private: true,
     scripts: {
         "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",

package/docs/Backend.md

@@ -104,9 +104,9 @@ To assign a dedicated key, add it to `config.php`:
 ## 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
+Response::noContent();                      // 204
 ```
 
 ## Handling multiple methods

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.5",
   "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",

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>

package/src/frontend/components/welcome.njk

@@ -1,4 +1,4 @@
-<div class="container my-3">
+<div class="layout-container layout-my-3">
   <h1>Welcome to <span class="berna-stencil">Berna-Stencil</span></h1>
   <div class="slogan">The boilerplate you need, simplified</div>
 
@@ -42,16 +42,29 @@
     <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;">
-          <i class="bi bi-book card-icon" aria-hidden="true"></i>
+          <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>
+          </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 <span class="bi bi-arrow-right"></span></span>
+          <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>
+          </span>
         </a>
         <a href="https://github.com/rhaastrake/berna-stencil" class="card" target="_blank" rel="noopener noreferrer" style="flex: 1; min-width: 250px;">
-          <i class="bi bi-github card-icon" aria-hidden="true"></i>
+          <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>
+          </svg>
           <h3>Github repository</h3>
           <p>Community-driven. Contributions, issues and PRs are welcome.</p>
-          <span class="card-link">Open the repository <span class="bi bi-arrow-right"></span></span>
+          <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>
       </div>
     </div>
@@ -215,23 +228,27 @@ body {
     <div id="content-javascript" class="tab-content">
       <div class="markdown-body">
         <h2>JavaScript</h2>
+
         <h3>Page JS</h3>
         <p>Each page has its own JS entry point in <code>src/frontend/js/pages/</code></p>
         <p>It is bundled and minified by esbuild and loaded automatically by <code>base.njk</code></p>
         <p>Import only what the page needs.</p>
+
         <h4>examplePage.js <small>(<code>src/frontend/js/pages/</code>)</small></h4>
-        <pre><code>
-import { initLangSwitcher } from '../modules/langSwitcher.js';
-import { showNotification } from '../modules/notification.js';
+        <pre><code class="language-js">import { showNotification } from '../modules/notification.js';
 
-document.addEventListener("DOMContentLoaded", () => {
-  initLangSwitcher();
-});
+      import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
+
+      document.addEventListener("DOMContentLoaded", () => {
+        initNormalizePhoneNumber();
+      });
+
+      showNotification("Page loaded", "success", 3000);</code></pre>
 
-showNotification("Page loaded", "success", 3000);</code></pre>
-        <h3>Modules</h3>
+        <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>
-        <h4>Call inside <code>DOMContentLoaded</code></h4>
+
+        <h3>Call inside <code>DOMContentLoaded</code></h3>
         <table>
           <thead>
             <tr><th>Module</th><th>Function</th></tr>
@@ -243,7 +260,8 @@ showNotification("Page loaded", "success", 3000);</code></pre>
             <tr><td><code>modules/forms/normalizePhoneNumber.js</code></td><td><code>initNormalizePhoneNumber()</code></td></tr>
           </tbody>
         </table>
-        <h4>Call anywhere</h4>
+
+        <h3>Call anywhere</h3>
         <table>
           <thead>
             <tr><th>Module</th><th>Function</th></tr>
@@ -252,7 +270,8 @@ showNotification("Page loaded", "success", 3000);</code></pre>
             <tr><td><code>modules/notification.js</code></td><td><code>showNotification(text, type, duration)</code></td></tr>
           </tbody>
         </table>
-        <h4><code>showNotification</code> parameters</h4>
+
+        <h3><code>showNotification</code> parameters</h3>
         <table>
           <thead>
             <tr><th>Parameter</th><th>Type</th><th>Default</th><th>Values</th></tr>
@@ -263,18 +282,24 @@ showNotification("Page loaded", "success", 3000);</code></pre>
             <tr><td><code>duration</code></td><td>number</td><td><code>5000</code></td><td>ms, or <code>-1</code> for persistent with spinner</td></tr>
           </tbody>
         </table>
-        <h3>Adding a module</h3>
+
+        <h2>Adding a module</h2>
         <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>// _yourModule.js
-export function yourFunction() {
-  // ...
-}</code></pre>
+
+        <pre><code class="language-js">// _yourModule.js
+      export function yourFunction() {
+        // ...
+      }</code></pre>
+
         <p>Then import it in the pages that need it:</p>
-        <pre><code>import { yourFunction } from '../modules/yourModule.js';</code></pre>
+
+        <pre><code class="language-js">import { yourFunction } from '../modules/yourModule.js';</code></pre>
+
         <blockquote>⚠️ Files inside <code>_tools/</code> run directly in Node.js without a bundler — use CommonJS (<code>require</code> / <code>module.exports</code>) there, not ESM.</blockquote>
       </div>
     </div>
+  </div>
 
     <div id="content-creating-pages" class="tab-content">
       <div class="markdown-body">
@@ -375,39 +400,45 @@ export function yourFunction() {
       <div class="markdown-body">
         <h2>Head & SEO</h2>
         <p>This json holds global settings used across all pages in <code>base.njk</code> and other components:</p>
+        
         <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>
+        <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>
+
         <h2>Per-page SEO and CDN</h2>
-        <p>Each page entry is keyed by its camelCase <code>title</code> from the front matter.</p>
+        <p>Each page entry is keyed by its camelCase <code>title</code> from the front matter:</p>
         <p>If you don't want to use a particular CDN inserting it in <code>base.njk</code> for all pages, you can add extra specific CDN (CSS, JS) by inserting the link in each page of <code>site.json</code> separating them with a <code>,</code> and setting them in <code>""</code>.</p>
+        
         <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>
+
         <table>
           <thead>
             <tr><th>File</th><th>Purpose</th><th>Reachable at</th></tr>
@@ -417,7 +448,29 @@ export function yourFunction() {
             <tr><td><code>robots.njk</code></td><td>Controls search engine crawling</td><td><code>yoursite.com/robots.txt</code></td></tr>
           </tbody>
         </table>
+
         <p>To customize them, edit <code>src/llms.njk</code> or <code>src/robots.njk</code> directly.</p>
+
+        <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
+
+      > Site description
+
+      Built by Name and surname — https://yoursite.com
+
+      ## Pages
+
+      - https://yoursite.com: Homepage
+
+      ## Notes
+
+      - Language: en
+      - All content may be used for AI indexing unless otherwise stated</code></pre>
+
+        <blockquote>The more accurate and detailed your <code>llms.txt</code>, the better AI models will understand and reference your site.</blockquote>
+
         <h2>Configuration field description</h2>
         <table>
           <thead>
@@ -516,7 +569,7 @@ Response::success(['visits' => 1024]);</code></pre>
     'admin/stats' => 'secret-stats-key',
 ],</code></pre>
         <h3>The Response helper</h3>
-        <pre><code>Response::success($data, $code);         // default 200
+        <pre><code>Response::success($data, $code);            // default 200
 Response::error($message, $code, $details); // default 400
 Response::noContent();                      // 204</code></pre>
         <h3>Handling multiple methods</h3>
@@ -611,6 +664,20 @@ const res = await fetch('/api/posts', {
 </div>
 
 <style>
+  /* Custom Replacement Classes for Bootstrap */
+  .layout-container {
+    width: 100%;
+    max-width: 1140px;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+  .layout-my-3 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
   h1 {
     text-align: center;
     font-weight: 400;
@@ -659,7 +726,8 @@ const res = await fetch('/api/posts', {
     transform: translateY(-2px);
   }
   .card-icon {
-    font-size: 2rem;
+    width: 2rem;
+    height: 2rem;
     color: #42b883;
   }
   .card h3 {
@@ -824,6 +892,7 @@ const res = await fetch('/api/posts', {
       }
     });
   });
+  
   document.querySelector('.nav-to-assistant').addEventListener('click', (e) => {
     e.preventDefault(); 
     
@@ -834,7 +903,8 @@ const res = await fetch('/api/posts', {
       assistantRadio.dispatchEvent(new Event('change'));
     }
   });
-    document.querySelector('.nav-to-head-seo').addEventListener('click', (e) => {
+  
+  document.querySelector('.nav-to-head-seo').addEventListener('click', (e) => {
     e.preventDefault(); 
     
     const headAndSeoRadio = document.querySelector('input[name="guide-filter"][value="head-seo"]');

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

@@ -18,6 +18,11 @@
 
 // Add any custom rule specific to this page below
 // These rules override the framework and module styles
-// body {
-//     background-color: root.$primary;
-// }
+.center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 60vh;
+    text-align: center;
+}