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/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

@@ -11,6 +11,9 @@
     <a href="https://gohugo.io" alt="Hugo website">
         <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>
@@ -53,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

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/scss/app.scss

@@ -5,61 +5,8 @@
 @import "common/variables.scss";
 @import "common/icons.scss";
 
-// Import Bootstrap banner and functions
+// Import Bootstrap configuration (mounted by core Bootstrap module)
-@import "bootstrap/scss/mixins/banner";
+@import "bootstrap.scss";
-@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 Hinode theme styles
 @import "components/alert.scss";
@@ -76,9 +23,9 @@
 @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";
@@ -101,5 +48,5 @@
 // Import theme placeholder
 @import "theme/theme.scss";
 
-// Import Bootstrap utilities API
+// Import Bootstrap utilities API  (mounted by core Bootstrap module)
-@import "bootstrap/scss/utilities/api";
+@import "modules/bootstrap/utilities/api";

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 }
+/* LineHighlight */ .chroma .hl { background-color: #b8b800 }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* 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; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* 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 }
+/* 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; 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

@@ -87,25 +87,33 @@ home = ["HTML", "RSS", "REDIR"]
     extended = true
     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"
   [[module.mounts]]
-    source = "static/fonts"
+    source = "netlify.toml"
-    target = "static/fonts"
+    target = "assets/config/netlify.toml"
-# toml-docs-start javascript
+# toml-docs-start modules
-  [[module.mounts]]
+  [[module.imports]]
-    source = "node_modules/bootstrap/dist/js"
+    path = "github.com/gethinode/mod-bootstrap"
-    target = "assets/js/vendor/bootstrap"
+  [[module.imports]]
-    includeFiles = "*.bundle.js"
+    path = "github.com/gethinode/mod-flexsearch"
-  [[module.mounts]]
+  [[module.imports]]
-    source = "node_modules/flexsearch/dist"
+    path = "github.com/gethinode/mod-fontawesome"
-    target = "assets/js/vendor/flexsearch"
+  [[module.imports]]
-    includeFiles = "*.bundle.js"
+    path = "github.com/gethinode/mod-katex"
-# toml-docs-end javascript
+  [[module.imports]]
-  [[module.mounts]]
+    path = "github.com/gethinode/mod-leaflet"
-    source = "node_modules/@fortawesome/fontawesome-free/webfonts"
+# toml-docs-end modules
-    target = "static/fonts"

config/_default/params.toml

@@ -4,8 +4,26 @@
     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]
     github = "https://github.com/gethinode/hinode"

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',
+      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
-      './node_modules/bootstrap/scss/_dropdown.scss',
+      './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
-      './node_modules/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
-      './node_modules/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
-      './node_modules/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
-      './node_modules/bootstrap/scss/_utilities.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'
     ])
   ]
 })

content/en/blog/bootstrap-elements.md

@@ -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 */>}}
@@ -245,6 +245,16 @@ 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.

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/nl/blog/bootstrap-elements.md

@@ -246,6 +246,16 @@ 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.

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
+icon: fas rocket
-photoCredits: <a href="https://unsplash.com/@kfred">Karl Fredrickson</a>
-photoSource: <a href="https://unsplash.com/photos/TYIzeCiZ_60">Unsplash</a>
 ---
 
 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
+icon: fab docker
-photoCredits: <a href="https://unsplash.com/@alejandroescamilla">Alejandro Escamilla</a> 
-photoSource: <a href="https://unsplash.com/photos/yC-Yzbqy7PY">Unsplash</a>
 ---
 
 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
@@ -138,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
@@ -129,7 +131,7 @@
 - id: show
   translation: "Tonen"
 - id: comments
-  translation: "commentaar" 
+  translation: "Reacties" 
 
 # Related posts
 - id: seeAlso

layouts/_default/baseof.html

@@ -12,6 +12,10 @@
     {{- 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">
     <head>
@@ -19,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" .) -}}
-            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
-        {{- end -}}
         <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
@@ -79,6 +81,19 @@
         {{ end }}
 
         {{- partial "footer/toast-container.html" . -}}
-        {{- partialCached "footer/scripts.html" (dict "header" false "page" .) }}
+        {{- 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

@@ -67,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>
@@ -75,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 }}" />
+					<square70x70logo src="{{ $square70.RelPermalink }}" />
-					<square150x150logo src="{{ $square150.Permalink }}" />
+					<square150x150logo src="{{ $square150.RelPermalink }}" />
-					<wide310x150logo src="{{ $wide310.Permalink }}" />
+					<wide310x150logo src="{{ $wide310.RelPermalink }}" />
-					<square310x310logo src="{{ $square310.Permalink }}" />
+					<square310x310logo src="{{ $square310.RelPermalink }}" />
 				{{ end }}
 				<TileColor>#000000</TileColor>
 			</tile>

layouts/partials/assets/breadcrumb.html

@@ -3,7 +3,7 @@
         {{- range $index, $item := .Page.Ancestors.Reverse -}}
             {{- $title := .Title -}}
             {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
-            {{- $address := or .Permalink (.Params.Redirect | absLangURL) -}}
+            {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
             {{ if $address }}
                 <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
             {{ else }}

layouts/partials/assets/button.html

@@ -22,6 +22,10 @@
                     "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" -}}
@@ -95,6 +99,7 @@
 {{- end -}}
 
 {{- $class := .class }}
+{{ with $badge }}{{ $class = printf "%s me-3" $class }}{{ end }}
 
 {{- $order := "last" -}}
 {{- with .order }}{{ $order = . }}{{ end -}}
@@ -113,8 +118,27 @@
 {{- $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 }}"
@@ -127,8 +151,8 @@
     >
 
     <div class="d-flex justify-content-{{ $justify }}">
-        <div>{{ $title }}</div>
+        <div class="my-auto">{{ $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 }}
+        {{- 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

@@ -107,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

layouts/partials/assets/card.html

@@ -111,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 -}}

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)) -}}
-            {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
+            {{- 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 -}}
@@ -145,7 +156,7 @@
                 srcset="{{ . }}"
                 sizes="100vw"
                 {{- end }}
-                src="{{ absURL $fallbackURL }}"
+                src="{{ $fallbackURL }}"
                 alt="{{ $title }}">
         </div>
     {{- if $caption -}}

layouts/partials/assets/navbar-item.html

@@ -9,12 +9,24 @@
 {{- $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 := "" }}
-{{- if $isExternal }}{{ $externalHref = "target=\"_blank\" rel=\"noopener noreferrer\"" }}{{ end -}}
+{{- $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 := "" -}}
@@ -44,5 +56,5 @@
     {{- with $menu.Pre }}{{ . }}{{ end -}}
     <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
     {{- with $menu.Post }}{{ . }}{{ end -}}
-    {{- if and $isExternal (not $isIcon)}} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
+    {{- if not $isIcon }} {{ $suffix }}{{ end -}}
 </a>

layouts/partials/assets/navbar.html

@@ -21,11 +21,11 @@
     {{- $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") }}
@@ -93,6 +93,7 @@
     </li>
 {{- end -}}
 
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $supportedFlags := slice "true" "false" -}}
 
 {{- $id := printf "navbar-collapse-%d" 0 -}}
@@ -105,11 +106,14 @@
     {{- errorf "partial [assets/navbar.html] - Missing value for param 'page'" -}}
 {{- end -}}
 
-{{- $menuName := "main" }}
+{{- $defaultMenu := "main" }}
-{{- with .menus }}{{ $menuName = .}}{{ end -}}
+{{- $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" -}}
@@ -147,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 -}}
@@ -202,7 +206,7 @@
             <!-- 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">
+                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30">
                 {{- else -}}
                     <span class="fw-bold">{{ $title }}</span>
                 {{- end -}}
@@ -238,7 +242,7 @@
                     {{- end -}}
     
                     <!-- Insert divider if applicable -->
-                    {{- if or $enableLanguage $enableVersions -}}
+                    {{- 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>
@@ -258,7 +262,7 @@
                             <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>
+                                        <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Language.LanguageName  }}</a></li>
                                     {{- end -}}
                                 {{- else -}}
                                     {{- range site.Languages -}}

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/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" -}}
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
+{{- $filename := .filename | default "js/main.bundle.js" -}}
-{{ $page := .page }}
+{{- $match := .match | default "{js/*.js,js/vendor/**.js}" -}}
-{{ $header := .header }}
+{{- $page := .page -}}
+{{- $header := .header -}}
+{{- $core := .core | default false -}}
+{{- $skipTemplate := .skipTemplate | default false -}}
 
-{{ $files := slice -}}
+{{- $modules := "" -}}
-{{ range $index, $file := resources.Match $match -}}
+{{ if $core }}
-    {{ $files = $files | append $file -}}
+    {{- $modules = site.Params.modules.core -}}
-{{ end -}}
+{{- end -}}
 
-{{ if gt (len $files) 0 }}
+{{- $bundle := partial "utilities/bundle" (dict "match" $match "filename" $filename "modules" $modules "basepath" "js/modules" "all" true "debugging" site.Params.debugging.showJS) -}}
-    {{ $bundle := $files | resources.Concat $filename -}}
+{{- $js := $bundle -}}
-    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+{{- if not $skipTemplate -}}
+    {{- $js = $bundle | resources.ExecuteAsTemplate $filename $page -}}
+{{- end -}}
 
-    {{- if and (not site.IsServer) $header -}}
+{{- if and (not site.IsServer) $header -}}
-        {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
+    {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
-        {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
+    {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
-            <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
-        {{- end }}
+    {{- end }}
-    {{- end -}}
+{{- end -}}
-    
+
+{{- if gt (len $js.Content) 0 -}}
     {{- if not hugo.IsProduction -}}
-        <script src="{{ $js.Permalink }}"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"></script>
     {{ else -}}
         {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ $js.Permalink }}" 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 }}" 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/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)
+    "theme-font"              (default "Inter" site.Params.style.themeFont)
-    "primary"                 (default "#007bff" .Site.Params.style.primary)
+    "primary"                 (default "#007bff" site.Params.style.primary)
-    "secondary"               (default "#6c757d" .Site.Params.style.secondary)
+    "secondary"               (default "#6c757d" site.Params.style.secondary)
-    "success"                 (default "#198754" .Site.Params.style.success)
+    "success"                 (default "#198754" site.Params.style.success)
-    "info"                    (default "#0dcaf0" .Site.Params.style.info)
+    "info"                    (default "#0dcaf0" site.Params.style.info)
-    "warning"                 (default "#ffc107" .Site.Params.style.warning)
+    "warning"                 (default "#ffc107" site.Params.style.warning)
-    "danger"                  (default "#dc3545" .Site.Params.style.danger)
+    "danger"                  (default "#dc3545" site.Params.style.danger)
-    "light"                   (default "#f8f9fa" .Site.Params.style.light)
+    "light"                   (default "#f8f9fa" site.Params.style.light)
-    "dark"                    (default "#212529" .Site.Params.style.dark)
+    "dark"                    (default "#212529" site.Params.style.dark)
     "navbar-offset"           $navbarOffset
-    "enable-dark-mode"        (printf "%t" ((default true .Site.Params.main.enableDarkMode)))
+    "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
-    "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
+    "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" "libsass" "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "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) -}}
-{{- if hugo.IsProduction -}}
+
-    {{- $options = merge $options (dict "outputStyle" "compressed") -}}
+{{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
-{{- else -}}
+
-    {{- $options = merge $options (dict "outputStyle" "expanded") -}}
+{{ if $core }}
-{{- end -}}
+    {{- partial "head/icons.html" (dict "css" $css) -}}
-{{- $css := resources.Get "scss/app.scss" | resources.ExecuteAsTemplate "style.app.scss" . | toCSS $options -}}
+{{ end }}
-{{- partial "head/icons.html" (dict "css" $css) -}}
+{{- if site.Params.style.purge -}}
-{{- 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">
+    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" 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" }}">
 {{- end -}}

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/alert.html

@@ -4,10 +4,27 @@
                     "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) -}}
@@ -15,9 +32,9 @@
     {{ $error = true -}}
 {{ end -}}
 
-{{ $icon := "" }}
+{{ with .Get "icon" }}{{ $icon = . }}{{ end }}
-{{ with .Get "icon" }}
+{{ with $icon }}
-    {{ $icon = partial "assets/icon.html" (dict "icon" (printf "%s fa-2x fa-pull-left" .)) }}
+    {{ $icon = partial "assets/icon.html" (dict "icon" (printf "%s fa-2x fa-fw" .)) }}
 {{ end }}
 
 {{ $dismissibleParam := "false" -}}
@@ -32,9 +49,11 @@
 {{ end -}}
 
 {{- if not $error -}}
-    <div class="alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
+    <div class="d-flex alert alert-{{ $color }} {{ if $dismissible }}alert-dismissible fade show{{ end }}" role="alert">
-        {{ with $icon }}{{ . }}{{ end }}
+        {{ with $icon }}<div class="pt-1 pe-2">{{ . }}</div>{{ end }}
-        {{ trim .Inner " \r\n" | markdownify | safeHTML -}}
+        <div class="flex-grow-1 my-auto">
-        {{ if $dismissible }}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>{{ 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>
     </div>
 {{- end -}}

layouts/shortcodes/button.html

@@ -12,17 +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 -}}
+{{ if not (or $title $icon) -}}
-    {{ errorf "Missing inner element text: %s" .Position -}}
+    {{ errorf "Missing icon or inner element text: %s" .Position -}}
     {{ $error = true }}
 {{ end -}}
 
@@ -69,6 +81,7 @@
 {{ if $relref }}
     {{ $href = relref . $relref }}
 {{ end }}
+{{ $class := .Get "class" -}}
 
 {{ $placement := "top" -}}
 {{ with .Get "placement" }}{{ $placement = . }}{{ end -}}
@@ -80,6 +93,25 @@
 
 {{- $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
@@ -94,7 +126,13 @@
         "href" $href
         "id" $id
         "state" $state
+        "class" $class
         "placement" $placement
+        "icon" $icon
+        "order" $order
+        "justify" $justify
+        "cue" $cue
+        "tab" $tab
         "toast" $toast)
     -}} 
 {{ end }}

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/release.html

@@ -58,7 +58,7 @@
     <div class="pb-3">
     {{- partial "assets/button.html" (dict 
         "title" $title
-        "href" (printf "%s/%s" (strings.TrimSuffix "/" site.Params.docs.release) $version)
+        "href" (partial "partials/utilities/URLJoin.html" (dict "base" site.Params.docs.release "path" $version))
         "size" "sm"
         "color" $color
         "outline" "true"

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>

netlify.toml

@@ -37,7 +37,7 @@
             font-src 'self' https://*.netlify.app https://fonts.gstatic.com; \
             frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com \
                 app.netlify.com; \
-            img-src 'self' https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
+            img-src 'self' data: https://*.netlify.app 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' \
             """

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.15.2",
+  "version": "0.16.8",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -17,10 +17,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "prestart": "npm run clean",
+    "prestart": "npm run clean && npm run mod:vendor",
     "start": "hugo server --bind=0.0.0.0 --disableFastRender",
-    "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender -e production",
+    "start:prod": "hugo server --bind=0.0.0.0 --disableFastRender --printI18nWarnings -e production",
-    "prebuild": "npm run clean",
+    "prebuild": "npm run clean && npm run -s mod:install",
     "build": "hugo --gc --minify",
     "build:debug": "hugo -e debug --debug",
     "build:preview": "npm run build -D -F",
@@ -31,14 +31,20 @@
     "lint:styles": "stylelint \"assets/scss/**/*.{css,sass,scss,sss,less}\"",
     "lint:markdown": "markdownlint-cli2 \"*.md\" \"content/**/*.md\"",
     "lint:markdown-fix": "markdownlint-cli2-fix \"*.md\" \"content/**/*.md\"",
+    "mod:clean": "hugo mod clean",
+    "mod:install": "hugo mod get ./... && npm run -s mod:vendor && npm run -s mod:tidy",
+    "mod:update": "hugo mod get -u ./... && npm run -s mod:vendor && npm run -s mod:tidy",
+    "mod:tidy": "hugo mod tidy",
+    "mod:vendor": "rimraf _vendor && hugo mod vendor",
     "test": "npm run -s lint",
     "env": "hugo env",
     "precheck": "npm version",
     "check": "hugo version",
+    "create:syntax": "npm run -s create:syntax-light & npm run -s create:syntax-dark && npm run -s update:syntax-dark",
     "create:syntax-light": "hugo gen chromastyles --style=github > ./assets/scss/components/_syntax-light.scss",
     "create:syntax-dark": "hugo gen chromastyles --style=github-dark > ./assets/scss/components/_syntax-dark.scss",
-    "create:syntax": "npm run -s create:syntax-light & npm run -s create:syntax-dark",
+    "update:syntax-dark": "replace-in-files --string=\"#ffffcc\" --replacement=\"#b8b800\" ./assets/scss/components/_syntax-dark.scss",
-    "upgrade": "npx npm-check-updates -u"
+    "upgrade": "npx npm-check-updates -u && npm run -s mod:update"
   },
   "repository": {
     "type": "git",
@@ -54,7 +60,6 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
     "eslint": "^8.39.0",
@@ -62,11 +67,11 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "flexsearch": "^0.7.31",
     "hugo-bin": "^0.111.0",
     "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
+    "replace-in-files-cli": "^2.2.0",
     "rimraf": "^5.0.0",
     "shx": "^0.3.4",
     "stylelint": "^15.6.0",