Merge pull request #1009 from gethinode/develop

Support rounding of card icons
Merge branch 'main' into develop
2025-10-07 01:54:23 +00:00 · 2024-06-22 18:59:40 +02:00 · 2024-06-22 18:52:53 +02:00 · 2024-06-22 18:52:27 +02:00 · 2024-06-22 12:33:42 +02:00 · 2024-06-22 12:26:10 +02:00
24 changed files with 598 additions and 2452 deletions
--- a/assets/js/critical/color.js
+++ b/assets/js/critical/color.js
@@ -9,44 +9,49 @@
 (() => {
  'use strict'

+  const supportedThemes = ['auto', 'dark', 'light'];
+
+  // retrieves the currently stored theme from local storage (cookie)
  const storedTheme = localStorage.getItem('theme')

-  const getPreferredTheme = () => {
-    if (storedTheme) {
-      return storedTheme
-    }
-
+  // retrieves the theme preferred by the client, defaults to light
+  function getPreferredTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

-  const setTheme = function (theme) {
-    if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+  // retrieves the current theme, either from local storage or client's preferences
+  function getTheme() {
+    if (storedTheme) {
+      return storedTheme
    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      const preference = getPreferredTheme()
+      localStorage.setItem('theme', preference)
+      return preference
    }
  }

-  setTheme(getPreferredTheme())
-
-  const showActiveTheme = theme => {
-    const activeSelectors = document.querySelectorAll('.theme-icon-active')
-    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
-    if (activeButtons.length > 0) {
-      const activeIcon = activeButtons[0].querySelector('span')
-
-      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-        element.classList.remove('active')
-      })
-
-      for (let i = 0; i < activeSelectors.length; ++i) {
-        activeSelectors[i].innerHTML = activeIcon.innerHTML
-      }
-
-      for (let i = 0; i < activeButtons.length; ++i) {
-        activeButtons[i].classList.add('active')
-      }
+  // applies and stores requested theme
+  function setTheme(theme) {
+    if (!supportedThemes.includes(theme)) {
+      theme = 'auto'
    }
+    localStorage.setItem('theme', theme)
+
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    })
+  }
+
+  // alternates the currently active theme
+  function toggleTheme() {
+    const target = document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark'
+    setTheme(target)
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -56,18 +61,32 @@
  })

  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
+    setTheme(getTheme())
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')

-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.classList.add('notransition');
+    })
+    
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+      chk.addEventListener('change', function () {
+        toggleTheme()
      })
+    })
+
+    document.querySelectorAll('.ball').forEach(ball => {
+      ball.offsetHeight; // flush css changes
+      ball.classList.remove('notransition');
+    })
  })
+
+  window.addEventListener('load', () => {
+    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
+    document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
+      chk.checked = light
+    })
+  });  
 })()

 {{- end -}}
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -1,3 +1,9 @@
+@if $enable-dark-mode {
+    body { 
+        transition: background-color 0.5s, color 0.5s; 
+    }
+}
+
 //
 // Remove underline from all links
 //
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -1,8 +1,6 @@
 // stylelint-disable annotation-no-unknown

 // Source: https://jsfiddle.net/njhgr40m/
-
-
 .navbar {
    --bs-navbar-expanded-color: var(--bs-body-bg);
    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
@@ -236,3 +234,61 @@
        }
    }
 }
+
+// adapted from https://www.codeply.com/p/UsTEwDkzNp#
+.checkbox {
+	opacity: 0;
+	position: absolute;
+}
+
+.mode-switch {
+    --#{$prefix}mode-switch-width: 50px;
+}
+
+.mode-switch .label {
+	border-color: var(--#{$prefix}border-color);
+    border-style: solid;
+    border-width: 1px;
+	border-radius: var(--#{$prefix}mode-switch-width);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	position: relative;
+	height: calc(1px + var(--#{$prefix}mode-switch-width) / 2);
+	width: var(--#{$prefix}mode-switch-width);
+    transform: scale(0.9);
+}
+
+.notransition {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+.mode-switch .label .ball {
+    background-color: var(--#{$prefix}secondary-bg);
+	border-radius: 50%;
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px);
+	transition: transform 0.2s linear;
+}
+
+.mode-switch .checkbox:checked + .label .ball {
+	transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px));
+}
+
+.mode-switch .fa-moon {
+	color: $yellow;
+    transform: scale(0.8);
+}
+
+.mode-switch .fa-sun {
+	color: var(--#{$prefix}bs-body-color);
+    transform: scale(0.8);
+}
--- a/data/structures/card.yml
+++ b/data/structures/card.yml
@@ -157,6 +157,12 @@ arguments:
    optional: true
    comment: >-
      Font Awesome icon, displayed on top or the left of the card.
+  iconRounded:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.24.8
+    comment: Stack the icon in a round container.
  align:
    type: select
    parent: cascade
--- a/data/structures/image.yml
+++ b/data/structures/image.yml
@@ -137,4 +137,4 @@ arguments:
    comment:
      Flag to indicate if the image should render a plain image instead of an
      image set. When set, no transformations are applied to the image.
-    release: v0.24.0-beta5
+    release: v0.24.0
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -22,6 +22,7 @@
      "i",
      "img",
      "input",
+      "label",
      "li",
      "link",
      "mark",
@@ -51,6 +52,7 @@
      "use"
    ],
    "classes": [
+      "%!s(MISSING)",
      "accordion",
      "accordion-body",
      "accordion-button",
@@ -69,6 +71,7 @@
      "align-self-end",
      "anchor",
      "badge",
+      "ball",
      "bg-body",
      "bg-body-tertiary",
      "bg-danger",
@@ -123,6 +126,7 @@
      "carousel-indicators",
      "carousel-inner",
      "carousel-item",
+      "checkbox",
      "chroma",
      "col",
      "col-10",
@@ -131,13 +135,11 @@
      "col-3",
      "col-4",
      "col-6",
-      "col-8",
      "col-9",
      "col-auto",
      "col-lg-2",
      "col-lg-4",
      "col-lg-8",
-      "col-md-10",
      "col-md-2",
      "col-md-3",
      "col-md-4",
@@ -187,8 +189,8 @@
      "fa-arrow-left",
      "fa-arrow-right",
      "fa-bootstrap",
+      "fa-circle",
      "fa-circle-check",
-      "fa-circle-half-stroke",
      "fa-code",
      "fa-docker",
      "fa-ellipsis",
@@ -200,6 +202,7 @@
      "fa-globe",
      "fa-heart",
      "fa-house",
+      "fa-inverse",
      "fa-link",
      "fa-linkedin",
      "fa-magnifying-glass",
@@ -209,6 +212,9 @@
      "fa-share-nodes",
      "fa-sort",
      "fa-square-check",
+      "fa-stack",
+      "fa-stack-1x",
+      "fa-stack-2x",
      "fa-sun",
      "fa-up-right-from-square",
      "fa-whatsapp",
@@ -257,6 +263,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "lead",
      "leaflet-map",
      "link-bg-body",
@@ -278,6 +285,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-1",
      "ms-3",
      "ms-auto",
@@ -309,6 +317,7 @@
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-nav-scroll",
      "navbar-title",
@@ -391,7 +400,6 @@
      "sticky-top",
      "stretched-link",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "syntax-highlight",
      "tab-content",
      "tab-pane",
@@ -419,8 +427,6 @@
      "text-sm-start",
      "text-start",
      "text-uppercase",
-      "theme-icon",
-      "theme-icon-active",
      "tickmark",
      "timeline",
      "timeline-bg-dark",
@@ -459,8 +465,6 @@
      "w-50"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "TableOfContents",
      "abbr",
      "accordion",
@@ -532,6 +536,8 @@
      "nav-0-btn-2",
      "navbar",
      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
      "navbar-sample-collapse",
      "navigation",
      "notification",
--- a/go.mod
+++ b/go.mod
@@ -9,8 +9,8 @@ require (
 	github.com/gethinode/mod-fontawesome v1.9.0 // indirect
 	github.com/gethinode/mod-katex v1.1.0 // indirect
 	github.com/gethinode/mod-leaflet v1.1.0 // indirect
-	github.com/gethinode/mod-lottie v1.5.3 // indirect
-	github.com/gethinode/mod-utils/v2 v2.3.6 // indirect
+	github.com/gethinode/mod-lottie v1.5.4 // indirect
+	github.com/gethinode/mod-utils/v2 v2.3.10 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -180,6 +180,8 @@ github.com/gethinode/mod-lottie v1.5.2 h1:UvrNAQeD/97Q5fbv3uKIY48fY3IWJeLy/v206G
 github.com/gethinode/mod-lottie v1.5.2/go.mod h1:HM1pA85EiPO7RtNysw/a2ZzRqktO2WvB/KyWLOuynzg=
 github.com/gethinode/mod-lottie v1.5.3 h1:fvCjCoZoCEhY2aou30oEsEo6N4tVSI0ijFyXS3wNib0=
 github.com/gethinode/mod-lottie v1.5.3/go.mod h1:XHVMuPsuJIm9/Eb2ql4jsT49/BQqMlBiirQoty4uHAo=
+github.com/gethinode/mod-lottie v1.5.4 h1:+xbamSsjcnP2tyzGl0CA1enma7gkAp67wenmuP0XELY=
+github.com/gethinode/mod-lottie v1.5.4/go.mod h1:gALqz48aYpoDLxJOI3LzIpdy0Eq/lOBNtlcOxABa9tg=
 github.com/gethinode/mod-utils v1.0.0 h1:cqHm2xS5uDiJzRm1KfHaNbq6uMVDKLhQa8/BuTZ1nhY=
 github.com/gethinode/mod-utils v1.0.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTIBSEE=
@@ -218,6 +220,14 @@ github.com/gethinode/mod-utils/v2 v2.3.5 h1:r8V330xQkHTjzAFNCde1Kpz6fgidzmMRW82e
 github.com/gethinode/mod-utils/v2 v2.3.5/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.3.6 h1:Ta+WKc83sK9ZROKmUwS4pA32Qm0bQqoMmWHEOzDvZ5Y=
 github.com/gethinode/mod-utils/v2 v2.3.6/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.7 h1:FFsUPO7NBp9Bhjovf0Ki5hnDGfeMKV/3RNz1Qpv7+oQ=
+github.com/gethinode/mod-utils/v2 v2.3.7/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.8 h1:zAiDRCb3SsP9z6PUkCaiRLHOpqFhVf0xVhVOoTZNmAI=
+github.com/gethinode/mod-utils/v2 v2.3.8/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.9 h1:Z9uAr6S0wunlkfKHa2D/U83fBV6Ivtf+7sjBAcrddrg=
+github.com/gethinode/mod-utils/v2 v2.3.9/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.10 h1:+coUXdgAbLEE8Tvb3Rfk/1Nr6oDVreXI2sil0pa/n2Q=
+github.com/gethinode/mod-utils/v2 v2.3.10/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -11,6 +11,7 @@
      "html",
      "img",
      "input",
+      "label",
      "li",
      "link",
      "meta",
@@ -31,6 +32,7 @@
      "align-items-center",
      "align-self-center",
      "align-self-end",
+      "ball",
      "bg-body",
      "bg-opacity-10",
      "bg-primary",
@@ -41,6 +43,7 @@
      "btn",
      "btn-close",
      "btn-primary",
+      "checkbox",
      "col",
      "col-12",
      "col-6",
@@ -57,22 +60,15 @@
      "d-flex",
      "d-inline",
      "d-md-block",
-      "d-md-none",
      "d-none",
      "display-1",
      "display-4",
-      "dropdown",
-      "dropdown-item",
-      "dropdown-menu",
-      "dropdown-menu-end",
-      "dropdown-toggle",
      "emphasis",
      "end-0",
      "fa",
      "fa-10x",
      "fa-2x",
      "fa-book-open",
-      "fa-circle-half-stroke",
      "fa-ellipsis",
      "fa-face-frown",
      "fa-fw",
@@ -100,6 +96,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "link-bg-footer",
      "link-secondary",
      "main-content",
@@ -107,6 +104,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-auto",
      "ms-md-3",
      "mt-3",
@@ -123,6 +121,7 @@
      "navbar-container",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-toggler",
      "no-js",
@@ -156,15 +155,12 @@
      "search-suggestions",
      "shadow",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "text-center",
      "text-decoration-none",
      "text-muted",
      "text-secondary",
      "text-sm-start",
      "text-start",
-      "theme-icon",
-      "theme-icon-active",
      "toast",
      "toast-body",
      "toast-container",
@@ -173,9 +169,9 @@
      "top-bar"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
      "toast-container",
      "toast-copied-code-message"
    ]
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -34,6 +34,7 @@
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
 {{- $buttonType := .buttonType -}}
+{{- $iconRounded := .iconRounded }}
 {{- $hook := .hook | default "assets/card.html" }}

 <!-- Override arguments -->
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -20,6 +20,7 @@
 {{- $href := .href -}}
 {{- $icon := .icon -}}
 {{- $iconStyle := "" -}}
+{{- $iconRounded := .iconRounded | default false -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
 {{- $sizes := .sizes | default "100vw" -}}
@@ -127,20 +128,53 @@
 <!-- Main code -->
 {{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}

+{{ $stack := "fa-2x" }}
+
 {{- if hasPrefix $orientation "horizontal" -}}
+    {{ $col1 := "" }}
+    {{ $col2 := "" }}
+
+    {{ if $thumbnail }}
+        {{ if eq $orientation "horizontal-sm" }}
+            {{ $stack = "fa-1x" }}
+            {{ $col1 = "col-4 col-md-2" }}
+            {{ $col2 = "col-8 col-md-10" }}
+        {{ else }}
+            {{ $col1 = "col-4" }}
+            {{ $col2 = "col-8" }}
+        {{ end }}
+    {{ else if $icon }}
+        {{ if eq $orientation "horizontal-sm" }}
+            {{ $stack = "fa-1x" }}
+            {{ $col1 = "col-2" }}
+            {{ $col2 = "col-10" }}
+        {{ else }}
+            {{ $col1 = "col-4" }}
+            {{ $col2 = "col-8" }}
+        {{ end }}
+
+    {{ end }}
+
    <!-- Render horizontal card -->
    <div class="card {{ $colorStyle }} {{ $class }}">
-        <div class="row g-0 row-cols-1 h-100{{ if $button }} pb-5{{ end }}">
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else }}col-4{{ end }}">
-                {{- if $thumbnail -}}
+        <div class="row g-0 row-cols-2 h-100{{ if $button }} pb-5{{ end }}">
+            {{- if $thumbnail -}}
+                <div class="{{ $col1 }}">
                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
-                {{- else if $icon -}}
-                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+                </div>
+            {{- else if $icon -}}
+                <div class="{{ $col1 }}">
+                    <div class="card-icon {{ if $iconRounded }}fa-stack {{ $stack }} mx-auto{{ else }}fa-wrapper h-100 {{ end }} p-{{ $padding }} d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
+                        {{ if $iconRounded }}
+                            {{- partial "assets/icon.html" (dict "icon" "fas circle fa-stack-2x") -}}
+                            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-stack-1x fa-inverse" $icon)) -}}
+                        {{ else }}
+                            {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+                        {{ end }}
                    </div>
-                {{- end -}}
-            </div>
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-8 col-md-10{{ else }}col-8{{ end }}">
+                </div>
+            {{- end -}}
+            <div class="{{ $col2 }}">
                <div class="card-body d-flex p-{{ $padding }} flex-column h-100 flex-fill">
                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                    <div class="flex-fill">
@@ -173,8 +207,13 @@
        {{- if $thumbnail -}}
            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
        {{- else if $icon -}}
-            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }} {{ if $iconRounded }}fa-stack {{ $stack }}{{ end }} w-100">
+                {{ if $iconRounded }}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "fas circle fa-stack-2x %s")) -}}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-stack-1x fa-inverse" $icon)) -}}
+                {{ else }}
+                    {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
+                {{ end }}
            </div>
        {{- end -}}
        <div class="card-body d-flex flex-column p-{{ $padding }}">
--- a/layouts/partials/assets/helpers/image-definition.html
+++ b/layouts/partials/assets/helpers/image-definition.html
@@ -16,12 +16,8 @@
 {{- $modes := .modes -}}
 {{- $plain := .plain | default false }}

-{{- $fallbackURL := "" -}}
-{{- $anchor := "" -}}
-{{- $imgset := "" -}}
-{{- $isVector := false -}}
-
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
+{{- $anchor := "" -}}
 {{- $segments := split $url "#" -}}
 {{- if gt (len $segments) 2 -}}
    {{- errorf "Invalid path or url: %q" $url -}}
@@ -30,82 +26,18 @@
    {{- $anchor = index $segments 1 -}}
 {{- end -}}

-<!-- Identify image provider -->
-{{ $hook := "" }}
-{{ $account := "" }}
-{{ $container := "" }}
-{{ $rewrite := false }}
-{{ range $provider, $val := site.Params.images }}
-    {{ if not $hook }}    
-        {{ with index $val "host" }}
-            {{ if (findRE . (urls.Parse $url).Hostname) }}
-                {{ $hook = $provider }}
-                {{ with index $val "account" }}{{ $account = . }}{{ end }}
-                {{ with index $val "rewrite" }}{{ $rewrite = . }}{{ end }}
-                {{ with index $val "container" }}{{ $container = . }}{{ end }}
-            {{ end }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}
-
-<!-- Rewrite the origin URL if applicable -->
-{{ if $rewrite }}
-    {{ $url = partial "assets/helpers/image-rewrite.html" (dict "url" $url "account" $account "container" $container "hook" $hook) }}
-{{ end }}
-
-<!-- Define image dimensions -->
-{{ $dims := slice }}
-{{- $res := "" -}}
-{{- $img := "" -}}
-{{ $transform := "" }}
-{{- if hasSuffix $url "svg" -}}
-    {{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
-    {{ if not $res }}
-        {{- if not (fileExists (path.Join "/static" $url)) -}}
-            {{ warnf "Cannot find vector image resource: %q" $url -}}
-        {{ else }}
-            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
-            {{ $dims = $dims | append (printf "%sx500" $width) }}
-        {{ end }}
-    {{ end }}
-{{ else if $ratio }}
-    {{ $transform = "fill" }}
-    {{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
-    {{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
-{{ else if not $plain }}
-    {{ $transform = "fit" }}
-    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
-    {{ if and $res $res.resource }}
-        {{ $img = $res.resource }}
-        {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
-
-        {{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
-        {{ range $width := $widths -}}
-            {{- $dims = $dims | append (printf "%dx%d" (int $width) (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
-        {{- end -}}
-    {{ end }}
-{{ end }}
-
-<!-- Derive image width and height -->
-{{ $width := "" }}
-{{ $height := "" }}
-{{ if not $plain }}
-    {{ with $dims }}
-        {{ range $dim := (. | last 1) }}
-            {{ $width = (int (index (split $dim "x") 0)) }}
-            {{ $height = (int (index (split $dim "x") 1)) }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-<!-- Generate image urls -->
-{{ if or (hasSuffix $url "svg") $plain }}
-    {{- $fallbackURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
-{{ else }}
-    {{- $fallbackURL = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" ($dims | last 1) "transform" $transform "hook" $hook "format" "jpg" "includeWidth" false) -}}
-    {{- $imgset = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
-{{ end }}
+<!-- Obtain fallback URL and imageset definition -->
+{{ $target := partial "assets/helpers/image-dimension.html" (dict 
+    "page" $page
+    "url" .url
+    "ratio" $ratio
+    "plain" $plain 
+    "imageset" true
+) }}
+{{ $fallbackURL := index $target "target" }}
+{{ $imgset := index $target "set" }}
+{{ $height := index $target "height" }}
+{{ $width := index $target "width" }}

 <!-- Add color modes -->
 {{- range $none := $modes -}}
--- a/layouts/partials/assets/helpers/image-dimension.html
+++ b/layouts/partials/assets/helpers/image-dimension.html
@@ -0,0 +1,113 @@
+<!-- Initialize arguments -->
+{{- $page := .page -}}
+{{- $url := .url -}}
+{{- $ratio := .ratio -}}
+{{- $height := .height -}}
+{{- $width := .width -}}
+{{- $plain := .plain | default false }}
+{{- $targetURL := "" -}}
+{{- $set := "" -}}
+{{- $imageset := .imageset | default false }}
+
+<!-- Split url into base and anchor when applicable (only relevant for vector images) -->
+{{- $segments := split $url "#" -}}
+{{- if gt (len $segments) 2 -}}
+    {{- errorf "Invalid path or url: %q" $url -}}
+{{- else if eq (len $segments) 2 }}
+    {{- $url = index $segments 0 -}}
+{{- end -}}
+
+<!-- Identify image provider -->
+{{ $hook := "" }}
+{{ $account := "" }}
+{{ $container := "" }}
+{{ $rewrite := false }}
+{{ range $provider, $val := site.Params.images }}
+    {{ if not $hook }}    
+        {{ with index $val "host" }}
+            {{ if (findRE . (urls.Parse $url).Hostname) }}
+                {{ $hook = $provider }}
+                {{ with index $val "account" }}{{ $account = . }}{{ end }}
+                {{ with index $val "rewrite" }}{{ $rewrite = . }}{{ end }}
+                {{ with index $val "container" }}{{ $container = . }}{{ end }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}
+
+<!-- Rewrite the origin URL if applicable -->
+{{ if $rewrite }}
+    {{ $url = partial "assets/helpers/image-rewrite.html" (dict "url" $url "account" $account "container" $container "hook" $hook) }}
+{{ end }}
+
+<!-- Define image dimensions -->
+{{ $dims := slice }}
+{{- $res := "" -}}
+{{- $img := "" -}}
+{{ $transform := "" }}
+{{- if hasSuffix $url "svg" -}}
+    {{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
+    {{ if not $res }}
+        {{- if not (fileExists (path.Join "/static" $url)) -}}
+            {{ warnf "Cannot find vector image resource: %q" $url -}}
+        {{ else }}
+            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
+            {{ if $width }}
+                {{ $dims = $dims | append (printf "%sx500" $width) }}
+            {{ else }}
+                {{ $dims = $dims | append "500" }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+{{ else if $ratio }}
+    {{ $transform = "fill" }}
+    {{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
+    {{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
+{{ else if (and $height $width) }}
+    {{ $transform = "fill" }}
+    {{ $dims = slice (printf "%dx%d" $width $height) }}
+{{ else if not $plain }}
+    {{ $transform = "fit" }}
+    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+    {{ if and $res $res.resource }}
+        {{ $img = $res.resource }}
+        {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
+
+        {{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
+        {{ range $w := $widths -}}
+            {{ $height = int (math.Round (mul (div (float $w) $img.Width) $img.Height)) }}
+            {{- $dims = $dims | append (printf "%dx%d" (int $w) $height ) -}}
+        {{- end -}}
+    {{ end }}
+{{ end }}
+
+<!-- Derive image width and height -->
+{{ if not $plain }}
+    {{ with $dims }}
+        {{ range $dim := (. | last 1) }}
+            {{ $width = (int (index (split $dim "x") 0)) }}
+            {{ $height = (int (index (split $dim "x") 1)) }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+<!-- Generate image url -->
+{{ if or (hasSuffix $url "svg") $plain }}
+    {{- $targetURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
+{{ else }}
+    {{- $targetURL = partial "assets/helpers/image-set.html" (dict 
+        "url" $url
+        "img" $img
+        "dims" ($dims | last 1)
+        "transform" $transform
+        "hook" $hook
+        "format" "jpg"
+        "includeWidth" false
+    )}}
+    {{ if $imageset }}
+        {{- $set = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
+    {{ end }}
+{{ end }}
+
+{{ return (dict "target" $targetURL "set" $set "height" $height "width" $width) }}
--- a/layouts/partials/assets/navbar-item.html
+++ b/layouts/partials/assets/navbar-item.html
@@ -19,9 +19,13 @@
 {{- $class := .class -}}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
-{{- $baseURL := $page.Scratch.Get "baseURL" -}}
-
-{{- $menuURL := urls.JoinPath $baseURL ((or $menu.PageRef $menu.URL) | relLangURL) -}}
+{{- $baseURL := $page.Scratch.Get "baseURL" | default "/" -}}
+{{- $menuURL := "" -}}
+{{ if or (strings.HasPrefix $menu.PageRef "http") (strings.HasPrefix $menu.URL "http") }}
+    {{ $menuURL = or $menu.PageRef $menu.URL }}
+{{ else }}
+    {{- $menuURL = urls.JoinPath $baseURL ((or $menu.PageRef $menu.URL) | relLangURL) -}}
+{{ end }}
 {{- $pageURL := $page.RelPermalink -}}
 {{- $isActive := or (and (hasPrefix $pageURL $menuURL) (ne $menuURL ("/" | relLangURL))) (eq $pageURL $menuURL) -}}
 {{- $isAlias := $menu.Params.alias -}}
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -16,36 +16,16 @@

 <!-- Inline partial to render the color mode switcher -->
 {{- define "partials/navbar-mode.html" -}}
-    {{- $size := .size -}}
-    {{- $collapsed := .collapsed -}}
-    {{- $id := .id -}}
+    {{- $id := .id | default "navbar-mode" -}}

-    <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-label="{{ T "colorMode" }}" aria-expanded="false" id="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }}&nbsp;{{ T "colorMode" }}{{ end }}
-            <span class="d-md-none"></span>
-        </a>
-        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorLight" }}
-                </a>
-            </li>
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorDark" }}
-                </a>
-            </li>
-            <li>
-                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" "spacing" false) }}</span>&nbsp;
-                    {{- T "colorAuto" }}
-                </a>
-            </li>
-        </ul>
-    </li>
+    <div class="d-flex mode-switch align-items-center" id="{{ $id }}">
+        <input type="checkbox" class="checkbox navbar-mode-selector" id="{{ $id }}-checkbox" />
+        <label class="label" for="{{ $id }}-checkbox">
+            {{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}
+            {{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}
+            <div class="ball"></div>
+        </label>
+    </div>
 {{- end -}}

 <!-- Inline partial to render the version switcher -->
@@ -119,6 +99,7 @@
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
 {{- $enableDarkMode := .mode | default site.Params.main.enableDarkMode -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}

 {{- $enableVersions := false -}}
 {{ $list := site.Params.docs.releases }}
@@ -134,8 +115,15 @@
 {{- $logoDark := "" -}}
 {{- if $enableDarkMode -}}
    {{ $ext := path.Ext $logo -}}
-    {{- $logoLight = printf "%s-light%s" (strings.TrimSuffix $ext $logo) $ext -}}
-    {{- $logoDark = printf "%s-dark%s" (strings.TrimSuffix $ext $logo) $ext -}}
+    {{- $ext := path.Ext $logo -}}
+    {{- $base := strings.TrimSuffix $ext $logo -}}
+    {{- range $suffix := $modes -}}
+        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
+    {{- end -}}
+
+    {{- $logoLight = printf "%s-light%s" $base $ext -}}
+    {{- $logoDark = printf "%s-dark%s" $base $ext -}}
+    
    {{- $light := fileExists (path.Join "/static" $logoLight) -}}
    {{- $dark := fileExists (path.Join "/static" $logoDark) -}}
    {{- if and $light (not $dark) -}}
@@ -292,7 +280,6 @@
                    <!-- Insert color mode switcher -->
                    {{- if $enableDarkMode -}}
                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
                    {{- end -}}

                    <!-- Insert modal search button -->
--- a/layouts/partials/assets/pagination.html
+++ b/layouts/partials/assets/pagination.html
@@ -21,22 +21,30 @@
    {{- 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">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left" "spacing" false) }}</span>
+        </a>
      </li>
      {{- else }}
      <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button" tabindex="-1">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left" "spacing" false) }}</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">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left" "spacing" false) }}</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">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button" tabindex="-1">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left" "spacing" false) }}</span>
+        </a>
      </li>
    {{- end }}

@@ -61,22 +69,30 @@

    {{- with .Next }}
      <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right" "spacing" false) }}</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">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationNext" }}" class="page-link" role="button" tabindex="-1">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right" "spacing" false) }}</span>
+        </a>
      </li>
    {{- end }}

    {{- with .Last }}
      {{- if ne $currentPageNumber .PageNumber }}
      <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right" "spacing" false) }}</span>
+        </a>
      </li>
      {{- else }}
      <li class="page-item disabled">
-        <a aria-disabled="true" aria-label="{{ T "paginationLast" }}" class="page-link" role="button" tabindex="-1"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
+        <a aria-disabled="true" aria-label="{{ T "paginationLast" }}" class="page-link" role="button" tabindex="-1">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right" "spacing" false) }}</span>
+        </a>
      </li>
      {{- end }}
    {{- end }}
@@ -90,14 +106,18 @@
    {{- 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">{{ partial "assets/icon.html" (dict "icon" "fas angles-left") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationFirst" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-left" "spacing" false) }}</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">{{ partial "assets/icon.html" (dict "icon" "fas angle-left") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationPrevious" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-left" "spacing" false) }}</span>
+        </a>
      </li>
    {{- end }}

@@ -122,14 +142,18 @@

    {{- with .Next }}
      <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationNext" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angle-right" "spacing" false) }}</span>
+        </a>
      </li>
    {{- end }}

    {{- with .Last }}
      {{- if ne $currentPageNumber .PageNumber }}
      <li class="page-item">
-        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button"><span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right") }}</span></a>
+        <a href="{{ .URL }}" aria-label="{{ T "paginationLast" }}" class="page-link" role="button">
+          <span aria-hidden="true">{{ partial "assets/icon.html" (dict "icon" "fas angles-right" "spacing" false) }}</span>
+        </a>
      </li>
      {{- end }}
    {{- end }}
--- a/layouts/partials/assets/sidebar.html
+++ b/layouts/partials/assets/sidebar.html
@@ -26,8 +26,8 @@
    {{- $group := .group -}}
    {{- $data := .menu -}}

-    {{- $doc_slug := urls.JoinPath  $baseURL ($group.title | urlize) -}}
-    {{- $href := or $group.link (partial "utilities/GetStaticURL" (dict "url" $doc_slug)) -}}
+    {{- $doc_slug := urls.JoinPath $baseURL ($group.title | urlize) -}}
+    {{- $href := or $group.link $doc_slug -}}
    {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}

    <li class="mb-1">
@@ -75,9 +75,13 @@
    {{ $href := "" }}

    {{ with .href }}
-        {{- $href = (partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL .))) -}}
+        {{ if hasPrefix . "http" }}
+            {{ $href = . }}
+        {{ else }}
+            {{- $href = urls.JoinPath $baseURL . -}}
+        {{ end }}
    {{ else }}
-        {{- $href =  partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL ($title | urlize))) -}}
+        {{- $href = urls.JoinPath $baseURL ($title | urlize) -}}
    {{ end }}
    {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}

@@ -117,7 +121,8 @@
    <nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
        {{- $sectionBreak := false -}}
        {{- $level := 0 -}}
-        {{- $baseURL := relLangURL (path.Join $section $version) }}
+        {{ $baseURL := $page.Scratch.Get "baseURL" | default "/" -}}
+        {{ $baseURL = urls.JoinPath "/" (strings.TrimPrefix $baseURL (urls.JoinPath $section $version | relLangURL)) }}

        <ul class="list-unstyled ps-0">
        {{- range $index, $item := $data -}}
--- a/layouts/partials/head/seo.html
+++ b/layouts/partials/head/seo.html
@@ -14,16 +14,9 @@
 {{ $.Scratch.Set "description" $description -}}

 {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
-{{ with $thumbnail -}}
-{{- $res := partial "utilities/GetImage.html" (dict "url" .) -}}
-{{- $img := "" -}}
-{{ with $res }}{{ $img = $res.resource }}{{ end }}
-{{ with $img -}}
-        {{ $dim := "1280x640" -}}
-        {{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
-        {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}
-        {{ $.Scratch.Set "thumbnail" ($scaled.Permalink | absURL) -}}
-    {{ end -}}
+{{ if $thumbnail -}}
+    {{ $imgURL := index (partial "assets/helpers/image-dimension.html" (dict "url" $thumbnail "width" 1280 "height" 640 "page" .)) "target" }}
+    {{ $.Scratch.Set "thumbnail" ($imgURL | absURL) -}}
 {{ else -}}
    {{ with .Site.Params.schema.image.url -}}    
        {{ $.Scratch.Set "thumbnail" (. | absURL) -}}
--- a/layouts/partials/utilities/git.html
+++ b/layouts/partials/utilities/git.html
@@ -0,0 +1,5 @@
+{{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
+{{ $lastmodstr | i18n "lastModified" -}}
+{{ with .GitInfo }}
+&bull;&nbsp;<a href="{{ site.Params.docs.github | default site.Params.schema.github }}/commit/{{ .Hash }}">{{ .Subject }} ({{ .AbbreviatedHash }})</a>
+{{ end -}}
--- a/layouts/shortcodes/card-group.html
+++ b/layouts/shortcodes/card-group.html
@@ -29,6 +29,7 @@
 {{- $subtle := .Get "subtle" | default false -}}
 {{- $button := .Get "button" | default false -}}
 {{- $buttonType := .Get "buttonType" | default "" -}}
+{{- $iconRounded := .Get "iconRounded" | default false -}}

 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -58,5 +59,6 @@
    "subtle" $subtle
    "button" $button
    "buttonType" $buttonType
+    "iconRounded" $iconRounded
    ) 
 -}}
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -21,6 +21,7 @@
 {{- $gutter := partial "utilities/GetArgParent" (dict "page" . "arg" "gutter") | default "0" -}}
 {{- $header := partial "utilities/GetArgParent" (dict "page" . "arg" "header") | default "full" -}}
 {{- $icon := .Get "icon" -}}
+{{- $iconRounded := partial "utilities/GetArgParent" (dict "page" . "arg" "iconRounded") | default false -}}
 {{- $align := partial "utilities/GetArgParent" (dict "page" . "arg" "align") | default "start" -}}
 {{- $style := partial "utilities/GetArgParent" (dict "page" . "arg" "style") | default "" -}}
 {{- $subtle := partial "utilities/GetArgParent" (dict "page" . "arg" "subtle") | default false -}}
@@ -64,6 +65,7 @@
        "description" $description
        "ratio" $ratio
        "icon" $icon
+        "iconRounded" $iconRounded
        "align" $align
        "style" $style
        "subtle" $subtle
--- a/netlify.toml
+++ b/netlify.toml
@@ -82,8 +82,8 @@
 	# Redirected in exampleSite/config/_default/hugo.toml
 	# srcdir = ""

-[[plugins]]
-    package = "@netlify/plugin-lighthouse"
+# [[plugins]]
+    # package = "@netlify/plugin-lighthouse"
    # [plugins.inputs]
    # output_path = "reports/lighthouse.html"
 # toml-docs-end plugins
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.24.0-beta9",
+  "version": "0.24.8",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -66,24 +66,25 @@
    "url": "https://github.com/gethinode/hinode/issues"
  },
  "homepage": "https://gethinode.com",
-  "devDependencies": {
+  "dependencies": {
    "@fullhuman/postcss-purgecss": "^6.0.0",
-    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "^6.0.0",
    "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.1",
-    "cssnano-preset-advanced": "^7.0.1",
+    "cssnano": "^7.0.3",
+    "cssnano-preset-advanced": "^7.0.3",
+    "hugo-bin": "0.124.0",
+    "purgecss-whitelister": "^2.4.0"
+  },
+  "devDependencies": {
+    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.2.0",
-    "hugo-bin": "0.123.2",
    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^11.0.0",
-    "purgecss-whitelister": "^2.4.0",
    "replace-in-files-cli": "^2.2.0",
    "rimraf": "^5.0.7",
    "shx": "^0.3.4",
@@ -92,7 +93,6 @@
  },
  "optionalDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "*",
    "fsevents": "*",
    "netlify-plugin-hugo-cache-resources": "^0.2.1"
  },
Author	SHA1	Message	Date
Mark Dumay	23d051e6bc	Merge pull request #1009 from gethinode/develop Support rounding of card icons	2024-06-22 18:59:40 +02:00
Mark Dumay	c3c1b4b246	Merge branch 'main' into develop	2024-06-22 18:52:53 +02:00
Mark Dumay	caa3a2a7c7	Support rounding of card icons	2024-06-22 18:52:27 +02:00
Mark Dumay	f235eb42b6	Merge pull request #1007 from gethinode/develop Improve vector handling	2024-06-22 12:33:42 +02:00
Mark Dumay	7aae640999	Merge branch 'main' into develop	2024-06-22 12:26:10 +02:00
Mark Dumay	7c606ef48c	Bump package release	2024-06-22 12:25:44 +02:00
Mark Dumay	cca70f538c	Improve vector handling	2024-06-22 12:24:47 +02:00
Mark Dumay	ac8f0c3e95	Fix handling of missing vector image width	2024-06-22 10:53:59 +02:00
Mark Dumay	7c1a19f6a1	Merge pull request #1006 from gethinode/develop Disable lighthouse plugin to address high severity vulnerabilities	2024-06-20 20:03:06 +02:00
Mark Dumay	41e02bf064	Merge branch 'main' into develop	2024-06-20 19:56:18 +02:00
Mark Dumay	d8fcae856b	Disable lighthouse plugin to address high severity vulnerabilities	2024-06-20 19:55:34 +02:00
Mark Dumay	c4c7f55334	Merge pull request #1005 from gethinode/develop Fix missing translation of git footer	2024-06-20 19:52:49 +02:00
Mark Dumay	76c10271f3	Merge branch 'main' into develop	2024-06-20 19:43:56 +02:00
Mark Dumay	88a271cf9d	Update utils module	2024-06-20 19:43:07 +02:00
Mark Dumay	fb74835018	Fix missing translation of git footer	2024-06-20 19:32:32 +02:00
github-actions[bot]	c801ff0241	Merge pull request #1003 from gethinode/dependabot/npm_and_yarn/cssnano-7.0.3 Bump cssnano from 7.0.2 to 7.0.3	2024-06-19 13:57:42 +00:00
dependabot[bot]	dfc3cd706a	Bump cssnano from 7.0.2 to 7.0.3 Bumps [cssnano](https://github.com/cssnano/cssnano) from 7.0.2 to 7.0.3. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano@7.0.2...cssnano@7.0.3) --- updated-dependencies: - dependency-name: cssnano dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-19 13:51:18 +00:00
github-actions[bot]	95a1a3b860	Merge pull request #1002 from gethinode/dependabot/npm_and_yarn/cssnano-preset-advanced-7.0.3 Bump cssnano-preset-advanced from 7.0.2 to 7.0.3	2024-06-19 13:50:26 +00:00
dependabot[bot]	f5462ca5ba	Bump cssnano-preset-advanced from 7.0.2 to 7.0.3 Bumps [cssnano-preset-advanced](https://github.com/cssnano/cssnano) from 7.0.2 to 7.0.3. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano-preset-advanced@7.0.2...cssnano-preset-advanced@7.0.3) --- updated-dependencies: - dependency-name: cssnano-preset-advanced dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-19 13:45:12 +00:00
Mark Dumay	f42722c526	Merge pull request #1000 from gethinode/develop Add support for subfolder deployment to sidebar	2024-06-19 08:41:53 +02:00
Mark Dumay	4d02900162	Refine base path	2024-06-19 08:30:14 +02:00
Mark Dumay	3ca8bdd0a5	Merge branch 'main' into develop	2024-06-18 07:44:13 +02:00
Mark Dumay	371b054302	Add support for subfolder deployment to sidebar	2024-06-18 07:43:45 +02:00
Mark Dumay	055614e6ee	Merge pull request #999 from gethinode/develop Fix SEO thumbnail handling	2024-06-16 10:08:05 +02:00
Mark Dumay	7d712b13fe	Merge branch 'main' into develop	2024-06-16 10:01:18 +02:00
Mark Dumay	5ee8383868	Fix SEO thumbnail handling	2024-06-16 10:00:31 +02:00
Mark Dumay	54f012f5be	Merge pull request #998 from gethinode/hugo-mod-dependencies Update Hugo module dependencies	2024-06-16 08:14:19 +02:00
markdumay	d28a642283	fix: update Hugo module dependencies	2024-06-16 05:57:29 +00:00
Mark Dumay	91becdeeb5	Merge pull request #997 from gethinode/develop Fix handling of external links in sidebar	2024-06-16 07:56:40 +02:00
Mark Dumay	b7c5b8a47e	Bump package release	2024-06-16 07:45:31 +02:00
Mark Dumay	776aad8427	Fix #996	2024-06-16 07:44:26 +02:00
Mark Dumay	bcf9b8aa7c	Merge pull request #993 from gethinode/develop Use image helpers for SEO thumbnail	2024-06-12 08:07:19 +02:00
Mark Dumay	15d0161240	Merge branch 'main' into develop	2024-06-12 08:01:05 +02:00
Mark Dumay	998db85994	Use image helpers for SEO thumbnail	2024-06-12 08:00:46 +02:00
Mark Dumay	e6586b52cd	Merge pull request #992 from gethinode/develop Remove spacing from pagination buttons	2024-06-10 07:05:06 +02:00
Mark Dumay	937964a02b	Merge branch 'main' into develop	2024-06-10 06:56:39 +02:00
Mark Dumay	9b4afdfb35	Merge pull request #985 from gethinode/hugo-mod-dependencies Update Hugo module dependencies	2024-06-10 06:56:15 +02:00
Mark Dumay	2121e663a0	Bump package release	2024-06-10 06:55:59 +02:00
Mark Dumay	46699664dc	Remove spacing from pagination buttons	2024-06-10 06:55:00 +02:00
markdumay	98ec788fb3	fix: update Hugo module dependencies	2024-06-07 03:06:28 +00:00
github-actions[bot]	e248862905	Merge pull request #989 from gethinode/dependabot/npm_and_yarn/hugo-bin-0.124.0 Bump hugo-bin from 0.123.3 to 0.124.0	2024-06-06 13:13:31 +00:00
dependabot[bot]	8ba8acf675	Bump hugo-bin from 0.123.3 to 0.124.0 Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.123.3 to 0.124.0. - [Release notes](https://github.com/fenneclab/hugo-bin/releases) - [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.123.3...v0.124.0) --- updated-dependencies: - dependency-name: hugo-bin dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-06 13:07:40 +00:00
github-actions[bot]	a7cf1ad918	Merge pull request #988 from gethinode/dependabot/npm_and_yarn/cssnano-7.0.2 Bump cssnano from 7.0.1 to 7.0.2	2024-06-05 14:12:55 +00:00
dependabot[bot]	492ce3e38b	Bump cssnano from 7.0.1 to 7.0.2 Bumps [cssnano](https://github.com/cssnano/cssnano) from 7.0.1 to 7.0.2. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano@7.0.1...cssnano@7.0.2) --- updated-dependencies: - dependency-name: cssnano dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-05 14:08:02 +00:00
github-actions[bot]	eaa5c217db	Merge pull request #987 from gethinode/dependabot/npm_and_yarn/cssnano-preset-advanced-7.0.2 Bump cssnano-preset-advanced from 7.0.1 to 7.0.2	2024-06-05 14:07:17 +00:00
dependabot[bot]	410d681d23	Bump cssnano-preset-advanced from 7.0.1 to 7.0.2 Bumps [cssnano-preset-advanced](https://github.com/cssnano/cssnano) from 7.0.1 to 7.0.2. - [Release notes](https://github.com/cssnano/cssnano/releases) - [Commits](https://github.com/cssnano/cssnano/compare/cssnano-preset-advanced@7.0.1...cssnano-preset-advanced@7.0.2) --- updated-dependencies: - dependency-name: cssnano-preset-advanced dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-05 14:02:55 +00:00
Mark Dumay	deaf9f0fec	Merge pull request #983 from gethinode/develop Fix external links in navbar	2024-06-04 09:12:15 +02:00
Mark Dumay	7ed3313c55	Merge branch 'main' into develop	2024-06-04 09:06:15 +02:00
Mark Dumay	1477ff7bb2	Bump package release	2024-06-04 09:05:47 +02:00
Mark Dumay	7e2f6606bf	Fix external links in navbar	2024-06-04 09:05:11 +02:00
Mark Dumay	2acc8fc737	Merge pull request #982 from gethinode/hugo-mod-dependencies Update Hugo module dependencies	2024-06-04 06:19:46 +02:00
markdumay	96fe90ce9d	fix: update Hugo module dependencies	2024-06-04 03:06:36 +00:00
github-actions[bot]	acf25e5375	Merge pull request #979 from gethinode/dependabot/npm_and_yarn/hugo-bin-0.123.3 Bump hugo-bin from 0.123.2 to 0.123.3	2024-06-03 13:58:51 +00:00
dependabot[bot]	aa35e03692	Bump hugo-bin from 0.123.2 to 0.123.3 Bumps [hugo-bin](https://github.com/fenneclab/hugo-bin) from 0.123.2 to 0.123.3. - [Release notes](https://github.com/fenneclab/hugo-bin/releases) - [Commits](https://github.com/fenneclab/hugo-bin/compare/v0.123.2...v0.123.3) --- updated-dependencies: - dependency-name: hugo-bin dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>	2024-06-03 13:51:57 +00:00
Mark Dumay	31cf9eb577	Merge pull request #978 from gethinode/develop Publish v0.24.0 release	2024-06-03 13:14:41 +02:00
Mark Dumay	9a8ebd3558	Update release tag for plain images support	2024-06-03 13:08:22 +02:00
Mark Dumay	148c587283	Merge branch 'main' into develop	2024-06-03 13:06:01 +02:00
Mark Dumay	7c9c4cbabb	Publish v0.24.0 release	2024-06-03 13:05:15 +02:00
Mark Dumay	20f14934c2	Merge pull request #977 from gethinode/develop Bump package release	2024-06-03 12:52:10 +02:00
Mark Dumay	840e67d12d	Merge branch 'main' into develop	2024-06-03 12:45:05 +02:00
Mark Dumay	8ef57a265e	Bump package release	2024-06-03 12:43:19 +02:00
Mark Dumay	8677357450	Merge pull request #976 from gethinode/develop Sync color mode when navigating browser history	2024-06-03 11:59:43 +02:00
Mark Dumay	79ac2dae4f	Merge branch 'main' into develop	2024-06-03 11:32:15 +02:00
Mark Dumay	20cad07a0b	Sync color mode when navigating browser history	2024-06-03 11:31:10 +02:00
Mark Dumay	2c97af2fef	Merge pull request #975 from gethinode/develop Smoothen transition between color modes	2024-06-03 11:30:49 +02:00
Mark Dumay	95ded6296c	Merge branch 'main' into develop	2024-06-03 10:16:28 +02:00
Mark Dumay	3b46095821	Sync release numbering	2024-06-03 10:04:34 +02:00
Mark Dumay	1bf4e74e56	Smoothen transition between color modes	2024-06-03 10:02:58 +02:00
Mark Dumay	9b75b46c49	Merge pull request #974 from gethinode/develop Fix color-mode switcher	2024-06-03 09:44:51 +02:00
Mark Dumay	107077f5ec	Fix color-mode switcher	2024-06-03 09:36:48 +02:00
Mark Dumay	528b70bfa2	Merge branch 'main' into develop	2024-06-03 07:27:40 +02:00
Mark Dumay	75ab4625b1	Isolate production dependencies	2024-06-03 07:27:05 +02:00
Mark Dumay	bac3054ec2	Merge pull request #972 from gethinode/switch Replace color-mode switcher	2024-06-03 06:23:02 +02:00
Mark Dumay	d63fd5f212	Merge branch 'main' into switch	2024-06-02 19:50:01 +02:00
Mark Dumay	c8b9df7ae5	Merge pull request #973 from gethinode/develop Fix color-mode aware logo	2024-06-02 19:49:48 +02:00
Mark Dumay	12daa88f39	Bump package release	2024-06-02 19:42:05 +02:00
Mark Dumay	c5d895388b	Fix color-mode aware logo	2024-06-02 19:41:21 +02:00
Mark Dumay	5678d2cab5	Replace color-mode switcher	2024-06-02 17:13:04 +02:00