npm - create-berna-stencil - Versions diffs - 2.6.0 → 2.6.2 - Mend

create-berna-stencil 2.6.0 → 2.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/out/index.html ADDED Viewed

@@ -0,0 +1,1147 @@
+<!-- This is the base of every page that you will create -->
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+        <link rel="canonical" href="https://yoursite.com/"/>
+        <title>Homepage</title>
+        <meta name="description" content="Description">
+        <meta name="keywords" content="keyword1, keyword2, keyword3">
+        <meta name="author" content="Name and surname">
+        <meta name="theme-color" content="">
+        <meta property="og:title" content="Homepage">
+        <meta property="og:description" content="Description">
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="https://yoursite.com/">
+        <meta property="og:image" content="https://yoursite.com/assets/brand/logo.svg">
+        <meta property="og:site-name" content="NaN">
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="Homepage">
+        <meta name="twitter:description" content="Description">
+        <meta name="twitter:image" content="https://yoursite.com/assets/brand/logo.svg">
+        <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            "name": "Homepage",
+            "description": "Description",
+            "url": "https://yoursite.com/",
+            "author": {
+                "@type": "Person",
+                "name": "Name and surname"
+            },
+            "publisher": {
+                "@type": "Organization",
+                "name": "Site name",
+                "logo": {
+                    "@type": "ImageObject",
+                    "url": "https://yoursite.com/assets/brand/logo.svg"
+                }
+            }
+        }
+        </script>
+        <link rel="icon" type="image/svg+xml" href="/assets/brand/favicon.svg">
+        <link rel="stylesheet" href="/css/github-markdown-dark.css">
+        <link rel="stylesheet" href="/css/pages/homepage.css"/>
+    </head>
+    <body>
+        <header>
+  <nav>
+      <a class="logo" href="/">
+        <img src="/assets/brand/logo.svg" alt="Site title" height="40">
+      </a>
+    <div class="nav-links">
+      <a class="btn" href="/">Homepage</a>
+      <a class="btn" href="/example-page">Example page</a>
+    </div>
+  </nav>
+</header>
+        <main>
+<!-- NJK (HTML) components per page -->
+  <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>
+  <div class="guide-filter">
+    <label>
+      <input type="radio" name="guide-filter" value="welcome" checked />
+      <span class="filter-pill">Welcome</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="assistant" />
+      <span class="filter-pill">Assistant</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="styling" />
+      <span class="filter-pill">Styling</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="javascript" />
+      <span class="filter-pill">Javascript</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="creating-pages" />
+      <span class="filter-pill">Creating Pages</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="components" />
+      <span class="filter-pill">Components</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="head-seo" />
+      <span class="filter-pill">Head & SEO</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="backend" />
+      <span class="filter-pill">Backend</span>
+    </label>
+    <label>
+      <input type="radio" name="guide-filter" value="deploy" />
+      <span class="filter-pill">Deploy</span>
+    </label>
+  </div>
+  <div class="tabs-container">
+    <div id="content-welcome" class="tab-content active">
+      <div class="grid" style="display: flex; gap: 1rem; flex-wrap: wrap;">
+        <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="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
+            <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/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="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
+            <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>
+    <div id="content-assistant" class="tab-content markdown-body">
+      <h1>Assistant CLI</h1>
+<blockquote>
+<p>Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (<code>.ts</code> instead of <code>.js</code>), that imports do <strong>not</strong> include the extension, and that paths use <code>src/frontend/ts/</code> instead of <code>src/frontend/js/</code>.</p>
+</blockquote>
+<p>An interactive CLI to manage pages without touching files manually.</p>
+<pre><code>npm run assistant
+</code></pre>
+<h2>Menu</h2>
+<pre><code>1. Create page
+2. Remove page
+3. Rename page
+4. Configure output path
+</code></pre>
+<p>Use <code>CTRL/CMD + C</code> to exit.</p>
+<h2>Create page</h2>
+<p>Enter a page name in any format — the CLI converts it to kebab-case automatically.</p>
+<p>For a page named <code>my-page</code>, the following files are created:</p>
+<table>
+<thead>
+<tr>
+<th>File</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>src/frontend/scss/pages/myPage.scss</code></td>
+<td>SCSS entry point</td>
+</tr>
+<tr>
+<td><code>src/frontend/js/pages/myPage.js</code></td>
+<td>JS entry point</td>
+</tr>
+<tr>
+<td><code>src/frontend/_routes/my-page.njk</code></td>
+<td>Nunjucks template</td>
+</tr>
+</tbody>
+</table>
+<p>It also adds an <code>elif</code> block in <code>pageComponents.njk</code> and a stub entry in <code>site.json</code>:</p>
+<pre><code class="language-json">&quot;myPage&quot;: {
+  &quot;seo&quot;: {
+    &quot;title&quot;: &quot;My Page&quot;,
+    &quot;description&quot;: &quot;description&quot;
+  },
+  &quot;cdn&quot;: {
+    &quot;css&quot;: [],
+    &quot;js&quot;: []
+  }
+}
+</code></pre>
+<h2>Remove page</h2>
+<p>Deletes all source files for the page and cleans up the output directory, <code>pageComponents.njk</code>, and <code>site.json</code>.</p>
+<h2>Rename page</h2>
+<p>Renames all three source files, updates the <code>elif</code> block in <code>pageComponents.njk</code>, and renames the record in <code>site.json</code> while preserving all existing fields.</p>
+<h2>Configure output path</h2>
+<p>Updates the output directory across <code>.eleventy.js</code> and all relevant <code>package.json</code> scripts in one shot. The old output folder is deleted automatically.</p>
+<blockquote>
+<p>⚠️ <code>homepage</code> and <code>404</code> are protected — they cannot be created, removed, or renamed via the CLI.</p>
+</blockquote>
+    </div>
+    <div id="content-styling" class="tab-content markdown-body">
+      <h1>Styling with SCSS</h1>
+<h2>Page CSS</h2>
+<p>Each page has its own SCSS entry point in <code>src/frontend/scss/pages/</code></p>
+<p>It must contain <code>_root.scss</code> + other modules like <code>_global.scss</code> or any other one that you need and its own specific css rules</p>
+<p><code>_root.scss</code> uses <code>@use</code> to enable namespaced access (<code>root.$var</code>); other modules use <code>@import</code> as they don't expose variables.</p>
+<h3>examplePage.scss <small>(<code>src/frontend/scss/pages/</code>)</small></h3>
+<pre><code class="language-scss">//==========================
+// CSS MODULES IMPORTS
+//==========================
+@use &quot;../modules/root&quot; as root;
+@import &quot;../modules/global&quot;;
+@import &quot;../modules/notification&quot;;
+//==========================
+// PAGE CUSTOM CSS RULES
+//==========================
+body {
+  background-color: root.$primary;
+}
+</code></pre>
+<h2>Global Variables</h2>
+<p>Instead of using <code>:root</code> 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)</p>
+<h3>_root.scss <small>(<code>src/frontend/scss/modules/</code>)</small></h3>
+<pre><code class="language-scss">$header-height: 10vh;
+// Usage example (in any other file):
+header {
+  height: root.$header-height;
+}
+</code></pre>
+<h2>Scss modules</h2>
+<p>You can create your custom css modules by creating a new <code>.scss</code> file in <code>src/frontend/scss/modules/</code> (the name of the file must start with <code>_</code>)</p>
+<p>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</p>
+<h3>_yourModule.scss <small>(<code>src/frontend/scss/modules/subfolder/</code>)</small></h3>
+<pre><code class="language-scss">@use '../root' as root;
+body {
+  background-color: root.$primary;
+}
+</code></pre>
+<h3>examplePage.scss</h3>
+<pre><code class="language-scss">@import &quot;../modules/subfolder/yourModule&quot;;
+// 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;
+}
+</code></pre>
+<h3>Pre-existing modules</h3>
+<table>
+<thead>
+<tr>
+<th>File</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>_root.scss</code></td>
+<td>Global variables (colors, spacing)</td>
+</tr>
+<tr>
+<td><code>_global.scss</code></td>
+<td>Site-wide base rules and frameworks</td>
+</tr>
+<tr>
+<td><code>_typography.scss</code></td>
+<td>Font rules</td>
+</tr>
+<tr>
+<td><code>_header.scss</code></td>
+<td>Header styles</td>
+</tr>
+<tr>
+<td><code>_footer.scss</code></td>
+<td>Footer styles</td>
+</tr>
+<tr>
+<td><code>_mobile.scss</code></td>
+<td>Media query rules</td>
+</tr>
+<tr>
+<td><code>_buttons.scss</code></td>
+<td>Style and hovers for buttons</td>
+</tr>
+<tr>
+<td><code>_animations.scss</code></td>
+<td>Keyframe animations (<code>fade-in</code>, <code>spin</code>)</td>
+</tr>
+<tr>
+<td><code>_notification.scss</code></td>
+<td>Notification component style</td>
+</tr>
+</tbody>
+</table>
+<h2>CSS Framework</h2>
+<p>Some of the most popular css frameworks that supports scss with modules are already installed in <code>node_modules</code></p>
+<p>You can choose one or none of them (more than 1 works, but you may get in various conflicts)</p>
+<p>To enable/disable them you have to modify 3 files around the project by just commenting them</p>
+<h3>1. _global.scss <small>(<code>src/frontend/scss/modules/</code>)</small></h3>
+<pre><code class="language-scss">@import &quot;../modules/frameworks/bootstrap&quot;;
+// @import &quot;../modules/frameworks/bulma&quot;;
+// @import &quot;../modules/frameworks/foundation&quot;;
+// @import &quot;../modules/frameworks/uikit&quot;;
+</code></pre>
+<h3>2. base.njk <small>(<code>src/frontend/layouts/</code>)</small></h3>
+<pre><code class="language-html">{# Bootstrap JS #}
+&lt;script src=&quot;/js/bootstrap.bundle.min.js&quot; defer&gt;&lt;/script&gt;
+{# Foundation JS #}
+{# &lt;script src=&quot;/js/foundation.min.js&quot; defer&gt;&lt;/script&gt; #}
+{# UIkit JS #}
+{# &lt;script src=&quot;/js/uikit.min.js&quot; defer&gt;&lt;/script&gt; #}
+{# &lt;script src=&quot;/js/uikit-icons.min.js&quot; defer&gt;&lt;/script&gt; #}
+{# Bulma — no JS needed #}
+</code></pre>
+<h3>3. .eleventy.js</h3>
+<pre><code class="language-javascript">eleventyConfig.addPassthroughCopy({
+  // Bootstrap
+  &quot;node_modules/bootstrap/dist/js/bootstrap.bundle.min.js&quot;: &quot;js/bootstrap.bundle.min.js&quot;,
+  &quot;node_modules/bootstrap-icons/font/fonts&quot;: &quot;css/fonts&quot;,
+  // Foundation
+  // &quot;node_modules/foundation-sites/dist/js/foundation.min.js&quot;: &quot;js/foundation.min.js&quot;,
+  // UIkit
+  // &quot;node_modules/uikit/dist/js/uikit.min.js&quot;: &quot;js/uikit.min.js&quot;,
+  // &quot;node_modules/uikit/dist/js/uikit-icons.min.js&quot;: &quot;js/uikit-icons.min.js&quot;,
+  // Bulma — CSS only, no JS passthrough needed
+});
+</code></pre>
+<h3>Reducing bundle size</h3>
+<p>To reduce the bundle size, open the corresponding framework file (<code>src/frontend/scss/modules/frameworks/</code>) and comment out any modules you don't need</p>
+<pre><code class="language-scss">@import &quot;bootstrap/scss/card&quot;; // Cards
+@import &quot;bootstrap/scss/carousel&quot;; // Carousel
+</code></pre>
+    </div>
+    <div id="content-javascript" class="tab-content markdown-body">
+      <h1>JavaScript</h1>
+<blockquote>
+<p>Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (<code>.ts</code> instead of <code>.js</code>), that imports do <strong>not</strong> include the extension, and that paths use <code>src/frontend/ts/</code> instead of <code>src/frontend/js/</code>.</p>
+</blockquote>
+<h2>Page JS</h2>
+<p>Each page has its own JS entry point in <code>src/frontend/js/pages/</code>, bundled and minified by esbuild and loaded automatically by <code>base.njk</code>.</p>
+<p>Import only what the page needs.</p>
+<h3>examplePage.js <small>(<code>src/frontend/js/pages/</code>)</small></h3>
+<pre><code class="language-js">// import { initExampleModule } from '../modules/exampleModule.js';
+document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; {
+    // initExampleModule();
+});
+// Page logic here
+</code></pre>
+<h2>Modules</h2>
+<p>Modules live in <code>src/frontend/js/modules/</code>. Modules that interact with the DOM must be called inside <code>DOMContentLoaded</code>; others can be called anywhere.</p>
+<h2>Adding a module</h2>
+<p>Create a new <code>.js</code> file in <code>src/frontend/js/modules/</code>. Subfolders are allowed.</p>
+<p>Use ESM syntax — esbuild handles the bundling:</p>
+<h3>exampleModule.js <small>(<code>src/frontend/js/modules/</code>)</small></h3>
+<pre><code class="language-js">export function exampleModule() {
+    // Module logic here
+}
+</code></pre>
+<p>Then import it in the pages that need it:</p>
+<pre><code class="language-js">import { exampleModule } from '../modules/exampleModule.js';
+</code></pre>
+<p>In TypeScript, omit the extension:</p>
+<pre><code class="language-ts">import { exampleModule } from '../modules/exampleModule';
+</code></pre>
+<blockquote>
+<p>⚠️ 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.</p>
+</blockquote>
+    </div>
+    <div id="content-creating-pages" class="tab-content markdown-body">
+      <h1>Creating Pages</h1>
+<blockquote>
+<p>Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (<code>.ts</code> instead of <code>.js</code>), that imports do <strong>not</strong> include the extension, and that paths use <code>src/frontend/ts/</code> instead of <code>src/frontend/js/</code>.</p>
+</blockquote>
+<p>The recommended way is via the <strong>Assistant CLI</strong></p>
+<h2>What gets created</h2>
+<p>For a page named <code>my-page</code>:</p>
+<table>
+<thead>
+<tr>
+<th>File</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>src/frontend/_routes_/my-page.njk</code></td>
+<td>Template with front matter</td>
+</tr>
+<tr>
+<td><code>src/frontend/scss/pages/myPage.scss</code></td>
+<td>Imports framework + modules</td>
+</tr>
+<tr>
+<td><code>src/frontend/js/pages/myPage.js</code></td>
+<td>Imports JS modules</td>
+</tr>
+</tbody>
+</table>
+<h2>Adding content</h2>
+<ol>
+<li>Create a component in <code>src/frontend/components/</code> (e.g. <code>_myPage.njk</code>)</li>
+<li>Include it in <code>src/frontend/layouts/pageComponents.njk</code> inside the generated <code>elif</code> block:</li>
+</ol>
+<pre><code class="language-njk">{% elif title == &quot;myPage&quot; %}
+  {% include &quot;_myPage.njk&quot; %}
+</code></pre>
+<p>See <strong>Components</strong> DOC file for more info</p>
+<h2>URL and title</h2>
+<p>The URL is the kebab-case name (<code>/my-page/</code>). The <code>title</code> in the front matter is camelCase (<code>myPage</code>) and is used internally to load the correct CSS and JS files — do not change it.</p>
+<h2>Subpages (nested URLs)</h2>
+<p>To create a URL like <code>domain.it/about/team</code>, edit the <code>permalink</code> in <code>src/frontend/_routes/team.njk</code> and add the parent segment before the final slash:</p>
+<pre><code class="language-njk">---
+title: &quot;team&quot;
+permalink: &quot;about/team/&quot;
+layout: pageComponents.njk
+---
+</code></pre>
+<p>The parent path (<code>about</code>) does <strong>not</strong> need to exist as a real page — it's just a URL prefix. Only the last segment (<code>team</code>) must match the filename and the <code>title</code> in the front matter.</p>
+<table>
+<thead>
+<tr>
+<th>Goal URL</th>
+<th>permalink value</th>
+<th>File</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>/team/</code></td>
+<td><code>/team/</code></td>
+<td><code>_routes/team.njk</code></td>
+</tr>
+<tr>
+<td><code>/about/team/</code></td>
+<td><code>/about/team/</code></td>
+<td><code>_routes/team.njk</code></td>
+</tr>
+<tr>
+<td><code>/company/about/team/</code></td>
+<td><code>/company/about/team/</code></td>
+<td><code>_routes/team.njk</code></td>
+</tr>
+</tbody>
+</table>
+<h2>SEO</h2>
+<p>The CLI creates a stub entry in <code>src/frontend/data/site.json</code>. Fill it in:</p>
+<pre><code class="language-json">&quot;myPage&quot;: {
+  &quot;seo&quot;: {
+    &quot;title&quot;: &quot;My Page | Site Name&quot;,
+    &quot;description&quot;: &quot;Page description&quot;
+  }
+}
+</code></pre>
+<p>See <strong>Head &amp; SEO</strong> for all available options.</p>
+    </div>
+    <div id="content-components" class="tab-content markdown-body">
+      <h1>Nunjucks (HTML) Components</h1>
+<h2>What is Nunjucks</h2>
+<p>Nunjucks (<code>.njk</code>) is an HTML file that supports logic like variables, <code>if</code> statements, and <code>for</code> loops. It can extend a base layout and include other <code>.njk</code> components</p>
+<h2>Create a component</h2>
+<p>Create a new <code>.njk</code> file anywhere inside <code>src/frontend/components/</code>. You can organize them into subfolders freely</p>
+<pre><code>src/frontend/components/
+├── global/
+├── layouts/
+├── modals/
+│   └── privacyModal.njk # You can move it to a modals/subfolder
+├── welcome.njk
+</code></pre>
+<h2>Include a component</h2>
+<p>To render a component inside a page, navigate to <code>src/frontend/layouts/</code> and edit <code>pageComponents.njk</code></p>
+<h3>pageComponents.njk <small>(<code>src/frontend/layouts/</code>)</small></h3>
+<pre><code class="language-js">{% if title == &quot;homepage&quot; %}
+  {% include &quot;welcome.njk&quot; %}
+{% elif title == &quot;examplePage&quot; %}
+  {% include &quot;exampleComponent1.njk&quot; %}
+  {% include &quot;subfolder/exampleComponent2.njk&quot; %}
+{% else %}
+  {% include &quot;404/_404.njk&quot; %}
+  {{ content | safe }}
+{% endif %}
+</code></pre>
+<p>Add a new <code>{% elif %}</code> block for each page, listing its components in order. If a component lives in a subfolder, specify the relative path accordingly</p>
+<blockquote>
+<p>⚠️ A new <code>elif</code> block is automatically added when you create a page via the Assistant CLI</p>
+</blockquote>
+<blockquote>
+<p>⚠️ If you move or delete a component, always update <code>pageComponents.njk</code> or the site will break</p>
+</blockquote>
+<h3>Using Markdown files in components</h3>
+<p>You can also render a <code>.md</code> file directly inside any <code>.njk</code> component using the <code>mdFile</code> shortcode:</p>
+<pre><code class="language-njk">{% mdFile &quot;docs/your-file.md&quot; %}
+</code></pre>
+<p>The path is relative to the project root (where <code>.eleventy.js</code> lives).</p>
+<blockquote>
+<p>⚠️ The file is read at build time — changes to the <code>.md</code> file trigger a rebuild in watch mode.</p>
+</blockquote>
+<h2>Nest components</h2>
+<p>A component can include other components. This is useful for breaking complex sections into smaller, reusable pieces.</p>
+<h3>exampleComponent.njk</h3>
+<pre><code class="language-js">&lt;section class=&quot;hero&quot;&gt;
+  {% include &quot;ui/heroTitle.njk&quot; %}
+  {% include &quot;ui/heroButton.njk&quot; %}
+&lt;/section&gt;
+</code></pre>
+<blockquote>
+<p>The same path rules apply: if the included component is in a subfolder, specify the full relative path.</p>
+</blockquote>
+<h2>Global components</h2>
+<p>Header and footer live in <code>src/frontend/components/global/</code> and are automatically included in every page via <code>base.njk</code>. Edit them to change the site-wide layout</p>
+<h2>Site data in components</h2>
+<p>All values defined in <code>src/frontend/data/site.json</code> are globally available in every component via <code>{{ site.* }}</code></p>
+<h3>site.json <small>(<code>src/data/</code>)</small></h3>
+<pre><code class="language-json">{
+  &quot;title&quot;: &quot;My Site&quot;,
+  &quot;logo&quot;: &quot;/img/logo.png&quot;,
+  &quot;legal&quot;: {
+    &quot;privacy&quot;: &quot;/privacy&quot;
+  }
+}
+</code></pre>
+<h3>Usage in any <code>.njk</code> file</h3>
+<pre><code class="language-js">&lt;p&gt;{{ site.title }}&lt;/p&gt;
+&lt;a href=&quot;{{ site.legal.privacy }}&quot;&gt;Privacy Policy&lt;/a&gt;
+&lt;img src=&quot;{{ site.logo }}&quot; alt=&quot;{{ site.title }}&quot;&gt;
+</code></pre>
+    </div>
+    <div id="content-head-seo" class="tab-content markdown-body">
+      <h1>Head &amp; SEO</h1>
+<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 class="language-json">&quot;site_name&quot;: &quot;Site name&quot;,
+&quot;title&quot;: &quot;Site title&quot;,
+&quot;description&quot;: &quot;Site description&quot;,
+&quot;keywords&quot;: &quot;keyword1, keyword2, keyword3&quot;,
+&quot;domain&quot;: &quot;yoursite.com&quot;,
+&quot;url&quot;: &quot;https://yoursite.com&quot;,
+&quot;lang&quot;: &quot;en&quot;,
+&quot;author&quot;: &quot;Name and surname&quot;,
+&quot;data_bs_theme&quot;: &quot;dark&quot;,
+&quot;favicon&quot;: &quot;/assets/brand/favicon.svg&quot;,
+&quot;logo&quot;: &quot;/assets/brand/logo.svg&quot;,
+...
+</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>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 site.json separating them with a <code>,</code> and setting them in &quot;&quot;</p>
+<h3>site.json <small><code>(src/frontend/data/)</code></small></h3>
+<pre><code class="language-json">&quot;pages&quot;: {
+    ...
+    &quot;examplePage&quot;: {
+      &quot;seo&quot;: {
+        &quot;title&quot;: &quot;Example Page&quot;,
+        &quot;description&quot;: &quot;description&quot;
+      },
+      &quot;cdn&quot;: {
+        // You can leave the [] empty
+        &quot;css&quot;: [&quot;https://example1.com/lib.min.css&quot;, &quot;https://example2.com/lib.min.css&quot;],
+        &quot;js&quot;: [&quot;https://example1.com/lib.min.js&quot;, &quot;https://example2.com/lib.min.js&quot;]
+      }
+    }
+    ...
+}
+</code></pre>
+<h2>AI &amp; 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>
+</thead>
+<tbody>
+<tr>
+<td><code>llms.njk</code></td>
+<td>Tells AI models what your site is about</td>
+<td><code>yoursite.com/llms.txt</code></td>
+</tr>
+<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.site_name }}
+&gt; {{ site.description }}
+Built by {{ site.author }} — {{ site.url }}
+## Pages
+- {{ site.url }}: Homepage
+## Notes
+- Language: {{ site.lang }}
+- All content may be used for AI inde   xing unless otherwise stated
+</code></pre>
+<blockquote>
+<p>The more accurate and detailed your <code>llms.txt</code>, the better AI models will understand and reference your site.</p>
+</blockquote>
+<h2>Configuration field description</h2>
+<table>
+<thead>
+<tr>
+<th>Field</th>
+<th>Purpose</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>site_name</code></td>
+<td>Brand name (used in meta tags)</td>
+</tr>
+<tr>
+<td><code>title</code></td>
+<td>Default page title</td>
+</tr>
+<tr>
+<td><code>description</code></td>
+<td>Default meta description</td>
+</tr>
+<tr>
+<td><code>keywords</code></td>
+<td>Default meta keywords</td>
+</tr>
+<tr>
+<td><code>domain</code> / <code>url</code></td>
+<td>Used for canonical URLs and og:url</td>
+</tr>
+<tr>
+<td><code>lang</code></td>
+<td>HTML <code>lang</code> attribute</td>
+</tr>
+<tr>
+<td><code>author</code></td>
+<td>Meta author tag</td>
+</tr>
+<tr>
+<td><code>data_bs_theme</code></td>
+<td>Bootstrap color scheme (<code>light</code> / <code>dark</code>)</td>
+</tr>
+<tr>
+<td><code>favicon</code></td>
+<td>Path to the favicon</td>
+</tr>
+<tr>
+<td><code>logo</code></td>
+<td>Path to the logo (available as <code>{{ site.logo }}</code>)</td>
+</tr>
+</tbody>
+</table>
+    </div>
+    <div id="content-backend" class="tab-content markdown-body">
+      <h1>Backend</h1>
+<blockquote>
+<p><strong>PHP requirement</strong> — the backend runs only on servers with PHP support:</p>
+<ul>
+<li><strong>Apache</strong> (shared hosting, VPS) ✅</li>
+<li><strong>Nginx</strong> + PHP-FPM (VPS) ✅</li>
+<li><strong>IIS</strong> + FastCGI (Windows Server) ✅</li>
+<li><strong>Static hosting</strong> (Netlify, Vercel, GitHub Pages, Cloudflare Pages) ❌</li>
+</ul>
+</blockquote>
+<p>The backend is a PHP REST API located in <code>src/backend/</code>, copied to the output directory automatically at build time.</p>
+<h2>Structure</h2>
+<pre><code>src/backend/
+├── api/
+│   ├── public/       # Endpoints accessible without an API key
+│   └── protected/    # Endpoints requiring X-Api-Key header
+├── db/
+│   ├── Database.php
+│   ├── models/
+│   └── migrations/
+├── config.php        # Your local config — never commit this
+└── config.example.php
+</code></pre>
+<h2>Configuration</h2>
+<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>
+<h3>config.php <small>(<code>src/backend/</code>)</small></h3>
+<pre><code class="language-php">return [
+    // Default key for protected endpoints that don't have a specific key in CUSTOM_ENDPOINT_KEYS
+    'GENERAL_API_KEY' =&gt; 'default-key',
+    // Per-endpoint keys. For subfolder endpoints, use the relative path ('subfolder/endpoint')
+    'CUSTOM_ENDPOINT_KEYS' =&gt; [
+        // 'subfolder/endpoint' =&gt; 'example-key',
+    ],
+    // Default CORS origins applied to every endpoint
+    'GENERAL_ALLOWED_ORIGINS' =&gt; [
+        'https://example.com',
+    ],
+    // Per-endpoint CORS origins. Same path format as CUSTOM_ENDPOINT_KEYS.
+    // When an endpoint is listed here, these origins replace GENERAL_ALLOWED_ORIGINS for it.
+    'CUSTOM_ENDPOINT_ORIGINS' =&gt; [
+        // 'subfolder/endpoint' =&gt; ['https://app.example.com'],
+    ],
+    'DB_HOST' =&gt; '127.0.0.1',
+    'DB_NAME' =&gt; 'example_db',
+    'DB_USER' =&gt; 'root',
+    'DB_PASS' =&gt; '',
+];
+</code></pre>
+<h3>API keys</h3>
+<p><code>GENERAL_API_KEY</code> is the fallback key for all protected endpoints. Use <code>CUSTOM_ENDPOINT_KEYS</code> to assign a different key to a specific endpoint — for subfolder endpoints, use the relative path as the key.</p>
+<blockquote>
+<p>⚠️ The API key travels in the <code>X-Api-Key</code> header on every request. Use it only for server-to-server calls over HTTPS. Never embed it in frontend code, where it would be publicly visible.</p>
+</blockquote>
+<h3>CORS (allowed origins)</h3>
+<p>Cross-origin access mirrors the API-key model:</p>
+<ul>
+<li><code>GENERAL_ALLOWED_ORIGINS</code> — the default list of origins allowed to call any endpoint from a browser.</li>
+<li><code>CUSTOM_ENDPOINT_ORIGINS</code> — overrides the default for a specific endpoint, keyed by the same relative path used in <code>CUSTOM_ENDPOINT_KEYS</code>.</li>
+</ul>
+<p>Origins must be exact (scheme + host, no trailing slash), e.g. <code>https://example.com</code>. When a request's <code>Origin</code> is in the resolved list, it is reflected back in <code>Access-Control-Allow-Origin</code> (with <code>Vary: Origin</code>). An empty list sends no CORS header — the most restrictive setting; same-origin requests still work. Use <code>'*'</code> as the only element to allow any origin (not recommended for protected endpoints).</p>
+<p>Resolution order for a given endpoint: <code>CUSTOM_ENDPOINT_ORIGINS[path]</code> if present, otherwise <code>GENERAL_ALLOWED_ORIGINS</code>.</p>
+<h2>How routing works</h2>
+<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>
+<h2>Creating a public endpoint</h2>
+<p>Create a <code>.php</code> file anywhere inside <code>api/public/</code></p>
+<h3>api/public/example.php</h3>
+<pre><code class="language-php">&lt;?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' =&gt; $id]);
+</code></pre>
+<h2>Creating a protected endpoint</h2>
+<p>Create a <code>.php</code> file inside <code>api/protected/</code>. The API key check happens automatically before your file runs.</p>
+<h3>api/protected/example.php</h3>
+<pre><code class="language-php">&lt;?php
+declare(strict_types=1);
+require_once CORE_PATH . '/modules/Response.php';
+if ($method !== 'GET') {
+    Response::error('Method not allowed', 405);
+}
+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">'CUSTOM_ENDPOINT_KEYS' =&gt; [
+    'endpoint' =&gt; 'custom-key',
+],
+</code></pre>
+<h2>The Response helper</h2>
+<pre><code class="language-php">Response::success($data, $code);            // default 200
+Response::error($message, $code, $details); // default 400
+Response::noContent();                      // 204
+</code></pre>
+<h2>Pre-built endpoints</h2>
+<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 id="content-deploy" class="tab-content markdown-body">
+      <h1>Server Configuration</h1>
+<p>Berna-Stencil includes ready-made server configuration for Apache and IIS. For Nginx, a reference config is provided in the project root.</p>
+<h2>Apache</h2>
+<p><code>.htaccess</code> files at <code>src/frontend/</code> and <code>src/backend/</code> are automatically copied to the build output by Eleventy. No additional setup required.</p>
+<p>Covers:</p>
+<ul>
+<li>Directory listing disabled</li>
+<li>403 / 404 → <code>/404.html</code></li>
+<li>Sensitive files blocked (<code>web.config</code>, dotfiles, etc.)</li>
+<li><code>/api/*</code> → <code>backend/_core/index.php</code></li>
+<li>HTTPS redirect</li>
+</ul>
+<h2>IIS</h2>
+<p><code>web.config</code> files at <code>src/frontend/</code> and <code>src/backend/</code> are automatically copied to the build output by Eleventy. No additional setup required.</p>
+<p>Covers the same rules as the Apache configuration above.</p>
+<h2>Nginx</h2>
+<p>Nginx does not support per-directory configuration files. The <code>nginx.conf</code> in the project root is a reference config that must be manually placed on the server.</p>
+<h3>Setup</h3>
+<ol>
+<li>Copy <code>nginx.conf</code> to the server:</li>
+</ol>
+<pre><code class="language-bash">scp nginx.conf user@server:/etc/nginx/sites-available/your-site
+</code></pre>
+<ol start="2">
+<li>Edit <code>server_name</code> and <code>root</code> to match your environment:</li>
+</ol>
+<pre><code class="language-nginx">server_name example.com;
+root /var/www/html/out;
+</code></pre>
+<ol start="3">
+<li>
+<p>Add your SSL certificate paths.</p>
+</li>
+<li>
+<p>Enable and reload:</p>
+</li>
+</ol>
+<pre><code class="language-bash">ln -s /etc/nginx/sites-available/your-site /etc/nginx/sites-enabled/
+nginx -t &amp;&amp; systemctl reload nginx
+</code></pre>
+<h3>PHP-FPM socket</h3>
+<p>The default socket path in <code>nginx.conf</code> targets RHEL / Fedora systems. Adjust for your distro:</p>
+<table>
+<thead>
+<tr>
+<th>Distro</th>
+<th>Path</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>RHEL / Fedora</td>
+<td><code>unix:/run/php-fpm/php-fpm.sock</code></td>
+</tr>
+<tr>
+<td>Debian / Ubuntu</td>
+<td><code>unix:/run/php/php-fpm.sock</code></td>
+</tr>
+<tr>
+<td>TCP fallback</td>
+<td><code>127.0.0.1:9000</code></td>
+</tr>
+</tbody>
+</table>
+    </div>
+  </div>
+</div>
+<style>
+  .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;
+  }
+  h1 .berna-stencil {
+    color: #42b883;
+    font-weight: 600;
+  }
+  .markdown-body {
+    background-color: transparent !important;
+    h1 {
+      text-align: unset;
+    }
+  }
+  .slogan {
+    text-align: center;
+    color: #4b71a0;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+  .tab-content {
+    display: none;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  .tab-content.active {
+    display: block;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(5px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .card {
+    background: #0d1526;
+    border: 0.8px solid #1e2d4a;
+    border-radius: 10px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    transition: border-color 0.2s, transform 0.15s;
+    text-decoration: none;
+  }
+  .card:hover {
+    border-color: #42b883;
+    transform: translateY(-2px);
+  }
+  .card-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #42b883;
+  }
+  .card h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #cbd5e1;
+    letter-spacing: 0.01em;
+    margin: 0;
+  }
+  .card p {
+    font-size: 1rem;
+    color: #38649b;
+    line-height: 1.6;
+    margin: 0;
+  }
+  .card-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 1rem;
+    color: #42b883;
+    opacity: 0.8;
+    transition: opacity 0.15s;
+    margin-top: auto;
+  }
+  .card:hover .card-link {
+    opacity: 1;
+  }
+  .guide-filter {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 2rem;
+  }
+  .guide-filter label {
+    cursor: pointer;
+  }
+  .guide-filter label input[type="radio"] {
+    display: none;
+  }
+  .filter-pill {
+    display: inline-block;
+    padding: 5px 16px;
+    border-radius: 20px;
+    border: 0.8px solid #1e2d4a;
+    background: #0d1526;
+    color: #38649b;
+    font-size: 0.9rem;
+    transition: border-color 0.2s, color 0.2s, background 0.2s;
+    user-select: none;
+  }
+  .guide-filter input[type="radio"]:checked + .filter-pill {
+    border-color: #42b883;
+    color: #42b883;
+    background: rgba(66, 184, 131, 0.08);
+  }
+  .guide-filter label:hover .filter-pill {
+    border-color: #42b883;
+    color: #42b883;
+  }
+</style>
+<script>
+  document.querySelectorAll('input[name="guide-filter"]').forEach((radio) => {
+    radio.addEventListener("change", (e) => {
+      document.querySelectorAll(".tab-content").forEach((content) => {
+        content.classList.remove("active");
+      });
+      const targetId = `content-${e.target.value}`;
+      const targetContent = document.getElementById(targetId);
+      if (targetContent) {
+        targetContent.classList.add("active");
+      }
+    });
+  });
+</script>
+        </main>
+        <footer>
+    <div>
+      <h6>Site title</h6>
+      <p>Site description</p>
+    </div>
+    <div>
+      <h6>Sitemap</h6>
+      <ul>
+        <li><a href="/">Homepage</a></li>
+      </ul>
+    </div>
+    <div>
+      &copy; 2026  Copyright text
+    </div>
+    <div>
+      <h6>Legal</h6>
+      <small>
+        <ul>
+          <li><a href="">Privacy Policy</a></li>
+          <li><a href="">Cookie Policy</a></li>
+          <li><a href="">Terms and conditions</a></li>
+        </ul>
+      </small>
+    </div>
+  </div>
+</footer>
+        <script src="/js/bootstrap.bundle.min.js" defer></script>
+        <script src="/js/pages/homepage.js"></script>
+    </body>
+</html>