create-berna-stencil 1.0.27 → 1.0.28

package/_tools/modules/updateIncludes.js

@@ -15,7 +15,7 @@ function addLayout(pageName) {
 
     if (content.includes(`{% elif title == "${camelName}" %}`)) return;
 
-    const newElif = `{% elif title == "${camelName}" %}\n  {#{% include "exampleComponent.njk" %}#}\n\n`;
+    const newElif = `{% elif title == "${camelName}" %}\n  {#{% include "component.njk" %}#}\n\n`;
     const updatedContent = content.replace('{% else %}', `${newElif}{% else %}`);
 
     fileSystem.writeFileSync(INCLUDES_PATH, updatedContent);

package/_tools/res/templates/template.js

@@ -20,4 +20,4 @@ document.addEventListener("DOMContentLoaded", () => {
   initLangSwitcher();
 });
 
-showNotification("prova notification", "success", 3000);
+showNotification("Example notification", "success", 3000);

package/bin/create.js

@@ -17,7 +17,7 @@ const COPY_TARGETS = [
 
 const PROJECT_PACKAGE = {
     name: path.basename(targetDir),
-    version: '1.0.27',
+    version: '1.0.28',
     private: true,
     scripts: {
         "build:css": "sass src/scss:c:/laragon/www/Berna-Stencil-out/css --no-source-map --style=compressed --quiet",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
   "keywords": [
     "eleventy",

package/src/components/global/footer.njk

@@ -1,32 +1,26 @@
 <footer>
-  <div class="row">
-    <div class="col-lg-4">
-      <h6 class="mb-3">{{ site.title }}</h6>
+  <div class="footer-top">
+    <div>
+      <h6>{{ site.title }}</h6>
       <p>{{ site.description }}</p>
     </div>
+
+    <div>
+      <h6>Sitemap</h6>
+      <ul>
+        <li><a href="/">Homepage</a></li>
+      </ul>
+    </div>
   </div>
 
-  <hr class="my-3" />
+  <hr />
 
-  <div class="row">
-    <div class="col-md-6">
-      <p>
-        &copy; {{ site.copyright.year }} {{ site.name }}
-        {{ site.copyright.text }}.
-      </p>
-    </div>
-    <div class="col-md-6 text-md-end">
-      <small class="text-muted">
-        <a href="{{ site.legal.privacy }}" class="text-decoration-none me-3"
-          >Privacy Policy</a
-        >
-        <a href="{{ site.legal.cookie }}" class="text-decoration-none me-3"
-          >Cookie Policy</a
-        >
-        <a href="{{ site.legal.terms }}" class="text-decoration-none me-3"
-          >Terms and conditions</a
-        >
-      </small>
-    </div>
+  <div class="footer-bottom">
+    <p>&copy; {{ site.copyright.year }} {{ site.name }} {{ site.copyright.text }}.</p>
+    <small>
+      <a href="{{ site.legal.privacy }}">Privacy Policy</a>
+      <a href="{{ site.legal.cookie }}">Cookie Policy</a>
+      <a href="{{ site.legal.terms }}">Terms and conditions</a>
+    </small>
   </div>
-</footer>
+</footer>

package/src/components/global/header.njk

@@ -4,12 +4,16 @@
         <img src="{{ site.logo }}" alt="{{ site.title }}" height="40">
       </a>
     <div class="nav-links">
-      <a class="btn btn-primary" href="/">Homepage</a>
-      <a class="btn btn-primary" href="/another-page">Another page</a>
+      <a class="btn btn-outline-primary" href="/">Homepage</a>
+      <a class="btn btn-outline-primary" href="/about-us">About-us</a>
+      <a class="btn btn-outline-primary" href="/contact-us">Contact us</a>
     </div>
     <div class="nav-links">
-      <a class="btn btn-primary" href="/">ExtraBtn1</a>
-      <a class="btn btn-primary" href="/">ExtraBtn2</a>
+      <select id="lang-select" class="form-select">
+        {# enLangName or itLangName is the key that contains the language name accordint to the current language #}
+        <option value="en" data-lang-key="enLangName"></option>
+        <option value="it" data-lang-key="itLangName"></option>
+      </select>
     </div>
   </nav>
 </header>

package/src/components/layouts/base.njk

@@ -85,7 +85,6 @@
         <!-- Main -->
         <main>
             {{ content | safe }}
-            <br>
         </main>
 
         <!-- Footer -->

package/src/components/layouts/includes.njk

@@ -5,7 +5,7 @@ layout: base.njk
 <!-- NJK (HTML) components per page -->
  
 {% if title == "homepage" %}
-  {% include "exampleComponent.njk" %}
+  {% include "welcome.njk" %}
 
 {% else %}
   {% include "404/_404.njk" %}

package/src/components/welcome.njk

@@ -0,0 +1,208 @@
+<div class="container fade-in get-started my-5">
+
+  <span class="gs-badge">open source</span>
+  <h1 class="gs-title">Berna Stencil</h1>
+  <p class="gs-sub">An Eleventy-based static site starter with SCSS, JS pages, and a built-in CLI scaffolder.</p>
+
+  <div class="gs-block">
+    <p class="gs-block-label">scaffold pages, rename, remove</p>
+    <div class="gs-cmd">
+      <code>
+        <span class="prompt">$ </span>
+        <span class="cmd">npm run</span>
+        <span class="arg">assistant</span>
+      </code>
+      <button class="gs-copy" onclick="navigator.clipboard.writeText('npm run assistant'); this.textContent='copied'; setTimeout(()=>this.textContent='copy',1500)">copy</button>
+    </div>
+
+    <hr />
+
+    <div class="gs-guide-links">
+      <a href="https://bernastencil.com/docs/pages"><i class="bi bi-file-plus"></i> adding pages</a>
+      <a href="https://bernastencil.com/docs/layouts"><i class="bi bi-layout"></i> layouts</a>
+      <a href="https://bernastencil.com/docs/extra-cdn"><i class="bi bi-brand-npm"></i> cdn per page</a>
+      <a href="https://bernastencil.com/docs/i18n"><i class="bi bi-world"></i> i18n</a>
+      <a href="https://bernastencil.com/docs/scss"><i class="bi bi-palette"></i> scss structure</a>
+    </div>
+  </div>
+
+  <hr class="gs-divider" />
+
+  <ul class="gs-features">
+    <li><i class="bi bi-bolt"></i>Eleventy + Nunjucks templating</li>
+    <li><i class="bi bi-palette"></i>SCSS with per-page stylesheets</li>
+    <li><i class="bi bi-terminal-2"></i>CLI scaffolder for pages</li>
+    <li><i class="bi bi-world"></i>Built-in i18n switcher</li>
+    <li><i class="bi bi-layout"></i>Component-based layouts</li>
+    <li><i class="bi bi-brand-npm"></i>CDN per-page asset management</li>
+  </ul>
+
+  <div class="gs-links">
+    <a href="https://github.com/rhaastrake/berna-stencil"><i class="bi bi-github"></i> GitHub</a>
+    <a href="https://github.com/rhaastrake/berna-stencil#readme"><i class="bi bi-book"></i> Docs</a>
+    <a href="https://github.com/rhaastrake/berna-stencil/issues"><i class="bi bi-bug"></i> Issues</a>
+  </div>
+
+</div>
+
+<style>
+    .get-started {
+    background: #0d0d0d;
+    border: 0.5px solid #2a2a2a;
+    border-radius: 16px;
+    padding: 2.5rem;
+    color: #e2e2e2;
+    max-width: 680px;
+
+    .gs-badge {
+        display: inline-block;
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #888;
+        border: 0.5px solid #333;
+        border-radius: 20px;
+        padding: 3px 10px;
+        margin-bottom: 1.25rem;
+    }
+
+    .gs-title {
+        font-size: 22px;
+        font-weight: 500;
+        color: #f5f5f5;
+        margin: 0 0 0.4rem;
+    }
+
+    .gs-sub {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 2rem;
+    }
+
+    .gs-block {
+        background: #161616;
+        border: 0.5px solid #2a2a2a;
+        border-radius: 10px;
+        padding: 1rem 1.25rem;
+        margin-bottom: 1.5rem;
+
+        hr {
+            border: none;
+            border-top: 0.5px solid #2a2a2a;
+            margin: 1rem 0;
+        }
+    }
+
+    .gs-block-label {
+        font-size: 11px;
+        color: #555;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        margin-bottom: 0.5rem;
+    }
+
+    .gs-cmd {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+
+        code {
+            font-size: 13px;
+            color: #c9c9c9;
+
+            .prompt { color: #444; }
+            .cmd    { color: #a3e4bc; }
+            .arg    { color: #7ec8e3; }
+        }
+    }
+
+    .gs-copy {
+        background: none;
+        border: 0.5px solid #333;
+        border-radius: 6px;
+        padding: 4px 10px;
+        color: #666;
+        font-size: 11px;
+        cursor: pointer;
+        white-space: nowrap;
+        flex-shrink: 0;
+        transition: color 0.15s, border-color 0.15s;
+
+        &:hover {
+            color: #ccc;
+            border-color: #555;
+        }
+    }
+
+    .gs-guide-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem 1.5rem;
+
+        a {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 12px;
+            color: #555;
+            text-decoration: none;
+            transition: color 0.15s;
+
+            i { font-size: 13px; }
+
+            &:hover { color: #999; }
+        }
+    }
+
+    .gs-divider {
+        border: none;
+        border-top: 0.5px solid #1e1e1e;
+        margin: 1.5rem 0;
+    }
+
+    .gs-features {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 1.5rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.75rem;
+
+        li {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            font-size: 13px;
+            color: #666;
+
+            i {
+                font-size: 15px;
+                color: #444;
+                margin-top: 1px;
+                flex-shrink: 0;
+            }
+        }
+    }
+
+    .gs-links {
+        display: flex;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+
+        a {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 13px;
+            color: #555;
+            text-decoration: none;
+            transition: color 0.15s;
+
+            i { font-size: 15px; }
+
+            &:hover { color: #aaa; }
+        }
+    }
+}
+</style>

package/src/data/lang.json

@@ -10,9 +10,8 @@
     },
 
     "error404Message": "Oops! Page not found",
-    "error404Return": "Return to homepage",
+    "error404Return": "Return to homepage"
 
-    "test": "This is the english translation for the test key"
   },
   "it": {
     "enLangName": "Inglese",
@@ -25,8 +24,7 @@
     },
 
     "error404Message": "Oops! Pagina non trovata",
-    "error404Return": "Ritorna alla homepage",
-
-    "test": "Questa è la traduzione italiana per la chiave test"
+    "error404Return": "Ritorna alla homepage"
+    
   }
 }

package/src/js/modules/langSwitcher.js

@@ -20,14 +20,21 @@ export async function initLangSwitcher() {
 
   applyLanguage(initialLang, data);
 
-  document.querySelectorAll("input[name='lang-button']").forEach((radio) => {
+  function handleLangChange(value) {
+    localStorage.setItem("language", value);
+    applyLanguage(value, data);
+  }
+
+  // Radio buttons
+  document.querySelectorAll("input[type='radio'][name='lang-button']").forEach((radio) => {
     if (radio.value === initialLang) radio.checked = true;
+    radio.addEventListener("change", () => handleLangChange(radio.value));
+  });
 
-    radio.addEventListener("change", () => {
-      const newLang = radio.value;
-      localStorage.setItem("language", newLang);
-      applyLanguage(newLang, data);
-    });
+  // Select
+  document.querySelectorAll("select#lang-select").forEach((select) => {
+    select.value = initialLang;
+    select.addEventListener("change", () => handleLangChange(select.value));
   });
 }
 

package/src/js/pages/homepage.js

@@ -14,7 +14,7 @@ import { showNotification } from '../modules/notification.js';
 // import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
 
 //==========================
-// "homepage" PAGE CUSTOM JAVASCRIPT
+// PAGE CUSTOM JAVASCRIPT
 //==========================
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -22,4 +22,4 @@ document.addEventListener("DOMContentLoaded", () => {
   initFormListener();
 });
 
-showNotification("homepage notification", "success", 3000);
+showNotification("Example notification", "success", 3000);

package/src/scss/modules/_buttons.scss

@@ -0,0 +1,19 @@
+.btn {
+    background: none;
+    border: 0.5px solid #333;
+    border-radius: 8px;
+    padding: 8px 18px;
+    color: #aaa;
+    font-size: 13px;
+    cursor: pointer;
+    transition: color 0.15s, border-color 0.15s;
+
+    &:hover {
+        color: #eee;
+        border-color: #666;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+}

package/src/scss/modules/_footer.scss

@@ -2,11 +2,44 @@
 // CSS RULES FOR FOOTER
 //==========================
 
-// Getting root rules from _root.scss
 @use 'root' as root;
 
 footer {
     width: 100%;
     padding: root.$header-padding-y root.$header-padding-x;
     background-color: root.$primary;
+
+    h6 {
+        margin-bottom: 0.75rem;
+    }
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    hr {
+        margin: 1rem 0;
+    }
+
+    .footer-top {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    .footer-bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        small {
+            display: flex;
+            gap: 1rem;
+        }
+    }
 }

package/src/scss/modules/_global.scss

@@ -5,14 +5,6 @@
 // Getting root rules from _root.scss
 @use 'root' as root;
 
-// ╔═════════════════════════════════════════════════════════════╗
-// ║                       CSS FRAMEWORK                         ║
-// ║  Uncomment the framework you want to use (only one at time) ║
-// ║  To reduce or filter modules, edit the corresponding file:  ║
-// ║                _bootstrap.scss / _bulma.scss                ║
-// ║               _uikit.scss  / _foundation.scss               ║
-// ╚═════════════════════════════════════════════════════════════╝
-
 @import "../modules/frameworks/bootstrap";
 // @import "../modules/frameworks/bulma";
 // @import "../modules/frameworks/foundation";
@@ -27,6 +19,8 @@
 @import "animations";
 @import "mobile";
 
+// @import "buttons";
+
 *,
 *::before,
 *::after {
@@ -35,6 +29,12 @@
   box-sizing: border-box;
 }
 
-button {
-  cursor: pointer;
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
 }

package/src/scss/modules/_header.scss

@@ -28,5 +28,5 @@ nav a {
 
 .nav-links{
     display: flex;
-    gap: 15px;
+    gap: 120px;
 }

package/src/components/exampleComponent.njk

@@ -1,15 +0,0 @@
-<div class="container fade-in">
-  <h1>This is components/exampleComponent.njk content</h1>
-  <h2 data-lang-key="test"></h2>
-
-  <div class="btn-group" role="group">
-
-    {# enLangName is the key that contains the language name accordint to the current language #}
-    <input type="radio" class="btn-check" name="lang-button" id="lang-en" value="en"/>
-    <label class="btn btn-outline-primary" for="lang-en" data-lang-key="enLangName"></label>
-
-    {# itLangName is the key that contains the language name accordint to the current language #}
-    <input type="radio" class="btn-check" name="lang-button" id="lang-it" value="it"/>
-    <label class="btn btn-outline-primary" for="lang-it" data-lang-key="itLangName"></label>
-  </div>
-</div>