Merge pull request #327 from gethinode/timeline

Enhance timeline component

.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>
 
@@ -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,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/common/_icons.scss

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

assets/scss/components/_alert.scss

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

assets/scss/components/_breadcrumb.scss

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

assets/scss/components/_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/_syntax.scss

@@ -13,7 +13,7 @@
 }
 
 .preview-background {
-    background-color: var(--bs-secondary-bg) if($enable-important-utilities, !important, null);
+    background-color: var(--bs-dark-bg-subtle) if($enable-important-utilities, !important, null);
 }
 
 @if $enable-dark-mode {

assets/scss/components/_timeline.scss

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

config/_default/hugo.toml

@@ -27,6 +27,20 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 # toml-docs-end language
 
+# toml-docs-start redirect
+[outputFormats.REDIR]
+mediaType = "text/netlify"
+baseName = "_redirects"
+isPlainText = true
+notAlternative = true
+
+[mediaTypes."text/netlify"]
+delimiter = ""
+
+[outputs]
+home = ["HTML", "RSS", "REDIR"]
+# toml-docs-end redirect
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -71,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
@@ -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/blog/bootstrap-elements.md

@@ -127,7 +127,7 @@ As an example, the following shortcode displays a button that, when clicked, tri
     Trigger panel
 {{</* /button */>}}
 
-{{</* collapse id="collapse-1" class="p-3 border rounded" */>}}
+{{</* collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" */>}}
     Some placeholder content for the collapse component. This panel is <i>hidden by default</i> but
     revealed when the user activates the relevant trigger.
 {{</* /collapse */>}}
@@ -245,6 +245,16 @@ Loading...
 {{< /example>}}
 <!-- markdownlint-enable MD037 -->
 
+## Timeline
+
+As an example, the following shortcode displays a timeline with the file `data/timeline-en.yml` as data.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* timeline data="timeline-en" background="dark" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Toast
 
 As an example, the following shortcode displays a button that, when clicked, triggers the toast message.

content/en/projects/another-project.md

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

content/en/projects/sample-project.md

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

content/nl/about.md

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

content/nl/blog/bootstrap-elements.md

@@ -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/_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") -}}
-                        <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                        &nbsp;
-                    {{ end -}}
+                    <div class="hstack gap-3">
+                        {{ range (.GetTerms "tags") -}}
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
+                        {{ end -}}
+                    </div>
                 </div>
                 
                 <div class="d-none-light">
-                    {{ range (.GetTerms "tags") -}}
-                        <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relLangURL }}" role="button">{{ .LinkTitle }}</a>
-                        &nbsp;
-                    {{ end -}}
+                    <div class="hstack gap-3">
+                        {{ range (.GetTerms "tags") -}}
+                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "secondary" "size" "sm" "outline" "true") }}
+                        {{ end -}}
+                    </div>
                 </div>
             </div>
         {{- 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" -}}
-    <div class="card mb-3 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
-        <div class="row g-0 row-cols-1">
-            <div class="col-4">
+{{- if hasPrefix $orientation "horizontal" -}}
+    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+        <div class="row g-0 row-cols-1 h-100">
+            <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
                 {{- if $thumbnail -}}
                     {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
-                    <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+                    <div class="p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid text-secondary fa-fw" $icon)) -}}
                     </div>
                 {{- end -}}
             </div>
-            <div class="col-8">
+            <div 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-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/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 -}}
-    {{- $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,101 @@
+<!-- Inspired by the timeline snippet from Siddharth Panchal at https://bootsnipp.com/snippets/Q0ppE -->
+{{ $error := false }}
+
+{{- $data := .Get "data" -}}
+{{ if not $data -}}
+    {{ errorf "Missing param 'data': %s" .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $entries := index site.Data $data }}
+{{ if not $entries -}}
+    {{ errorf "Invalid timeline data '%s': %s" $data .Position -}}
+    {{ $error = true }}
+{{ end -}}
+
+{{ $background := "" -}}
+{{ with .Get "background" }}{{ $background = . }}{{ end -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
+{{ if and $background (not (in $supportedColors $background)) -}}
+    {{ errorf "Invalid value for param 'background': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-icon.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $icon := .icon -}}
+    {{- $direction := .direction -}}
+    <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
+        <div class="d-flex">
+            <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
+            </div>
+            <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
+        </div>
+    </div>
+{{- end -}}
+
+<!-- Inline partial to render icon -->
+{{- define "partials/timeline-panel.html" -}}
+    {{- $col := default 6 .col -}}
+    {{- $content := .content -}}
+    {{- $color := .color -}}
+    {{- $title := .title -}}
+    {{- $badge := .badge -}}
+    {{- $url := .url -}}
+    {{- $date := .date -}}
+    {{ if and $url (not (hasPrefix $url "http")) }}
+        {{ $url = 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">
+                <div>
+                    {{ with $url }}
+                        <a class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle" href="{{ . }}">{{ $title }}</a>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}<a class="link-bg-{{ $color }}" href="{{ . }}">{{ $badge }}</a>{{ end }}</span>
+                    {{ else}}
+                        <span class="fs-5 fw-bold text-uppercase link-{{ $color }} text-break align-middle">{{ $title }}</span>
+                        <span class="badge rounded-pill text-bg-{{ $color }} ms-1">{{ if $badge }}{{ $badge }}{{ end }}</span>
+                    {{ end }}
+                </div>
+                {{ if $date }}
+                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
+                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
+                {{ end }}
+                <p class="mt-3 mb-0">{{ $content | markdownify }}</p>
+            </div>
+        </div>
+    </div>    
+{{- end -}}
+
+<!-- Render default timeline -->
+<div class="container p-0 d-none d-md-block mb-5 {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline timeline-{{ $item.color }} timeline-dot g-0 ">
+            {{ if eq (mod $index 2) 1 }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "start") }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "start") }}
+            {{ else }}
+                {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end") }}
+                {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end") }}
+            {{ end }}
+        </div>
+        <div class="row timeline g-0 p-3"> </div>
+    {{ end }}
+</div>
+
+<!-- Render timeline for smaller devices -->
+<div class="container p-0 d-block d-md-none {{ with $background }} timeline-bg-{{ . }}{{ end }}">
+    {{ range $index, $item := $entries }}
+        <div class="row timeline-sm timeline-{{ $item.color }} timeline-dot g-0">
+            {{ partial "partials/timeline-icon.html" (dict "icon" $item.icon "direction" "end" "col" 3) }}
+            {{ partial "partials/timeline-panel.html" (dict "content" $item.content "color" $item.color "title" $item.title "badge" $item.badge "date" $item.date "url" $item.url "direction" "end" "col" 9) }}
+        </div>
+        <div class="row timeline-sm g-0 p-3"> </div>
+    {{ end }}
+</div>

netlify.toml

@@ -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.4",
+  "version": "0.15.4",
   "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"