Merge pull request #316 from gethinode/develop

Refine config

.github/release.yml

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

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://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" />
+    </a>
     <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
         <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
     </a>
@@ -24,7 +27,7 @@
         <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
     </a>
     <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode?label=open%20pulls" />
     </a>
     <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
         <img src="https://img.shields.io/github/license/gethinode/hinode" />
@@ -75,10 +78,10 @@ Start a new Hinode project in three steps:
 
 1. Create a new site
 
-    Hinode is available as a [child theme][repository_child], and a [main theme][repository]. The child theme uses [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the child theme:
+    Hinode is available as a [template][repository_template], and a [main repository][repository]. The template [npm][npm] to link to the latest available version of Hinode. Unless you plan to customize a lot, it is recommended to use the template:
 
     ```bash
-    git clone https://github.com/gethinode/child.git my-hinode-site && cd my-hinode-site
+    git clone https://github.com/gethinode/template.git my-hinode-site && cd my-hinode-site
     ```
 
     Use the main theme if you intend to customize the base code:
@@ -120,7 +123,7 @@ Hinode is inspired by the following themes:
 
 ## License
 
-The `hinode` and `child` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons ([CC BY-NC 4.0)][cc-by-nc-4.0] license.
+The `hinode` and `template` codebase is released under the [MIT license][license]. The documentation (including the "README" and `docs` codebase) is licensed under the Creative Commons [(CC BY-NC 4.0)][cc-by-nc-4.0] license.
 
 <!-- MARKDOWN PUBLIC LINKS -->
 [blist]: https://github.com/apvarun/blist-hugo-theme
@@ -143,5 +146,5 @@ The `hinode` and `child` codebase is released under the [MIT license][license].
 [demo]: https://demo.gethinode.com/
 [license]: https://github.com/gethinode/hinode/blob/main/LICENSE
 [repository]: https://github.com/gethinode/hinode.git
-[repository_child]: https://github.com/gethinode/child.git
+[repository_template]: https://github.com/gethinode/template.git
 [website]: https://gethinode.com/

assets/js/alert.js

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

assets/scss/app.scss

@@ -62,6 +62,7 @@
 // scss-docs-end awesome
 
 // Import Hinode theme styles
+@import "components/alert.scss";
 @import "components/blockquote.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
@@ -71,6 +72,7 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/pagination.scss";
 @import "components/persona.scss";
 @import "components/popover.scss";
 @import "components/search.scss";

assets/scss/common/_icons.scss

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

assets/scss/components/_alert.scss

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

assets/scss/components/_pagination.scss

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

config/_default/hugo.toml

@@ -27,6 +27,20 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 # toml-docs-end language
 
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -71,7 +85,7 @@ defaultContentLanguageInSubdir = true
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.81.0"
+    min = "0.110.0"
     max = ""
   [[module.mounts]]
     source = "assets"
@@ -79,6 +93,9 @@ defaultContentLanguageInSubdir = true
   [[module.mounts]]
     source = "static"
     target = "static"
+  [[module.mounts]]
+    source = "static/fonts"
+    target = "static/fonts"
 # toml-docs-start javascript
   [[module.mounts]]
     source = "node_modules/bootstrap/dist/js"
@@ -89,3 +106,6 @@ defaultContentLanguageInSubdir = true
     target = "assets/js/vendor/flexsearch"
     includeFiles = "*.bundle.js"
 # toml-docs-end javascript
+  [[module.mounts]]
+    source = "node_modules/@fortawesome/fontawesome-free/webfonts"
+    target = "static/fonts"

config/_default/params.toml

@@ -8,10 +8,9 @@
 
 # toml-docs-start docs
 [docs]
-    version = "0.8"
-    basePath = ""
     github = "https://github.com/gethinode/hinode"
     release = "https://github.com/gethinode/hinode/releases/tag/"
+    checkVersion = false
 # toml-docs-end docs
 
 # toml-docs-start home
@@ -97,6 +96,7 @@
         separator = true
     [sections.projects]
         title = "Projects"
+        layout = "card"
         sort = "title"
         reverse = false
         nested = true
@@ -106,7 +106,7 @@
         padding = "3"
         header = "none"
         footer = "tags"
-        orientation = "none"
+        orientation = "horizontal"
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false

config/production/config.toml

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

content/en/about.md

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

content/en/projects/another-project.md

@@ -4,9 +4,7 @@ title: Another project
 date: 2021-07-15
 description: Another project.
 tags: ["javascript", "golang"]
-thumbnail: img/coffee.jpg # https://picsum.photos/id/1060/5598/3732
+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/en/projects/sample-project.md

@@ -4,9 +4,7 @@ title: Sample project
 date: 2021-07-15
 description: A sample project.
 tags: ["html", "css"]
-thumbnail: img/laptop.jpg # https://picsum.photos/id/0/5616/3744
+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.

content/nl/about.md

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

i18n/en.yaml

@@ -53,14 +53,16 @@
   translation: "Article"
 - id: articles
   translation: "Articles"
+- id: paginationNav
+  translation: "Page navigation"
 - id: paginationPrevious
-  translation: "Previous"
+  translation: "Previous page"
 - id: paginationNext
-  translation: "Next"
+  translation: "Next page"
 - id: paginationFirst
-  translation: "First"
+  translation: "First page"
 - id: paginationLast
-  translation: "Last"
+  translation: "Last page"
 - id: toggleSidebar
   translation: "Toggle sidebar navigation"
 - id: colorMode
@@ -87,6 +89,12 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: latest
+  translation: "latest"
+- id: allVersions
+  translation: "All versions"
+- id: newerVersionAlert
+  translation: "There is a newer version of {{ . }}!"
 
 # 404 page
 - id: pageNotFound

i18n/nl.yaml

@@ -45,6 +45,8 @@
   translation: "Artikel"
 - id: articles
   translation: "Artikelen"
+- id: paginationNav
+  translation: "Pagina navigatie"
 - id: paginationPrevious
   translation: "Vorige"
 - id: paginationNext
@@ -77,6 +79,12 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: latest
+  translation: "meest recente"
+- id: allVersions  
+  translation: "Alle versies"
+- id: newerVersionAlert
+  translation: "Er is een nieuwere versie van {{ . }}!"
 
 # 404 page
 - id: pageNotFound

layouts/_default/baseof.html

@@ -1,6 +1,16 @@
 {{- $section := .Section }}
-{{- with partial "utilities/GetMenu" . }}{{ $.Scratch.Set "sidebar" . }}{{ end -}}
+{{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
-{{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
+{{- $.Scratch.Set "version" $version -}}
+{{ with partial "utilities/GetMenu" (dict "page" . "version" $version) }}{{ $.Scratch.Set "sidebar" . }}{{ end }}
+
+{{- if and site.Params.docs.checkVersion $version -}}
+    {{- if ne $version "latest" -}}
+        {{- if partial "utilities/IsOlder" (dict "current" $version) -}}
+            {{- $.Scratch.Set "pageAlertMsg" (T "newerVersionAlert" site.Title) -}}
+            {{- $.Scratch.Set "pageAlertURL" (or site.Params.docs.latestURL site.baseURL) -}}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
 
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">

layouts/_default/single.html

@@ -18,17 +18,21 @@
         {{- if gt (len (.GetTerms "tags")) 0 -}}
             <div class="mt-3">
                 <div class="d-none-dark">
-                    {{ range (.GetTerms "tags") -}}
+                    <div class="hstack gap-3">
-                        <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
+                        {{ range (.GetTerms "tags") -}}
-                        &nbsp;
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
-                    {{ end -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
+                        {{ end -}}
+                    </div>
                 </div>
                 
                 <div class="d-none-light">
-                    {{ range (.GetTerms "tags") -}}
+                    <div class="hstack gap-3">
-                        <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
+                        {{ range (.GetTerms "tags") -}}
-                        &nbsp;
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
-                    {{ end -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "secondary" "size" "sm" "outline" "true") }}
+                        {{ end -}}
+                    </div>
                 </div>
             </div>
         {{- end -}}

layouts/index.redir

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

layouts/partials/assets/card-group.html

@@ -87,6 +87,8 @@
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
 
+{{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
+
 <div class="container-fluid p-4 px-xxl-0">
     {{ $paginator := "" }}
     {{ if $paginate }}
@@ -130,7 +132,7 @@
 
     {{ if $paginate }}
         {{- if gt $paginator.TotalPages 1 -}}
-            <div class="pt-3">{{ partial "assets/pagination.html" $page }}</div>
+            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
         {{- end -}} 
     {{ else }}
         {{ if gt $count $max }}

layouts/partials/assets/card.html

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

layouts/partials/assets/image.html

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

layouts/partials/assets/navbar-item.html

@@ -8,6 +8,7 @@
 {{- $pageURL := $page.RelPermalink | relLangURL -}}
 {{- $isActive := hasPrefix $pageURL $menuURL -}}
 {{- $isAlias := $menu.Params.alias -}}
+{{- $isIcon := $menu.Params.icon -}}
 
 {{- $url := urls.Parse $menuURL -}}
 {{- $baseURL := urls.Parse $.Site.Params.Baseurl -}}
@@ -36,11 +37,12 @@
 {{- end -}}
 
 <a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{. }}{{ end }}" 
+    {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
     data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
     href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
     
     {{- with $menu.Pre }}{{ . }}{{ end -}}
-    <span {{ if $isActive }} class="active"{{ end }}>{{ $menu.Name }}</span>
+    <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
     {{- with $menu.Post }}{{ . }}{{ end -}}
-    {{- if $isExternal }} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
+    {{- if and $isExternal (not $isIcon)}} {{ partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}{{ end -}}
 </a>

layouts/partials/assets/navbar.html

@@ -48,6 +48,51 @@
     </li>
 {{- end -}}
 
+<!-- Inline partial to render the version switcher -->
+{{- define "partials/navbar-versions.html" -}}
+    {{- $size := .size -}}
+    {{- $collapsed := .collapsed -}}
+    {{- $page := .page -}}
+    {{- $list := site.Params.docs.releases -}}
+    {{- $version := partial "utilities/GetVersion.html" (dict "page" $page) -}}
+
+    <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
+        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-version-switch">
+            {{ if $collapsed }}{{ site.Title }} {{ end }}{{ $version }}
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-version-switch">
+            {{- range $index, $item := $list -}}
+                {{- $active := eq $item.label $version -}}
+                {{- $disabled := false -}}
+                {{- if site.IsServer }}
+                    {{- $disabled = and $item.redirect (gt (len $item.redirect) 0) -}}
+                {{- end -}}
+                {{ if $item.url }}
+                    <li>
+                        {{- $url := (path.Join $item.url) | relLangURL -}}
+                        <a class="pe-5 dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}{{ if $active }} active{{ end }}{{ if $disabled }} disabled{{ end }}" href="{{ $url }}">{{ $item.label }}
+                            {{ if $item.latest }} ({{ T "latest" }}){{ end }}
+                            {{ if $active }}
+                                <span class="position-absolute end-0 me-3">{{- partial "assets/icon.html" (dict "icon" "fas check") }}</span>
+                            {{ end }}
+                        </a>
+                    </li>
+                {{ else }}
+                    {{ if gt $index 0}}<li><hr class="dropdown-divider"></li>{{ end }}
+                    <li><span class="dropdown-header fs-6">{{ $item.label }}</span></li>
+                {{ end }}
+            {{- end -}}
+            {{- if site.Params.docs.overview -}}
+                {{ if gt (len $list) 0 }}<li><hr class="dropdown-divider"></li>{{ end }}
+                <li>
+                    {{- $url := (path.Join site.Params.docs.overview) | relLangURL -}}
+                    <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" href="{{ $url }}">{{ T "allVersions" }}</a>
+                </li>
+            {{- end -}}
+        </ul>
+    </li>
+{{- end -}}
+
 {{- $supportedFlags := slice "true" "false" -}}
 
 {{- $id := printf "navbar-collapse-%d" 0 -}}
@@ -112,6 +157,12 @@
     {{- end -}}
 {{- end -}}
 
+{{- $enableVersions := false -}}
+{{ $list := site.Params.docs.releases }}
+{{ if $list }}
+    {{- $enableVersions = gt (len $list ) 1 -}}
+{{ end }}
+
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
@@ -130,98 +181,113 @@
 {{- if eq $color "black" }}{{ $theme = "dark" }}{{ end -}}
 {{- if eq $color "white" }}{{ $theme = "light" }}{{ end -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
-	<div class="container-xxl p-0">
+    {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-        <!-- Insert sidebar toggler when applicable -->
+    <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
-        <div class="d-flex">
+        <div class="container-xxl p-0">
-            {{- if $page.Scratch.Get "sidebar" -}}
+            <!-- Insert sidebar toggler when applicable -->
-                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+            <div class="d-flex">
-                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                {{- if $page.Scratch.Get "sidebar" -}}
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- else -}}
+                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- end -}}
+            </div>
+    
+            <!-- Insert the brand logo or name -->
+            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+                {{- if $logo -}}
+                    <img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
+                {{- else -}}
+                    <span class="fw-bold">{{ $title }}</span>
+                {{- end -}}
+            </a>
+    
+            <!-- Insert main navigation toggler -->
+            <div class="d-flex fw-30">
+                <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                    aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                    <span class="toggler-icon top-bar emphasis"></span>
+                    <span class="toggler-icon middle-bar emphasis"></span>
+                    <span class="toggler-icon bottom-bar emphasis"></span>
                 </button>
-            {{- else -}}
+            </div>
-                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
-                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-                </button>
-            {{- end -}}
-        </div>
     
-        <!-- Insert the brand logo or name -->
+            <div class="navbar-collapse collapse" id="{{ $id }}">
-        <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+                <!-- Insert search input -->
-            {{- if $logo -}}
+                {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
-                <img src="{{ $logo }}" alt="{{ $title }} logo" height="30">
-            {{- else -}}
-                <span class="fw-bold">{{ $title }}</span>
-            {{- end -}}
-        </a>
                 
-        <!-- Insert main navigation toggler -->
+                <!-- Render top-menu items (maximum depth of 2) -->
-        <div class="d-flex fw-30">
+                <ul class="navbar-nav ms-auto">
-            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}"
+                    {{- range $menu := $menus -}}
-                aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
-                <span class="toggler-icon top-bar emphasis"></span>
+                            {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
-                <span class="toggler-icon middle-bar emphasis"></span>
+                            {{- if .HasChildren -}}
-                <span class="toggler-icon bottom-bar emphasis"></span>
+                                <ul class="dropdown-menu dropdown-menu-end">
-            </button>
+                                    {{- range .Children -}}
-        </div>
+                                        {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
+                                    {{- end -}}
+                                </ul>
+                            {{- end -}}
+                        </li>
+                    {{- end -}}
     
-        <div class="navbar-collapse collapse" id="{{ $id }}">
+                    <!-- Insert divider if applicable -->
-            <!-- Insert search input -->
+                    {{- if or $enableLanguage $enableVersions -}}
-            {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        </li>
+                        <li><hr class="dropdown-divider-bg"></li>
+                    {{- end -}}
     
-            <!-- Render top-menu items (maximum depth of 2) -->
+                    <!-- Insert language switcher if applicable -->
-            <ul class="navbar-nav ms-auto">
+                    {{- if $enableLanguage -}}
-                {{- range $menu := $menus -}}
+                        {{- $currentLang := $page.Language.Lang -}}
-                    <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                        <li class="nav-item dropdown">
-                        {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
+                            <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                        {{- if .HasChildren -}}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
-                            <ul class="dropdown-menu dropdown-menu-end">
+                            </a>
-                                {{- range .Children -}}
+                            <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end ">
+                                {{- if $page.IsTranslated -}}
+                                    {{- range $page.AllTranslations -}}
+                                        <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
+                                    {{- end -}}
+                                {{- else -}}
+                                    {{- range site.Languages -}}
+                                        <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                                    {{- end -}}
                                 {{- end -}}
                             </ul>
-                        {{- end -}}
+                        </li>
-                    </li>
+                    {{- end -}}
-                {{- end -}}
                                     
-                <!-- Insert divider if applicable -->
+                    <!-- Insert version switcher -->
-                {{- if or $enableLanguage $enableDarkMode -}}
+                    {{- if $enableVersions -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true ) -}}
-                        <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false) -}}
-                    </li>
+                    {{- end -}}
-                    <li><hr class="dropdown-divider-bg"></li>
-                {{- end -}}
     
-                <!-- Insert language switcher if applicable -->
+                    <!-- Insert color mode switcher -->
-                {{- if $enableLanguage -}}
+                    {{- if $enableDarkMode -}}
-                    {{- $currentLang := $page.Language.Lang -}}
+                        <!-- Insert divider -->
-                    <li class="nav-item dropdown">
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
-                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
+                        </li>
-                        </a>
+                        <li><hr class="dropdown-divider-bg"></li>
-                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end ">
-                            {{- if $page.IsTranslated -}}
-                                {{- range $page.AllTranslations -}}
-                                    <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
-                                {{- end -}}
-                            {{- else -}}
-                                {{- range site.Languages -}}
-                                    <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
-                                {{- end -}}
-                            {{- end -}}
-                        </ul>
-                    </li>
-                {{- end -}}
     
-                <!-- Insert color mode switcher -->
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
-                {{- if $enableDarkMode -}}
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
-                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
+                    {{- end -}}
-                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
+                </ul>
-                {{- end -}}
+            </div>
-            </ul>
         </div>
-    </div>
+    </nav>
-</nav>
+</div>

layouts/partials/assets/page-alert.html

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

layouts/partials/assets/pagination.html

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

layouts/partials/assets/sharing.html

@@ -6,7 +6,7 @@
         {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
         {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
         {{- $list = sort $list $sort $order -}}
-        <div class="py-3 text-body-secondary">
+        <div class="py-3 text-body-secondary hstack gap-2">
             {{ T "shareLink" }}
             {{- range $index, $item := $list -}}
                 {{- $url := $item.url -}}
@@ -21,7 +21,7 @@
                     {{- $url = "#!" -}}
                     {{- partial "assets/toast.html" (dict "id" $target "message" (printf "%s %s" (T "link")  (T "copiedToClipboard"))) -}}
                 {{- end -}}
-                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" $item.icon "class" "btn-social px-1" )}}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" )}}
             {{- end -}}
         </div>
     {{- end -}}

layouts/partials/footer/scripts.html

@@ -20,9 +20,9 @@
     {{- end -}}
     
     {{- if not hugo.IsProduction -}}
-        <script src="{{ $js.RelPermalink }}"></script>
+        <script src="{{ $js.Permalink }}"></script>
     {{ else -}}
         {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+        <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
     {{ end -}}
 {{ end -}}

layouts/partials/footer/social.html

@@ -7,7 +7,7 @@
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}
-                <a href="{{ .URL | relLangURL }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                <a href="{{ .URL }}" target="_blank" rel="noopener noreferrer" aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
                     {{ .Pre | safeHTML }}
                 </a>
             {{ end -}}

layouts/partials/utilities/GetMenu.html

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

layouts/partials/utilities/GetVersion.html

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

layouts/partials/utilities/IsOlder.html

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

netlify.toml

@@ -4,8 +4,8 @@
     functions = "functions"
 
 [build.environment]
-    NODE_VERSION = "18.13.0"
+    NODE_VERSION = "18.16.1"
-    NPM_VERSION = "8.19.3"
+    NPM_VERSION = "9.5.1"
 
 [context.production]
     command = "npm run build"
@@ -26,18 +26,18 @@
             default-src 'self'; \
             child-src 'self' app.netlify.com; \
             script-src 'self' \
-                app.netlify.com netlify-cdp-loader.netlify.app \
+                https://*.netlify.app app.netlify.com netlify-cdp-loader.netlify.app \
                 https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
             style-src 'self' \
-                netlify.app https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
+                https://*.netlify.app https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
             object-src 'none'; \
             base-uri 'self'; \
             connect-src 'self'
                 https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
-            font-src 'self' https://fonts.gstatic.com; \
+            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://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
+            img-src 'self' https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
             manifest-src 'self'; \
             media-src 'self' \
             """

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.14.4",
+  "version": "0.15.1",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -8,7 +8,8 @@
     "bootstrap",
     "responsive",
     "front-end",
-    "blog"
+    "blog",
+    "documentation"
   ],
   "main": "index.js",
   "publishConfig": {
@@ -34,7 +35,6 @@
     "env": "hugo env",
     "precheck": "npm version",
     "check": "hugo version",
-    "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
     "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",
@@ -54,17 +54,17 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.3.0-alpha3",
+    "bootstrap": "^5.3.0",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
     "eslint": "^8.39.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.103.0",
+    "hugo-bin": "^0.110.0",
-    "markdownlint-cli2": "^0.7.0",
+    "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^5.0.0",

theme.toml

@@ -5,8 +5,8 @@ description = "A clean documentation and blog theme for your Hugo site based on
 homepage = "https://gethinode.com"
 demosite = "https://demo.gethinode.com"
 tags = ["blog", "documentation", "minimal", "modern", "customizable", "search", "bootstrap"]
-features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts"]
+features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts", "versioned documentation"]
-min_version = "0.109.0"
+min_version = "0.110.0"
 
 [author]
   name = "Mark Dumay"