Merge pull request #328 from gethinode/timeline

Fix incorrectly joined URLs

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

@@ -64,6 +64,7 @@
 // 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";
@@ -78,6 +79,7 @@
 @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/_breadcrumb.scss

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

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

@@ -85,7 +85,7 @@ home = ["HTML", "RSS", "REDIR"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.81.0"
+    min = "0.110.0"
     max = ""
   [[module.mounts]]
     source = "assets"

config/_default/params.toml

@@ -8,13 +8,9 @@
 
 # toml-docs-start docs
 [docs]
-    latest = "1.0"
-    version = "0.8"
-    basePath = ""
     github = "https://github.com/gethinode/hinode"
     release = "https://github.com/gethinode/hinode/releases/tag/"
-    checkVersion = true
-    latestURL = "https://demo.gethinode.com/"
+    checkVersion = false
 # toml-docs-end docs
 
 # toml-docs-start home
@@ -34,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

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

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

@@ -7,28 +7,32 @@
 {{- $base := .base -}}
 {{- $version := "" -}}
 
-{{- $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 -}}
+{{- 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 -}}
+        {{- $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 -}}
-{{- 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 -}}
+    {{- 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/URLJoin.html

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

layouts/shortcodes/release.html

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

layouts/shortcodes/timeline.html

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

netlify.toml

@@ -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.15.0-beta5",
+  "version": "0.15.5",
   "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": {
@@ -53,7 +54,7 @@
     "@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",
@@ -62,14 +63,14 @@
     "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
-    "hugo-bin": "^0.108.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"