npm - create-berna-stencil - Versions diffs - 2.0.8 → 2.0.10 - Mend

create-berna-stencil 2.0.8 → 2.0.10

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 (9) hide show

package/.eleventy.js +38 -19
package/README.md +1 -1
package/bin/create.js +2 -1
package/docs/Components.md +12 -0
package/docs/Creating pages.md +1 -2
package/package.json +63 -61
package/src/frontend/components/layouts/base.njk +47 -34
package/src/frontend/components/welcome.njk +32 -668
package/src/frontend/scss/modules/_global.scss +0 -1

package/.eleventy.js CHANGED Viewed

@@ -1,6 +1,7 @@
 const esbuild = require("esbuild");
 const glob = require("glob");
 const Image = require("@11ty/eleventy-img");
+const markdownIt = require('markdown-it');
 const fs = require("fs");
 const path = require("path");
@@ -9,32 +10,50 @@ const OUTPUT_DIR = "out";
 module.exports = function (eleventyConfig) {
   function copyRecursiveSync(src, dest) {
-  if (!fs.existsSync(src)) return;
-  if (src.includes('.git')) return;
-  const stat = fs.statSync(src);
-  if (stat.isDirectory()) {
-    fs.mkdirSync(dest, { recursive: true });
-    for (const child of fs.readdirSync(src)) {
-      copyRecursiveSync(path.join(src, child), path.join(dest, child));
+    if (!fs.existsSync(src)) return;
+    if (src.includes('.git')) return;
+    const stat = fs.statSync(src);
+    if (stat.isDirectory()) {
+      fs.mkdirSync(dest, { recursive: true });
+      for (const child of fs.readdirSync(src)) {
+        copyRecursiveSync(path.join(src, child), path.join(dest, child));
+      }
+    } else {
+      fs.mkdirSync(path.dirname(dest), { recursive: true });
+      fs.copyFileSync(src, dest);
     }
-  } else {
-    fs.mkdirSync(path.dirname(dest), { recursive: true });
-    fs.copyFileSync(src, dest);
   }
-}
+  // =====================================================
+  // SHORTCODE — Markdown file renderer
+  // =====================================================
+  const md = markdownIt({ html: true });
+  eleventyConfig.addShortcode('mdFile', function(filePath) {
+    const content = fs.readFileSync(filePath, 'utf8');
+    return md.render(content);
+  });
+  // =====================================================
+  // SHORTCODE — Markdown css
+  // =====================================================
+  eleventyConfig.addPassthroughCopy({
+    "node_modules/github-markdown-css/github-markdown-dark.css": "css/github-markdown-dark.css",
+    "node_modules/github-markdown-css/github-markdown-light.css": "css/github-markdown-light.css",
+  });
   // =====================================================
   // ESBUILD — Bundles and minifies JS files before build
   // =====================================================
   eleventyConfig.on("eleventy.before", async () => {
-      const entryPoints = glob.sync("src/frontend/js/pages/*.js");
-      await esbuild.build({
-        entryPoints,
-        bundle: true,
-        outdir: `${OUTPUT_DIR}/js/pages`,
-        minify: true,
-      });
-      copyRecursiveSync("src/backend", `${OUTPUT_DIR}/backend`);
+    const entryPoints = glob.sync("src/frontend/js/pages/*.js");
+    await esbuild.build({
+      entryPoints,
+      bundle: true,
+      outdir: `${OUTPUT_DIR}/js/pages`,
+      minify: true,
+    });
+    copyRecursiveSync("src/backend", `${OUTPUT_DIR}/backend`);
   });
   // =====================================================

package/README.md CHANGED Viewed

@@ -12,7 +12,7 @@ Building a website from scratch involves a lot of moving parts: templating engin
 - 📁 **Scalable structure** — a clean, opinionated project layout that grows with your needs
 - 🌍 **Open source** — free to use, free to modify, free to share
-![Version](https://img.shields.io/badge/version-2.0.8-blue)
+![Version](https://img.shields.io/badge/version-2.0.9-blue)
 ![License](https://img.shields.io/badge/license-Apache--2.0-blue)
 ![Eleventy](https://img.shields.io/badge/11ty-v3.1.2-black)

package/bin/create.js CHANGED Viewed

@@ -9,6 +9,7 @@ const templateDir = path.join(__dirname, '..');
 const COPY_TARGETS = [
     'src',
+    'docs',
     '_tools',
     '.eleventy.js',
     '.eleventyignore',
@@ -16,7 +17,7 @@ const COPY_TARGETS = [
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '2.0.8',
+    version: '2.0.10',
     private: true,
     scripts: {
         "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",

package/docs/Components.md CHANGED Viewed

@@ -43,6 +43,18 @@ Add a new `{% elif %}` block for each page, listing its components in order. If
 > ⚠️ If you move or delete a component, always update `includes.njk` or the site will break
+### Using Markdown files in components
+You can also render a `.md` file directly inside any `.njk` component using the `mdFile` shortcode:
+```njk
+{% mdFile "docs/your-file.md" %}
+```
+The path is relative to the project root (where `.eleventy.js` lives).
+> ⚠️ The file is read at build time — changes to the `.md` file trigger a rebuild in watch mode.
 ## Nest components
 A component can include other components. This is useful for breaking complex sections into smaller, reusable pieces.

package/docs/Creating pages.md CHANGED Viewed

@@ -3,7 +3,6 @@
 The recommended way is via the **Assistant CLI**
 ## What gets created
-+
 For a page named `my-page`:
 | File | Purpose |
@@ -22,7 +21,7 @@ For a page named `my-page`:
   {% include "_myPage.njk" %}
 ```
-See [components.md](components.md) for details.
+See **Components** DOC file for more info
 ## URL and title

package/package.json CHANGED Viewed

@@ -1,61 +1,63 @@
-{
-  "name": "create-berna-stencil",
-  "version": "2.0.8",
-  "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",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rhaastrake/berna-stencil"
-  },
-  "homepage": "https://github.com/rhaastrake/berna-stencil#readme",
-  "bugs": {
-    "url": "https://github.com/rhaastrake/berna-stencil/issues"
-  },
-  "bin": {
-    "create-berna-stencil": "bin/create.js"
-  },
-  "files": [
-    "bin/",
-    "docs/",
-    "src/",
-    "_tools/",
-    ".eleventy.js",
-    ".eleventyignore",
-    ".gitignore",
-    "LICENSE",
-    "NOTICE"
-  ],
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "@11ty/eleventy": "^3.1.2",
-    "@11ty/eleventy-img": "^6.0.4",
-    "bootstrap": "^5.3.8",
-    "bootstrap-icons": "^1.13.1",
-    "bulma": "^1.0.4",
-    "foundation-sites": "^6.9.0",
-    "glob": "^13.0.6",
-    "uikit": "^3.25.13"
-  },
-  "devDependencies": {
-    "concurrently": "^9.2.1",
-    "esbuild": "^0.27.3",
-    "sass": "^1.77.0"
-  },
-  "scripts": {
-    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet",
-    "build:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --minify",
-    "build:11ty": "eleventy",
-    "build": "npm run clean && npm run build:css && npm run build:js && npm run build:11ty",
-    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet",
-    "serve:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --watch",
-    "serve:11ty": "eleventy --serve --quiet",
-    "clean": "node _tools/cleanOutput.js",
-    "serve": "npm run clean && concurrently \"npm run serve:11ty\" \"npm run serve:css\" \"npm run serve:js\"",
-    "assistant": "node _tools/assistant.js",
-    "postinstall": "cd src/backend/_core && composer install --quiet"
-  }
-}
+{
+  "name": "create-berna-stencil",
+  "version": "2.0.10",
+  "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",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rhaastrake/berna-stencil"
+  },
+  "homepage": "https://github.com/rhaastrake/berna-stencil#readme",
+  "bugs": {
+    "url": "https://github.com/rhaastrake/berna-stencil/issues"
+  },
+  "bin": {
+    "create-berna-stencil": "bin/create.js"
+  },
+  "files": [
+    "bin/",
+    "docs/",
+    "src/",
+    "_tools/",
+    ".eleventy.js",
+    ".eleventyignore",
+    ".gitignore",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-img": "^6.0.4",
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
+    "bulma": "^1.0.4",
+    "foundation-sites": "^6.9.0",
+    "github-markdown-css": "^5.9.0",
+    "glob": "^13.0.6",
+    "markdown-it": "^14.2.0",
+    "uikit": "^3.25.13"
+  },
+  "devDependencies": {
+    "concurrently": "^9.2.1",
+    "esbuild": "^0.27.3",
+    "sass": "^1.77.0"
+  },
+  "scripts": {
+    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet",
+    "build:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --minify",
+    "build:11ty": "eleventy",
+    "build": "npm run clean && npm run build:css && npm run build:js && npm run build:11ty",
+    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet",
+    "serve:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --watch",
+    "serve:11ty": "eleventy --serve --quiet",
+    "clean": "node _tools/cleanOutput.js",
+    "serve": "npm run clean && concurrently \"npm run serve:11ty\" \"npm run serve:css\" \"npm run serve:js\"",
+    "assistant": "node _tools/assistant.js",
+    "postinstall": "cd src/backend/_core && composer install --quiet"
+  }
+}

package/src/frontend/components/layouts/base.njk CHANGED Viewed

@@ -1,4 +1,4 @@
-<!-- This is the base of everypage that you will create -->
+<!-- This is the base of every page that you will create -->
 <!DOCTYPE html>
 <html lang="{{ site.lang or 'en' }}" data-bs-theme="{{ site.data_bs_theme or 'light' }}">
@@ -7,19 +7,28 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <!-- Page Data based on Page Title -->
+        {# Preconnect hints — establish early connections to external origins #}
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+      {#╔══════════════════╗
+        ║    PAGE DATA     ║
+        ╚══════════════════╝#}
         {% set pageKey = title %}
         {% set pageData = site.pages[pageKey] %}
-        <!-- SEO Meta Tags -->
+      {#╔══════════════════╗
+        ║       SEO        ║
+        ╚══════════════════╝#}
         <link rel="canonical" href="{{ site.url }}{{ page.url }}"/>
         <title>{{ pageData.seo.title or title or site.title }}</title>
         <meta name="description" content="{{ pageData.seo.description or site.description }}">
         <meta name="keywords" content="{{ site.keywords }}">
         <meta name="author" content="{{ site.author }}">
-        <meta name="theme-color" content="" >
+        <meta name="theme-color" content="">
-        <!-- Open Graph -->
+        {# Open Graph #}
         <meta property="og:title" content="{{ pageData.seo.title }}">
         <meta property="og:description" content="{{ pageData.seo.description }}">
         <meta property="og:type" content="website">
@@ -27,15 +36,16 @@
         <meta property="og:image" content="{{ site.url }}{{ site.logo }}">
         <meta property="og:site-name" content="{{ site.site-name }}">
-        <!-- Twitter Card -->
+        {# Twitter Card #}
         <meta name="twitter:card" content="summary_large_image">
         <meta name="twitter:title" content="{{ pageData.seo.title }}">
         <meta name="twitter:description" content="{{ pageData.seo.description }}">
         <meta name="twitter:image" content="{{ site.url }}{{ site.logo }}">
-        <!-- ========================================== -->
-        <!-- JSON-LD / Structured data for SEO and AI   -->
-        <!-- ========================================== -->
+      {#╔══════════════════════════════════════════╗
+        ║   JSON-LD — Structured data for SEO/AI  ║
+        ╚══════════════════════════════════════════╝#}
         <script type="application/ld+json">
         {
             "@context": "https://schema.org",
@@ -58,67 +68,70 @@
         }
         </script>
-        <!-- Favicon -->
+      {#╔══════════════════╗
+        ║     FAVICON      ║
+        ╚══════════════════╝#}
         <link rel="icon" type="image/svg+xml" href="{{ site.favicon }}">
-        <!-- (If you want to use a PNG favicon) -->
         {#
         <link rel="icon" type="image/png" href="/assets/favicon.png">
         <link rel="apple-touch-icon" href="/assets/favicon.png">
         #}
-        <!-- CSS -->
-        {# preconnect to jsdelivr — only needed if loading scripts from CDN #}
-        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin data-iub-purposes="1" data-cmp-ab="1">
-        <link rel="stylesheet" href="/css/pages/{{ title }}.css" />
+      {#╔══════════════════╗
+        ║       CSS        ║
+        ╚══════════════════╝#}
+        {# Markdown — theme-aware #}
+        {% if site.data_bs_theme == "dark" %}
+        <link rel="stylesheet" href="/css/github-markdown-dark.css">
+        {% else %}
+        <link rel="stylesheet" href="/css/github-markdown-light.css">
+        {% endif %}
+        {# Page CSS #}
+        <link rel="stylesheet" href="/css/pages/{{ title }}.css"/>
+        {# Per-page CDN CSS #}
         {% if pageData and pageData.cdn and pageData.cdn.css %}
             {% for link in pageData.cdn.css %}
                 <link rel="stylesheet" href="{{ link }}">
             {% endfor %}
         {% endif %}
     </head>
     <body>
-        <!-- Header -->
         {% include "global/header.njk" %}
-        <!-- Main -->
         <main>
             {{ content | safe }}
         </main>
-        <!-- Footer -->
         {% include "global/footer.njk" %}
-        <!-- SCRIPTS -->
-        {#
-        ╔═══════════════════════════════════════════╗
-        ║              FRAMEWORK SCRIPTS            ║
-        ║  Uncomment the framework JS you are using ║
-        ║  Bulma requires no JS — CSS only          ║
-        ╚═══════════════════════════════════════════╝
-        #}
+      {#╔══════════════════╗
+        ║     SCRIPTS      ║
+        ╚══════════════════╝#}
-        {# Bootstrap JS — comment out if using Bulma or Foundation #}
+        {# Framework — uncomment the one you are using #}
         <script src="/js/bootstrap.bundle.min.js" defer></script>
-        {# Foundation JS — uncomment if using Foundation #}
         {# <script src="/js/foundation.min.js" defer></script> #}
-        {# UIkit JS — uncomment if using UIkit #}
         {# <script src="/js/uikit.min.js" defer></script> #}
         {# <script src="/js/uikit-icons.min.js" defer></script> #}
         {# Bulma — no JS needed #}
+        {# Per-page CDN JS #}
         {% if pageData and pageData.cdn and pageData.cdn.js %}
             {% for script in pageData.cdn.js %}
                 <script src="{{ script }}" defer></script>
             {% endfor %}
         {% endif %}
+        {# Page JS #}
         <script src="/js/pages/{{ title }}.js"></script>
     </body>
 </html>

package/src/frontend/components/welcome.njk CHANGED Viewed

@@ -38,16 +38,16 @@
   </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>
+          <h3>GitHub repository</h3>
           <p>Community-driven. Contributions, issues and PRs are welcome.</p>
-          <span class="card-link">Open the repository
+          <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>
@@ -60,7 +60,7 @@
           </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="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>
@@ -69,565 +69,32 @@
       </div>
     </div>
-    <div id="content-assistant" class="tab-content">
-      <div class="markdown-body">
-        <h2>Assistant CLI</h2>
-        <p>An interactive CLI to manage pages without touching files manually.</p>
-        <pre><code>npm run assistant</code></pre>
-        <h3>Menu</h3>
-        <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>
-        <h3>Create page</h3>
-        <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>includes.njk</code> and a stub entry in <code>site.json</code>:</p>
-        <pre><code>"myPage": {
-  "seo": {
-    "title": "My Page",
-    "description": "description"
-  },
-  "cdn": {
-    "css": [],
-    "js": []
-  }
-}</code></pre>
-        <h3>Remove page</h3>
-        <p>Deletes all source files for the page and cleans up the output directory, <code>includes.njk</code>, and <code>site.json</code>.</p>
-        <h3>Rename page</h3>
-        <p>Renames all three source files, updates the <code>elif</code> block in <code>includes.njk</code>, and renames the record in <code>site.json</code> while preserving all existing fields.</p>
-        <h3>Configure output path</h3>
-        <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>⚠️ <code>homepage</code> and <code>404</code> are protected — they cannot be created, removed, or renamed via the CLI.</blockquote>
-      </div>
+    <div id="content-assistant" class="tab-content markdown-body">
+      {% mdFile "docs/assistant cli.md" %}
     </div>
-    <div id="content-styling" class="tab-content">
-      <div class="markdown-body">
-        <h2>Styling with SCSS</h2>
-        <h3>Page CSS</h3>
-        <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>
-        <h4>examplePage.scss <small>(<code>src/frontend/scss/pages/</code>)</small></h4>
-        <pre><code>//==========================
-// CSS MODULES IMPORTS
-//==========================
-@use "../modules/root" as root;
-@import "../modules/global";
-@import "../modules/notification";
-//==========================
-// PAGE CUSTOM CSS RULES
-//==========================
-body {
-  background-color: root.$primary;
-}</code></pre>
-        <h3>Global Variables</h3>
-        <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>
-        <h4>_root.scss <small>(<code>src/frontend/scss/modules/</code>)</small></h4>
-        <pre><code>$header-height: 10vh;
-// Usage example (in any other file):
-header {
-  height: root.$header-height;
-}</code></pre>
-        <h3>Scss modules</h3>
-        <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>
-        <h4>_yourModule.scss <small>(<code>src/frontend/scss/modules/subfolder/</code>)</small></h4>
-        <pre><code>@use '../root' as root;
-body {
-  background-color: root.$primary;
-}</code></pre>
-        <h4>examplePage.scss</h4>
-        <pre><code>@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;
-}</code></pre>
-        <h4>Pre-existing modules</h4>
-        <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>
-        <h3>CSS Framework</h3>
-        <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>
-        <h4>1. _global.scss <small>(<code>src/frontend/scss/modules/</code>)</small></h4>
-        <pre><code>@import "../modules/frameworks/bootstrap";
-// @import "../modules/frameworks/bulma";
-// @import "../modules/frameworks/foundation";
-// @import "../modules/frameworks/uikit";</code></pre>
-        <h4>2. base.njk <small>(<code>src/frontend/components/layouts/</code>)</small></h4>
-        <pre><code>&lt;!-- Bootstrap --&gt;
-&lt;!-- &lt;script src="/js/bootstrap.bundle.min.js" defer&gt;&lt;/script&gt; --&gt;
-&lt;!-- Foundation --&gt;
-&lt;!-- &lt;script src="/js/foundation.min.js" defer&gt;&lt;/script&gt; --&gt;
-&lt;!-- UIkit --&gt;
-&lt;!-- &lt;script src="/js/uikit.min.js" defer&gt;&lt;/script&gt; --&gt;
-&lt;!-- &lt;script src="/js/uikit-icons.min.js" defer&gt;&lt;/script&gt; --&gt;
-&lt;!-- Bulma — no JS needed --&gt;</code></pre>
-        <h4>3. .eleventy.js</h4>
-        <pre><code>eleventyConfig.addPassthroughCopy({
-  // Bootstrap
-  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",
-  "node_modules/bootstrap-icons/font/fonts": "css/fonts",
-  // Foundation
-  // "node_modules/foundation-sites/dist/js/foundation.min.js": "js/foundation.min.js",
-  // UIkit
-  // "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",
-  // Bulma — CSS only, no JS passthrough needed
-});</code></pre>
-        <h4>Reducing bundle size</h4>
-        <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>@import "bootstrap/scss/card"; // Cards
-@import "bootstrap/scss/carousel"; // Carousel</code></pre>
-      </div>
+    <div id="content-styling" class="tab-content markdown-body">
+      {% mdFile "docs/styling with scss.md" %}
     </div>
-    <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 class="language-js">import { showNotification } from '../modules/notification.js';
-import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
-document.addEventListener("DOMContentLoaded", () => {
-  initNormalizePhoneNumber();
-});
-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>
-        <h3>Call inside <code>DOMContentLoaded</code></h3>
-        <table>
-          <thead>
-            <tr><th>Module</th><th>Function</th></tr>
-          </thead>
-          <tbody>
-            <tr><td><code>modules/langSwitcher.js</code></td><td><code>initLangSwitcher()</code></td></tr>
-            <tr><td><code>modules/forms/form.js</code></td><td><code>initFormListener()</code></td></tr>
-            <tr><td><code>modules/forms/textAreaAutoExpand.js</code></td><td><code>initTextAreaAutoExpand()</code></td></tr>
-            <tr><td><code>modules/forms/normalizePhoneNumber.js</code></td><td><code>initNormalizePhoneNumber()</code></td></tr>
-          </tbody>
-        </table>
-        <h3>Call anywhere</h3>
-        <table>
-          <thead>
-            <tr><th>Module</th><th>Function</th></tr>
-          </thead>
-          <tbody>
-            <tr><td><code>modules/notification.js</code></td><td><code>showNotification(text, type, duration)</code></td></tr>
-          </tbody>
-        </table>
-        <h3><code>showNotification</code> parameters</h3>
-        <table>
-          <thead>
-            <tr><th>Parameter</th><th>Type</th><th>Default</th><th>Values</th></tr>
-          </thead>
-          <tbody>
-            <tr><td><code>text</code></td><td>string</td><td>—</td><td>Any string</td></tr>
-            <tr><td><code>type</code></td><td>string</td><td><code>"info"</code></td><td><code>"success"</code>, <code>"info"</code>, <code>"error"</code></td></tr>
-            <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>
-        <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>
-        <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>
-        <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 id="content-javascript" class="tab-content markdown-body">
+      {% mdFile "docs/javascript.md" %}
     </div>
-  </div>
-    <div id="content-creating-pages" class="tab-content">
-      <div class="markdown-body">
-        <h2>Creating Pages</h2>
-        <p>The recommended way is via the <a href="#" class="nav-to-assistant">Assistant CLI</a>.</p>
-        <h3>What gets created</h3>
-        <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/pages/my-page.njk</code></td><td>Template with front matter</td></tr>
-            <tr><td><code>src/scss/pages/myPage.scss</code></td><td>Imports framework + modules</td></tr>
-            <tr><td><code>src/js/pages/myPage.js</code></td><td>Imports JS modules</td></tr>
-          </tbody>
-        </table>
-        <h3>Adding content</h3>
-        <ol>
-          <li>Create a component in <code>src/components/</code> (e.g., <code>_myPage.njk</code>)</li>
-          <li>Include it in <code>src/layouts/includes.njk</code> inside the generated <code>elif</code> block:</li>
-        </ol>
-        <pre><code>&#123;% elif title == "myPage" %&#125;
-  &#123;% include "_myPage.njk" %&#125;</code></pre>
-        <p>See <a href="#" class="nav-to-components">Components</a> for details.</p>
-        <h3>URL and title</h3>
-        <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 — <strong>do not change it</strong>.</p>
-        <h3>SEO</h3>
-        <p>The CLI creates a stub entry in <code>src/data/site.json</code>. Fill it in:</p>
-        <pre><code>"myPage": {
-  "seo": {
-    "title": "My Page | Site Name",
-    "description": "Page description"
-  }
-}</code></pre>
-        <p>See <a href="#" class="nav-to-head-seo">Head & SEO</a> for all available options</p>
-      </div>
+    <div id="content-creating-pages" class="tab-content markdown-body">
+      {% mdFile "docs/creating pages.md" %}
     </div>
-    <div id="content-components" class="tab-content">
-      <div class="markdown-body">
-        <h2>Nunjucks (HTML) Components</h2>
-        <h3>What is Nunjucks</h3>
-        <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>
-        <h3>Create a component</h3>
-        <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
-└── welcome.njk</code></pre>
-        <h3>Include a component</h3>
-        <p>To render a component inside a page, navigate to <code>src/frontend/components/layouts/</code> and edit <code>includes.njk</code>.</p>
-        <h4>includes.njk <small>(<code>src/frontend/components/layouts/</code>)</small></h4>
-        <pre><code>&#123;% if title == "homepage" %&#125;
-  &#123;% include "welcome.njk" %&#125;
-&#123;% elif title == "examplePage" %&#125;
-  &#123;% include "exampleComponent1.njk" %&#125;
-  &#123;% include "subfolder/exampleComponent2.njk" %&#125;
-&#123;% else %&#125;
-  &#123;% include "404/_404.njk" %&#125;
-  &#123;&#123; content | safe &#125;&#125;
-&#123;% endif %&#125;</code></pre>
-        <p>Add a new <code>&#123;% elif %&#125;</code> block for each page, listing its components in order. If a component lives in a subfolder, specify the relative path accordingly.</p>
-        <blockquote>⚠️ A new <code>elif</code> block is automatically added when you create a page via the Assistant CLI.</blockquote>
-        <blockquote>⚠️ If you move or delete a component, always update <code>includes.njk</code> or the site will break.</blockquote>
-        <h3>Nest components</h3>
-        <p>A component can include other components. This is useful for breaking complex sections into smaller, reusable pieces.</p>
-        <h4>exampleComponent.njk</h4>
-        <pre><code>&lt;section class="hero"&gt;
-  &#123;% include "ui/heroTitle.njk" %&#125;
-  &#123;% include "ui/heroButton.njk" %&#125;
-&lt;/section&gt;</code></pre>
-        <blockquote>The same path rules apply: if the included component is in a subfolder, specify the full relative path.</blockquote>
-        <h3>Global components</h3>
-        <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>
-        <h3>Site data in components</h3>
-        <p>All values defined in <code>src/data/site.json</code> are globally available in every component via <code>&#123;&#123; site.* &#125;&#125;</code>.</p>
-        <h4>site.json <small>(<code>src/data/</code>)</small></h4>
-        <pre><code>{
-  "title": "My Site",
-  "logo": "/img/logo.png",
-  "legal": {
-    "privacy": "/privacy"
-  }
-}</code></pre>
-        <h4>Usage in any <code>.njk</code> file</h4>
-        <pre><code>&lt;p&gt;&#123;&#123; site.title &#125;&#125;&lt;/p&gt;
-&lt;a href="&#123;&#123; site.legal.privacy &#125;&#125;"&gt;Privacy Policy&lt;/a&gt;
-&lt;img src="&#123;&#123; site.logo &#125;&#125;" alt="&#123;&#123; site.title &#125;&#125;"&gt;</code></pre>
-      </div>
+    <div id="content-components" class="tab-content markdown-body">
+      {% mdFile "docs/components.md" %}
     </div>
-    <div id="content-head-seo" class="tab-content">
-      <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>
-        <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 <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>
-        <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>
-          </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>{% raw %}# {{ site.site_name }}
-> {{ site.description }}
-Built by {{ site.author }} — {{ site.url }}
-## Pages
-- {{ site.url }}: Homepage
-## Notes
-- 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>
-        <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>&#123;&#123; site.logo &#125;&#125;</code>)</td></tr>
-          </tbody>
-        </table>
-      </div>
+    <div id="content-head-seo" class="tab-content markdown-body">
+      {% mdFile "docs/head and seo.md" %}
     </div>
-    <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 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>
-          <h4>api/public/example.php</h4>
-          <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>
-          <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';
-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">'ENDPOINT_KEYS' =&gt; [
-  'endpoint' =&gt; 'custom-key',
-],</code></pre>
-          <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>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 id="content-backend" class="tab-content markdown-body">
+      {% mdFile "docs/backend.md" %}
     </div>
   </div>
 </div>
 <style>
-  /* Custom Replacement Classes for Bootstrap */
   .layout-container {
     width: 100%;
     max-width: 1140px;
@@ -649,14 +116,22 @@ Response::noContent();                      // 204</code></pre>
     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;
   }
-  /* Tabs Logic */
   .tab-content {
     display: none;
     animation: fadeIn 0.3s ease-in-out;
@@ -679,9 +154,7 @@ Response::noContent();                      // 204</code></pre>
     gap: 0.75rem;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    transition:
-      border-color 0.2s,
-      transform 0.15s;
+    transition: border-color 0.2s, transform 0.15s;
     text-decoration: none;
   }
   .card:hover {
@@ -719,7 +192,7 @@ Response::noContent();                      // 204</code></pre>
   .card:hover .card-link {
     opacity: 1;
   }
   .guide-filter {
     display: flex;
     gap: 0.5rem;
@@ -733,7 +206,6 @@ Response::noContent();                      // 204</code></pre>
   .guide-filter label input[type="radio"] {
     display: none;
   }
   .filter-pill {
     display: inline-block;
     padding: 5px 16px;
@@ -742,102 +214,18 @@ Response::noContent();                      // 204</code></pre>
     background: #0d1526;
     color: #38649b;
     font-size: 0.9rem;
-    transition:
-      border-color 0.2s,
-      color 0.2s,
-      background 0.2s;
+    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;
   }
-  /* Markdown Body Styles */
-  .markdown-body {
-    color: #cbd5e1;
-    line-height: 1.6;
-  }
-  .markdown-body h2 {
-    color: #42b883;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    font-size: 1.8rem;
-  }
-  .markdown-body h3 {
-    color: #cbd5e1;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    font-size: 1.3rem;
-  }
-  .markdown-body h4 {
-    color: #cbd5e1;
-    margin-top: 1.2rem;
-    margin-bottom: 0.5rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-  }
-  .markdown-body h4 small {
-    color: #8da4c2;
-    font-weight: 400;
-    font-size: 0.85em;
-  }
-  .markdown-body p {
-    margin-bottom: 1rem;
-    color: #8da4c2;
-  }
-  .markdown-body pre {
-    background: #0d1526;
-    border: 0.8px solid #1e2d4a;
-    padding: 1rem;
-    border-radius: 8px;
-    overflow-x: auto;
-    margin-bottom: 1.5rem;
-  }
-  .markdown-body pre code {
-    background: transparent;
-    padding: 0;
-    color: #cbd5e1;
-  }
-  .markdown-body code {
-    font-family: monospace;
-    background: rgba(66, 184, 131, 0.15);
-    color: #42b883;
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
-    font-size: 0.9em;
-  }
-  .markdown-body table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 1.5rem;
-    font-size: 0.95rem;
-  }
-  .markdown-body th, .markdown-body td {
-    border: 0.8px solid #1e2d4a;
-    padding: 0.75rem 1rem;
-    text-align: left;
-  }
-  .markdown-body th {
-    background: #0d1526;
-    color: #cbd5e1;
-    font-weight: 600;
-  }
-  .markdown-body blockquote {
-    border-left: 4px solid #42b883;
-    margin: 1.5rem 0;
-    padding: 1rem 1.5rem;
-    background: rgba(66, 184, 131, 0.05);
-    border-radius: 0 8px 8px 0;
-    color: #a0aec0;
-  }
 </style>
 <script>
@@ -846,35 +234,11 @@ Response::noContent();                      // 204</code></pre>
       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");
       }
     });
   });
-  document.querySelector('.nav-to-assistant').addEventListener('click', (e) => {
-    e.preventDefault();
-    const assistantRadio = document.querySelector('input[name="guide-filter"][value="assistant"]');
-    if (assistantRadio) {
-      assistantRadio.checked = true;
-      assistantRadio.dispatchEvent(new Event('change'));
-    }
-  });
-  document.querySelector('.nav-to-head-seo').addEventListener('click', (e) => {
-    e.preventDefault();
-    const headAndSeoRadio = document.querySelector('input[name="guide-filter"][value="head-seo"]');
-    if (headAndSeoRadio) {
-      headAndSeoRadio.checked = true;
-      headAndSeoRadio.dispatchEvent(new Event('change'));
-    }
-  });
 </script>

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

@@ -43,5 +43,4 @@ body {
 main {
     flex: 1;
-    background-color: #1e1e1e94;
 }