Merge pull request #324 from gethinode/timeline

Add timeline shortcode

.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

@@ -9,25 +9,28 @@
 <!-- Badges -->
 <p align="center">
     <a href="https://gohugo.io" alt="Hugo website">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" />
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
+    </a>
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
     </a>
     <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67" />
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
     </a>
     <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" />
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
     </a>
     <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" />
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
     </a>
     <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/gethinode/hinode" />
+        <img src="https://img.shields.io/github/license/gethinode/hinode">
     </a>
 </p>
 

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,7 +62,9 @@
 // scss-docs-end awesome
 
 // Import Hinode theme styles
+@import "components/alert.scss";
 @import "components/blockquote.scss";
+@import "components/breadcrumb.scss";
 @import "components/buttons.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
@@ -71,11 +73,13 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/pagination.scss";
 @import "components/persona.scss";
 @import "components/popover.scss";
 @import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
+@import "components/timeline.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
 @import "common/animation.scss";

assets/scss/components/_alert.scss

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

assets/scss/components/_breadcrumb.scss

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

assets/scss/components/_pagination.scss

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

assets/scss/components/_timeline.scss

@@ -0,0 +1,160 @@
+// 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%
+}
+
+@each $state in map-keys($theme-colors) {
+    .timeline-#{$state} {
+      --timeline-highlight: var(--#{$prefix}#{$state});
+    }
+}
+
+// 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(--bs-body-bg);
+    color: var(--timeline-highlight);
+    background: var(--timeline-highlight);
+}

config/_default/hugo.toml

@@ -27,6 +27,20 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 # toml-docs-end language
 
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -71,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
@@ -31,7 +30,7 @@
     fixed = true
     offset = "3.8em"
     search = true
-    breadcrumb = false
+    breadcrumb = true
     toc = true
     sidebar = true
 # toml-docs-end navigation

config/production/config.toml

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

content/en/about.md

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

content/en/blog/bootstrap-elements.md

@@ -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" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast
 
 As an example, the following shortcode displays a button that, when clicked, triggers the toast message.

content/nl/about.md

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

content/nl/blog/bootstrap-elements.md

@@ -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.

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.

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

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

@@ -132,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/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-xxl p-0">
-        <!-- Insert sidebar toggler when applicable -->
-        <div class="d-flex">
-            {{- if $page.Scratch.Get "sidebar" -}}
-                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+<div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    {{- partial "assets/page-alert.html" (dict "page" $page) -}}
+    <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+        <div class="container-xxl p-0">
+            <!-- Insert sidebar toggler when applicable -->
+            <div class="d-flex">
+                {{- if $page.Scratch.Get "sidebar" -}}
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- else -}}
+                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                    </button>
+                {{- end -}}
+            </div>
+    
+            <!-- Insert the brand logo or name -->
+            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+                {{- if $logo -}}
+                    <img src="{{ $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 -}}
-                <!-- 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>
-        </div>
-
-        <div class="navbar-collapse collapse" id="{{ $id }}">
-            <!-- Insert search input -->
-            {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
-            
-            <!-- Render top-menu items (maximum depth of 2) -->
-            <ul class="navbar-nav ms-auto">
-                {{- range $menu := $menus -}}
-                    <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
-                        {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
-                        {{- if .HasChildren -}}
-                            <ul class="dropdown-menu dropdown-menu-end">
-                                {{- range .Children -}}
-                                    {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
+            </div>
+    
+            <div class="navbar-collapse collapse" id="{{ $id }}">
+                <!-- Insert search input -->
+                {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+                
+                <!-- Render top-menu items (maximum depth of 2) -->
+                <ul class="navbar-nav ms-auto">
+                    {{- range $menu := $menus -}}
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                            {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
+                            {{- if .HasChildren -}}
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    {{- range .Children -}}
+                                        {{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}
+                                    {{- end -}}
+                                </ul>
+                            {{- end -}}
+                        </li>
+                    {{- end -}}
+    
+                    <!-- Insert divider if applicable -->
+                    {{- if or $enableLanguage $enableVersions -}}
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        </li>
+                        <li><hr class="dropdown-divider-bg"></li>
+                    {{- end -}}
+    
+                    <!-- Insert language switcher if applicable -->
+                    {{- if $enableLanguage -}}
+                        {{- $currentLang := $page.Language.Lang -}}
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
+                            </a>
+                            <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end ">
+                                {{- if $page.IsTranslated -}}
+                                    {{- range $page.AllTranslations -}}
+                                        <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
+                                    {{- end -}}
+                                {{- else -}}
+                                    {{- range site.Languages -}}
+                                        <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                                    {{- end -}}
                                 {{- end -}}
                             </ul>
-                        {{- end -}}
-                    </li>
-                {{- end -}}
-
-                <!-- Insert divider if applicable -->
-                {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
-                        <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
-                    </li>
-                    <li><hr class="dropdown-divider-bg"></li>
-                {{- end -}}
-
-                <!-- Insert language switcher if applicable -->
-                {{- if $enableLanguage -}}
-                    {{- $currentLang := $page.Language.Lang -}}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
-                        </a>
-                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end ">
-                            {{- if $page.IsTranslated -}}
-                                {{- range $page.AllTranslations -}}
-                                    <li><a class="dropdown-item {{ if eq .Language.Lang $currentLang }}active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName  }}</a></li>
-                                {{- end -}}
-                            {{- else -}}
-                                {{- range site.Languages -}}
-                                    <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
-                                {{- end -}}
-                            {{- end -}}
-                        </ul>
-                    </li>
-                {{- end -}}
-                              
-                <!-- Insert color mode switcher -->
-                {{- if $enableDarkMode -}}
-                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
-                    {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
-                {{- end -}}
-            </ul>
+                        </li>
+                    {{- end -}}
+                                    
+                    <!-- Insert version switcher -->
+                    {{- if $enableVersions -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true ) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false) -}}
+                    {{- end -}}
+    
+                    <!-- Insert color mode switcher -->
+                    {{- if $enableDarkMode -}}
+                        <!-- Insert divider -->
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
+                        </li>
+                        <li><hr class="dropdown-divider-bg"></li>
+    
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true) -}}
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false) -}}
+                    {{- end -}}
+                </ul>
+            </div>
         </div>
-    </div>
-</nav>
+    </nav>
+</div>

layouts/partials/assets/page-alert.html

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

layouts/partials/assets/pagination.html

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

layouts/partials/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 -}}
-    {{- $menu = index .Site.Data .Section -}}
+{{- if $page.IsPage -}}
+    {{- $menu = index site.Data (printf "%s-%s" $page.Section $version) -}}
+    {{ if not $menu }}
+        {{ $menu = index site.Data $page.Section }}
+    {{ end }}
 {{- end -}}
 
 {{- return $menu -}}

layouts/partials/utilities/GetVersion.html

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

layouts/partials/utilities/IsOlder.html

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

layouts/shortcodes/timeline.html

@@ -0,0 +1,87 @@
+{{ $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 -}}
+
+<!-- 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 -}}
+    {{- $url := .url -}}
+    {{- $date := .date -}}
+    {{ if and $url (not (hasPrefix $url "http")) }}
+        {{ $url = path.Join site.Params.docs.release $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">
+                {{ with $url }}
+                    <p class="mb-0"><a class="fs-4 fw-bold text-uppercase link-{{ $color }}" href="{{ . }}">{{ $title }}</a></p>
+                {{ else}}
+                    <p class="fs-4 fw-bold mb-0 text-uppercase text-{{ $color }}">{{ $title }}</p>
+                {{ end }}
+                {{ 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 }}</p>
+            </div>
+        </div>
+    </div>    
+{{- end -}}
+
+<!-- Render default timeline -->
+<div class="container p-0 d-none d-md-block mb-5">
+    {{ 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 "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 "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">
+    {{ 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 "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

@@ -4,8 +4,8 @@
     functions = "functions"
 
 [build.environment]
-    NODE_VERSION = "18.13.0"
-    NPM_VERSION = "8.19.3"
+    NODE_VERSION = "18.16.1"
+    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.5",
+  "version": "0.15.3",
   "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,23 +54,23 @@
     "@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",
-    "markdownlint-cli2": "^0.7.0",
+    "hugo-bin": "^0.111.0",
+    "markdownlint-cli2": "^0.8.1",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^5.0.0",
     "shx": "^0.3.4",
     "stylelint": "^15.6.0",
-    "stylelint-config-standard-scss": "^9.0.0"
+    "stylelint-config-standard-scss": "^10.0.0"
   },
   "hugo-bin": {
     "buildTags": "extended"

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"]
-min_version = "0.109.0"
+features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts", "versioned documentation"]
+min_version = "0.110.0"
 
 [author]
   name = "Mark Dumay"