npm - create-berna-stencil - Versions diffs - 1.0.1 - Mend

create-berna-stencil 1.0.1

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

package/.eleventy.js +81 -0
package/.eleventyignore +4 -0
package/.gitignore +2 -0
package/README.md +31 -0
package/bin/create.js +96 -0
package/package.json +71 -0
package/src/404.njk +16 -0
package/src/_routes/another-page.njk +9 -0
package/src/api/configExample.php +28 -0
package/src/api/sendEmail.php +131 -0
package/src/assets/brand/favicon.svg +37 -0
package/src/assets/brand/logo.svg +37 -0
package/src/components/exampleComponent.njk +12 -0
package/src/components/global/footer.njk +32 -0
package/src/components/global/header.njk +15 -0
package/src/components/layouts/base.njk +100 -0
package/src/components/layouts/includes.njk +16 -0
package/src/data/lang.json +32 -0
package/src/data/site.json +54 -0
package/src/index.njk +9 -0
package/src/js/modules/forms/form.js +45 -0
package/src/js/modules/forms/normalizePhoneNumber.js +42 -0
package/src/js/modules/forms/textAreaAutoExpand.js +38 -0
package/src/js/modules/langSwitcher.js +62 -0
package/src/js/modules/notification.js +39 -0
package/src/js/pages/404.js +23 -0
package/src/js/pages/anotherPage.js +23 -0
package/src/js/pages/homepage.js +25 -0
package/src/robots.txt +4 -0
package/src/scss/modules/_animations.scss +25 -0
package/src/scss/modules/_footer.scss +12 -0
package/src/scss/modules/_global.scss +40 -0
package/src/scss/modules/_header.scss +32 -0
package/src/scss/modules/_mobile.scss +30 -0
package/src/scss/modules/_notification.scss +56 -0
package/src/scss/modules/_root.scss +37 -0
package/src/scss/modules/_typography.scss +15 -0
package/src/scss/modules/frameworks/_bootstrap.scss +111 -0
package/src/scss/modules/frameworks/_bulma.scss +110 -0
package/src/scss/modules/frameworks/_foundation.scss +140 -0
package/src/scss/modules/frameworks/_uikit.scss +111 -0
package/src/scss/pages/404.scss +20 -0
package/src/scss/pages/anotherPage.scss +21 -0
package/src/scss/pages/homepage.scss +21 -0
package/src/sitemap.njk +17 -0
package/tools/assistant.js +127 -0
package/tools/cleanOutput.js +24 -0
package/tools/modules/updateData.js +58 -0
package/tools/modules/updateIncludes.js +45 -0
package/tools/modules/updateOutputPath.js +91 -0
package/tools/modules/updatePage.js +150 -0
package/tools/res/templates.json +56 -0

package/src/components/layouts/base.njk ADDED Viewed

@@ -0,0 +1,100 @@
+<!-- This is the base of everypage that you will create -->
+<!DOCTYPE html>
+<html lang="{{ site.lang or 'en' }}" data-bs-theme="{{ site.data_bs_theme or 'light' }}">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- Page Data based on Page Title -->
+        {% set pageKey = title %}
+        {% set pageData = site.pages[pageKey] %}
+        <!-- SEO Meta Tags -->
+        <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="" >
+        <!-- Open Graph -->
+        <meta property="og:title" content="{{ pageData.seo.title }}">
+        <meta property="og:description" content="{{ pageData.seo.description }}">
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+        <meta property="og:image" content="{{ site.url }}{{ site.logo }}">
+        <meta property="og:site_name" content="{{ site.site_name }}">
+        <!-- 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 }}">
+        <!-- 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" />
+        {% 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 }}
+            <br>
+        </main>
+        <!-- Footer -->
+        {% include "global/footer.njk" %}
+        <!-- SCRIPTS -->
+        {#
+        ╔═══════════════════════════════════════════╗
+        ║              FRAMEWORK SCRIPTS            ║
+        ║  Uncomment the framework JS you are using ║
+        ║  Bulma requires no JS — CSS only          ║
+        ╚═══════════════════════════════════════════╝
+        #}
+        {# Bootstrap JS — comment out if using Bulma or Foundation #}
+        <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 #}
+        {% if pageData and pageData.cdn and pageData.cdn.js %}
+            {% for script in pageData.cdn.js %}
+                <script src="{{ script }}" defer></script>
+            {% endfor %}
+        {% endif %}
+        <script src="/js/pages/{{ title }}.js"></script>
+    </body>
+</html>

package/src/components/layouts/includes.njk ADDED Viewed

@@ -0,0 +1,16 @@
+---
+layout: base.njk
+---
+<!-- NJK (HTML) components per page -->
+{% if title == "homepage" %}
+  {% include "exampleComponent.njk" %}
+{% elif title == "anotherPage" %}
+  {% include "exampleComponent.njk" %}
+{% else %}
+  {% include "404/_404.njk" %}
+  {{ content | safe }}
+{% endif %}

package/src/data/lang.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "en": {
+    "enLangName": "English",
+    "itLangName": "Italian",
+    "forms": {
+      "formInvalidFields": "Please fill in all required fields correctly",
+      "emailSending": "Sending email",
+      "emailSuccess": "Email sent successfully",
+      "emailError": "An error occurred while sending the email"
+    },
+    "error404Message": "Oops! Page not found",
+    "error404Return": "Return to homepage",
+    "test": "This is the english translation for the test key"
+  },
+  "it": {
+    "enLangName": "Inglese",
+    "itLangName": "Italiano",
+    "forms": {
+      "formInvalidFields": "Per favore, compila correttamente tutti i campi obbligatori",
+      "emailSending": "Invio in corso",
+      "emailSuccess": "Email inviata con successo",
+      "emailError": "Si è verificato un errore durante l'invio dell'email"
+    },
+    "error404Message": "Oops! Pagina non trovata",
+    "error404Return": "Ritorna alla homepage",
+    "test": "Questa è la traduzione italiana per la chiave test"
+  }
+}

package/src/data/site.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "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",
+  "copyright": {
+    "year": "2026",
+    "text": "Copyright text"
+  },
+  "legal": {
+    "privacy": "",
+    "cookie": "",
+    "cookieControls": "",
+    "terms": ""
+  },
+  "pages": {
+    "404": {
+      "seo": {
+        "title": "404 - Not found"
+      },
+      "cdn": {
+        "css": [],
+        "js": []
+      }
+    },
+    "homepage": {
+      "seo": {
+        "title": "Homepage",
+        "description": "Description"
+      },
+      "cdn": {
+        "css": [],
+        "js": []
+      }
+    },
+    "anotherPage": {
+      "seo": {
+        "title": "Another Page",
+        "description": "description"
+      },
+      "cdn": {
+        "css": [],
+        "js": []
+      }
+    }
+  }
+}

package/src/index.njk ADDED Viewed

@@ -0,0 +1,9 @@
+---
+title: homepage
+permalink: /
+layout: includes.njk
+---
+<!-- !IMPORTANT -->
+<!-- DO NOT ADD ANYTHING HERE -->
+<!-- YOU SHOULD CREATE A NEW COMPONENT.NJK INTO SRC/COMPONENTS AND INCLUDE THAT IN LAYOUTS/INCLUDES.NJK-->

package/src/js/modules/forms/form.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { showNotification } from "../notification.js";
+import { langKeys, currentLang } from "../langSwitcher.js";
+//==========================
+// FORM SUBMISSION MODULE
+//==========================
+export function initFormListener() {
+  document.querySelectorAll("form").forEach((form) => {
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const lang = langKeys[currentLang].forms;
+      if (!form.checkValidity()) {
+        form.classList.add("was-validated");
+        showNotification(lang.formInvalidFields, "error");
+        return;
+      }
+      showNotification(lang.emailSending, "info", -1);
+      fetch("/php/sendEmail.php", {
+        method: "POST",
+        body: new FormData(form),
+      })
+        .then((response) => {
+          return response.text();
+        })
+        .then((data) => {
+          if (data.trim() === "success") {
+            showNotification(lang.emailSuccess, "success");
+            form.reset();
+            form.classList.remove("was-validated");
+          } else {
+            console.error(data);
+            showNotification(lang.emailError, "error");
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+          showNotification(lang.emailError, "error");
+        });
+    });
+  });
+}

package/src/js/modules/forms/normalizePhoneNumber.js ADDED Viewed

@@ -0,0 +1,42 @@
+//==========================
+// PHONE NUMBER NORMALIZATION MODULE
+//==========================
+// Normalizes and attaches normalization to all existing and future tel inputs
+// Must be called inside DOMContentLoaded in the page's JS file
+export function initNormalizePhoneNumber() {
+  // Formats digits in groups of 3, 3 and 4 (e.g. 333 123 4567)
+  function formatDigits(digits) {
+    let formatted = "";
+    if (digits.length > 0) formatted += digits.slice(0, 3);
+    if (digits.length > 3) formatted += " " + digits.slice(3, 6);
+    if (digits.length > 6) formatted += " " + digits.slice(6, 10);
+    return formatted;
+  }
+  function normalize(input) {
+    if (!input) return;
+    let value = input.value.replace(/[^0-9+]/g, "");
+    if (value.startsWith("+")) {
+      value = "+" + value.slice(1).replace(/\+/g, "");
+      const prefix = value.slice(0, 3);
+      const digits = value.slice(3);
+      value = prefix + (digits ? " " + formatDigits(digits) : "");
+    } else {
+      value = value.replace(/\+/g, "");
+      value = formatDigits(value);
+    }
+    input.value = value;
+  }
+  document.querySelectorAll('input[type="tel"]').forEach(normalize);
+  document.addEventListener("input", ({ target }) => {
+    if (target.matches('input[type="tel"]')) normalize(target);
+  });
+}

package/src/js/modules/forms/textAreaAutoExpand.js ADDED Viewed

@@ -0,0 +1,38 @@
+//==========================
+// AUTO-EXPAND TEXTAREA MODULE
+//==========================
+export function initTextAreaAutoExpand() {
+  const MAX_ROWS = 10;
+  function setup(element) {
+    if (element.dataset.autoExpand) return;
+    element.dataset.autoExpand = "true";
+    element.style.resize = "none";
+    element.style.overflow = "hidden";
+    element.dataset.minRows = element.rows || 1;
+    element.addEventListener("input", () => expand(element));
+    if (element.value) expand(element);
+  }
+  function expand(element) {
+    element.rows = element.dataset.minRows;
+    while (element.scrollHeight > element.clientHeight && element.rows < MAX_ROWS) {
+      element.rows += 1;
+    }
+  }
+  document.querySelectorAll("textarea").forEach(setup);
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.matches("textarea")) setup(node);
+        node.querySelectorAll?.("textarea").forEach(setup);
+      }
+    }
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+}

package/src/js/modules/langSwitcher.js ADDED Viewed

@@ -0,0 +1,62 @@
+//==========================
+// LANG-SWITCHER MODULE
+//==========================
+export let currentLang = null;
+export let langKeys = null;
+async function loadLangKeys() {
+  if (langKeys) return langKeys;
+  const response = await fetch("/data/lang.json");
+  langKeys = await response.json();
+  return langKeys;
+}
+export async function initLangSwitcher() {
+  const data = await loadLangKeys();
+  const availableLangs = Object.keys(data);
+  const fallbackLang = document.documentElement.lang || availableLangs[0];
+  const initialLang = await getInitialLang(availableLangs, fallbackLang);
+  applyLanguage(initialLang, data);
+  document.querySelectorAll("input[name='lang-switcher']").forEach((radio) => {
+    if (radio.value === initialLang) radio.checked = true;
+    radio.addEventListener("change", () => {
+      const newLang = radio.value;
+      localStorage.setItem("language", newLang);
+      applyLanguage(newLang, data);
+    });
+  });
+}
+async function getInitialLang(availableLangs, fallbackLang) {
+  if (localStorage.getItem("language")) return localStorage.getItem("language");
+  const browserLang = navigator.language.slice(0, 2);
+  return availableLangs.includes(browserLang) ? browserLang : fallbackLang;
+}
+function getNestedValue(obj, path) {
+  return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+}
+function applyLanguage(lang, data) {
+  currentLang = lang;
+  langKeys = data;
+  const langData = data[lang];
+  document.querySelectorAll("[data-lang-key]").forEach((element) => {
+    const key = element.dataset.langKey;
+    const value = getNestedValue(langData, key);
+    if (value) element.textContent = value;
+  });
+  document.querySelectorAll("[data-lang-placeholder]").forEach((element) => {
+    const key = element.dataset.langPlaceholder;
+    const value = getNestedValue(langData, key);
+    if (value) element.setAttribute("placeholder", value);
+  });
+  document.documentElement.lang = lang;
+}

package/src/js/modules/notification.js ADDED Viewed

@@ -0,0 +1,39 @@
+//==========================
+// NOTIFICATION MODULE
+//==========================
+let currentNotification = null;
+export function showNotification(text, type = "info", duration = 5000) {
+    if (currentNotification) {
+        currentNotification.remove();
+        currentNotification = null;
+    }
+    const notificationBox = document.createElement("div");
+    notificationBox.classList.add("notificationBox", type);
+    const notificationText = document.createElement("span");
+    notificationText.textContent = text;
+    notificationBox.appendChild(notificationText);
+    if (duration === -1) {
+        const spinner = document.createElement("div");
+        spinner.classList.add("spinner");
+        notificationBox.appendChild(spinner);
+    }
+    document.body.appendChild(notificationBox);
+    currentNotification = notificationBox;
+    if (duration !== -1) {
+        setTimeout(() => {
+            if (!notificationBox.parentElement) return;
+            notificationBox.classList.add("fade-out");
+            notificationBox.addEventListener("transitionend", () => {
+                notificationBox.remove();
+                if (currentNotification === notificationBox) currentNotification = null;
+            }, { once: true });
+        }, duration);
+    }
+}

package/src/js/pages/404.js ADDED Viewed

@@ -0,0 +1,23 @@
+//==========================
+// JAVASCRIPT MODULES IMPORTS
+//==========================
+// Call inside DOMContentLoaded
+import { initLangSwitcher } from '../modules/langSwitcher.js';
+// Call anywhere
+import { showNotification } from '../modules/notification.js';
+// Uncomment to enable optional modules (call inside DOMContentLoaded)
+// import { initTextAreaAutoExpand } from '../modules/textAreaAutoExpand.js';
+// import { initNormalizePhoneNumber } from '../modules/normalizePhoneNumber.js';
+//==========================
+// "404" PAGE CUSTOM JAVASCRIPT
+//==========================
+document.addEventListener("DOMContentLoaded", () => {
+  initLangSwitcher();
+});
+showNotification("404 notification", "success", 3000);

package/src/js/pages/anotherPage.js ADDED Viewed

@@ -0,0 +1,23 @@
+//==========================
+// JAVASCRIPT MODULES IMPORTS
+//==========================
+// Call inside DOMContentLoaded
+import { initLangSwitcher } from '../modules/langSwitcher.js';
+// Call anywhere
+import { showNotification } from '../modules/notification.js';
+// Uncomment to enable optional modules (call inside DOMContentLoaded)
+// import { initTextAreaAutoExpand } from '../modules/textAreaAutoExpand.js';
+// import { initNormalizePhoneNumber } from '../modules/normalizePhoneNumber.js';
+//==========================
+// "another-page" PAGE CUSTOM JAVASCRIPT
+//==========================
+document.addEventListener("DOMContentLoaded", () => {
+  initLangSwitcher();
+});
+showNotification("another-page notification", "success", 3000);

package/src/js/pages/homepage.js ADDED Viewed

@@ -0,0 +1,25 @@
+//==========================
+// JAVASCRIPT MODULES IMPORTS
+//==========================
+// Call inside DOMContentLoaded
+import { initFormListener } from '../modules/forms/form.js';
+import { initLangSwitcher } from '../modules/langSwitcher.js';
+// Call anywhere
+import { showNotification } from '../modules/notification.js';
+// Uncomment to enable optional modules (call inside DOMContentLoaded)
+// import { initTextAreaAutoExpand } from '../modules/textAreaAutoExpand.js';
+// import { initNormalizePhoneNumber } from '../modules/normalizePhoneNumber.js';
+//==========================
+// "homepage" PAGE CUSTOM JAVASCRIPT
+//==========================
+document.addEventListener("DOMContentLoaded", () => {
+  initLangSwitcher();
+  initFormListener();
+});
+showNotification("homepage notification", "success", 3000);

package/src/robots.txt ADDED Viewed

@@ -0,0 +1,4 @@
+Sitemap: https://yoursite.com/sitemap.xml
+User-agent: *
+Disallow:

package/src/scss/modules/_animations.scss ADDED Viewed

@@ -0,0 +1,25 @@
+//==========================
+// CSS RULES FOR ANIMATIONS
+//==========================
+// Getting root rules from _root.scss
+@use 'root' as root;
+.fade-in {
+  animation: fadeIn 1s;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}

package/src/scss/modules/_footer.scss ADDED Viewed

@@ -0,0 +1,12 @@
+//==========================
+// 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;
+}

package/src/scss/modules/_global.scss ADDED Viewed

@@ -0,0 +1,40 @@
+//==========================
+// CSS RULES FOR THE ENTIRE SITE
+//==========================
+// 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";
+// @import "../modules/frameworks/uikit";
+@import "typography";
+@import "header";
+@import "footer";
+@import "animations";
+@import "mobile";
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+button {
+  cursor: pointer;
+}

package/src/scss/modules/_header.scss ADDED Viewed

@@ -0,0 +1,32 @@
+//==========================
+// CSS RULES FOR HEADER
+//==========================
+// Getting root rules from _root.scss
+@use 'root' as root;
+header {
+    height: root.$header-height;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: root.$header-padding-y root.$header-padding-x;
+    background-color: root.$primary;
+}
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+nav a {
+    padding: 10px;
+}
+.nav-links{
+    display: flex;
+    gap: 15px;
+}

package/src/scss/modules/_mobile.scss ADDED Viewed

@@ -0,0 +1,30 @@
+//==========================
+// CSS RULES FOR RESPONSIVE
+//==========================
+// Getting root rules from _root.scss
+@use 'root' as root;
+//==========================
+// MEDIA QUERIES
+//==========================
+@media (max-width: 1400px) {
+}
+@media (max-width: 1200px) {
+}
+@media (max-width: 992px) {
+}
+@media (max-width: 768px) {
+}
+@media (max-width: 576px) {
+}