Merge pull request #371 from gethinode/markdumay-patch-2

Update tested nodejs versions

.eslintignore

@@ -1,5 +1,5 @@
+assets/js/critical/color.js
 assets/js/analytics.js
-assets/js/color.js
 assets/js/flexsearch.js
 assets/js/vendor
 node_modules

.github/release.yml

@@ -0,0 +1,27 @@
+changelog:
+  exclude:
+    labels:
+      - skip-changelog
+  categories:
+    - title: ❗ Breaking Changes
+      labels:
+        - Semver-Major
+        - breaking-change
+    - title: 🚀 Highlights
+      labels:
+        - release-highlight
+    - title: 🎉 New Features
+      labels:
+        - Semver-Minor
+        - enhancement
+    - title: 🐛 Bug fixes
+      labels:
+        - fix
+        - bugfix
+        - bug
+    - title: 📦 Dependencies
+      labels:
+        - dependencies
+    - title: 🧰 Other Changes
+      labels:
+        - "*"

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     runs-on: ${{ matrix.os }}

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.github/workflows/update.yml

@@ -0,0 +1,37 @@
+name: Update Hugo Dependencies
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 3 * * *' # run daily at 03:00 AM
+
+permissions:
+  pull-requests: write
+
+jobs:
+  update-dep:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: npm ci
+      - name: Update Hugo module dependencies
+        run: npm run mod:update
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.HUGO_MOD_PR }}
+          commit-message: 'fix: update Hugo module dependencies'
+          branch: hugo-mod-dependencies
+          delete-branch: true
+          title: 'Update Hugo module dependencies'
+          body: >
+            This PR is auto-generated by 
+            [create-pull-request](https://github.com/peter-evans/create-pull-request).
+          labels: dependencies

.gitignore

@@ -1,3 +1,4 @@
+/_vendor
 /public
 resources/
 node_modules/

README.md

@@ -9,25 +9,31 @@
 <!-- Badges -->
 <p align="center">
     <a href="https://gohugo.io" alt="Hugo website">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
+    </a>
+    <a href="https://gethinode.com" alt="Hinode theme">
+        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    </a>
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
     </a>
     <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
     </a>
     <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/gethinode/hinode" />
+        <img src="https://img.shields.io/github/license/gethinode/hinode">
     </a>
 </p>
 
@@ -50,10 +56,11 @@
 - [PageSpeed Insights][pagespeed]
 - [Mozilla Observatory][observatory]
 
-Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme uses [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
+Hinode is a clean documentation and blog theme for [Hugo][hugo], an open-source static site generator. Based on the [Bootstrap 5][bootstrap] framework, the rendered site is fast, secure, and responsive. Hinode uses [FlexSearch][flexsearch] to enable full text search across your site. Finally, the theme supports [Node Package Manager][npm] to automate the build process and to keep track of dependencies.
 
 Additional features include:
 
+- Flexible configuration of Hugo modules
 - Switching between light mode and dark mode
 - Support for multiple languages
 - Reusable Bootstrap components through configurable shortcodes and partials
@@ -75,10 +82,10 @@ Start a new Hinode project in three steps:
 
 1. Create a new site
 
-    Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
+    Hinode is available as a [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
 
     ```bash
-    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
     ```
 
     Use the main theme if you intend to customize the base code:
@@ -120,7 +127,7 @@ Hinode is inspired by the following themes:
 
 ## License
 
-The `hinode` and `child` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode` and `template` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -143,5 +150,5 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [demo]: https://demo.gethinode.com/
 [license]: https://github.com/gethinode/hinode/blob/main/LICENSE
 [repository]: https://github.com/gethinode/hinode.git
-[repository_child]: https://github.com/gethinode/child.git
+[repository_template]: https://github.com/gethinode/template.git
 [website]: https://gethinode.com/

assets/js/alert.js

@@ -0,0 +1,14 @@
+const alert = document.getElementById('page-alert')
+const closeBtn = document.getElementById('page-alert-btn-close')
+if (alert !== null && closeBtn !== null) {
+  const version = alert.getAttribute('data-page-alert-version') || 'unknown'
+  const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
+  if (hideAlert) {
+    alert.classList.add('d-none')
+  }
+
+  closeBtn.addEventListener('click', () => {
+    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    alert.classList.add('d-none')
+  })
+}

assets/js/clipboard.js

@@ -14,10 +14,12 @@ const addCopyButtons = (clipboard) => {
     // 2. Create a button that will trigger a copy operation
     const button = document.createElement('button')
     button.className = 'clipboard-button'
+    button.setAttribute('data-toast-target', 'toast-copied-code-message')
     button.type = 'button'
     button.innerHTML = svgCopy
     button.addEventListener('click', () => {
-      clipboard.writeText(codeBlock.innerText).then(
+      const text = codeBlock.innerText.split('\n').filter(Boolean).join('\n')
+      clipboard.writeText(text).then(
         () => {
           button.blur()
           button.innerHTML = svgCheck
@@ -36,3 +38,10 @@ const addCopyButtons = (clipboard) => {
 if (navigator && navigator.clipboard) {
   addCopyButtons(navigator.clipboard)
 }
+
+document.querySelectorAll('[data-clipboard]').forEach(trigger => {
+  const text = trigger.getAttribute('data-clipboard')
+  trigger.addEventListener('click', () => {
+    navigator.clipboard.writeText(text)
+  })
+})

assets/js/critical/color.js

@@ -1,3 +1,5 @@
+{{- if site.Params.main.enableDarkMode -}}
+
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
  * Copyright 2011-2022 The Bootstrap Authors
@@ -68,3 +70,5 @@
       })
   })
 })()
+
+{{- end -}}

assets/js/flexsearch.js

@@ -1,164 +0,0 @@
-{{- $search := default true site.Params.navigation.search -}}
-{{- if $search -}}
-  var search = document.getElementById('search');
-  var suggestions = document.getElementById('suggestions');
-  var index = new FlexSearch.Document({
-    tokenize: "forward",
-    cache: 100,
-    document: {
-      id: "id",
-      tag: "tag",
-      store: ["href", "title", "description"],
-      index: ["title", "description", "content"]
-    }
-  });
-
-  /*
-  Source:
-    - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-    - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-  */
-  function initIndex() {
-    // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-    // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language;
-    //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
-    {{ $len := (len $list) -}}
-
-    index.add(
-      {{ range $index, $element := $list -}}
-        {
-          id: {{ $index }},
-          tag: "{{ .Lang }}",
-          href: "{{ .RelPermalink }}",
-          title: {{ .Title | jsonify }},
-          {{ with .Description -}}
-            description: {{ . | jsonify }},
-          {{ else -}}
-            description: {{ .Summary | plainify | jsonify }},
-          {{ end -}}
-          content: {{ .Plain | jsonify }}
-        })
-        {{ if ne (add $index 1) $len -}}
-          .add(
-        {{ end -}}
-      {{ end -}}
-    ;
-
-    search.addEventListener('input', showResults, true);
-  }
-   
-  function hideSuggestions(e) {
-    var isClickInsideElement = suggestions.contains(e.target);
-
-    if (!isClickInsideElement) {
-      suggestions.classList.add('d-none');
-    }
-  }
-
-  /*
-  Source:
-    - https://raw.githubusercontent.com/h-enk/doks/master/assets/js/index.js
-  */
-  function inputFocus(e) {
-    if (e.ctrlKey && e.key === '/' ) {
-      e.preventDefault();
-      search.focus();
-    }
-    if (e.key === 'Escape' ) {
-      search.blur();
-      suggestions.classList.add('d-none');
-    }
-  }
-
-  /*
-  Source:
-    - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-  */
-  function suggestionFocus(e) {
-    const suggestionsHidden = suggestions.classList.contains('d-none');
-    if (suggestionsHidden) return;
-
-    const focusableSuggestions= [...suggestions.querySelectorAll('a')];
-    if (focusableSuggestions.length === 0) return;
-
-    const index = focusableSuggestions.indexOf(document.activeElement);
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      const nextIndex = index > 0 ? index - 1 : 0;
-      focusableSuggestions[nextIndex].focus();
-    }
-    else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      const nextIndex= index + 1 < focusableSuggestions.length ? index + 1 : index;
-      focusableSuggestions[nextIndex].focus();
-    }
-  }
-    
-  /*
-  Source:
-    - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-    - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-  */
-  function showResults() {
-    const maxResult = 5;
-    var searchQuery = this.value;
-    // filter the results for the currently tagged language
-    const lang = document.documentElement.lang;
-    var results = index.search(searchQuery, { index: ['title', 'description', 'content'], limit: maxResult, tag: lang, enrich: true });
-
-    // flatten results since index.search() returns results for each indexed field
-    const flatResults = new Map(); // keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      if (flatResults.has(result.doc.href)) continue;
-      flatResults.set(result.doc.href, result.doc);
-    }
-
-    suggestions.innerHTML = "";
-    suggestions.classList.remove('d-none');
-
-    // inform user that no results were found
-    if (flatResults.size === 0 && searchQuery) {
-      const msg = suggestions.dataset.noResults;
-      const noResultsMessage = document.createElement('div')
-      noResultsMessage.innerHTML = `${msg} "<strong>${searchQuery}</strong>"`
-      noResultsMessage.classList.add("suggestion__no-results");
-      suggestions.appendChild(noResultsMessage);
-      return;
-    }
-
-    // construct a list of suggestions
-    for (const [href, doc] of flatResults) {
-      const entry = document.createElement('div');
-      suggestions.appendChild(entry);
-
-      const a = document.createElement('a');
-      a.href = href;
-      entry.appendChild(a);
-
-      const title = document.createElement('span');
-      title.classList.add('text-start');
-      title.textContent = doc.title;
-      title.classList.add("suggestion__title");
-      a.appendChild(title);
-
-      const description = document.createElement('span');
-      description.textContent = doc.description;
-      description.classList.add("suggestion__description");
-      a.appendChild(description);
-
-      suggestions.appendChild(entry);
-
-      if (suggestions.childElementCount == maxResult) break;
-    }
-  }
-    
-  if (search !== null && suggestions !== null) {
-    document.addEventListener('keydown', inputFocus);
-    document.addEventListener('keydown', suggestionFocus);  
-    document.addEventListener('click', hideSuggestions);
-    initIndex();
-  }
-
-{{- end -}}

assets/js/menu.js

@@ -0,0 +1,20 @@
+const url = new URL(window.location.href)
+const menu = url.searchParams.get('menu')
+const child = url.searchParams.get('child')
+const menuItems = document.querySelectorAll('[data-nav="main"]')
+
+if (menu !== null) {
+  menuItems.forEach(element => {
+    element.classList.remove('active')
+  })
+
+  const targetMainItems = document.querySelectorAll(`[data-nav-main="${menu}"]:not([data-nav-child])`)
+  targetMainItems.forEach(element => {
+    element.classList.add('active')
+  })
+
+  const targetChildItems = document.querySelectorAll(`[data-nav-main="${menu}"][data-nav-child="${child}"]`)
+  targetChildItems.forEach(element => {
+    element.classList.add('active')
+  })
+}

assets/js/toast.js

@@ -1,10 +1,24 @@
-// Bootstrap toast example: https://getbootstrap.com/docs/5.2/components/toasts/
-const toastTrigger = document.getElementById('toastButton')
-const toastLiveExample = document.getElementById('toastMessage')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', () => {
-    // eslint-disable-next-line no-undef
-    const toast = new bootstrap.Toast(toastLiveExample)
-    toast.show()
+// Script to move all embedded toast messages into a container with id 'toast-container'. The container ensures multiple
+// toast messages are stacked properly. The script targets all elements specified by a 'data-toast-target' and ensures
+// the click event of the origin is linked as well.
+
+const container = document.getElementById('toast-container')
+if (container !== null) {
+  // process all data-toast-target elements
+  document.querySelectorAll('[data-toast-target]').forEach(trigger => {
+    const target = document.getElementById(trigger.getAttribute('data-toast-target'))
+    if (target !== null) {
+      // move the element to the toast containr
+      container.appendChild(target)
+
+      // eslint-disable-next-line no-undef
+      const toast = bootstrap.Toast.getOrCreateInstance(target)
+      if (toast !== null) {
+        // associate the click event of the origin with the toast element
+        trigger.addEventListener('click', () => {
+          toast.show()
+        })
+      }
+    }
   })
 }

assets/scss/app.scss

@@ -5,64 +5,13 @@
 @import "common/variables.scss";
 @import "common/icons.scss";
 
-// Import Bootstrap banner and functions
-@import "bootstrap/scss/mixins/banner";
-@include bsBanner("");
-@import "bootstrap/scss/functions";
-
-// Import Bootstrap configuration
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark.scss";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Import Bootstrap layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
-// Import Bootstrap helpers
-@import "bootstrap/scss/helpers";
-
-// Import Font Awesome
-// scss-docs-start awesome
-@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "@fortawesome/fontawesome-free/scss/regular";
-@import "@fortawesome/fontawesome-free/scss/solid";
-@import "@fortawesome/fontawesome-free/scss/brands";
-// scss-docs-end awesome
+// Import Bootstrap configuration (mounted by core Bootstrap module)
+@import "bootstrap.scss";
 
 // Import Hinode theme styles
+@import "components/alert.scss";
 @import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
@@ -71,11 +20,12 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/pagination.scss";
 @import "components/persona.scss";
 @import "components/popover.scss";
-@import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
 @import "common/animation.scss";
@@ -98,5 +48,5 @@
 // Import theme placeholder
 @import "theme/theme.scss";
 
-// Import Bootstrap utilities API
-@import "bootstrap/scss/utilities/api";
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+@import "modules/bootstrap/utilities/api";

assets/scss/common/_icons.scss

@@ -23,3 +23,19 @@ $btn-toggle:                                    url("/icons/btn-toggle.svg") !de
 $btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons
+
+.fa-wrapper {
+    container: wrapper / inline-size;
+}
+
+// define fallback size for browsers not supporting containers
+.fa-fluid {
+    font-size: 5rem;
+}
+
+// set size based on container width
+@container (min-width: 0) {
+    .fa-wrapper .fa-fluid {
+        font-size: 60cqi;
+    }
+}

assets/scss/components/_alert.scss

@@ -0,0 +1,3 @@
+.alert-no-decoration {
+    --bs-alert-border-radius: none;
+}

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,6 @@
+// scss-docs-start breadcrumb
+.breadcrumb {
+    padding-top: 0.3 * $navbar-offset;
+}
+
+// scss-docs-end breadcrumb

assets/scss/components/_buttons.scss

@@ -6,3 +6,22 @@
 .open > .dropdown-toggle.btn-primary {
     color: #fff if($enable-important-utilities, !important, null);
 }
+
+.btn-social {
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: none;
+    --bs-btn-color: var(--bs-secondary);
+    --bs-btn-border-color: none;
+    --bs-btn-hover-bg: none;
+    --bs-btn-hover-border-color: none;
+    --bs-btn-active-bg: none;
+    --bs-btn-active-border-color: none;
+}
+
+.btn-social:hover,
+.btn-social:focus,
+.btn-social:active,
+.btn-social.active,
+.open > .dropdown-toggle.btn-primary {
+    color: var(--bs-primary) if($enable-important-utilities, !important, null);
+}

assets/scss/components/_pagination.scss

@@ -0,0 +1,11 @@
+.pagination {
+    --bs-pagination-bg: var(--bs-primary-bg-subtle);
+    --bs-pagination-border-color: none;
+    --bs-pagination-hover-color: var(--bs-pagination-active-color);
+    --bs-pagination-hover-bg: var(--bs-pagination-active-bg);
+    --bs-pagination-hover-border-color: none;
+}
+
+.pagination .page-item {
+    margin: 0.4rem;
+}

assets/scss/components/_search.scss

@@ -1,117 +0,0 @@
-// Adapted from https://github.com/h-enk/doks
-
-@include media-breakpoint-up(md) {
-    .search {
-        max-width: 20rem;
-        margin-top: 0.125rem;
-        margin-bottom: 0.125rem;
-    }
-}
-
-.form-control.is-search {
-    padding-right: 4rem;
-    border: 1px solid transparent;
-    background: var(--bs-tertiary-bg);
-}
-
-.form-control.is-search:focus {
-    border: 1px solid $primary;
-}
-
-.search::after {
-    position: absolute;
-    top: 0.4625rem;
-    right: 0.5375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5rem;
-    padding-right: 0.3125rem;
-    padding-left: 0.3125rem;
-    font-size: $font-size-base * 0.75;
-    color: var(--bs-secondary-color);
-    content: "Ctrl + /";
-    border: 1px solid var(--bs-border-color);
-    border-radius: 0.25rem;
-}
-
-.navbar-form {
-    position: relative;
-}
-
-#suggestions {
-    position: absolute;
-    left: 0;
-    margin-top: 0.5rem;
-    width: calc(100vw - 3rem);
-    z-index: $zindex-dropdown;
-}
-
-#suggestions a,
-.suggestion__no-results {
-    padding: 0.75rem;
-    margin: 0 0.5rem;
-}
-
-#suggestions a {
-    display: block;
-    text-decoration: none;
-}
-
-#suggestions a:focus {
-    background-color: var(--bs-tertiary-bg);
-    outline: 0;
-}
-
-#suggestions div:not(:first-child) {
-    border-top: 1px dashed var(--bs-border-color);
-}
-
-#suggestions div:first-child {
-    margin-top: 0.5rem;
-}
-
-#suggestions div:last-child {
-    margin-bottom: 0.5rem;
-}
-
-#suggestions a:hover {
-    background-color: var(--bs-tertiary-bg);
-}
-
-#suggestions span {
-    display: flex;
-    font-size: $font-size-base;
-}
-
-.suggestion__title {
-    font-weight: $headings-font-weight;
-}
-
-.suggestion__description,
-.suggestion__no-results {
-    color: var(--bs-secondary-color);
-}
-
-@include media-breakpoint-up(sm) {
-    #suggestions {
-        width: 31.125rem;
-    }
-
-    #suggestions a {
-        display: flex;
-    }
-
-    .suggestion__title {
-        width: 9rem;
-        padding-right: 1rem;
-        border-right: 1px solid var(--bs-border-color);
-        display: inline-block;
-        text-align: right;
-    }
-
-    .suggestion__description {
-        width: 19rem;
-        padding-left: 1rem;
-    }
-}

assets/scss/components/_syntax-dark.scss

@@ -6,9 +6,9 @@
 /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* LineHighlight */ .chroma .hl { background-color: #b8b800 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #ff7b72 }
 /* KeywordConstant */ .chroma .kc { color: #79c0ff }

assets/scss/components/_syntax-light.scss

@@ -7,8 +7,8 @@
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
 /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
 /* Line */ .chroma .line { display: flex; }
 /* Keyword */ .chroma .k { color: #000000; font-weight: bold }
 /* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }

assets/scss/components/_syntax.scss

@@ -1,5 +1,5 @@
 // stylelint-disable annotation-no-unknown
-@import "syntax-light";
+@import "components/syntax-light";
 
 .bg,
 .chroma,
@@ -10,15 +10,16 @@
 
 .syntax-highlight {
     background-color: var(--bs-light) if($enable-important-utilities, !important, null);
+    overflow-x: auto;
 }
 
 .preview-background {
-    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
 }
 
 @if $enable-dark-mode {
     [data-bs-theme="dark"] {
-        @import "syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
+        @import "components/syntax-dark"; // stylelint-disable-line no-invalid-position-at-import-rule
 
         .bg,
         .chroma,
@@ -29,6 +30,7 @@
 
         .syntax-highlight {
             background-color: var(--bs-tertiary-bg) if($enable-important-utilities, !important, null);
+            overflow-x: auto;
         }
 
         .bg,

assets/scss/components/_timeline.scss

@@ -0,0 +1,165 @@
+// scss-docs-start timeline
+$connector-radius: 0.8rem;
+$semi-circle-radius: 8rem;
+$semi-circle-border: 0.2rem;
+
+:root {
+    --timeline-highlight: var(--bs-primary);
+    --timeline-icon-radius: #{$semi-circle-radius};
+    --timeline-offset: 50%;
+    --timeline-connector-bg: var(--bs-body-bg);
+}
+
+@each $state in map-keys($theme-colors) {
+    .timeline-#{$state} {
+      --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+
+    .timeline-bg-#{$state} {
+        --timeline-connector-bg: var(--#{$prefix}#{$state}-bg-subtle);
+      }
+  }
+
+// scss-docs-end timeline
+
+.timeline, .timeline-sm {
+    position: relative;
+}
+
+.timeline-sm {
+    --timeline-icon-radius: calc(#{$semi-circle-radius} / 2);
+    --timeline-offset: 25%
+}
+
+.timeline::before, .timeline-sm::before {
+    content: "";
+    width: 2 * $semi-circle-border;
+    margin: 0 auto;
+    background: var(--bs-body-color);
+    position: absolute;
+    inset: 0;
+}
+
+.timeline-sm::before {
+    margin: 0 calc(var(--timeline-offset) - #{$semi-circle-border});
+}
+
+.timeline-semi-circle-start, .timeline-semi-circle-end {
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    position: relative;
+}
+
+.timeline-semi-circle-start {
+    left: -$semi-circle-border;
+}
+
+.timeline-semi-circle-end {
+    left: $semi-circle-border;
+}
+
+.timeline-semi-circle-start::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-90deg);
+}
+
+.timeline-semi-circle-start::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-45deg);
+}
+
+.timeline-semi-circle-end::before {
+    content: "";
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: transparent var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight);
+    transform: rotate(-225deg);
+}
+
+.timeline-semi-circle-end::after {
+    content: "";
+    left: 0;
+    top: 0;
+    width: var(--timeline-icon-radius);
+    height: var(--timeline-icon-radius);
+    border-radius: 100%;
+    border: $semi-circle-border solid;
+    position: absolute;
+    border-color: var(--timeline-highlight) var(--timeline-highlight) var(--timeline-highlight) transparent;
+    transform: rotate(-180deg);
+}
+
+.timeline-description-text-start {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-right: 2 * $connector-radius;
+}
+
+.timeline-description-text-end {
+    border-bottom: $semi-circle-border solid var(--timeline-highlight);
+    margin-left: 2 * $connector-radius;
+}
+
+.timeline-panel-start, .timeline-panel-end, .timeline-connector-start, .timeline-connector-end {
+    top: calc(var(--timeline-icon-radius) / 2);
+    position: relative;
+    width: calc(var(--timeline-icon-radius) / 2);
+    height: calc($semi-circle-border + var(--timeline-icon-radius) / 2);
+    border: $semi-circle-border solid var(--timeline-highlight);
+    border-bottom: none;
+    border-right: none;
+    border-left: none;
+}
+
+.timeline-panel-start {
+    top: 50%;
+    right: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-left: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-panel-end {
+    top: 50%;
+    position: absolute;
+    width: calc(var(--timeline-icon-radius) * 2);
+    width: 2 * $connector-radius;
+    height: 50%;
+    border-top: $semi-circle-border solid var(--timeline-highlight);
+    border-right: $semi-circle-border solid var(--timeline-highlight);
+}
+
+.timeline-dot::after {
+    display: inline-block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: var(--timeline-offset);
+    margin: (-$connector-radius) 0 0 (-$connector-radius);
+    width: 2 * $connector-radius;
+    height: 2 * $connector-radius;
+    border-radius: 100%;
+    border: ($semi-circle-border * 1.5) solid var(--timeline-connector-bg);
+    color: var(--timeline-highlight);
+    background: var(--timeline-highlight);
+}

config/_default/hugo.toml

@@ -27,6 +27,20 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 # toml-docs-end language
 
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -71,21 +85,35 @@ defaultContentLanguageInSubdir = true
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.81.0"
+    min = "0.110.0"
     max = ""
+  [[module.mounts]]
+    source = "archetypes"
+    target = "archetypes"
   [[module.mounts]]
     source = "assets"
     target = "assets"
+  [[module.mounts]]
+    source = "i18n"
+    target = "i18n"
+  [[module.mounts]]
+    source = "layouts"
+    target = "layouts"
   [[module.mounts]]
     source = "static"
     target = "static"
-# toml-docs-start javascript
   [[module.mounts]]
-    source = "node_modules/bootstrap/dist/js"
-    target = "assets/js/vendor/bootstrap"
-    includeFiles = "*.bundle.js"
-  [[module.mounts]]
-    source = "node_modules/flexsearch/dist"
-    target = "assets/js/vendor/flexsearch"
-    includeFiles = "*.bundle.js"
-# toml-docs-end javascript
+    source = "netlify.toml"
+    target = "assets/config/netlify.toml"
+# toml-docs-start modules
+  [[module.imports]]
+    path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-katex"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-leaflet"
+# toml-docs-end modules

config/_default/menus/menus.en.toml

@@ -1,33 +1,33 @@
 [[main]]
   name = "About"
-  url = "/about/"
+  pageRef = "/about/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 30
 
 [[main]]
   name = "Sample project"
-  url = "/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[main]]
   name = "Another project"
-  url = "/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[social]]
@@ -51,23 +51,23 @@
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projects"
-  url = "/projects/"
+  pageRef = "/projects/"
   weight = 20
 
 [[sample]]
   name = "Sample project"
-  url = "/projects/sample-project/"
+  pageRef = "/projects/sample-project/"
   parent = "Projects"
   weight = 1
 
 [[sample]]
   name = "Another project"
-  url = "/projects/another-project/"
+  pageRef = "/projects/another-project/"
   parent = "Projects"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/menus/menus.nl.toml

@@ -1,33 +1,33 @@
 [[main]]
   name = "Over mij"
-  url = "/over-mij/"
+  pageRef = "/over-mij/"
   weight = 10
 
 [[main]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 20
 
 [[main]]
   name = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 30
 
 [[main]]
   name = "Voorbeeldproject"
-  url = "/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[main]]
   name = "Ander project"
-  url = "/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 
 [[main]]
   name = "Tags"
-  url = "/tags/"
+  pageRef = "/tags/"
   weight = 40
 
 [[social]]
@@ -51,23 +51,23 @@
 # toml-docs-start sample-navigation
 [[sample]]
   name = "Blog"
-  url = "/blog/"
+  pageRef = "/blog/"
   weight = 10
 
 [[sample]]
   name = "Projecten"
-  url = "/projecten/"
+  pageRef = "/projecten/"
   weight = 20
 
 [[sample]]
   name = "Voorbeeldproject"
-  url = "/projecten/voorbeeldproject/"
+  pageRef = "/projecten/voorbeeldproject/"
   parent = "Projecten"
   weight = 1
 
 [[sample]]
   name = "Ander project"
-  url = "/projecten/ander-project/"
+  pageRef = "/projecten/ander-project/"
   parent = "Projecten"
   weight = 2
 # toml-docs-end sample-navigation

config/_default/params.toml

@@ -4,12 +4,31 @@
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
     modes = ["light", "dark"]
+    canonifyAssetsURLs = false
+    [main.externalLinks]
+        cue = false
+        tab = false
 # toml-docs-end main
 
+# toml-docs-start modules
+[modules]
+    core = ["bootstrap", "flexsearch", "fontawesome"]
+    optional = ["leaflet", "katex"]
+    excludeSCSS = ["bootstrap"]
+    disableTemplate = ["katex"]
+# toml-docs-end modules
+
+# toml-docs-start debugging
+[debugging]
+    showJS = false
+    showSCSS = false
+# toml-docs-end debugging
+
 # toml-docs-start docs
 [docs]
-    version = "0.8"
-    basePath = ""
+    github = "https://github.com/gethinode/hinode"
+    release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
 # toml-docs-end docs
 
 # toml-docs-start home
@@ -29,11 +48,54 @@
     fixed = true
     offset = "3.8em"
     search = true
-    breadcrumb = false
+    breadcrumb = true
     toc = true
     sidebar = true
 # toml-docs-end navigation
 
+# toml-docs-start messages
+[messages]
+    placement = "bottom-right"
+# toml-docs-end messages
+
+# toml-docs-start sharing
+[sharing]
+    enabled = true
+    sort = "weight"
+    reverse = false
+
+[[sharing.providers]]
+    name = "LinkedIn"
+    url = "https://www.linkedin.com/sharing/share-offsite/?url={url}"
+    icon = "fab linkedin"
+    weight = 10
+
+[[sharing.providers]]
+    name = "Twitter"
+    url = "https://twitter.com/home?status={url}"
+    icon = "fab twitter"
+    weight = 20
+
+[[sharing.providers]]
+    name = "Facebook"
+    url = "https://www.facebook.com/sharer.php?u={url}"
+    icon = "fab facebook"
+    weight = 30
+
+[[sharing.providers]]
+    name = "WhatsApp"
+    url = "whatsapp://send?text={title}%20{url}"
+    icon = "fab whatsapp"
+    weight = 40
+
+[[sharing.providers]]
+    name = "email"
+    url = "{url}"
+    icon = "fas link"
+    weight = 50
+    clipboard = true
+# toml-docs-end sharing
+
 # toml-docs-start sections
 [sections]
     [sections.blog]
@@ -52,6 +114,7 @@
         separator = true
     [sections.projects]
         title = "Projects"
+        layout = "card"
         sort = "title"
         reverse = false
         nested = true
@@ -61,7 +124,7 @@
         padding = "3"
         header = "none"
         footer = "tags"
-        orientation = "none"
+        orientation = "horizontal"
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false

config/_default/server.toml

@@ -16,7 +16,7 @@ for = '/**'
             https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
+        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
         manifest-src 'self'; \
         media-src 'self' \
         """

config/postcss.config.js

@@ -21,12 +21,15 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './assets/scss/components/_syntax-light.scss',
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
-      './node_modules/bootstrap/scss/_carousel.scss',
-      './node_modules/bootstrap/scss/_dropdown.scss',
-      './node_modules/bootstrap/scss/_reboot.scss',
-      './node_modules/bootstrap/scss/_tooltip.scss',
-      './node_modules/bootstrap/scss/_transitions.scss',
-      './node_modules/bootstrap/scss/_utilities.scss'
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
     ])
   ]
 })

config/production/config.toml

@@ -1 +0,0 @@
-canonifyURLs = false

content/en/about.md

@@ -2,7 +2,7 @@
 title: About
 description: Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 date: 2022-04-11
-updated: 2023-02-11
+updated: 2023-06-26
 showComments: false
 ---
 
@@ -35,8 +35,8 @@ Additional features include:
 * Switching between light mode and dark mode
 * Support for multiple languages
 * Reusable Bootstrap components through configurable shortcodes and partials
+* Versioned documentation, including sidebar navigation and version switcher
 * Embedded comments through light-weight integration with GitHub via [utteranc.es]({{< param "links.utterances" >}})
-* Integrated sidebar navigation for content-heavy sections, such as documentation pages
 * Reponsive image handling for multiple screen sizes and resolutions
 * Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
 * Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})

content/en/blog/bootstrap-elements.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Bootstrap elements
-date: 2023-02-17
+date: 2023-05-20
 description: Use shortcodes to add common Bootstrap elements with ease.
 tags: ["bootstrap", "shortcode"]
 thumbnail: img/boots.jpg
@@ -127,7 +127,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
     Trigger panel
 {{</* /button */>}}
 
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
     Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
@@ -223,6 +223,16 @@ As an example, the following shortcode displays a light navigation header.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Release
+
+As an example, the following shortcode displays a default release button.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Spinner
 
 As an example, the following shortcode displays a centered spinner.
@@ -235,18 +245,36 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Timeline
+
+As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-en" background="dark" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast
 
 As an example, the following shortcode displays a button that, when clicked, triggers the toast message.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Show toast
+{{</* button toast="toast-example-1" */>}}
+    Show toast 1
 {{</* /button */>}}
 
-{{</* toast header="Custom title" */>}}
-    This is a toast message.
+{{</* button toast="toast-example-2" */>}}
+    Show toast 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="First title" */>}}
+    This is the first toast message.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Second title" */>}}
+    This is the second toast message.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/en/blog/components.md

@@ -0,0 +1,36 @@
+---
+author: Mark Dumay
+title: Components
+date: 2023-07-21
+description: Use shortcodes to add predefined components powered by external libraries.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/puzzle.jpg
+photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
+photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+modules: ["katex", "leaflet"]
+---
+
+Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+
+## Formula (KaTeX)
+
+As an example, the following markdown renders two formulas using the KaTeX typesetting library.
+
+{{< example lang="markdown" >}}
+This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula
+
+This is not an inline formula:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Map
+
+As an example, the following shortcode displays an interactive map of the city of Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

content/en/projects/another-project.md

@@ -4,9 +4,7 @@ title: Another project
 date: 2021-07-15
 description: Another project.
 tags: ["javascript", "golang"]
-thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
-photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>
-photoSource: <a href="https://unsplash.com/photos/TYIzeCiZ_60">Unsplash</a>
+icon: fas rocket
 ---
 
 Vivamus iaculis metus sed magna porta tincidunt. Aliquam molestie eget orci eu elementum. Integer pellentesque dolor sit amet suscipit maximus. Duis consequat, massa vitae volutpat rhoncus, erat augue venenatis velit, a auctor leo nulla nec turpis. Nunc ut libero sapien. Vivamus aliquam ultrices vestibulum. Sed sit amet vestibulum dolor, ut vehicula diam. Sed felis purus, feugiat vitae vulputate quis, sodales vitae dui. Pellentesque volutpat fringilla sapien varius condimentum. Integer odio massa, pharetra at bibendum vitae, aliquam nec erat.

content/en/projects/sample-project.md

@@ -4,9 +4,7 @@ title: Sample project
 date: 2021-07-15
 description: A sample project.
 tags: ["html", "css"]
-thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
-photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 
-photoSource: <a href="https://unsplash.com/photos/yC-Yzbqy7PY">Unsplash</a>
+icon: fab docker
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

content/nl/about.md

@@ -3,6 +3,7 @@ slug: over-mij
 title: Over mij
 description: Een blog en documentatie thema voor Hugo gebaseerd op Bootstrap 5.
 date: 2023-02-17
+updated: 2023-06-26
 showComments: false
 ---
 
@@ -36,8 +37,8 @@ Overige functies:
 * Omschakelen tussen donkere en lichte modus
 * Ondersteuning voor meerdere talen
 * Herbruikbare Bootstrap componenten via shortcodes en partials
+* Versiebeheer van documentatiepagina's, inclusief secundaire navigatie en selectie van versies
 * Integreren van commentaar via [utteranc.es]({{< param "links.utterances" >}})
-* Secundaire navigatie voor bijvoorbeeld documentatie
 * Optimalisering van foto's voor meerdere schermafmetingen en resoluties
 * Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{< param "links.pagespeed" >}})
 * Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{< param "links.observatory" >}})

content/nl/blog/bootstrap-elements.md

@@ -224,6 +224,16 @@ De volgende shortcode toont een navigatiemenu.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Release
+
+De volgende shortcode toont een knop voor een nieuwe release.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* release version="v0.14.1" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Spinner
 
 De volgende shortcode toont een ronddraaiende cirkel.
@@ -236,18 +246,36 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Timeline
+
+De volgende shortcode toont een tijdslijn met het bestand `data/timeline-nl.yml` als input.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-nl" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast
 
 De volgende shortcode toont een knop die een bericht laat verschijnen op het scherm.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* button id="toastButton" */>}}
-    Toon bericht
+{{</* button toast="toast-example-1" */>}}
+    Toon bericht 1
 {{</* /button */>}}
 
-{{</* toast header="Titel" */>}}
-    Dit is een bericht.
+{{</* button toast="toast-example-2" */>}}
+    Toon bericht 2
+{{</* /button */>}}
+
+{{</* toast id="toast-example-1" header="Eerste titel" */>}}
+    Dit is het eerste bericht.
+{{</* /toast */>}}
+
+{{</* toast id="toast-example-2" header="Tweede titel" */>}}
+    Dit is het tweede bericht.
 {{</* /toast */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/components.md

@@ -0,0 +1,37 @@
+---
+author: Mark Dumay
+title: Componenten
+slug: componenten
+date: 2023-07-21
+description: Gebruik shortcodes om voorgedefiniëerde componenten toe te voegen die gebruikmaken van externe libraries.
+tags: ["bootstrap", "shortcode"]
+thumbnail: img/puzzle.jpg
+photoCredits: <a href="https://unsplash.com/@ryoji__iwata">Ryoji Iwata</a>
+photoSource: <a href="https://unsplash.com/photos/5siQcvSxCP8">Unsplash</a>
+modules: ["katex", "leaflet"]
+---
+
+Hinode biedt meerdere shortcodes aan bovenop de gebruikelijke [Bootstrap elementen]({{< relref "bootstrap-elements" >}}). Zie de [officiële documentatie]({{< param "links.hinode_docs" >}}) voor meer details.
+
+## Formule (KaTeX)
+
+De volgende markdown code genereert twee wiskundige formules met behulp van KaTeX.
+
+{{< example lang="markdown" >}}
+Dit is een inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formule
+
+Dit is geen inline formule:
+
+$$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$  
+$$\forall x \in X, \quad \exists y \leq \epsilon$$
+{{< /example >}}
+
+## Map
+
+De volgende shortcode toont een interactieve kaart van Amsterdam.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* map lat=52.377 long=4.90 zoom=13 popup="Amsterdam CS" popup-lat=52.378062 popup-long=4.900562 */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

content/nl/projects/another-project.md

@@ -6,9 +6,7 @@ url: "projecten/ander-project"
 date: 2021-07-15
 description: "Een ander project."
 tags: ["javascript", "golang"]
-thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
-photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>
-photoSource: <a href="https://unsplash.com/photos/TYIzeCiZ_60">Unsplash</a>
+icon: fas rocket
 ---
 
 Vivamus iaculis metus sed magna porta tincidunt. Aliquam molestie eget orci eu elementum. Integer pellentesque dolor sit amet suscipit maximus. Duis consequat, massa vitae volutpat rhoncus, erat augue venenatis velit, a auctor leo nulla nec turpis. Nunc ut libero sapien. Vivamus aliquam ultrices vestibulum. Sed sit amet vestibulum dolor, ut vehicula diam. Sed felis purus, feugiat vitae vulputate quis, sodales vitae dui. Pellentesque volutpat fringilla sapien varius condimentum. Integer odio massa, pharetra at bibendum vitae, aliquam nec erat.

content/nl/projects/sample-project.md

@@ -6,9 +6,7 @@ url: "projecten/voorbeeldproject"
 date: 2021-07-15
 description: "Een voorbeeldproject."
 tags: ["html", "css"]
-thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
-photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 
-photoSource: <a href="https://unsplash.com/photos/yC-Yzbqy7PY">Unsplash</a>
+icon: fab docker
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

data/timeline-en.yml

@@ -0,0 +1,35 @@
+# This file holds all menu entries for the docs sidebar
+
+- title: Product launch
+  icon: fas rocket
+  color: primary
+  date: 2023-07-01
+  url: https://github.com/gethinode/hinode/releases/tag/v0.15.2
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+
+- title: I18N support
+  icon: fas globe
+  color: success
+  date: 2023-05-06
+  url: v0.14.0
+  content:
+    Lorem ipsum dolor sit amet.
+
+- title: New feature
+  icon: fas house
+  color: warning
+  date: 2023-02-04
+  url: v0.8.1
+  content:
+    Cupiditate ducimus officiis quod!
+
+- title: Beta release
+  icon: fas heart
+  color: info
+  date: 2022-11-30
+  # url: v0.1
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.

data/timeline-nl.yml

@@ -0,0 +1,35 @@
+# This file holds all menu entries for the docs sidebar
+
+- title: Productlancering
+  icon: fas rocket
+  color: primary
+  date: 2023-07-01
+  url: https://github.com/gethinode/hinode/releases/tag/v0.15.2
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+
+- title: Internationalisering
+  icon: fas globe
+  color: success
+  date: 2023-05-06
+  url: v0.14.0
+  content:
+    Lorem ipsum dolor sit amet.
+
+- title: Nieuwe functie
+  icon: fas house
+  color: warning
+  date: 2023-02-04
+  url: v0.8.1
+  content:
+    Cupiditate ducimus officiis quod!
+
+- title: Beta release
+  icon: fas heart
+  color: info
+  date: 2022-11-30
+  # url: v0.1
+  content:
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ducimus officiis quod! Aperiam eveniet nam nostrum odit quasi ullam voluptatum.

go.mod

@@ -0,0 +1,11 @@
+module github.com/gethinode/hinode
+
+go 1.19
+
+require (
+	github.com/gethinode/mod-bootstrap v1.1.1 // indirect
+	github.com/gethinode/mod-flexsearch v1.1.4 // indirect
+	github.com/gethinode/mod-fontawesome v1.2.1 // indirect
+	github.com/gethinode/mod-katex v1.0.2 // indirect
+	github.com/gethinode/mod-leaflet v0.3.3 // indirect
+)

go.sum

@@ -0,0 +1,38 @@
+github.com/gethinode/mod-bootstrap v1.0.1 h1:NDZar+UEL42YHCvzzO+jVgqkZU5INA12BpjX3y6U4I4=
+github.com/gethinode/mod-bootstrap v1.0.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h0oGhAXIU=
+github.com/gethinode/mod-bootstrap v1.1.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-bootstrap v1.1.1 h1:Tx4M5hGVOFrEaxnUONDAm6N9xuRi5UphKlT7F26HujU=
+github.com/gethinode/mod-bootstrap v1.1.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
+github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
+github.com/gethinode/mod-flexsearch v1.1.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.1 h1:zHypfKR/rWPAwqNXvo09Pp3vGqU4w3r7d2VtMudIzkI=
+github.com/gethinode/mod-flexsearch v1.1.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.2 h1:vA/jHxLq9xxkYGS9cmAoLNIkEBW+iLVCcQ8qKyEa+R4=
+github.com/gethinode/mod-flexsearch v1.1.2/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.3 h1:lzmSvnJL6ABjp03avYzSvJJ7hw01CpHap1JGUbDIELg=
+github.com/gethinode/mod-flexsearch v1.1.3/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.1.4 h1:dJvwBxYlLe/VGlctLn8k89STJ5toATIjNnXIlNeanOY=
+github.com/gethinode/mod-flexsearch v1.1.4/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
+github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
+github.com/gethinode/mod-fontawesome v1.1.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.0 h1:2nWYEjpUKu6IJ6kOh2WDlDUqRQ/dUGw6mJWIdMTA3O0=
+github.com/gethinode/mod-fontawesome v1.2.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.2.1 h1:k7z5ZRsNxCohZjlZm8jVAzmTPk17c6xMYBAjAXHs13I=
+github.com/gethinode/mod-fontawesome v1.2.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
+github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
+github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
+github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
+github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
+github.com/gethinode/mod-leaflet v0.3.1/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+github.com/gethinode/mod-leaflet v0.3.3 h1:isnjja6VRFvVWBatYSouh46TXSJg2C4/E2BQTrQw+yI=
+github.com/gethinode/mod-leaflet v0.3.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=

i18n/de.yaml

@@ -37,6 +37,8 @@
   translation: "Wörter"
 - id: copyright
   translation: "Copyright"
+- id: rights
+  translation: "Alle Rechte vorbehalten"
 - id: photoBy
   translation: "Foto von"
 - id: photoOn

i18n/en.yaml

@@ -45,6 +45,8 @@
   translation: "words"
 - id: copyright
   translation: "Copyright"
+- id: rights
+  translation: "All rights reserved"
 - id: photoBy
   translation: "Photo by"
 - id: photoOn
@@ -53,14 +55,16 @@
   translation: "Article"
 - id: articles
   translation: "Articles"
+- id: paginationNav
+  translation: "Page navigation"
 - id: paginationPrevious
-  translation: "Previous"
+  translation: "Previous page"
 - id: paginationNext
-  translation: "Next"
+  translation: "Next page"
 - id: paginationFirst
-  translation: "First"
+  translation: "First page"
 - id: paginationLast
-  translation: "Last"
+  translation: "Last page"
 - id: toggleSidebar
   translation: "Toggle sidebar navigation"
 - id: colorMode
@@ -75,6 +79,24 @@
   translation: "Toggle main navigation"
 - id: demo
   translation: "Demo"
+- id: addedFeature
+  translation: "Added in"
+- id: deprecatedFeature
+  translation: "Deprecated in"
+- id: shareLink
+  translation: "Share via"
+- id: copiedToClipboard
+  translation: "copied to clipboard"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Code"
+- id: latest
+  translation: "latest"
+- id: allVersions
+  translation: "All versions"
+- id: newerVersionAlert
+  translation: "There is a newer version of {{ . }}!"
 
 # 404 page
 - id: pageNotFound
@@ -118,7 +140,7 @@
 - id: show
   translation: "Show"
 - id: comments
-  translation: "comments" 
+  translation: "Comments" 
 
 # Related posts
 - id: seeAlso

i18n/nl.yaml

@@ -37,6 +37,8 @@
   translation: "woorden"
 - id: copyright
   translation: "Copyright"
+- id: rights
+  translation: "Alle rechten voorbehouden"
 - id: photoBy
   translation: "Foto van"
 - id: photoOn
@@ -45,6 +47,8 @@
   translation: "Artikel"
 - id: articles
   translation: "Artikelen"
+- id: paginationNav
+  translation: "Pagina navigatie"
 - id: paginationPrevious
   translation: "Vorige"
 - id: paginationNext
@@ -65,6 +69,24 @@
   translation: "Automatisch"
 - id: toggleMainNav
   translation: "Toon of verberg hoofdnavigatie"
+- id: addedFeature
+  translation: "Toegevoegd in"
+- id: deprecatedFeature
+  translation: "Verouderd in"
+- id: shareLink
+  translation: "Delen via"
+- id: copiedToClipboard
+  translation: "gekopieerd naar clipboard"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Code"
+- id: latest
+  translation: "meest recente"
+- id: allVersions  
+  translation: "Alle versies"
+- id: newerVersionAlert
+  translation: "Er is een nieuwere versie van {{ . }}!"
 
 # 404 page
 - id: pageNotFound
@@ -109,7 +131,7 @@
 - id: show
   translation: "Tonen"
 - id: comments
-  translation: "commentaar" 
+  translation: "Reacties" 
 
 # Related posts
 - id: seeAlso

layouts/_default/baseof.html

@@ -1,6 +1,20 @@
 {{- $section := .Section }}
-{{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
-{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
+{{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
+{{- $.Scratch.Set "version" $version -}}
+{{ with partial "utilities/GetMenu" (dict "page" . "version" $version) }}{{ $.Scratch.Set "sidebar" . }}{{ end }}
+
+{{- if and site.Params.docs.checkVersion $version -}}
+    {{- if ne $version "latest" -}}
+        {{- if partial "utilities/IsOlder" (dict "current" $version) -}}
+            {{- $.Scratch.Set "pageAlertMsg" (T "newerVersionAlert" site.Title) -}}
+            {{- $.Scratch.Set "pageAlertURL" (or site.Params.docs.latestURL site.baseURL) -}}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if and .IsPage (not (in .Site.Params.modules.core "bootstrap")) -}}
+    {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
+{{- end -}}
 
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
@@ -9,9 +23,7 @@
     </head>
 
     <body>
-        {{- if site.Params.main.enableDarkMode -}}
-            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
-        {{- end -}}
+        {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
         <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                 {{- partial "assets/navbar.html" (dict
@@ -68,6 +80,20 @@
             </div>
         {{ end }}
 
-        {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
+        {{- partial "footer/toast-container.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
+        {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
+        {{- range $index, $mod := $modules -}}
+            {{- $filename := printf "js/%s.bundle.js" $mod -}}
+            {{- $match := printf "js/modules/%s/**.js" $mod -}}
+            {{- $skipTemplate := false -}}
+            {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
+                {{- if in site.Params.modules.disableTemplate $mod}}
+                    {{- $skipTemplate = true -}}
+                {{- end -}}
+            {{- end -}}
+
+            {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "page" .) }}
+        {{- end -}}
     </body>
 </html>

layouts/_default/single.html

@@ -2,6 +2,7 @@
     {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
         {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        {{ partial "assets/sharing.html" . }}
         <p class="lead mb-5">{{ .Description }}</p>
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
@@ -14,21 +15,28 @@
             {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
         </small>
 
-        <div class="mt-3">
-            <div class="d-none-dark">
-                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                    &nbsp;
-                {{ end -}}
+        {{- if gt (len (.GetTerms "tags")) 0 -}}
+            <div class="mt-3">
+                <div class="d-none-dark">
+                    <div class="hstack gap-3">
+                        {{ range (.GetTerms "tags") -}}
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
+                        {{ end -}}
+                    </div>
+                </div>
+                
+                <div class="d-none-light">
+                    <div class="hstack gap-3">
+                        {{ range (.GetTerms "tags") -}}
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "secondary" "size" "sm" "outline" "true") }}
+                        {{ end -}}
+                    </div>
+                </div>
             </div>
-            
-            <div class="d-none-light">
-                {{ range (.GetTerms "tags") -}}
-                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                    &nbsp;
-                {{ end -}}
-            </div>
-        </div>
+        {{- end -}}
+        {{ partial "assets/sharing.html" . }}
         <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}
@@ -59,7 +67,7 @@
                 {{ with .NextInSection -}}
                     {{ $next := . -}}
                     {{ with .OutputFormats.Get "html" -}}
-                        <a class="next" href="{{ $next.Permalink }}"><i class="fas fa-arrow-left"></i> {{ $next.Title }}</a>
+                        <a class="next" href="{{ $next.RelPermalink }}"><i class="fas fa-arrow-left"></i> {{ $next.Title }}</a>
                     {{- end -}}
                 {{ end -}}
             </div>
@@ -67,7 +75,7 @@
                 {{ with .PrevInSection -}}
                     {{ $prev := . -}}
                     {{ with .OutputFormats.Get "html" -}}
-                        <a class="previous" href="{{ $prev.Permalink }}">{{ $prev.Title }} <i class="fas fa-arrow-right"></i></a>
+                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.Title }} <i class="fas fa-arrow-right"></i></a>
                     {{- end -}}
                 {{ end -}}
             </div>

layouts/_default/single.xml

@@ -7,10 +7,10 @@
 					{{ $square150 := .Resize "150x150 CatmullRom" }} 
 					{{ $wide310 := .Fill "310x150 CatmullRom" }} 
 					{{ $square310 := .Resize "310x310 CatmullRom" }}
-					<square70x70logo src="{{ $square70.Permalink }}" />
-					<square150x150logo src="{{ $square150.Permalink }}" />
-					<wide310x150logo src="{{ $wide310.Permalink }}" />
-					<square310x310logo src="{{ $square310.Permalink }}" />
+					<square70x70logo src="{{ $square70.RelPermalink }}" />
+					<square150x150logo src="{{ $square150.RelPermalink }}" />
+					<wide310x150logo src="{{ $wide310.RelPermalink }}" />
+					<square310x310logo src="{{ $square310.RelPermalink }}" />
 				{{ end }}
 				<TileColor>#000000</TileColor>
 			</tile>

layouts/alias.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html{{ with site.LanguageCode | default site.Language.Lang }} lang="{{ . }}"{{ end }}>
+  <head>
+    <title>{{ .Permalink }}</title>
+    <link rel="canonical" href="{{ .Permalink }}">
+    <meta name="robots" content="noindex">
+    <meta charset="utf-8">
+    <noscript><meta http-equiv="refresh" content="0; url={{ .Permalink }}"></noscript>
+    <script src="/js/alias.js"></script>
+  </head>
+</html>

layouts/index.redir

@@ -0,0 +1,10 @@
+{{- range .Site.Params.docs.releases -}}
+{{- if .redirect -}}
+{{ urls.JoinPath .url "/*" }} {{ urls.JoinPath .redirect ":splat" }} 200
+{{ end }}
+{{- end -}}
+{{ range $p := .Site.AllPages }}
+{{- range .Aliases -}}
+{{ if hasPrefix . "." }}{{ urls.JoinPath $p.RelPermalink . }}{{ else }}{{ . }}{{ end }} {{ $p.RelPermalink }}
+{{ end }}
+{{- end -}}

layouts/partials/assets/breadcrumb.html

@@ -1,7 +1,14 @@
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
-        {{- range .Page.Ancestors.Reverse -}}
-            <li class="breadcrumb-item"><a href="{{ .Permalink }}">{{ if not .IsHome }}{{ .Title }}{{ else }}{{ T "home" }}{{ end }}</a></li>
+        {{- range $index, $item := .Page.Ancestors.Reverse -}}
+            {{- $title := .Title -}}
+            {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
+            {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
+            {{ if $address }}
+                <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
+            {{ else }}
+                <li class="breadcrumb-item">{{ $title }}</li>
+            {{ end }}
         {{- end -}}
         <li class="breadcrumb-item active" aria-current="page">{{ .Page.Title }}</li>
     </ol>

layouts/partials/assets/button.html

@@ -1,6 +1,6 @@
 <!-- 
     Displays a button. The shortcode supports the following arguments:
-    "title"         Required title of the button.
+    "title"         Title of the button, required unless icon is set.
     "href"          Optional address for the button or hyperlink.
     "id"            Optional id of the button, to be used in the DOM.
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
@@ -16,15 +16,22 @@
     "type"          Optional type of the element, either "link" or "button" (default).
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
     "class"         Optional class attribute of the button element, e.g. “toc-button”.
-    "icon"          Optional Font Awesome icon class attribute, e.g. "fas sort".
+    "icon"          Font Awesome icon class attribute, required unless title is set. An example value is "fas sort".
     "order"         Optional order of the icon, either "first" or "last" (default).
     "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
                     "between", "around", or "evenly".
+    "toast"         Optional id of the toast to display when the button is clicked.
+    "clipboard"     Optional text to be copied to the clipboard when the button is clicked.
+    "cue"           Optional flag to indicate if an external link should show a visual cue, defaults to setting
+                    "main.externalLinks.cue" in the site's parameters.
+    "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
+                    "main.externalLinks.tab" in the site's parameters.
 -->
 
 {{- $title := trim .title " \r\n" -}}
-{{- if not $title -}}
-    {{- errorf "partial [assets/button.html] - Missing element title" -}}
+{{- $icon := .icon }}
+{{- if not (or $title $icon) -}}
+    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
 {{- end -}}
 
 {{- $id := .id }}
@@ -92,7 +99,7 @@
 {{- end -}}
 
 {{- $class := .class }}
-{{- $icon := .icon }}
+{{ with $badge }}{{ $class = printf "%s me-3" $class }}{{ end }}
 
 {{- $order := "last" -}}
 {{- with .order }}{{ $order = . }}{{ end -}}
@@ -108,19 +115,44 @@
     {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
 {{- end -}}
 
-<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
-    {{- with $id }}id="{{ . }}"{{ end -}}
-    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
-    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
-    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
-    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
-    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
+{{- $toast := .toast -}}
+{{- $clipboard := .clipboard -}}
+
+{{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
+{{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
+{{- $isExternal := ne (urls.Parse (absURL $href)).Host (urls.Parse site.BaseURL).Host -}}
+{{- $target := "" -}}
+{{- $rel := "" -}}
+
+{{- if $isExternal -}}
+    {{- if $tab -}}
+        {{- $target = "_blank" -}}
+        {{- $rel = "noopener noreferrer" -}}
+    {{- end -}}
+
+    {{- if and $title $cue -}}
+        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
+        {{- $title = printf "%s %s" $title $suffix | safeHTML -}}
+    {{- end -}}
+{{- end -}}
+
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
+    {{ with $id }}id="{{ . }}"{{ end }}
+    {{ with $target }}target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}
+    {{ with $toast }}data-toast-target="{{ $toast }}"{{ end }}
+    {{ with $clipboard }}data-clipboard="{{ $clipboard }}"{{ end }}
+    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}"
+    role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
+    {{ else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end }}
+    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
+    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
+    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
+    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
     >
 
     <div class="d-flex justify-content-{{ $justify }}">
-        <div>{{ $title }}</div>
-        {{- with $icon }}<div class="align-self-center{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
+        <div class="my-auto">{{ $title }}</div>
+        {{- with $icon }}<div class="align-self-center{{ if $title }}{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
     </div>
 
     {{- with $badge }}

layouts/partials/assets/card-group.html

@@ -87,6 +87,8 @@
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
 
+{{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
+
 <div class="container-fluid p-4 px-xxl-0">
     {{ $paginator := "" }}
     {{ if $paginate }}
@@ -105,12 +107,12 @@
                 "orientation" $orientation
             ) -}}
             
-            {{- if $element.Permalink -}}
+            {{- if $element.RelPermalink -}}
                 {{- $params = merge $params (dict "path" $element.File.Path) -}}
             {{- else -}}
                 {{- $params = merge $params (dict
                     "title" $element.Title
-                    "href" $element.Permalink
+                    "href" $element.RelPermalink
                     "description" (or $element.Description $element.Content)
                     "thumbnail" $element.Params.thumbnail
                     "icon" $element.Params.icon
@@ -130,7 +132,7 @@
 
     {{ if $paginate }}
         {{- if gt $paginator.TotalPages 1 -}}
-            <div class="pt-3">{{ partial "assets/pagination.html" $page }}</div>
+            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
         {{- end -}} 
     {{ else }}
         {{ if gt $count $max }}

layouts/partials/assets/card.html

@@ -18,7 +18,8 @@
     "description"   Optional description of the card.
     "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
     "icon"          Optional Font Awesome icon, displayed on top or the left of the card.
-    "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
+    "orientation"   Optional placecement of the thumbnail or icon, either "stacked" (default), "horizontal",
+                    "horizontal-sm" or "none".
 -->
 
 <!-- Inline partial to render the card's body -->
@@ -110,7 +111,7 @@
 
 {{- with $page -}}
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
-    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
     {{- if not $description }}{{ $description = .Description }}{{ end -}}
     {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
@@ -127,25 +128,25 @@
 
 {{- $orientation := "stacked" -}}
 {{- with .orientation }}{{ $orientation = . }}{{ end -}}
-{{- $supportedOrientations := slice "stacked" "horizontal" "none" -}}
+{{- $supportedOrientations := slice "stacked" "horizontal" "horizontal-sm" "none" -}}
 {{- if not (in $supportedOrientations $orientation) -}}
     {{- errorf "partial [assets/card.html] - Invalid value for param 'orientation': %s" $orientation -}}
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
-{{- if eq $orientation "horizontal" -}}
-    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-        <div class="row g-0">
-            <div class="col-4">
+{{- if hasPrefix $orientation "horizontal" -}}
+    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        <div class="row g-0 row-cols-1 h-100">
+            <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
                 {{- if $thumbnail -}}
                     {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
-                    <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+                    <div class="p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid text-secondary fa-fw" $icon)) -}}
                     </div>
                 {{- end -}}
-                </div>
-            <div class="col-8">
+            </div>
+            <div class="col-8{{ if eq  $orientation "horizontal-sm" }} col-md-10{{ end }}">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
@@ -161,7 +162,7 @@
         {{- if $thumbnail -}}
             {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
         {{- else if $icon -}}
-            <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
+            <div class="p-{{ $padding }}">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
             </div>
         {{- end -}}

layouts/partials/assets/comments.html

@@ -1,6 +1,6 @@
 {{- $params := .Site.Params.comments -}}
 {{- with $params -}}
-<h2>Comments</h2>
+<h2>{{ T "comments" }}</h2>
 <script src="https://utteranc.es/client.js"
   repo="{{ $params.repo }}"
   issue-term="{{ default "pathname" $params.issueTerm }}"

layouts/partials/assets/icon.html

@@ -1,16 +0,0 @@
-{{- $icon := .icon -}}
-{{- if not $icon -}}
-    {{- errorf "partial [assets/icon.html] - Expected value for param 'icon'" -}}
-{{- end -}}
-
-{{- $icon_class := split $icon " " -}}
-{{- $attr := delimit (after 1 $icon_class) " " -}}
-{{- if eq (index $icon_class 0) "fas" -}}
-    <i class="fa-solid fa-{{ $attr}}"></i>
-{{- else if eq (index $icon_class 0) "fab" -}}
-    <i class="fa-brands fa-{{ $attr }}"></i>
-{{- else if eq (index $icon_class 0) "fa" -}}
-    <i class="fa-regular fa-{{ $attr }}"></i>
-{{- else -}}
-    {{- errorf "partial [assets/icon.html] - Unrecognized icon class: %s" $icon_class -}}
-{{- end -}}

layouts/partials/assets/image.html

@@ -15,6 +15,7 @@
 -->
 
 {{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $ratio := .ratio -}}
 {{- $url := .url -}}
 {{- $mode := false -}}
@@ -68,6 +69,7 @@
 
 <!-- Generate a image set of type webp -->
 {{- define "partials/image-scaled.html " -}}
+    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $img := .img -}}
     {{- $ratio := .ratio -}}
     {{- $imgset := "" -}}
@@ -98,7 +100,11 @@
                 {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
             {{- end -}}
             {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
+            {{- if $absoluteURL -}}
+                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
+            {{- else -}}
             {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
+            {{- end -}}
         {{- end -}}
         {{- $imgset = strings.TrimPrefix ", " $imgset -}}
     {{- end -}}
@@ -108,6 +114,7 @@
 
 <!-- Define the img with optional caption -->
 {{- define "partials/image-definition.html" -}}
+    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
     {{- $ratio := .ratio -}}
     {{- $url := .url -}}
     {{- $outerClass := .outerClass -}}
@@ -125,7 +132,11 @@
         {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
         {{- if $img -}}
             {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
-            {{- $fallbackURL = $fallback.RelPermalink -}}
+                {{- if $absoluteURL -}}
+                    {{- $fallbackURL = $fallback.Permalink -}}
+                {{- else -}}
+                    {{- $fallbackURL = $fallback.RelPermalink -}}
+                {{- end -}}
             {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
         {{- end -}}
     {{- end -}}

layouts/partials/assets/navbar-item.html

@@ -0,0 +1,60 @@
+{{- $menu := .menu -}}
+{{- $parent := .parent -}}
+{{- $page := .page -}}
+{{- $class := .class -}}
+{{- $anchorClass := "" -}}
+
+{{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
+{{- $pageURL := $page.RelPermalink | relLangURL -}}
+{{- $isActive := hasPrefix $pageURL $menuURL -}}
+{{- $isAlias := $menu.Params.alias -}}
+{{- $isIcon := $menu.Params.icon -}}
+{{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
+{{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
+
+{{- $url := urls.Parse $menuURL -}}
+{{- $baseURL := urls.Parse $.Site.Params.Baseurl -}}
+{{- $isExternal := ne $url.Host $baseURL.Host -}}
+{{- $externalHref := "" }}
+{{- $suffix := "" }}
+
+{{- if $isExternal }}
+    {{- if $tab -}}
+        {{ $externalHref = "target=\"_blank\" rel=\"noopener noreferrer\"" }}
+    {{- end -}}
+
+    {{- if $cue -}}
+        {{ $suffix = partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
+    {{- end -}}
+{{ end -}}
+
+{{- $mainNav := urlize (lower $menu.Name) -}}
+{{- $childNav := "" -}}
+
+{{- $button := "" -}}
+{{- if $parent -}}
+    {{- $mainNav = urlize (lower $parent.Name) -}}
+    {{- $childNav = urlize (lower $menu.Name) -}}
+    {{- $anchorClass = "dropdown-item" -}}
+{{- else if $menu.HasChildren -}}
+    {{- $anchorClass = "nav-link dropdown-toggle" -}}
+    {{- $button = " role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"" -}}
+{{- else -}}
+    {{- $anchorClass = "nav-link" -}}
+{{- end -}}
+{{- $params := "" -}}
+{{- if and $isAlias (not $isExternal) -}}
+    {{- $params = printf "?menu=%s" $mainNav -}}
+    {{- with $childNav }}{{ $params = printf "%s&child=%s" $params . }}{{ end -}}
+{{- end -}}
+
+<a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{. }}{{ end }}" 
+    {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
+    data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
+    href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
+    
+    {{- with $menu.Pre }}{{ . }}{{ end -}}
+    <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
+    {{- with $menu.Post }}{{ . }}{{ end -}}
+    {{- if not $isIcon }} {{ $suffix }}{{ end -}}
+</a>

layouts/partials/assets/navbar.html

@@ -1,12 +1,13 @@
 <!-- 
     Displays a navigation header with a toggler. The partial supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-0".
     "page"          Required object reference to the current page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
-                    default color is none.
+                    "danger", "warning", "info", "white", "black", "body", or "body-tertiary". The default color is
+                    none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
@@ -16,16 +17,15 @@
 
 <!-- Inline partial to render the color mode switcher -->
 {{- define "partials/navbar-mode.html" -}}
-    {{- $id := .id -}}
     {{- $size := .size -}}
     {{- $collapsed := .collapsed -}}
 
     <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
-        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
+        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme{{ if $collapsed }}-collapsed{{ end }}">
             {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}
             <span class="d-md-none"></span>
         </a>
-        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme{{ if $collapsed }}-collapsed{{ end }}">
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
@@ -48,21 +48,72 @@
     </li>
 {{- end -}}
 
+<!-- Inline partial to render the version switcher -->
+{{- define "partials/navbar-versions.html" -}}
+    {{- $size := .size -}}
+    {{- $collapsed := .collapsed -}}
+    {{- $page := .page -}}
+    {{- $list := site.Params.docs.releases -}}
+    {{- $version := partial "utilities/GetVersion.html" (dict "page" $page) -}}
+
+    <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
+        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-version-switch">
+            {{ if $collapsed }}{{ site.Title }} {{ end }}{{ $version }}
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-version-switch">
+            {{- range $index, $item := $list -}}
+                {{- $active := eq $item.label $version -}}
+                {{- $disabled := false -}}
+                {{- if site.IsServer }}
+                    {{- $disabled = and $item.redirect (gt (len $item.redirect) 0) -}}
+                {{- end -}}
+                {{ if $item.url }}
+                    <li>
+                        {{- $url := (path.Join $item.url) | relLangURL -}}
+                        <a class="pe-5 dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}{{ if $active }} active{{ end }}{{ if $disabled }} disabled{{ end }}" href="{{ $url }}">{{ $item.label }}
+                            {{ if $item.latest }} ({{ T "latest" }}){{ end }}
+                            {{ if $active }}
+                                <span class="position-absolute end-0 me-3">{{- partial "assets/icon.html" (dict "icon" "fas check") }}</span>
+                            {{ end }}
+                        </a>
+                    </li>
+                {{ else }}
+                    {{ if gt $index 0}}<li><hr class="dropdown-divider"></li>{{ end }}
+                    <li><span class="dropdown-header fs-6">{{ $item.label }}</span></li>
+                {{ end }}
+            {{- end -}}
+            {{- if site.Params.docs.overview -}}
+                {{ if gt (len $list) 0 }}<li><hr class="dropdown-divider"></li>{{ end }}
+                <li>
+                    {{- $url := (path.Join site.Params.docs.overview) | relLangURL -}}
+                    <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" href="{{ $url }}">{{ T "allVersions" }}</a>
+                </li>
+            {{- end -}}
+        </ul>
+    </li>
+{{- end -}}
+
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $supportedFlags := slice "true" "false" -}}
 
-{{- $id := 0 -}}
-{{- with .id }}{{ $id = . }}{{ end -}}
+{{- $id := printf "navbar-collapse-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
 
 {{- $page := .page -}}
 {{- if not $page -}}
     {{- errorf "partial [assets/navbar.html] - Missing value for param 'page'" -}}
 {{- end -}}
 
-{{- $menuName := "main" }}
-{{- with .menus }}{{ $menuName = .}}{{ end -}}
+{{- $defaultMenu := "main" }}
+{{- $menuName := $defaultMenu }}
+{{- with .menus }}{{ $menuName = . }}{{ end -}}
 {{- $menus := index site.Menus $menuName -}}
 {{- if or (ne (printf "%T" $menus) "navigation.Menu") (ne (index $menus 0).Menu $menuName) -}}
-    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'menus': %s" $menuName -}}
+    {{- if ne $menuName $defaultMenu }}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'menus': %s" $menuName -}}
+    {{- end -}}
 {{- end -}}
 
 {{- $size := "md" -}}
@@ -84,7 +135,7 @@
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "partial [assets/navbar.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
@@ -100,7 +151,7 @@
     {{- end -}}
 {{- end -}}
 
-{{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- $enableDarkMode := default false site.Params.main.enableDarkMode -}}
 {{- with .mode -}}
     {{- $darkModeParam := . -}}
     {{- if in $supportedFlags $darkModeParam -}}
@@ -110,6 +161,12 @@
     {{- end -}}
 {{- end -}}
 
+{{- $enableVersions := false -}}
+{{ $list := site.Params.docs.releases }}
+{{ if $list }}
+    {{- $enableVersions = gt (len $list ) 1 -}}
+{{ end }}
+
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
@@ -124,118 +181,117 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
-	<div class="container-xxl p-0">
-        <!-- Insert sidebar toggler when applicable -->
-        <div class="d-flex">
-            {{- if $page.Scratch.Get "sidebar" -}}
-                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+{{- $theme := "" -}}
+{{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
+{{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
+
+<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    {{- partial "assets/page-alert.html" (dict "page" $page) -}}
+    <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+        <div class="container-xxl p-0">
+            <!-- Insert sidebar toggler when applicable -->
+            <div class="d-flex">
+                {{- if $page.Scratch.Get "sidebar" -}}
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- else -}}
+                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- end -}}
+            </div>
+    
+            <!-- Insert the brand logo or name -->
+            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+                {{- if $logo -}}
+                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30">
+                {{- else -}}
+                    <span class="fw-bold">{{ $title }}</span>
+                {{- end -}}
+            </a>
+    
+            <!-- Insert main navigation toggler -->
+            <div class="d-flex fw-30">
+                <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                    aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                    <span class="toggler-icon top-bar emphasis"></span>
+                    <span class="toggler-icon middle-bar emphasis"></span>
+                    <span class="toggler-icon bottom-bar emphasis"></span>
                 </button>
-            {{- else -}}
-                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
-                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-                </button>
-            {{- end -}}
-        </div>
-
-        <!-- Insert the brand logo or name -->
-        <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
-            {{- if $logo -}}
-                <img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
-            {{- else -}}
-                <span class="fw-bold">{{ $title }}</span>
-            {{- end -}}
-        </a>
-
-        <!-- Insert main navigation toggler -->
-        <div class="d-flex fw-30">
-            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-                <span class="toggler-icon top-bar emphasis"></span>
-                <span class="toggler-icon middle-bar emphasis"></span>
-                <span class="toggler-icon bottom-bar emphasis"></span>
-            </button>
-        </div>
-
-        <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
-            <!-- Insert search input -->
-            {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
-            
-            <!-- Render top-menu items (maximum depth of 2) -->
-            <ul class="navbar-nav ms-auto">
-                {{- range $menu := $menus -}}
-                    {{- $menu_item_url := $menu.URL | relLangURL -}}
-                    {{- $page_url:= $page.RelPermalink | relLangURL -}}
-                    {{- $active := hasPrefix $page_url $menu_item_url -}}
-
-                    {{- $url := urls.Parse .URL -}}
-                    {{- $baseurl := urls.Parse $.Site.Params.Baseurl -}}
-                    {{- if .HasChildren -}}
+            </div>
+    
+            <div class="navbar-collapse collapse" id="{{ $id }}">
+                <!-- Insert search input -->
+                {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+                
+                <!-- Render top-menu items (maximum depth of 2) -->
+                <ul class="navbar-nav ms-auto">
+                    {{- range $menu := $menus -}}
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                            {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
+                            {{- if .HasChildren -}}
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    {{- range .Children -}}
+                                        {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
+                                    {{- end -}}
+                                </ul>
+                            {{- end -}}
+                        </li>
+                    {{- end -}}
+    
+                    <!-- Insert divider if applicable -->
+                    {{- if and $menus (or $enableLanguage $enableVersions) -}}
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        </li>
+                        <li><hr class="dropdown-divider-bg"></li>
+                    {{- end -}}
+    
+                    <!-- Insert language switcher if applicable -->
+                    {{- if $enableLanguage -}}
+                        {{- $currentLang := $page.Language.Lang -}}
                         <li class="nav-item dropdown">
-                            <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL | relLangURL  }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
+                            <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                             </a>
-                            <ul class="dropdown-menu dropdown-menu-end">
-                                {{- range .Children -}}
-                                    {{- $child_active := eq $page_url (.URL | relLangURL) -}}
-                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL | relLangURL  }}">{{ .Name }}</a></li>
+                            <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end ">
+                                {{- if $page.IsTranslated -}}
+                                    {{- range $page.AllTranslations -}}
+                                        <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Language.LanguageName  }}</a></li>
+                                    {{- end -}}
+                                {{- else -}}
+                                    {{- range site.Languages -}}
+                                        <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                                    {{- end -}}
                                 {{- end -}}
                             </ul>
                         </li>
-                    {{- else -}}
-                        <li class="nav-item">
-                            {{- $external := ne $url.Host $baseurl.Host -}}
-                            <a class="nav-link {{ if $active }}active{{ end }}"
-                                href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if $external }}target="_blank" rel="noopener noreferrer" {{ end }}>
-                                {{- with $pre}}{{ . }}{{ end -}}
-                                <span {{if $active }} class="active"{{end}}>{{ .Name }}</span>
-                                {{- with $post}}{{ . }}{{ end -}}
-                                {{- if $external }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
-                            </a>
-                        </li>
                     {{- end -}}
-                {{- end -}}
-
-
-                {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
-                        <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
-                    </li>
-                    <li><hr class="dropdown-divider-bg"></li>
-                {{- end -}}
-
-                <!-- Insert language switcher if applicable -->
-                {{- if $enableLanguage -}}
-                    {{- $currentLang := $page.Language.Lang -}}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
-                        </a>
-                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end ">
-                            {{- if $page.IsTranslated -}}
-                                {{- range $page.AllTranslations -}}
-                                    <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
-                                {{- end -}}
-                            {{- else -}}
-                                {{- range site.Languages -}}
-                                    <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
-                                {{- end -}}
-                            {{- end -}}
-                        </ul>
-                    </li>
-                {{- end -}}
-                              
-                <!-- Insert color mode switcher -->
-                {{- if $enableDarkMode -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
-                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
-                {{- end -}}
-            </ul>
+                                    
+                    <!-- Insert version switcher -->
+                    {{- if $enableVersions -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true ) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false) -}}
+                    {{- end -}}
+    
+                    <!-- Insert color mode switcher -->
+                    {{- if $enableDarkMode -}}
+                        <!-- Insert divider -->
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        </li>
+                        <li><hr class="dropdown-divider-bg"></li>
+    
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
+                    {{- end -}}
+                </ul>
+            </div>
         </div>
-    </div>
-</nav>
+    </nav>
+</div>

layouts/partials/assets/page-alert.html

@@ -0,0 +1,15 @@
+{{- $page := .page -}}
+{{- if not $page -}}
+    {{- errorf "partial [assets/page-alert.html] - Missing value for param 'page'" -}}
+{{- end -}}
+
+{{- $pageAlertMsg := $page.Scratch.Get "pageAlertMsg" -}}
+{{- $pageAlertURL := $page.Scratch.Get "pageAlertURL" -}}
+{{- $version := $page.Scratch.Get "version" -}}
+
+{{- if $pageAlertMsg -}}
+    <div id="page-alert" class="alert alert-primary alert-no-decoration fade show d-flex align-items-center small m-0 py-1" data-page-alert-version="{{ $version }}">
+        <a href="{{ with $pageAlertURL }}{{ . }}{{ else }}#!{{ end }}" class="text-decoration-none flex-grow-1 text-center">{{ $pageAlertMsg }}</a>
+        <button id="page-alert-btn-close" type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    </div>
+{{- end -}}

layouts/partials/assets/pagination.html

@@ -22,9 +22,11 @@
 
 {{- if in $validFormats $format }}
   {{- if gt $page.Paginator.TotalPages 1 }}
-    <ul class="pagination pagination-{{ $format }} justify-content-center">
-      {{- partial (printf "partials/inline/pagination/%s" $format) $page }}
-    </ul>
+    <nav aria-label="{{ T "paginationNav" }}">
+      <ul class="pagination pagination-{{ $format }} justify-content-center">
+        {{- partial (printf "partials/inline/pagination/%s" $format) $page }}
+      </ul>
+    </nav>
   {{- end }}
 {{- else }}
   {{- errorf $msg2 (delimit $validFormats ", ") }}
@@ -50,11 +52,11 @@
 
     {{- with .Prev }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true">{{ T "paginationPrevious" }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
       </li>
     {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ T "paginationPrevious" }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
       </li>
     {{- end }}
 
@@ -79,11 +81,11 @@
 
     {{- with .Next }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ T "paginationNext" }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
       </li>
     {{- else }}
       <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationNext" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ T "paginationNext" }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationNext" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
       </li>
     {{- end }}
 
@@ -110,14 +112,14 @@
     {{- with .First }}
       {{- if ne $currentPageNumber .PageNumber }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true">{{ T "paginationFirst" }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span></a>
       </li>
       {{- end }}
     {{- end }}
 
     {{- with .Prev }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true">{{ T "paginationPrevious" }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-left"></i></span></a>
       </li>
     {{- end }}
 
@@ -142,7 +144,7 @@
 
     {{- with .Next }}
       <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ T "paginationNext" }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true"><i class="fas fa-angle-right"></i></span></a>
       </li>
     {{- end }}
 

layouts/partials/assets/persona.html

@@ -49,7 +49,7 @@
 
 {{- with $page -}}
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
-    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
     {{- if not $content }}{{ $content = .Content }}{{ end -}}
     {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
 {{- end -}}

layouts/partials/assets/search-input.html

@@ -1,6 +0,0 @@
-<div class="d-flex ms-md-3">
-    <form class="search position-relative flex-grow-1 me-auto">
-        <input id="search" class="form-control is-search" type="search" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
-        <div id="suggestions" class="shadow bg-body rounded d-none" data-no-results="{{ T "ui_no_results" }}"></div>
-    </form>
-</div>

layouts/partials/assets/sharing.html

@@ -0,0 +1,28 @@
+{{- if .Site.Params.sharing.enabled -}}
+    {{- if or .Params.sharing (not (isset .Params "sharing")) -}}
+        {{- $page := . -}}
+        {{- $order := "asc" -}}
+        {{- $list := .Site.Params.sharing.providers -}}
+        {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+        {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
+        {{- $list = sort $list $sort $order -}}
+        <div class="py-3 text-body-secondary hstack gap-2">
+            {{ T "shareLink" }}
+            {{- range $index, $item := $list -}}
+                {{- $url := $item.url -}}
+                {{- $url = replace $url "{url}" $page.Permalink -}}
+                {{- $url = replace $url "{title}" (urlquery $page.Title) -}}
+                {{- $url = $url | safeURL -}}
+                {{- $target := "" -}}
+                {{- $clipboard := "" -}}
+                {{- if .clipboard -}}
+                    {{- $target = (printf "toast-message-%s-%d" (anchorize $item.name) $index ) -}}
+                    {{- $clipboard = $url -}}
+                    {{- $url = "#!" -}}
+                    {{- partial "assets/toast.html" (dict "id" $target "message" (printf "%s %s" (T "link")  (T "copiedToClipboard"))) -}}
+                {{- end -}}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" )}}
+            {{- end -}}
+        </div>
+    {{- end -}}
+{{- end -}}

layouts/partials/assets/toast.html

@@ -0,0 +1,28 @@
+<!-- 
+    Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
+    "id"            Optional id of the toast message, defaults to "toast-message-0".
+    "header":       Optional header of the toast message.
+    "message":      Required toast message.
+-->
+
+{{- $id := printf "toast-message-%d" 0 -}}
+{{ with .id }}
+    {{ $id = . }}
+{{ end }}
+
+{{ $header := .header -}}
+{{ if not $header -}}
+    {{ $header = site.Title -}}
+{{ end -}}
+{{- $message := .message -}}
+{{ if not $message -}}
+    {{- errorf "partial [assets/toast.html] - Missing message text" -}}
+{{ end -}}
+
+<div id="{{ $id }}" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+        {{ with $header }}<strong class="me-auto">{{ . }}</strong>{{ end }}
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">{{ $message }}</div>
+</div>

layouts/partials/footer/footer.html

@@ -1,7 +1,7 @@
 <footer class="container-fluid text-center p-3">
     <div class="container-xxl text-center">
         <small class="text-secondary">
-            {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
+            {{- $copyright := printf "%s © %s %s %s." (T "copyright") (dateFormat "2006" now) .Site.Title (T "rights") }}
             {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
             {{ .Site.Params.footer.license | safeHTML }}
         </small>

layouts/partials/footer/scripts.html

@@ -1,28 +1,34 @@
-{{ $filename := .filename | default "js/main.bundle.js" -}}
-{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
-{{ $page := .page }}
-{{ $header := .header }}
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $filename := .filename | default "js/main.bundle.js" -}}
+{{- $match := .match | default "{js/*.js,js/vendor/**.js}" -}}
+{{- $page := .page -}}
+{{- $header := .header -}}
+{{- $core := .core | default false -}}
+{{- $skipTemplate := .skipTemplate | default false -}}
 
-{{ $files := slice -}}
-{{ range $index, $file := resources.Match $match -}}
-    {{ $files = $files | append $file -}}
-{{ end -}}
+{{- $modules := "" -}}
+{{ if $core }}
+    {{- $modules = site.Params.modules.core -}}
+{{- end -}}
 
-{{ if gt (len $files) 0 }}
-    {{ $bundle := $files | resources.Concat $filename -}}
-    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+{{- $bundle := partial "utilities/bundle" (dict "match" $match "filename" $filename "modules" $modules "basepath" "js/modules" "all" true "debugging" site.Params.debugging.showJS) -}}
+{{- $js := $bundle -}}
+{{- if not $skipTemplate -}}
+    {{- $js = $bundle | resources.ExecuteAsTemplate $filename $page -}}
+{{- end -}}
 
-    {{- if and (not site.IsServer) $header -}}
-        {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
-        {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
-            <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
-        {{- end }}
-    {{- end -}}
-    
+{{- if and (not site.IsServer) $header -}}
+    {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
+    {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+    {{- end }}
+{{- end -}}
+
+{{- if gt (len $js.Content) 0 -}}
     {{- if not hugo.IsProduction -}}
-        <script src="{{ $js.RelPermalink }}"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"></script>
     {{ else -}}
         {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end -}}
-{{ end -}}
+{{ end -}}

layouts/partials/footer/social.html

@@ -1,3 +1,4 @@
+{{- $tab := site.Params.main.externalLinks.tab -}}
 <div class="container-fluid">
     <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
         <div class="col col-md-2 d-none d-md-block"></div>
@@ -7,7 +8,7 @@
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}
-                <a href="{{ .URL | relLangURL }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
                     {{ .Pre | safeHTML }}
                 </a>
             {{ end -}}

layouts/partials/footer/toast-container.html

@@ -0,0 +1,31 @@
+<!-- 
+    Defines a container to stack toast messages. By default, toast messages are displayed in the bottom right of the
+    viewport. Multiple toast messages are stacked vertically. Adjust the configuration by adjusting 'messages' in the
+    site parameters. The following arguments are supported:
+    "placement"     Optional position of the toast messages relative to the viewport: "top-left", "top-center",
+                    "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", or
+                    "bottom-right" (default).
+-->
+
+{{- $placement := "bottom-right" -}}
+{{- $position := "bottom-0 end-0" -}}
+{{- with site.Params.messages.placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top-left" "top-center" "top-right" "middle-left" "middle-center" "middle-right" "bottom-left" "bottom-center" "bottom-right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [footer/toast-container.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
+
+{{- if eq $placement "top-left" }}{{ $position = "top-0 start-0" -}}
+{{- else if eq $placement "top-center" }}{{ $position = "top-0 start-50 translate-middle-x" -}}
+{{- else if eq $placement "top-right" }}{{ $position = "top-0 end-0" -}}
+{{- else if eq $placement "middle-left" }}{{ $position = "top-50 start-0 translate-middle-y" -}}
+{{- else if eq $placement "middle-center" }}{{ $position = "top-50 start-50 translate-middle" -}}
+{{- else if eq $placement "middle-right" }}{{ $position = "top-50 end-0 translate-middle-y" -}}
+{{- else if eq $placement "bottom-left" }}{{ $position = "bottom-0 start-0" -}}
+{{- else if eq $placement "bottom-center" }}{{ $position = "bottom-0 start-50 translate-middle-x" -}}
+{{- else if eq $placement "bottom-right" }}{{ $position = "bottom-0 end-0" -}}
+{{- end -}}
+
+<div id="toast-container" class="toast-container position-fixed {{ $position }} p-3">
+    {{- partial "assets/toast.html" (dict "id" "toast-copied-code-message" "message" (printf "%s %s" (T "code")  (T "copiedToClipboard"))) -}}
+</div>

layouts/partials/head/favicon.html

@@ -1,10 +1,11 @@
 <!-- Source: https://davelage.com/posts/hugo-favicons/ -->
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{ if .Site.Params.favicon.logo -}}
     {{ $favicon := resources.Get .Site.Params.favicon.logo -}}
     {{ range $i := .Site.Params.favicon.sizes -}} 
         {{ $image := $favicon.Resize (printf "%dx%d CatmullRom" $i $i) -}}
-        <link rel="icon" type="image/png" sizes="{{$i}}x{{$i}}" href="{{ $image.Permalink }}">
+        <link rel="icon" type="image/png" sizes="{{$i}}x{{$i}}" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
     {{ end -}} 
     {{ $image := $favicon.Resize "180x CatmullRom" -}}
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ $image.Permalink }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ if $absoluteURL }}{{ $image.Permalink }}{{ else }}{{ $image.RelPermalink }}{{ end }}">
 {{ end -}}

layouts/partials/head/head.html

@@ -3,7 +3,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{ hugo.Generator}}
-    {{ partial "head/stylesheet.html" . -}}
+    {{ partial "head/stylesheet.html" -}}
+    {{- $modules := site.Params.modules.optional | intersect .Page.Params.modules -}}
+    {{- range $index, $mod := $modules -}}
+        {{- $source := printf "scss/%s.scss" $mod -}}
+        {{- $target := printf "css/%s.css" $mod -}}
+        {{- partial "head/stylesheet.html" (dict "source" $source "target" $target "core" false "page" .) }}
+    {{- end -}}
+    {{- if hasPrefix (lower .Site.Params.style.themeFontPath) "http" -}}
+        <link rel="preconnect" href="https://fonts.googleapis.com"> 
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+        <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
+    {{- end -}}
     {{ partial "head/seo.html" . }}
     {{ partialCached "head/favicon.html" . -}}
     {{ if gt (len .Site.Languages) 1}}

layouts/partials/head/icons.html

@@ -11,7 +11,7 @@
 
     Variable names are converted from kebab case to snake case to make them compatible with Hugo's variable naming
     convention. For example, the css variable '--accordion-icon-active-color' is available as 
-    ''.accordion_icon_active_color' within the Hugo template. The processed svg files are published to the "icons"
+    '.accordion_icon_active_color' within the Hugo template. The processed svg files are published to the "icons"
     folder.
     
     The partial supports the following arguments:

layouts/partials/head/stylesheet.html

@@ -1,42 +1,51 @@
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $source := .source | default "scss/app.scss" -}}
+{{- $target := .target | default "css/main.css" -}}
+{{- $page := .page -}}
+{{- $core := .core | default true -}}
+
+{{- $modules := "" -}}
+{{ if $core }}
+    {{- if reflect.IsSlice site.Params.modules.excludeSCSS -}}
+        {{- $modules = complement site.Params.modules.excludeSCSS (or site.Params.modules.core slice) -}}
+    {{ else }}
+        {{- $modules = site.Params.modules.core -}}
+    {{ end }}
+{{- end -}}
+
 {{- $navbarOffset := "0em" -}}
-{{- if .Site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
+{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4em" }}{{ end }}
 {{- $vars := dict 
-    "theme-font"              (default "Inter" .Site.Params.style.themeFont)
-    "primary"                 (default "#007bff" .Site.Params.style.primary)
-    "secondary"               (default "#6c757d" .Site.Params.style.secondary)
-    "success"                 (default "#198754" .Site.Params.style.success)
-    "info"                    (default "#0dcaf0" .Site.Params.style.info)
-    "warning"                 (default "#ffc107" .Site.Params.style.warning)
-    "danger"                  (default "#dc3545" .Site.Params.style.danger)
-    "light"                   (default "#f8f9fa" .Site.Params.style.light)
-    "dark"                    (default "#212529" .Site.Params.style.dark)
+    "theme-font"              (default "Inter" site.Params.style.themeFont)
+    "primary"                 (default "#007bff" site.Params.style.primary)
+    "secondary"               (default "#6c757d" site.Params.style.secondary)
+    "success"                 (default "#198754" site.Params.style.success)
+    "info"                    (default "#0dcaf0" site.Params.style.info)
+    "warning"                 (default "#ffc107" site.Params.style.warning)
+    "danger"                  (default "#dc3545" site.Params.style.danger)
+    "light"                   (default "#f8f9fa" site.Params.style.light)
+    "dark"                    (default "#212529" site.Params.style.dark)
     "navbar-offset"           $navbarOffset
-    "enable-dark-mode"        (printf "%t" ((default true .Site.Params.main.enableDarkMode)))
-    "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
+    "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
+    "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
-{{- if hugo.IsProduction -}}
-    {{- $options = merge $options (dict "outputStyle" "compressed") -}}
-{{- else -}}
-    {{- $options = merge $options (dict "outputStyle" "expanded") -}}
-{{- end -}}
-{{- $css := resources.Get "scss/app.scss" | resources.ExecuteAsTemplate "style.app.scss" . | toCSS $options -}}
-{{- partial "head/icons.html" (dict "css" $css) -}}
-{{- if .Site.Params.style.purge -}}
+{{- $options := (dict "transpiler" "libsass" "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
+{{- $bundle := partial "utilities/bundle" (dict "match" $source "filename" (printf "scss/bundle-%d.scss" now.UnixNano) "modules" $modules "basepath" "scss" "debugging" site.Params.debugging.showSCSS) -}}
+
+{{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
+
+{{ if $core }}
+    {{- partial "head/icons.html" (dict "css" $css) -}}
+{{ end }}
+{{- if site.Params.style.purge -}}
     {{- $post_options := dict "config" "config" -}}
     {{- $css = $css | resources.PostCSS $post_options -}}
 {{- end -}}
 
 {{- if not hugo.IsProduction -}}
-    <link rel="stylesheet" href="{{ $css.Permalink }}">
+    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}">
 {{- else -}}
     {{- $css = $css | fingerprint | resources.PostProcess -}}
-    <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
-{{- end -}}
-{{- if hasPrefix (lower .Site.Params.style.themeFontPath) "http" -}}
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-    <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
+    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
 {{- end -}}

layouts/partials/utilities/GetMenu.html

@@ -1,6 +1,12 @@
+{{- $page := .page -}}
+{{- $version := .version -}}
+
 {{- $menu := "" -}}
-{{- if .IsPage -}}
-    {{- $menu = index .Site.Data .Section -}}
+{{- if $page.IsPage -}}
+    {{- $menu = index site.Data (printf "%s-%s" $page.Section $version) -}}
+    {{ if not $menu }}
+        {{ $menu = index site.Data $page.Section }}
+    {{ end }}
 {{- end -}}
 
 {{- return $menu -}}

layouts/partials/utilities/GetVersion.html

@@ -0,0 +1,38 @@
+<!-- 
+    Retrieve the docs version label of the current page. The path of the page's file is matched with the url of the
+    defined docs releases in the site's parameters. When no match is found it returns the latest label instead.
+-->
+
+{{- $page := .page -}}
+{{- $base := .base -}}
+{{- $version := "" -}}
+
+{{- if and site.Params.docs.releases site.Params.docs.contentPath -}}
+    {{- $docsPath := strings.TrimPrefix "/" site.Params.docs.contentPath -}}
+    {{- if and $page.File (strings.HasPrefix $page.File.Dir $docsPath) -}}
+        {{- $currentPath := strings.TrimPrefix $docsPath $page.File.Dir -}}
+        {{- $currentVersion := index (split $currentPath "/") 0 -}}
+        {{- $versionPath := path.Join site.Params.docs.contentPath $currentVersion -}}
+
+        {{- $list := site.Params.docs.releases -}}
+        {{- range $index, $item := $list -}}
+            {{- $url := strings.TrimSuffix "/" $item.url -}}
+            {{- if eq $url $versionPath -}}
+                {{- if $base }}{{ $version = path.Base $item.url }}{{ else }}{{ $version = $item.label }}{{ end -}}
+            {{- end -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if not $version -}}
+        {{- $list := site.Params.docs.releases -}}
+        {{- range $item := $list -}}
+            {{- if $item.latest -}}
+                {{- if $base }}{{ $version = path.Base $item.url }}{{ else }}{{ $version = $item.label }}{{ end -}}
+            {{- end -}}
+        {{- end -}}
+    {{- end -}}
+{{- else -}}
+    {{- $version = site.Params.docs.version -}}
+{{- end -}}
+
+{{- return $version -}}

layouts/partials/utilities/IsOlder.html

@@ -0,0 +1,32 @@
+<!-- 
+    Returns true if the current version is older than the latest version defined in the docs section of the site
+    parameters. The verification supports semver patterns MAJOR.MINOR.PATCH with an optional suffix.
+    
+    Original code by solus on https://discourse.gohugo.io/t/sorting-semantic-version-numbers/40838/6.
+ -->
+
+{{ $current := .current }}
+{{ $latest := site.Params.docs.latest }}
+
+{{- define "partials/padZeroPrefix.html" -}}
+    {{- $padSize := 6 }}
+    {{- $paddedString := replaceRE "(\\d+)" (print (strings.Repeat (sub $padSize 1) "0") "$1") . }}
+    {{- $trimmedString := replaceRE (print "0+(\\d{" $padSize "})") "$1" $paddedString }}
+    {{- return $trimmedString }}
+{{- end -}}
+
+{{- define "partials/trimZeroPrefix.html" -}}
+    {{- return replaceRE "0+(\\d+)" "$1" . }}
+{{- end -}}
+
+{{- $isOlder := false -}}
+
+{{- if and $current $latest }}
+    {{- $versions := slice $current $latest }}
+    {{- $paddedVersions := apply $versions "partial" "padZeroPrefix" "." }}
+    {{- $sortedVersions := (sort $paddedVersions "value" "desc") }}
+    {{- $sortedVersions = apply $sortedVersions "partial" "trimZeroPrefix" "." }}
+    {{ $isOlder = ne (index $sortedVersions 0) $current }}
+{{- end -}}
+
+{{- return $isOlder -}}

layouts/partials/utilities/URLJoin.html

@@ -0,0 +1,16 @@
+{{- $base := .base -}}
+{{- if not $base }}
+    {{- errorf "partial [assets/utilities/URLJoin.html] - Expected param 'base'" -}}
+{{- end -}}
+
+{{- $path := .path -}}
+{{- if not $path }}
+    {{- errorf "partial [assets/utilities/URLJoin.html] - Expected param 'path'" -}}
+{{- end -}}
+
+{{- $url := $path -}}
+{{- if not (hasPrefix $path "http") -}}
+    {{- $url = printf "%s/%s" (strings.TrimSuffix "/" $base) $path -}}
+{{- end }}
+
+{{- return $url -}}

layouts/partials/utilities/bundle.html

@@ -0,0 +1,67 @@
+{{- $match := .match -}}
+{{- $filename := .filename -}}
+{{- if not (or $match $filename) -}}
+    {{- errorf "partial [assets/bundle.html] - Expected match and filename" -}}
+{{- end -}}
+
+{{- $order := .order | default "asc"}}
+{{- $supportedOrder := slice "asc" "desc" -}}
+{{- if not (in $supportedOrder $order) -}}
+    {{- errorf "partial [assets/bundle.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $modules := .modules -}}
+{{- $all := .all }}
+{{- $basepath := strings.TrimSuffix "/" .basepath -}}
+{{- $ext := trim (path.Ext (trim $match "{}")) "." -}}
+{{- if not $ext -}}
+    {{- errorf "partial [assets/bundle.html] - Cannot derive file extension of match pattern: %s" $match -}}
+{{- end -}}
+
+{{- $debugging := .debugging | default false -}}
+
+{{- if $modules -}}
+    {{- $match = trim $match "{}" -}}
+    {{- $matches := slice $match -}}
+    {{- range $index, $mod := $modules -}}
+        {{- if $all }}
+            {{- $matches = $matches | append (printf "%s/%s/**.%s" $basepath $mod $ext) -}}
+        {{- else -}}
+            {{- $matches = $matches | append (printf "%s/%s.%s" $basepath $mod $ext) -}}
+        {{- end -}}
+    {{- end -}}
+    {{- $match = printf "{%s}" (delimit $matches ",") }}
+{{- end -}}
+
+<!-- TODO: concat by module, then sorted by filename -->
+
+{{ $matches := resources.Match $match }}
+{{ $files := slice }}
+{{ range $index, $file := $matches }}
+    {{ $add := (dict "name" (strings.TrimSuffix (printf ".%s" $ext) $file.Name) "resource" $file ) }}
+    {{ $files = $files | append $add }}
+{{ end }}
+
+{{ $sorted := slice }}
+{{ $files = sort $files "name" }}
+{{- range $index, $file := $files -}}
+    {{ $sorted = $sorted | append $file.resource }}
+{{- end -}}
+
+{{- if $debugging -}}
+    {{ warnf "Processing pattern: %s" $match}}
+    {{- range $index, $file := $sorted -}}
+        {{- warnf " - Processing file: %s" $file }}
+    {{- end -}}
+{{- end -}}
+
+{{/* warnf "FILES: %s" $sorted */}}
+
+{{ $bundle := "" }}
+{{ if gt (len $sorted) 0 }}
+    {{ $bundle = $sorted | resources.Concat $filename -}}
+{{ else }}
+    {{ $bundle = resources.FromString $filename "" }}
+{{ end -}}
+
+{{- return $bundle -}}

layouts/partials/utilities/link.html

@@ -0,0 +1,43 @@
+{{ $destination := .destination }}
+{{- if not $destination -}}
+    {{- errorf "partial [utilities/link.html] - Missing param 'destination'" -}}
+{{- end -}}
+
+{{- $target := "" -}}
+{{- $rel := "" -}}
+{{- $case := .case | default true }}
+{{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
+{{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
+{{- $isExternal := ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host -}}
+
+{{ $text := .text }}
+{{- if not $text -}}
+    {{ if $isExternal }}
+        {{ $text = (urls.Parse (absURL $destination)).Host }}
+    {{ else }}
+        {{ $target := site.GetPage $destination }}
+        {{ if not $target }}
+            {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
+        {{ else }}
+            {{ $text = $target.Title }}
+            {{ if not $case }}{{ $text = lower $text }}{{ end }}
+            {{ $destination = $target.RelPermalink }}
+        {{ end }}
+    {{ end }}
+{{- end -}}
+
+{{- if $isExternal -}}
+    {{- if $tab -}}
+        {{- $target = "_blank" -}}
+        {{- $rel = "noopener noreferrer" -}}
+    {{- end -}}
+
+    {{- if $cue -}}
+        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
+        {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
+    {{- end -}}
+{{ else }}
+    {{ $destination = relLangURL $destination }}
+{{- end -}}
+
+<a href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>

layouts/shortcodes/accordion-item.html

@@ -5,6 +5,12 @@
     "show"          Optional flag to indicate an item should be shown as collapsed.
 -->
 
+{{- $id := .Ordinal -}}
+{{- $parent := printf "accordion-%d" .Parent.Ordinal -}}
+{{- with (.Parent.Get "id") -}}
+    {{- $parent = . -}}
+{{- end -}}
+
 {{- $id := .Ordinal -}}
 {{ $header := .Get "header" -}}
 {{ if not $header -}}
@@ -35,8 +41,6 @@
     {{ errorf "Invalid value for param 'show': %s" $showParam -}}
 {{ end -}}
 
-{{- $parent := printf "accordion-%d" .Parent.Ordinal -}}
-
 <div class="accordion-item">
     {{- with $header -}}
     <h2 class="accordion-header m-0" id="{{ $parent }}-heading-{{ $id }}">

layouts/shortcodes/accordion.html

@@ -1,12 +1,34 @@
 <!-- 
     Displays a group of vertically collapsing and expanding items. Add accordion-item inner elements for each accordion
     item. The shortcode supports the following arguments:
+    "id":           Optional id of the accordion, defaults to "accordion-" with a sequential number.
+    "always-open":  Optional flag to make accordion items stay open when another item is opened.
     "class":        Optional class attribute of the accordion element, e.g. “w-50”.
 -->
 
-{{- $id := .Ordinal -}}
+{{- $id := printf "accordion-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 {{- $class := .Get "class" -}}
 
-<div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">
-    {{- .Inner -}}
+{{- $openParam := "false" -}}
+{{- $open := false -}}
+{{- with .Get "always-open" }}{{ $openParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $openParam -}}
+    {{- if eq $openParam "true" }}{{ $open = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'always-open': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $body := .Inner -}}
+{{- if $open -}}
+    {{- $pattern := printf "data-bs-parent=\"#%s\"" $id -}}
+    {{- $body = (replace .Inner $pattern "") | markdownify | safeHTML }}
+{{- end -}}
+
+<div id="{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }}">
+    {{- $body -}}
 </div>

layouts/shortcodes/alert.html

@@ -4,17 +4,38 @@
                     "warning", "info", "light", "dark", "white" or "black".
     "dismissible"   Optional flag to indicate the alert is dismissible, defaults to false.
     "icon"          Optional class and name of a Font Awesome icon to include.
+    "type"          Optional type of the alert, either "danger" or "info". Generates an alert with related color and
+                    icon.
 -->
 
+{{- $error := false -}}
 {{ $color := "primary" -}}
+{{ $icon := "" }}
+{{ $type := "" -}}
+
+{{ with .Get "type" }}{{ $type = . }}{{ end -}}
+{{ $supportedTypes := slice "danger" "info" -}}
+{{ if $type }}
+    {{ if not (in $supportedTypes $type) -}}
+        {{ errorf "Invalid value for param 'type': %s" .Position -}}
+        {{ $error = true -}}
+    {{ else }}
+        {{ $color = $type }}
+        {{ if eq $type "danger" }}{{ $icon = "fas triangle-exclamation" }}{{ else }}{{ $icon = "fa lightbulb" }}{{ end }}
+    {{ end -}}
+{{ end -}}
+
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
 {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
-    {{ $color = "primary" -}}
+    {{ $error = true -}}
 {{ end -}}
 
-{{ $icon := .Get "icon" }}
+{{ with .Get "icon" }}{{ $icon = . }}{{ end }}
+{{ with $icon }}
+    {{ $icon = partial "assets/icon.html" (dict "icon" (printf "%s fa-2x fa-fw" .)) }}
+{{ end }}
 
 {{ $dismissibleParam := "false" -}}
 {{ $dismissible := false -}}
@@ -24,10 +45,15 @@
     {{ if eq $dismissibleParam "true" }}{{ $dismissible = true }}{{ end -}}
 {{ else -}}
     {{ errorf "Invalid value for param 'dismissible': %s" .Position -}}
+    {{ $error = true -}}
 {{ end -}}
 
-<div class="alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
-    {{ with $icon }}<i class="{{ . }} fa-2x fa-pull-left"></i>{{ end }}
-    {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
-    {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ end }}
-</div>
+{{- if not $error -}}
+    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
+        {{ with $icon }}<div class="pt-1 pe-2">{{ . }}</div>{{ end }}
+        <div class="flex-grow-1 my-auto">
+            {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
+            {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ end }}
+        </div>
+    </div>
+{{- end -}}

layouts/shortcodes/button.html

@@ -12,16 +12,29 @@
     "aria-label"    Optional label for the badge.
     "tooltip"       Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
                     inactive buttons.
-    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
+    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive
+                    buttons.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
+    "class"         Optional class attribute of the button element, e.g. “p-5”.
+    "icon"          Font Awesome icon class attribute, required unless button title is set. An example value is
+                    "fas sort".
+    "order"         Optional order of the icon, either "first" or "last" (default).
+    "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
+                    "between", "around", or "evenly".
+    "toast"         Optional id of the toast to display when the button is clicked.
+    "cue"           Optional flag to indicate if an external link should show a visual cue, defaults to setting
+                    "main.externalLinks.cue" in the site's parameters.
+    "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
+                    "main.externalLinks.tab" in the site's parameters.
 -->
 
 {{ $error := false }}
 {{ $type := "button" -}}
 
+{{- $icon := .Get "icon" }}
 {{ $title := trim .Inner " \r\n" -}}
-{{ if not $title -}}
-    {{ errorf "Missing inner element text: %s" .Position -}}
+{{ if not (or $title $icon) -}}
+    {{ errorf "Missing icon or inner element text: %s" .Position -}}
     {{ $error = true }}
 {{ end -}}
 
@@ -68,6 +81,7 @@
 {{ if $relref }}
     {{ $href = relref . $relref }}
 {{ end }}
+{{ $class := .Get "class" -}}
 
 {{ $placement := "top" -}}
 {{ with .Get "placement" }}{{ $placement = . }}{{ end -}}
@@ -77,6 +91,27 @@
     {{ $error = true }}
 {{ end -}}
 
+{{- $toast := .Get "toast" -}}
+
+{{- $order := "last" -}}
+{{- with .Get "order" }}{{ $order = . }}{{ end -}}
+{{- $supportedOrders := slice "first" "last" -}}
+{{- if not (in $supportedOrders $order) -}}
+    {{ errorf "Invalid value for param 'order': %s" .Position -}}
+    {{ $error = true }}
+{{- end -}}
+
+{{- $justify := "center" -}}
+{{- with .Get "justify" }}{{ $justify = . }}{{ end -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{ errorf "Invalid value for param 'justify': %s" .Position -}}
+    {{ $error = true }}
+{{- end -}}
+
+{{- $cue := .Get "cue" | default site.Params.main.externalLinks.cue -}}
+{{- $tab := .Get "tab" | default site.Params.main.externalLinks.tab -}}
+
 {{ if not $error }}
     {{- partial "assets/button.html" (dict 
         "type" $type
@@ -91,6 +126,13 @@
         "href" $href
         "id" $id
         "state" $state
-        "placement" $placement)
+        "class" $class
+        "placement" $placement
+        "icon" $icon
+        "order" $order
+        "justify" $justify
+        "cue" $cue
+        "tab" $tab
+        "toast" $toast)
     -}} 
 {{ end }}

layouts/shortcodes/carousel.html

@@ -1,18 +1,23 @@
 <!-- 
     Displays a carousel of several responsive images (see the image shortcode for more details). Add inner <img> 
     elements to define individual image slides. The shortcode supports the following arguments:
+    "id":           Optional id of the carousel, defaults to "carousel-" with a sequential number.
     "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". Other values are ignored.
                     Instead, the original aspect ratio of the image is preserved.
     "class":        Optional class attribute of the carousel element, e.g. “w-75”.
 -->
 
+{{- $id := printf "carousel-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
+
 {{ $ratio := .Get "ratio" -}}
 {{ $class := .Get "class" -}}
-{{ $id := .Ordinal -}}
 {{ $images := .Inner -}}
 {{ $items := len (findRE "carousel-item" $images) -}}
 
-<div id="carousel-{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
+<div id="{{ $id }}" class="carousel slide mb-3{{ with $class }} {{ . }}{{ end }}" data-bs-ride="true">
     <div class="carousel-indicators">
         {{ range $index := (seq $items) -}}
             <button type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide-to="{{ sub $index 1 }}" {{ if eq $index 1 }}class="active"{{ end }} aria-current="true" aria-label="Slide {{ $index }}"></button>
@@ -21,11 +26,11 @@
     <div class="carousel-inner">
         {{ $images }}
     </div>
-    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="prev">
+    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#carousel-{{ $id }}" data-bs-slide="next">
+    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </button>

layouts/shortcodes/docs.html

@@ -44,13 +44,23 @@
     {{ errorf "Invalid value for param 'show': %s" $showParam -}}
 {{ end -}}
 
+{{ $fullParam := "true" -}}
+{{ $full := true -}}
+{{ with .Get "full" }}{{ $fullParam = . }}{{ end -}}
+{{ if in $supportedFlags $fullParam -}}
+    {{ if eq $fullParam "true" }}{{ $full = true }}{{ else }}{{ $full = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
+{{ end -}}
 
 {{- /* If any parameters are missing, print an error and exit */ -}}
 {{- if or (not $name) (not $file) -}}
     {{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
 {{- else -}}
-    {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
+    {{- /* Force-check if the file exists */ -}}
+    {{ $tmp := os.Stat $file }}
 
+    {{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
     {{- $match := findRE $regex (readFile $file) -}}
     {{- $match = index $match 0 -}}
 
@@ -70,7 +80,7 @@
                 data-bs-target=".multi-{{ $id }}" 
                 aria-expanded="false" 
                 aria-controls="body-{{ $id }} footer-{{ $id }}">
-                <small>{{ strings.TrimPrefix $basePath $file }}</small>
+                <small>{{ if $full }}{{ strings.TrimPrefix $basePath $file }}{{ else }}{{ path.Base $file }}{{ end }}</small>
             </a>
         </li>
     </ul>

layouts/shortcodes/fa.html

@@ -1,5 +0,0 @@
-{{- if not (.Get 0) -}}
-    {{- errorf "Expected icon name: %s" .Position -}}
-{{- else -}}
-    {{- partial "assets/icon.html" (dict "icon" (printf "fa %s" (delimit .Params " "))) }}
-{{- end -}}

layouts/shortcodes/fab.html

@@ -1,5 +0,0 @@
-{{- if not (.Get 0) -}}
-    {{- errorf "Expected icon name: %s" .Position -}}
-{{- else -}}
-{{- partial "assets/icon.html" (dict "icon" (printf "fab %s" (delimit .Params " "))) }}
-{{- end -}}

layouts/shortcodes/fas.html

@@ -1,5 +0,0 @@
-{{- if not (.Get 0) -}}
-    {{- errorf "Expected icon name: %s" .Position -}}
-{{- else -}}
-{{- partial "assets/icon.html" (dict "icon" (printf "fas %s" (delimit .Params " "))) }}
-{{- end -}}

layouts/shortcodes/file.html

@@ -0,0 +1,68 @@
+{{- /*
+    Source: https://github.com/twbs/bootstrap/blob/main/site/layouts/shortcodes/scss-docs.html
+
+    Usage: `file path="path/to/filename" lang="lang" show="true" full="true"`
+
+    Prints the full content of any given file supported by the Chroma syntax highlighter.
+*/ -}}
+
+{{- $basePath := .Site.Params.docs.basePath -}}
+{{- $file := .Get "path" }}
+{{- if hasPrefix $file "./" -}}
+    {{- $file = path.Clean $file -}}
+{{- else -}}
+    {{- $file = path.Join $basePath (path.Clean $file) -}}
+{{- end -}}
+
+{{- $extension := strings.TrimLeft "." (path.Ext $file)  }}
+{{- $lang := .Get "lang" | default $extension -}}
+{{- $id := printf "docs-collapse-%d" .Ordinal -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $showParam := "true" -}}
+{{ $show := true -}}
+{{ with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{ if in $supportedFlags $showParam -}}
+    {{ if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'show': %s" $showParam -}}
+{{ end -}}
+
+{{ $fullParam := "true" -}}
+{{ $full := true -}}
+{{ with .Get "full" }}{{ $fullParam = . }}{{ end -}}
+{{ if in $supportedFlags $fullParam -}}
+    {{ if eq $fullParam "true" }}{{ $full = true }}{{ else }}{{ $full = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'full': %s" $fullParam -}}
+{{ end -}}
+
+{{- /* If any parameters are missing, print an error and exit */ -}}
+{{- if not $file -}}
+    {{- errorf "%s: %q: Missing required parameters! Got: path=%q!" .Position .Name $file -}}
+{{- else -}}
+
+    {{- /* Force-check if the file exists */ -}}
+    {{ $tmp := os.Stat $file }}
+    {{- $content := readFile $file -}}
+
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+            <a class="nav-link active font-monospace" 
+                href="#body-{{ $id }}" 
+                aria-current="page" 
+                data-bs-toggle="collapse" 
+                data-bs-target=".multi-{{ $id }}" 
+                aria-expanded="false" 
+                aria-controls="body-{{ $id }} footer-{{ $id }}">
+                <small>{{ if $full }}{{ strings.TrimPrefix $basePath $file }}{{ else }}{{ path.Base $file }}{{ end }}</small>
+            </a>
+        </li>
+    </ul>
+    <div class="border-start border-end border-bottom mb-3">
+        <div class="collapse multi-{{ $id }}{{ if $show }} show{{ end }} syntax-highlight" id="body-{{ $id }}">
+            {{- highlight (trim $content "\r\n") $lang "" -}}
+        </div>
+        <div class="collapse multi-{{ $id }}{{ if not $show }} show{{ end }} p-3" id="footer-{{ $id }}"><i>...</i></div>
+    </div>
+{{- end -}}

layouts/shortcodes/link.html

@@ -0,0 +1,55 @@
+<!-- 
+    Generates a link for a given named link or url. The shortcode supports a single unnamed parameter, or various named
+    parameters. The unnamed parameter is recognized as a named link if it does not contain any "/", otherwise it is
+    treated as a url. Any inner text is rendered as the link title, otherwise it uses the host name (for external links)
+    or page name (for internal links). The shortcode supports the following named arguments:
+    "name"          Optional name of the link maintained in the "links" section of the site's parameters. If omitted,
+                    the "url" argument should be provided instead.
+    "url"           Optional url of the link, including the scheme ("http" or "https"). If omitted, the "name" argument
+                    should be provided instead.
+    "cue"           Optional flag to indicate if an external link should show a visual cue, defaults to setting
+                    "main.externalLinks.cue" in the site's parameters.
+    "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
+                    "main.externalLinks.tab" in the site's parameters.
+    "case"          Optional flag to indicate if the retrieved title (e.g. no inner text is provided) of an internal
+                    link should use its original case, defaults to true. If false, the title is set to lower case.
+-->
+
+{{- $error := false -}}
+{{ $name := "" }}
+{{ $url := "" }}
+{{ $case := true }}
+{{ $cue := site.Params.main.externalLinks.cue }}
+{{ $tab := site.Params.main.externalLinks.tab }}
+
+{{ if .IsNamedParams }}
+    {{ $name = .Get "name" }}
+    {{ $url = .Get "url" }}
+    {{ $cue = .Get "cue" | default site.Params.main.externalLinks.cue }}
+    {{ $tab = .Get "tab" | default site.Params.main.externalLinks.tab }}
+    {{ $case = .Get "case" | default true }}
+{{ else if strings.Contains (.Get 0) "/" }}
+    {{ $url = .Get 0 }}
+{{ else }}
+    {{ $name = .Get 0 }}
+{{ end }}
+
+{{ if not (or $name $url) }}
+    {{ errorf "Expected param 'name' or 'url': %s" .Position -}}
+    {{ $error = true -}}
+{{ end }}
+
+{{ if $name }}
+    {{ $url = index site.Params.links $name }}
+    {{ if not $url }}
+        {{ errorf "Cannot find link '%s': %s" $name .Position -}}
+        {{ $error = true -}}
+    {{ end }}
+{{ end }}
+
+{{ $text := trim .Inner " \r\n" | markdownify | safeHTML }}
+
+{{- if not $error -}}
+    {{ partial "utilities/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case) }}
+{{- end -}}
+

layouts/shortcodes/navbar.html

@@ -2,13 +2,15 @@
     Displays a navigation header with a toggler. The menu items are derived from the site's configuration. Nested items
     are supported at one-level depth. The navigation bar includes a search area and a language switcher if applicable.
     The shortcode supports the following arguments:
+    "id"            Optional id of the navbar toggler, defaults to "navbar-collapse-n" with a sequential number n
+                    starting at 1.
     "path"          Required path of the active page.
     "menus"         Optional name of the menu configuration, defaults to "main".
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
-                    default color is none.
+                    "danger", "warning", "info", "white", "black", "body", or "body-tertiary". The default color is
+                    none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
@@ -16,10 +18,13 @@
 -->
 
 {{ $error := false }}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body" "body-tertiary" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "white" "black" "body" "body" "body-tertiary" -}}
 {{ $supportedFlags := slice "true" "false" -}}
 
-{{ $id := add .Ordinal 1 }}
+{{- $id := printf "navbar-collapse-%d" (add .Ordinal 1) -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
 {{ $path := .Get "path" }}
 {{ $page := .Site.GetPage $path }}

layouts/shortcodes/release.html

@@ -0,0 +1,68 @@
+<!-- 
+    Displays a release button that links to a specific release. Use the optional state to indicate if it is a new or
+    deprecated feature.
+    "version":      Required version string, expects semver notation with a "v" prefix.
+    "state":        Optional state, either "new" or "deprecated".
+    "short":        Optional flag to indicate the release button should use short notation.
+-->
+
+{{- $error := false -}}
+{{- $version := .Get "version" -}}
+{{- $inline := false -}}
+
+{{- $state := "new" -}}
+{{- with .Get "state" }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "new" "deprecated" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "Invalid value for param 'state': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $shortParam := "false" -}}
+{{- $short := false -}}
+{{- with .Get "short" }}{{ $shortParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $shortParam -}}
+    {{- if eq $shortParam "true" }}{{ $short = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'short': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $inlineParam := "false" -}}
+{{- $inline := false -}}
+{{- with .Get "inline" }}{{ $inlineParam = . }}{{ end -}}
+{{- $supportedFlags := slice "true" "false" -}}
+{{- if in $supportedFlags $inlineParam -}}
+    {{- if eq $inlineParam "true" }}{{ $inline = true }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'inline': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $title := $version -}}
+{{- $color := "success" -}}
+{{- if eq $state "deprecated" -}}
+    {{- $color = "secondary" -}}
+{{- end -}}
+
+{{- if not $short -}}
+    {{- if eq $state "deprecated" -}}
+        {{- $title = (printf "Deprecated in %s" $version) -}}
+    {{- else -}}
+        {{- $title = (printf "Added in %s" $version) -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not $error -}}
+    <div class="pb-3">
+    {{- partial "assets/button.html" (dict 
+        "title" $title
+        "href" (partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $version))
+        "size" "sm"
+        "color" $color
+        "outline" "true"
+        "class" "rounded-2 fw-semibold")
+    -}} 
+    </div>
+{{- end -}}

layouts/shortcodes/timeline.html

@@ -0,0 +1,101 @@
+<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
+{{ $error := false }}
+
+{{- $data := .Get "data" -}}
+{{ if not $data -}}
+    {{ errorf "Missing param 'data': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $entries := index site.Data $data }}
+{{ if not $entries -}}
+    {{ errorf "Invalid timeline data '%s': %s" $data .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $background := "" -}}
+{{ with .Get "background" }}{{ $background = . }}{{ end -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
+{{ if and $background (not (in $supportedColors $background)) -}}
+    {{ errorf "Invalid value for param 'background': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-icon.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $icon := .icon -}}
+    {{- $direction := .direction -}}
+    <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
+        <div class="d-flex">
+            <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
+            </div>
+            <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
+        </div>
+    </div>
+{{- end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-panel.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $content := .content -}}
+    {{- $color := .color -}}
+    {{- $title := .title -}}
+    {{- $badge := .badge -}}
+    {{- $url := .url -}}
+    {{- $date := .date -}}
+    {{- if and $url (not (hasPrefix $url "http")) -}}
+        {{- $url = partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $url) }}
+    {{- end -}}
+    {{- $direction := .direction -}}
+
+    <div class="col-{{ $col }} d-flex align-items-center">
+        <div class="d-flex h-100 w-100">
+            <div class="timeline-panel-{{ $direction }}"></div>
+            <div class="timeline-description-text-{{ $direction }} p-3 w-100">
+                <div>
+                    {{ with $url }}
+                        <a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
+                    {{ else}}
+                        <span class="fs-5 fw-bold text-uppercase text-{{ $color }} text-break align-middle">{{ $title }}</span>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
+                    {{ end }}
+                </div>
+                {{ if $date }}
+                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
+                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
+                {{ end }}
+                <p class="mt-3 mb-0">{{ $content | markdownify }}</p>
+            </div>
+        </div>
+    </div>    
+{{- end -}}
+
+<!-- Render default timeline -->
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
+            {{ if eq (mod $index 2) 1 }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
+            {{ else }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
+            {{ end }}
+        </div>
+        <div class="row timeline g-0 p-3"> </div>
+    {{ end }}
+</div>
+
+<!-- Render timeline for smaller devices -->
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
+            {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
+            {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
+        </div>
+        <div class="row timeline-sm g-0 p-3"> </div>
+    {{ end }}
+</div>

layouts/shortcodes/toast.html

@@ -1,24 +1,17 @@
 <!-- 
     Prepares a toast message. Use a trigger to display the message. The shortcode supports the following arguments:
+    "id"            Optional id of the toast message, defaults to "toast-message-n" with sequence n.
     "header":       Optional header of the toast message. Uses the site title by default.
 -->
 
+{{- $error := false -}}
+{{- $id := printf "toast-message-%d" .Ordinal -}}
+{{- with .Get "id" }}{{ $id = . }}{{ end -}}
 {{ $header := .Get "header" -}}
-{{ if not $header -}}
-    {{ $header = site.Title -}}
-{{ end -}}
-
 {{ $message := trim .Inner " \r\n" -}}
+
 {{ if not $message -}}
     {{ errorf "Missing inner element text: %s" .Position -}}
+{{ else if not $error -}}
+    {{ partial "assets/toast.html" (dict "id" $id "header" $header "message" $message) }}
 {{ end -}}
-
-<div class="toast-container position-fixed bottom-0 end-0 p-3">
-    <div id="toastMessage" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="toast-header">
-            <strong class="me-auto">{{ $header }}</strong>
-            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-        <div class="toast-body">{{ $message }}</div>
-    </div>
-</div>