create-berna-stencil 1.0.1

package/.eleventy.js

@@ -0,0 +1,81 @@
+const esbuild = require("esbuild");
+const glob = require("glob");
+const Image = require("@11ty/eleventy-img");
+const fs = require("fs");
+const path = require("path");
+
+const OUTPUT_DIR = "out";
+
+module.exports = function (eleventyConfig) {
+
+  // =====================================================
+  // ESBUILD — Bundles and minifies JS files before build
+  // =====================================================
+  eleventyConfig.on("eleventy.before", async () => {
+    const entryPoints = glob.sync("src/js/pages/*.js");
+    await esbuild.build({
+      entryPoints,
+      bundle: true,
+      outdir: `${OUTPUT_DIR}/js/pages`,
+      minify: true,
+    });
+  });
+
+  // =====================================================
+  // PASSTHROUGH — Static files
+  // =====================================================
+  eleventyConfig.addPassthroughCopy("src/api");
+  eleventyConfig.addPassthroughCopy("src/assets");
+  eleventyConfig.addPassthroughCopy("src/robots.txt");
+
+  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
+  });
+
+  eleventyConfig.addPassthroughCopy({ "src/data/lang.json": "data/lang.json" });
+
+  // =====================================================
+  // ELEVENTY IMAGE — Responsive images
+  // =====================================================
+  eleventyConfig.addShortcode("image", async function (src, alt) {
+    let metadata = await Image(src, {
+      widths: [320, 480, 720, 1280, 1920, 2048, 2560, 3840, 4096, 7680],
+      formats: ["webp", "jpeg"],
+      outputDir: `${OUTPUT_DIR}/assets/images/`,
+      urlPath: "/assets/images/",
+    });
+
+    return Image.generateHTML(metadata, {
+      alt,
+      sizes: "(max-width: 768px) 100vw, 50vw",
+      loading: "lazy",
+      decoding: "async",
+    });
+  });
+
+  // =====================================================
+  // WATCH & DIRECTORY CONFIG
+  // =====================================================
+  eleventyConfig.addWatchTarget("./src/scss");
+
+  return {
+    dir: {
+      input: "src",
+      output: OUTPUT_DIR,
+      includes: "components",
+      layouts: "components/layouts",
+      data: "data",
+    },
+  };
+};

package/.eleventyignore

@@ -0,0 +1,4 @@
+src/assets/**
+src/js/**
+src/scss/**
+src/api/**

package/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+out/

package/README.md

@@ -0,0 +1,31 @@
+# 🏗️ Berna-Stencil
+A professional boilerplate for Eleventy, lightweight and structure-focused, ready to scale.
+
+![Version](https://img.shields.io/badge/version-1.0.0-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+![Eleventy](https://img.shields.io/badge/11ty-v3.1.2-black)
+
+## Prerequisites
+* **Node.js**: v18.0.0 or higher
+
+## Installation
+* Open your IDE (e.g. Visual Studio Code), open the folder that contains your websites and open a new terminal
+* Run the command for your system to download the project and install everything:
+   #### Windows
+   ```bash
+   if (!(Test-Path "$env:APPDATA\npm")) { mkdir "$env:APPDATA\npm" }; $DIR="my-site"; npx -y degit rhaastrake/berna-stencil $DIR; cd $DIR;
+   ```
+   #### MacOS / Linux
+   ```bash
+   DIR="my-site"; npx -y degit rhaastrake/berna-stencil $DIR && cd $DIR
+   ```
+
+* Install all the node_modules
+   ```bash
+   npm install
+   ```
+
+* Run the command to launch the live server and build the site, then visit localhost:8080:
+   ```bash
+   npm run serve
+   ```

package/bin/create.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = process.argv[2] ? path.resolve(process.argv[2]) : process.cwd();
+const templateDir = path.join(__dirname, '..');
+
+const COPY_TARGETS = [
+    'src',
+    'tools',
+    '.eleventy.js',
+    '.eleventyignore',
+    '.gitignore',
+    'README.md',
+];
+
+const PROJECT_PACKAGE = {
+    name: path.basename(targetDir),
+    version: '1.0.1',
+    private: true,
+    scripts: {
+        'build:css': 'sass src/scss:out/css --no-source-map --style=compressed --quiet',
+        'build:js': 'esbuild "src/js/pages/*.js" --bundle --outdir=out/js/pages --minify',
+        'build:11ty': 'eleventy',
+        'build': 'npm run build:css && npm run build:js && npm run build:11ty',
+        'serve:css': 'sass --watch src/scss:out/css --no-source-map --quiet',
+        'serve:js': 'esbuild "src/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',
+    },
+    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',
+    },
+};
+
+const { writeSync } = require('fs');
+
+function log(msg) {
+    writeSync(1, msg + '\n');
+}
+
+function copyRecursive(src, dest) {
+    const stat = fs.statSync(src);
+    if (stat.isDirectory()) {
+        fs.mkdirSync(dest, { recursive: true });
+        for (const child of fs.readdirSync(src)) {
+            copyRecursive(path.join(src, child), path.join(dest, child));
+        }
+    } else {
+        fs.mkdirSync(path.dirname(dest), { recursive: true });
+        fs.copyFileSync(src, dest);
+    }
+}
+
+if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+}
+
+log(`\n>> Creating berna-stencil project in ${targetDir}\n`);
+
+for (const target of COPY_TARGETS) {
+    const src = path.join(templateDir, target);
+    const dest = path.join(targetDir, target);
+    if (fs.existsSync(src)) {
+        copyRecursive(src, dest);
+        log(`+ ${target}`);
+    }
+}
+
+fs.writeFileSync(
+    path.join(targetDir, 'package.json'),
+    JSON.stringify(PROJECT_PACKAGE, null, 2)
+);
+log('+ package.json');
+
+log(`\n>> Done! Now run:\n`);
+if (process.argv[2]) {
+    log(`cd ${process.argv[2]}`);
+}
+log('npm install');
+log('npm run serve\n');

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "create-berna-stencil",
+  "version": "1.0.1",
+  "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
+  "keywords": [
+    "eleventy",
+    "11ty",
+    "boilerplate",
+    "starter",
+    "scss",
+    "esbuild",
+    "bootstrap",
+    "bulma",
+    "foundation",
+    "uikit",
+    "static-site",
+    "nunjucks"
+  ],
+  "author": "Michele Garofalo",
+  "license": "MIT",
+  "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/",
+    "src/",
+    "tools/",
+    ".eleventy.js",
+    ".eleventyignore",
+    ".gitignore",
+    "README.md"
+  ],
+  "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/scss:out/css --no-source-map --style=compressed --quiet",
+    "build:js": "esbuild \"src/js/pages/*.js\" --bundle --outdir=out/js/pages --minify",
+    "build:11ty": "eleventy",
+    "build": "npm run build:css && npm run build:js && npm run build:11ty",
+    "serve:css": "sass --watch src/scss:out/css --no-source-map --quiet",
+    "serve:js": "esbuild \"src/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"
+  }
+}

package/src/404.njk

@@ -0,0 +1,16 @@
+---
+title: "404"
+permalink: 404.html
+layout: base.njk
+---
+
+<!-- !IMPORTANT -->
+<!-- This is the only page that you need to modify statically -->
+
+<div class="container fade-in">
+  <h1 data-lang-key="error404Message"></h1>
+  <div><a href="/" data-lang-key="error404Return"></a></div>
+</div>
+
+{# You can also add the includes you need here below
+{% include "_exampleComponent.njk" %} #}

package/src/_routes/another-page.njk

@@ -0,0 +1,9 @@
+---
+title: "anotherPage"
+permalink: "/another-page/"
+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/api/configExample.php

@@ -0,0 +1,28 @@
+<?php
+
+// IMPORTANT!
+// You should fill this file with your data and rename it to config.php
+
+// SMTP Configuration
+
+// Email address you want to send from (must be configured with the SMTP provider)
+define('MAIL_USERNAME', 'youremail@gmail.com');
+
+// Password for the above email address (or an app-specific password if using Gmail with 2FA)
+define('MAIL_PASSWORD', 'password');
+
+// SMPT server host (e.g., smtp.gmail.com for Gmail)
+define('MAIL_HOST', 'smtp.gmail.com');
+
+// SMPT port (587 for TLS, 465 for SSL)
+define('MAIL_PORT', 587);
+
+// Email address you want to send to (you can use the same as MAIL_USERNAME if you want to send to yourself)
+define('MAIL_TO_ADDRESS', 'youremail@gmail.com');
+
+// From: name that will appear in the recipient's inbox
+define('MAIL_FROM_NAME', 'Your website');
+
+// To: name that will appear in the recipient's inbox
+define('MAIL_TO_NAME', 'Receiver');
+?>

package/src/api/sendEmail.php

@@ -0,0 +1,131 @@
+<?php
+
+//==========================
+// SECURITY: METHOD CHECK
+//==========================
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo 'Method not allowed (PHP RESPONSE)';
+    exit;
+}
+
+
+//==========================
+// SECURITY: ORIGIN CHECK
+//==========================
+
+// Do not forget to add a ,
+$allowedDomains = [
+    'www.yourorigin.com',
+    // 'www.anotherorigin.com',
+];
+
+$origin  = $_SERVER['HTTP_ORIGIN'] ?? '';
+$referer = $_SERVER['HTTP_REFERER'] ?? '';
+
+$host = parse_url($origin ?: $referer, PHP_URL_HOST);
+
+if (!$host || !in_array($host, $allowedDomains)) {
+    http_response_code(403);
+    echo 'Forbidden origin (PHP RESPONSE)';
+    exit;
+}
+
+
+//==========================
+// DEPENDENCIES
+//==========================
+
+use PHPMailer\PHPMailer;
+use PHPMailer\Exception;
+
+require __DIR__ . '/vendor/autoload.php';
+require __DIR__ . '/config.php';
+
+
+//==========================
+// SANITIZATION FUNCTIONS
+//==========================
+
+function clean($value) {
+    return htmlspecialchars(trim($value ?? ''), ENT_QUOTES, 'UTF-8');
+}
+
+function safeNum($value) {
+    return filter_var($value ?? '', FILTER_SANITIZE_NUMBER_INT);
+}
+
+
+//==========================
+// POST VARIABLES
+//==========================
+
+// If the variable name exists, it will be concatenated in the body of the mail
+// If it does not exist, it doesn't matter
+
+$formType = clean($_POST['formType'] ?? '');
+
+$name = clean($_POST['name'] ?? '');
+$phoneNumber = safeNum($_POST['phoneNumber'] ?? '');
+
+
+//==========================
+// MAIL SETUP
+//==========================
+
+$mail = new PHPMailer(true);
+
+try {
+    $mail->isSMTP();
+    $mail->Host       = MAIL_HOST;
+    $mail->SMTPAuth   = true;
+    $mail->Username   = MAIL_USERNAME;
+    $mail->Password   = MAIL_PASSWORD;
+    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
+    $mail->Port       = MAIL_PORT;
+    $mail->CharSet    = 'UTF-8';
+    $mail->Encoding   = 'base64';
+
+    $mail->setFrom(MAIL_USERNAME, MAIL_FROM_NAME);
+    $mail->addAddress(MAIL_TO_ADDRESS, MAIL_TO_NAME);
+
+    $mail->isHTML(true);
+
+
+    //==========================
+    // MAIL BODY
+    //==========================
+
+    $body  = "";
+
+
+    //==========================
+    // DATA CHECKS AND CONCATENATION
+    //==========================
+
+    if (!empty($name)) {
+        $body .= "<p><strong>Name:</strong> {$name}</p>";
+    }
+    if (!empty($phoneNumber)) {
+        $body .= "<p><strong>Phone Number:</strong> {$phoneNumber}</p>";
+    }
+
+    //==========================
+    // MAIL CONTENT
+    //==========================
+
+    $mail->Subject = "New form submission ({$formType})";
+
+    $mail->Body    = $body;
+    $mail->AltBody = strip_tags(str_replace('<br>', "\n", $body));
+
+    $mail->send();
+
+    http_response_code(200);
+    echo "success";
+
+} catch (Exception $e) {
+    http_response_code(500);
+    echo "{$mail->ErrorInfo}";
+}

package/src/assets/brand/favicon.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4115 4094 c-89 -20 -232 -88 -312 -148 -181 -137 -273 -342 -273
+-604 0 -219 128 -459 353 -664 263 -240 347 -334 403 -451 109 -228 39 -489
+-159 -585 -79 -38 -146 -52 -256 -52 -97 0 -138 10 -192 49 -84 59 -111 136
+-111 311 1 105 6 145 32 250 33 131 47 249 36 295 -16 63 -169 74 -276 20
+-134 -68 -289 -290 -347 -495 -27 -99 -25 -318 6 -425 25 -89 86 -210 133
+-264 94 -107 240 -195 380 -231 421 -105 942 41 1226 345 148 158 218 306 242
+512 25 217 -30 446 -151 624 -54 80 -191 222 -303 314 -47 39 -85 73 -86 78 0
+4 8 7 18 7 9 0 54 13 99 29 174 60 304 196 349 366 31 113 9 324 -44 435 -58
+120 -206 234 -360 276 -84 23 -318 28 -407 8z m348 -407 c82 -41 102 -74 101
+-167 -1 -126 -55 -253 -163 -384 -30 -36 -58 -66 -62 -66 -10 0 -150 149 -200
+215 -51 67 -102 161 -131 245 l-19 55 51 47 c71 66 143 89 270 85 81 -2 104
+-7 153 -30z"/>
+<path d="M1272 4089 c-123 -17 -291 -64 -406 -115 -240 -105 -461 -289 -527
+-439 -24 -53 -18 -82 17 -91 52 -13 121 8 279 82 280 134 441 180 664 191 275
+13 500 -56 597 -184 63 -82 78 -142 78 -293 0 -173 -27 -273 -98 -357 -25 -30
+-27 -30 -78 -21 -73 14 -281 4 -347 -17 -136 -42 -183 -165 -100 -259 17 -20
+54 -45 87 -58 52 -21 74 -23 236 -24 l179 0 29 -35 c16 -19 47 -70 68 -114 50
+-101 71 -217 71 -390 1 -197 -28 -282 -133 -392 -72 -74 -205 -146 -313 -168
+-113 -24 -286 -19 -434 11 -69 14 -130 29 -135 34 -10 10 17 511 35 655 6 44
+35 192 65 329 116 528 158 835 136 981 -13 79 -24 95 -66 95 -73 0 -183 -92
+-268 -224 -194 -302 -402 -1027 -423 -1473 -3 -65 -8 -136 -11 -159 l-5 -40
+-102 23 c-127 29 -207 30 -230 5 -23 -25 -21 -87 4 -139 39 -80 189 -197 352
+-273 158 -74 446 -163 629 -194 386 -67 797 -21 1081 120 163 81 273 175 363
+311 103 155 135 295 116 518 -13 158 -40 248 -104 355 -52 87 -182 216 -290
+286 l-78 51 63 41 c292 190 399 490 296 829 -84 276 -354 466 -751 528 -124
+20 -444 28 -546 14z"/>
+</g>
+</svg>

package/src/assets/brand/logo.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4115 4094 c-89 -20 -232 -88 -312 -148 -181 -137 -273 -342 -273
+-604 0 -219 128 -459 353 -664 263 -240 347 -334 403 -451 109 -228 39 -489
+-159 -585 -79 -38 -146 -52 -256 -52 -97 0 -138 10 -192 49 -84 59 -111 136
+-111 311 1 105 6 145 32 250 33 131 47 249 36 295 -16 63 -169 74 -276 20
+-134 -68 -289 -290 -347 -495 -27 -99 -25 -318 6 -425 25 -89 86 -210 133
+-264 94 -107 240 -195 380 -231 421 -105 942 41 1226 345 148 158 218 306 242
+512 25 217 -30 446 -151 624 -54 80 -191 222 -303 314 -47 39 -85 73 -86 78 0
+4 8 7 18 7 9 0 54 13 99 29 174 60 304 196 349 366 31 113 9 324 -44 435 -58
+120 -206 234 -360 276 -84 23 -318 28 -407 8z m348 -407 c82 -41 102 -74 101
+-167 -1 -126 -55 -253 -163 -384 -30 -36 -58 -66 -62 -66 -10 0 -150 149 -200
+215 -51 67 -102 161 -131 245 l-19 55 51 47 c71 66 143 89 270 85 81 -2 104
+-7 153 -30z"/>
+<path d="M1272 4089 c-123 -17 -291 -64 -406 -115 -240 -105 -461 -289 -527
+-439 -24 -53 -18 -82 17 -91 52 -13 121 8 279 82 280 134 441 180 664 191 275
+13 500 -56 597 -184 63 -82 78 -142 78 -293 0 -173 -27 -273 -98 -357 -25 -30
+-27 -30 -78 -21 -73 14 -281 4 -347 -17 -136 -42 -183 -165 -100 -259 17 -20
+54 -45 87 -58 52 -21 74 -23 236 -24 l179 0 29 -35 c16 -19 47 -70 68 -114 50
+-101 71 -217 71 -390 1 -197 -28 -282 -133 -392 -72 -74 -205 -146 -313 -168
+-113 -24 -286 -19 -434 11 -69 14 -130 29 -135 34 -10 10 17 511 35 655 6 44
+35 192 65 329 116 528 158 835 136 981 -13 79 -24 95 -66 95 -73 0 -183 -92
+-268 -224 -194 -302 -402 -1027 -423 -1473 -3 -65 -8 -136 -11 -159 l-5 -40
+-102 23 c-127 29 -207 30 -230 5 -23 -25 -21 -87 4 -139 39 -80 189 -197 352
+-273 158 -74 446 -163 629 -194 386 -67 797 -21 1081 120 163 81 273 175 363
+311 103 155 135 295 116 518 -13 158 -40 248 -104 355 -52 87 -182 216 -290
+286 l-78 51 63 41 c292 190 399 490 296 829 -84 276 -354 466 -751 528 -124
+20 -444 28 -546 14z"/>
+</g>
+</svg>

package/src/components/exampleComponent.njk

@@ -0,0 +1,12 @@
+<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">
+    <input type="radio" class="btn-check" name="lang-switcher" id="lang-en" value="en"/>
+    <label class="btn btn-outline-primary" for="lang-en" data-lang-key="enLangName"></label>
+
+    <input type="radio" class="btn-check" name="lang-switcher" id="lang-it" value="it"/>
+    <label class="btn btn-outline-primary" for="lang-it" data-lang-key="itLangName"></label>
+  </div>
+</div>

package/src/components/global/footer.njk

@@ -0,0 +1,32 @@
+<footer>
+  <div class="row">
+    <div class="col-lg-4">
+      <h6 class="mb-3">{{ site.title }}</h6>
+      <p>{{ site.description }}</p>
+    </div>
+  </div>
+
+  <hr class="my-3" />
+
+  <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>
+</footer>

package/src/components/global/header.njk

@@ -0,0 +1,15 @@
+<header>
+  <nav>
+      <a class="logo" href="/">
+        <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>
+    </div>
+    <div class="nav-links">
+      <a class="btn btn-primary" href="/">ExtraBtn1</a>
+      <a class="btn btn-primary" href="/">ExtraBtn2</a>
+    </div>
+  </nav>
+</header>