nibula 1.6.0 → 1.6.2

package/src/frontend/components/welcome.njk

@@ -1,116 +1,116 @@
-<div class="layout-container layout-my-3">
-  <h1>Welcome to <span class="boilerplate-name">Nibula</span></h1>
-  <div class="slogan">The boilerplate you need, simplified</div>
-
-    <div id="content-welcome" class="tab-content active">
-      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
-        <a href="https://github.com/rhaastrake/nibula" 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>Explore the project and suggest improvements</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/nibula/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</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 class="prova">{{ test.prova }}</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;
-      .boilerplate-name {
-      color: #42b883;
-      font-weight: 600;
-    }
-  }
-
-  .slogan {
-    text-align: center;
-    color: #4b71a0;
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .card {
-    background: #11474b;
-    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;
-    h3 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      color: #cbd5e1;
-      letter-spacing: 0.01em;
-      margin: 0;
-    }
-    p {
-      font-size: 1rem;
-      color: #5d8dc7;
-      line-height: 1.6;
-      margin: 0;
-    }
-  }
-
-  .card:hover {
-    border-color: #42b883;
-    transform: translateY(-2px);
-    .card-link {
-      opacity: 1;
-    }
-  }
-
-  .card-icon {
-    width: 2rem;
-    height: 2rem;
-    color: #42b883;
-  }
-
-  .card-link {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 1rem;
-    color: #42b883;
-    opacity: 0.8;
-    transition: opacity 0.15s;
-    margin-top: auto;
-  }
+<div class="layout-container layout-my-3">
+  <h1>Welcome to <span class="boilerplate-name">Nibula</span></h1>
+  <div class="slogan">The boilerplate you need, simplified</div>
+
+    <div id="content-welcome" class="tab-content active">
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+        <a href="https://github.com/rhaastrake/nibula" 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>Explore the project and suggest improvements</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/nibula/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</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 class="prova">{{ test.prova }}</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;
+      .boilerplate-name {
+      color: #42b883;
+      font-weight: 600;
+    }
+  }
+
+  .slogan {
+    text-align: center;
+    color: #4b71a0;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .card {
+    background: #11474b;
+    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;
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #cbd5e1;
+      letter-spacing: 0.01em;
+      margin: 0;
+    }
+    p {
+      font-size: 1rem;
+      color: #5d8dc7;
+      line-height: 1.6;
+      margin: 0;
+    }
+  }
+
+  .card:hover {
+    border-color: #42b883;
+    transform: translateY(-2px);
+    .card-link {
+      opacity: 1;
+    }
+  }
+
+  .card-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #42b883;
+  }
+
+  .card-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 1rem;
+    color: #42b883;
+    opacity: 0.8;
+    transition: opacity 0.15s;
+    margin-top: auto;
+  }
 </style>

package/src/frontend/index.njk

@@ -1,9 +1,9 @@
----
-title: homepage
-permalink: /
-layout: page-components.njk
----
-
-<!-- !IMPORTANT -->
-<!-- DO NOT ADD ANYTHING HERE -->
+---
+title: homepage
+permalink: /
+layout: page-components.njk
+---
+
+<!-- !IMPORTANT -->
+<!-- DO NOT ADD ANYTHING HERE -->
 <!-- You should create a new component.njk into src/components and include that in layouts/page-components.njk -->

package/src/frontend/js/global.js

@@ -1,11 +1,11 @@
-// import { initExampleModule } from "./modules/exampleModule.js";
-
-function initGlobal() {
-    // initExampleModule();
-}
-
-// Global logic here
-
-// Do not touch
-// This instruction starts global.js itself
+// import { initExampleModule } from "./modules/exampleModule.js";
+
+function initGlobal() {
+    // initExampleModule();
+}
+
+// Global logic here
+
+// Do not touch
+// This instruction starts global.js itself
 document.addEventListener('DOMContentLoaded', initGlobal);

package/src/frontend/js/modules/exampleModule.js

@@ -1,3 +1,3 @@
-export function initExampleModule() {
-    // Module logic here
+export function initExampleModule() {
+    // Module logic here
 }

package/src/frontend/js/pages/404.js

@@ -1,9 +1,9 @@
-import '../global.js';
-
-// import { initExampleModule } from '../modules/exampleModule';
-
-document.addEventListener("DOMContentLoaded", () => {
-    // initExampleModule();
-});
-
+import '../global.js';
+
+// import { initExampleModule } from '../modules/exampleModule';
+
+document.addEventListener("DOMContentLoaded", () => {
+    // initExampleModule();
+});
+
 // Page logic here

package/src/frontend/js/pages/homepage.js

@@ -1,9 +1,9 @@
-import '../global.js';
-
-// import { initExampleModule } from '../modules/exampleModule';
-
-document.addEventListener("DOMContentLoaded", () => {
-    // initExampleModule();
-});
-
+import '../global.js';
+
+// import { initExampleModule } from '../modules/exampleModule';
+
+document.addEventListener("DOMContentLoaded", () => {
+    // initExampleModule();
+});
+
 // Page logic here

package/src/frontend/layouts/base.njk

@@ -1,137 +1,136 @@
-<!-- This is the base of every page that you will create -->
-
-<!DOCTYPE html>
-<html lang="{{ site.lang or 'en' }}" data-bs-theme="{{ site.theme or 'light' }}">
-
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="color-scheme" content="{{ site.theme or 'light' }}">
-
-      {#╔══════════════════╗
-        ║    PAGE DATA     ║
-        ╚══════════════════╝#}
-
-        {% set pageKey = title %}
-        {% set pageData = pages[pageKey] %}
-
-      {#╔══════════════════╗
-        ║       SEO        ║
-        ╚══════════════════╝#}
-
-        <link rel="canonical" href="{{ pageData.seo.canonical or (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="{{ pageData.seo.keywords or site.keywords }}">
-        <meta name="author" content="{{ site.author }}">
-        <meta name="theme-color" content="{{ site.theme }}">
-
-        {% if pageData.seo.noindex %}
-        <meta name="robots" content="noindex, follow">
-        {% endif %}
-
-        {# 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 }}">
-
-      {#╔══════════════════════════════════════════╗
-        ║   JSON-LD — Structured data for SEO/AI   ║
-        ╚══════════════════════════════════════════╝#}
-
-        <script type="application/ld+json">
-        {
-            "@context": "https://schema.org",
-            "@type": "WebPage",
-            "name": {{ (pageData.seo.title or title or site.title) | dump }},
-            "description": {{ (pageData.seo.description or site.description) | dump }},
-            "url": {{ (site.url + page.url) | dump }},
-            "author": {
-                "@type": "Person",
-                "name": {{ site.author | dump }}
-            },
-            "publisher": {
-                "@type": "Organization",
-                "name": {{ site.site_name | dump }},
-                "logo": {
-                    "@type": "ImageObject",
-                    "url": {{ (site.url + site.logo) | dump }}
-                }
-            }
-        }
-        </script>
-
-      {#╔══════════════════╗
-        ║     FAVICON      ║
-        ╚══════════════════╝#}
-
-        <link rel="icon" type="image/svg+xml" href="{{ '/assets/brand/favicon.svg' | url }}">
-        <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/brand/favicon-32.png' | url }}">
-        <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/brand/apple-touch-icon.png' | url }}">
-
-      {#╔══════════════════╗
-        ║       CSS        ║
-        ╚══════════════════╝#}
-
-        {# Page CSS #}
-        <link rel="stylesheet" href="{{ ('/css/pages/' + title + '.css') | url }}"/>
-
-        {# 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>
-
-        {% include "global/header.njk" %}
-
-        <main>
-            {{ content | safe }}
-        </main>
-
-        {% include "global/footer.njk" %}
-
-      {#╔══════════════════╗
-        ║     SCRIPTS      ║
-        ╚══════════════════╝#}
-
-        {# Framework — uncomment the one you are using #}
-        
-        {# Bootstrap JS #}
-        <script src="{{ '/js/bootstrap.bundle.min.js' | url }}" defer></script>
-
-        {# Foundation JS #}
-        {# <script src="{{ '/js/foundation.min.js' | url }}" defer></script> #}
-
-        {# UIkit JS #}
-        {# <script src="{{ '/js/uikit.min.js' | url }}" defer></script> #}
-        {# <script src="{{ '/js/uikit-icons.min.js' | url }}" 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') | url }}"></script>
-
-    </body>
-
+<!-- This is the base of every page that you will create -->
+
+<!DOCTYPE html>
+<html lang="{{ site.lang or 'en' }}" data-theme="{{ site.theme or 'light' }}" data-bs-theme="{{ site.theme or 'light' }}">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="color-scheme" content="{{ site.theme or 'light' }}">
+
+      {#╔══════════════════╗
+        ║    PAGE DATA     ║
+        ╚══════════════════╝#}
+
+        {% set pageKey = title %}
+        {% set pageData = pages[pageKey] %}
+
+      {#╔══════════════════╗
+        ║       SEO        ║
+        ╚══════════════════╝#}
+
+        <link rel="canonical" href="{{ pageData.seo.canonical or (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="{{ pageData.seo.keywords or site.keywords }}">
+        <meta name="author" content="{{ site.author }}">
+        <meta name="theme-color" content="{{ site.theme }}">
+
+        {% if pageData.seo.noindex %}
+        <meta name="robots" content="noindex, follow">
+        {% endif %}
+
+        {# Open Graph #}
+        <meta property="og:title" content="{{ pageData.seo.title or title or site.title }}">
+        <meta property="og:description" content="{{ pageData.seo.description or site.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 or title or site.title }}">
+        <meta name="twitter:description" content="{{ pageData.seo.description or site.description }}">
+        <meta name="twitter:image" content="{{ site.url }}{{ site.logo }}">
+
+      {#╔══════════════════════════════════════════╗
+        ║   JSON-LD — Structured data for SEO/AI   ║
+        ╚══════════════════════════════════════════╝#}
+
+        <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            "name": {{ (pageData.seo.title or title or site.title) | dump }},
+            "description": {{ (pageData.seo.description or site.description) | dump }},
+            "url": {{ (site.url + page.url) | dump }},
+            "author": {
+                "@type": "Person",
+                "name": {{ site.author | dump }}
+            },
+            "publisher": {
+                "@type": "Organization",
+                "name": {{ site.site_name | dump }},
+                "logo": {
+                    "@type": "ImageObject",
+                    "url": {{ (site.url + site.logo) | dump }}
+                }
+            }
+        }
+        </script>
+
+      {#╔══════════════════╗
+        ║     FAVICON      ║
+        ╚══════════════════╝#}
+
+        <link rel="icon" type="image/svg+xml" href="{{ '/assets/brand/favicon.svg' | url }}">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/brand/favicon-32.png' | url }}">
+        <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/brand/apple-touch-icon.png' | url }}">
+
+      {#╔══════════════════╗
+        ║       CSS        ║
+        ╚══════════════════╝#}
+
+        {# Page CSS #}
+        <link rel="stylesheet" href="{{ ('/css/pages/' + title + '.css') | url }}"/>
+
+        {# 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>
+
+        {% include "global/header.njk" %}
+
+        <main>
+            {{ content | safe }}
+        </main>
+
+        {% include "global/footer.njk" %}
+
+      {#╔══════════════════╗
+        ║     SCRIPTS      ║
+        ╚══════════════════╝#}
+
+        {# Framework — uncomment the one you are using #}
+        {# Bootstrap JS #}
+        <script src="{{ '/js/bootstrap.bundle.min.js' | url }}" defer></script>
+
+        {# Foundation JS #}
+        {# <script src="{{ '/js/foundation.min.js' | url }}" defer></script> #}
+
+        {# UIkit JS #}
+        {# <script src="{{ '/js/uikit.min.js' | url }}" defer></script> #}
+        {# <script src="{{ '/js/uikit-icons.min.js' | url }}" 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') | url }}"></script>
+
+    </body>
+
 </html>

package/src/frontend/layouts/page-components.njk

@@ -1,14 +1,14 @@
----
-layout: base.njk
----
-
-<!-- NJK (HTML) components per page -->
- 
-{% if title == "homepage" %}
-{% include "welcome.njk" ignore missing %}
-
-{% else %}
-<!-- You should not touch this else statement -->
-{% include "404/_404.njk" %}
-{{ content | safe }}
+---
+layout: base.njk
+---
+
+<!-- NJK (HTML) components per page -->
+ 
+{% if title == "homepage" %}
+{% include "welcome.njk" ignore missing %}
+
+{% else %}
+<!-- You should not touch this else statement -->
+{% include "404/_404.njk" %}
+{{ content | safe }}
 {% endif %}