Merge pull request #999 from gethinode/develop

Fix SEO thumbnail handling

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 -}}

assets/scss/common/_icons.scss

@@ -1,25 +1,25 @@
 // scss-docs-start icons
-$form-check-input-checked-bg-image:             url("/icons/form-check-input-checked-bg-image.svg") !default;
-$form-check-radio-checked-bg-image:             url("/icons/form-check-radio-checked-bg-image.svg") !default;
-$form-check-input-indeterminate-bg-image:       url("/icons/form-check-input-indeterminate-bg-image.svg") !default;
-$form-switch-bg-image:                          url("/icons/form-switch-bg-image.svg") !default;
-$form-switch-bg-image-dark:                     url("/icons/form-switch-bg-image-dark.svg") !default;
-$form-switch-focus-bg-image:                    url("/icons/form-switch-focus-bg-image.svg") !default;
-$form-switch-checked-bg-image:                  url("/icons/form-switch-checked-bg-image.svg") !default;
-$form-select-indicator:                         url("/icons/form-select-indicator.svg") !default;
-$form-select-indicator-dark:                    url("/icons/form-select-indicator-dark.svg") !default;
-$form-feedback-icon-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
-$form-feedback-icon-invalid:                    url("/icons/form-feedback-icon-invalid.svg") !default;
-$navbar-light-toggler-icon-bg:                  url("/icons/navbar-light-toggler-icon-bg.svg") !default;
-$navbar-dark-toggler-icon-bg:                   url("/icons/navbar-dark-toggler-icon-bg.svg") !default;
-$accordion-button-icon:                         url("/icons/accordion-button-icon.svg") !default;
-$accordion-button-icon-dark:                    url("/icons/accordion-button-icon-dark.svg") !default;
-$accordion-button-active-icon:                  url("/icons/accordion-button-active-icon.svg") !default;
-$accordion-button-active-icon-dark:             url("/icons/accordion-button-active-icon-dark.svg") !default;
-$carousel-control-prev-icon-bg:                 url("/icons/carousel-control-prev-icon-bg.svg") !default;
-$carousel-control-next-icon-bg:                 url("/icons/carousel-control-next-icon-bg.svg") !default;
-$btn-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
-$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
-$btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
+$form-check-input-checked-bg-image:             url("#{$base-url}icons/form-check-input-checked-bg-image.svg") !default;
+$form-check-radio-checked-bg-image:             url("#{$base-url}icons/form-check-radio-checked-bg-image.svg") !default;
+$form-check-input-indeterminate-bg-image:       url("#{$base-url}icons/form-check-input-indeterminate-bg-image.svg") !default;
+$form-switch-bg-image:                          url("#{$base-url}icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("#{$base-url}icons/form-switch-bg-image-dark.svg") !default;
+$form-switch-focus-bg-image:                    url("#{$base-url}icons/form-switch-focus-bg-image.svg") !default;
+$form-switch-checked-bg-image:                  url("#{$base-url}icons/form-switch-checked-bg-image.svg") !default;
+$form-select-indicator:                         url("#{$base-url}icons/form-select-indicator.svg") !default;
+$form-select-indicator-dark:                    url("#{$base-url}icons/form-select-indicator-dark.svg") !default;
+$form-feedback-icon-valid:                      url("#{$base-url}icons/form-feedback-icon-valid.svg") !default;
+$form-feedback-icon-invalid:                    url("#{$base-url}icons/form-feedback-icon-invalid.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("#{$base-url}icons/navbar-light-toggler-icon-bg.svg") !default;
+$navbar-dark-toggler-icon-bg:                   url("#{$base-url}icons/navbar-dark-toggler-icon-bg.svg") !default;
+$accordion-button-icon:                         url("#{$base-url}icons/accordion-button-icon.svg") !default;
+$accordion-button-icon-dark:                    url("#{$base-url}icons/accordion-button-icon-dark.svg") !default;
+$accordion-button-active-icon:                  url("#{$base-url}icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("#{$base-url}icons/accordion-button-active-icon-dark.svg") !default;
+$carousel-control-prev-icon-bg:                 url("#{$base-url}icons/carousel-control-prev-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("#{$base-url}icons/carousel-control-next-icon-bg.svg") !default;
+$btn-close-bg:                                  url("#{$base-url}icons/btn-close-bg.svg") !default;
+$btn-toggle:                                    url("#{$base-url}icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("#{$base-url}icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

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

assets/scss/common/_variables-dart.scss

@@ -5,6 +5,8 @@ $enable-important-utilities:    true !default;
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
+$base-url:                      h.$base-url;
+
 $font-family-sans-serif:        h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-size-base:                h.$font-size-base !default;
 $headings-font-weight:          600 !default;

assets/scss/common/_variables.scss

@@ -5,6 +5,8 @@ $enable-important-utilities:    true !default;
 // Remove the border from the focused navigation toggler
 $navbar-toggler-focus-width:    0 !default;
 
+$base-url:                      $base-url;
+
 // scss-docs-start font
 $font-family-sans-serif:        $theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-size-base:                $font-size-base !default;;

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);
+}

data/structures/image-adapter-rewrite.yml

@@ -0,0 +1,29 @@
+comment: >-
+  Rewrites an origin URL to a target URL as supported by a CDN image adapter.
+arguments:
+  account:
+    type: string
+    optional: true
+    comment: Account name of the origin server.
+  container:
+    type: string
+    optional: true
+    comment: Container name of the origin server.
+  host:
+    type: string
+    optional: true
+    comment: >-
+      Host of an URL. For example, the host of the URL
+      'https://example.com/first/second/third.webp' equals 'example.com'.
+  dir:
+    type: string
+    optional: true
+    comment: >-
+      All but the last element of an URL extension. For example, the dir of the
+      URL 'https://example.com/first/second/third.webp' equals '/first/second/'.
+  file:
+    type: string
+    optional: false
+    comment: >-
+      The last element of an URL extension. For example, the file of the
+      URL 'https://example.com/first/second/third.webp' equals 'third.webp'.

data/structures/image.yml

@@ -19,7 +19,9 @@ comment: >-
   reference.
 arguments:
   url:
-    type: string
+    type:
+      - string
+      - template.URL
     optional: true
     comment: >-
       Path or url of the image, e.g. `img/example.jpg`. Images with multiple
@@ -128,3 +130,11 @@ arguments:
     optional: true
     comment: Class attribute of the figure caption, e.g. `px-4`.
     release: v0.23.0
+  plain:
+    type: bool
+    default: false
+    optional: true
+    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

exampleSite/content/en/blog/image.md

@@ -15,7 +15,7 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
-    ratio="21x9" caption="Cloudinary image" class="rounded" */>}}
+    ratio="21x9" caption="Cloudinary image" class="rounded" plain=true */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

exampleSite/hugo_stats.json

@@ -22,6 +22,7 @@
       "i",
       "img",
       "input",
+      "label",
       "li",
       "link",
       "mark",
@@ -69,6 +70,7 @@
       "align-self-end",
       "anchor",
       "badge",
+      "ball",
       "bg-body",
       "bg-body-tertiary",
       "bg-danger",
@@ -123,6 +125,7 @@
       "carousel-indicators",
       "carousel-inner",
       "carousel-item",
+      "checkbox",
       "chroma",
       "col",
       "col-10",
@@ -188,7 +191,6 @@
       "fa-arrow-right",
       "fa-bootstrap",
       "fa-circle-check",
-      "fa-circle-half-stroke",
       "fa-code",
       "fa-docker",
       "fa-ellipsis",
@@ -257,6 +259,7 @@
       "justify-content-center",
       "justify-content-end",
       "justify-content-start",
+      "label",
       "lead",
       "leaflet-map",
       "link-bg-body",
@@ -278,6 +281,7 @@
       "me-auto",
       "middle-bar",
       "min-vh-100",
+      "mode-switch",
       "ms-1",
       "ms-3",
       "ms-auto",
@@ -309,6 +313,7 @@
       "navbar-contrast",
       "navbar-expand-md",
       "navbar-fixed-top",
+      "navbar-mode-selector",
       "navbar-nav",
       "navbar-nav-scroll",
       "navbar-title",
@@ -391,7 +396,6 @@
       "sticky-top",
       "stretched-link",
       "svg-inline--fa",
-      "switch-mode-collapsed",
       "syntax-highlight",
       "tab-content",
       "tab-pane",
@@ -419,8 +423,6 @@
       "text-sm-start",
       "text-start",
       "text-uppercase",
-      "theme-icon",
-      "theme-icon-active",
       "tickmark",
       "timeline",
       "timeline-bg-dark",
@@ -459,8 +461,6 @@
       "w-50"
     ],
     "ids": [
-      "-theme",
-      "-theme-collapsed",
       "TableOfContents",
       "abbr",
       "accordion",
@@ -532,6 +532,8 @@
       "nav-0-btn-2",
       "navbar",
       "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
       "navbar-sample-collapse",
       "navigation",
       "notification",

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.0 // indirect
-	github.com/gethinode/mod-utils/v2 v2.3.1 // indirect
+	github.com/gethinode/mod-lottie v1.5.4 // indirect
+	github.com/gethinode/mod-utils/v2 v2.3.8 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )

go.sum

@@ -174,6 +174,14 @@ github.com/gethinode/mod-lottie v1.4.7 h1:5Hes0xY/l8ygzJ8YQIzdqCmvGrDQs8D8qZ/vR1
 github.com/gethinode/mod-lottie v1.4.7/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
 github.com/gethinode/mod-lottie v1.5.0 h1:LwEEY+p+sPrN01yz7GyVOsF5lZ4qMln69+gAxJs1DDA=
 github.com/gethinode/mod-lottie v1.5.0/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
+github.com/gethinode/mod-lottie v1.5.1 h1:84ZmOTKJH75wsd/YjPaaBRkTeLnmRROv9iFlQVMC+jA=
+github.com/gethinode/mod-lottie v1.5.1/go.mod h1:z0Q6EADM7pN7gmhCzDx2VR4uG5mxn9qbsphtxjIkssY=
+github.com/gethinode/mod-lottie v1.5.2 h1:UvrNAQeD/97Q5fbv3uKIY48fY3IWJeLy/v206Gb0F6Y=
+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=
@@ -202,6 +210,20 @@ github.com/gethinode/mod-utils/v2 v2.3.0 h1:e3uhlAGasvXe+cgvcmzRe05Zo4UEx86uk0Tb
 github.com/gethinode/mod-utils/v2 v2.3.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.3.1 h1:blqynoRJ+H2SPfSU28iYheYWPH39MKNtK5HKJPghL3M=
 github.com/gethinode/mod-utils/v2 v2.3.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.2 h1:QxYtHqeiLfAg+38ULFr3qYwNuypcnV1KzsmmNUjbX+U=
+github.com/gethinode/mod-utils/v2 v2.3.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.3 h1:dewgQgAyPJJ1lA2WhowHaFqVaeLjUNYgxDO4mE3v0F0=
+github.com/gethinode/mod-utils/v2 v2.3.3/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.4 h1:4OmUsLW7FyQL7vJhg/Iy9E7nFXWL955qCtsj6yWU51M=
+github.com/gethinode/mod-utils/v2 v2.3.4/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.5 h1:r8V330xQkHTjzAFNCde1Kpz6fgidzmMRW82eIonUnOo=
+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/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=

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"
     ]

layouts/404.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+    {{ $base := partial "utilities/GetStaticURL" (dict "url" "/") }}
     <div class="d-flex flex-fill">
         <div class="container-xxl my-auto">
             <div class="text-center">
@@ -7,7 +8,7 @@
                     <p class="display-1 mt-3 fw-bold">404</p>
                     <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
                 </span>
-                {{- $home := printf "<a href=\"%s\">%s</a>" ("/" | relLangURL) (T "pageNotFoundHome") -}}
+                {{- $home := printf "<a href=\"%s\">%s</a>" $base (T "pageNotFoundHome") -}}
                 <p>{{ T "pageNotFound" $home | safeHTML }}</p>
             </div>
         </div>

layouts/_default/baseof.html

@@ -29,6 +29,10 @@
 {{- /* Define main breakpoint */ -}}
 {{- $.Scratch.Set "breakpoint" (partial "utilities/GetBreakpoint.html") }}
 
+{{- /* Define base URL */ -}}
+{{ $lang := site.LanguageCode | default site.Language.Lang }}
+{{ $.Scratch.Set "baseURL" (strings.TrimSuffix (printf "%s/" $lang) site.Home.RelPermalink) }}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>

layouts/_default/single/header.html

@@ -32,7 +32,7 @@
         <div class="d-none-dark">
             <div class="hstack gap-1">
                 {{ range (.GetTerms "tags") -}}
-                    {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                    {{- $url := .Page.RelPermalink -}}
                     {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
                 {{ end -}}
             </div>
@@ -41,7 +41,7 @@
         <div class="d-none-light">
             <div class="hstack gap-1">
                 {{ range (.GetTerms "tags") -}}
-                    {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                    {{- $url := .Page.RelPermalink -}}
                     {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "primary" "size" "sm" "outline" "true") }}
                 {{ end -}}
             </div>

layouts/alias.html

@@ -1,11 +1,12 @@
+{{ $lang := site.LanguageCode | default site.Language.Lang }}
 <!DOCTYPE html>
-<html{{ with site.LanguageCode | default site.Language.Lang }} lang="{{ . }}"{{ end }}>
+<html {{ with $lang }}lang="{{ . }}"{{ end }}>
   <head>
     <title>{{ .Permalink }}</title>
     <link rel="canonical" href="{{ .Permalink }}">
     <meta name="robots" content="noindex">
     <meta charset="utf-8">
     <noscript><meta http-equiv="refresh" content="0; url={{ .Permalink }}"></noscript>
-    <script src="/js/alias.js"></script>
+    <script src='{{ partial "utilities/GetStaticURL" (dict "url" "js/alias.js") }}'></script>
   </head>
 </html>

layouts/partials/assets/adapters/hugo.html

@@ -27,7 +27,7 @@
     {{ $url = urls.JoinPath "https://" $host $url }}
 {{ end }}
 
-<!-- Initialize image if needed -->
+<!-- Initialize image if needed, do not raise additional warnings -->
 {{ $format := .format | default "webp" }}
 {{ if and (not $img) (ne $format "svg") }}
     {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" page) -}}
@@ -37,7 +37,6 @@
     {{ end }}
 
     {{ if not $img }}
-        {{ errorf "partial [assets/adapter/hugo.html] - Expected 'img' argument" -}}
         {{ $error = true }}
     {{ end }}
 {{ end }}

layouts/partials/assets/adapters/imagekit-rewrite.html

@@ -0,0 +1,30 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter-rewrite" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/imagekit-rewrite.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $account :=  .account }}
+{{ $container := trim .container "/" }}
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $element := "" }}
+{{ with $container }}{{ $dir = strings.TrimPrefix (printf "/%s" .) $dir }}{{ end }}
+
+{{ if ne $host "ik.imagekit.io" }}
+    {{ $element = urls.JoinPath (slice "https://ik.imagekit.io" $account $dir $file) }}
+{{ else }}
+    {{ $element = urls.JoinPath (slice "https://" $host $dir $file) }}
+{{ end }}
+
+{{ return $element }}

layouts/partials/assets/breadcrumb.html

@@ -22,7 +22,7 @@
             {{- range $index, $item := $page.Ancestors.Reverse -}}
                 {{- $title := .LinkTitle -}}
                 {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
-                {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
+                {{- $address := or .RelPermalink .Params.Redirect -}}
                 {{ if $address }}
                     <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
                 {{ else }}

layouts/partials/assets/card.html

@@ -119,7 +119,7 @@
 
         {{- range $index, $tag := first $maxTags ($page.GetTerms "tags") -}}
             {{- if gt $index 0 }} • {{ end -}}
-            <a href="{{ (path.Join $tag.Page.RelPermalink) | relLangURL }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
+            <a href="{{ $tag.Page.RelPermalink }}" class="{{ $link }} tag-link" aria-label="tag: {{ $tag.LinkTitle }}">{{ $tag.LinkTitle }}</a>
         {{- end -}}
     </small></p>
 {{- end -}}

layouts/partials/assets/helpers/image-definition.html

@@ -14,14 +14,10 @@
 {{- $url := .url -}}
 {{- $mode := .mode -}}
 {{- $modes := .modes -}}
-
-{{- $fallbackURL := "" -}}
-{{- $anchor := "" -}}
-{{- $imgset := "" -}}
-{{- $isVector := false -}}
-
+{{- $plain := .plain | default 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,69 +26,18 @@
     {{- $anchor = index $segments 1 -}}
 {{- end -}}
 
-<!-- Identify image provider -->
-{{ $hook := "" }}
-{{ range $provider, $val := site.Params.images }}
-    {{ if not $hook }}    
-        {{ with index $val "host" }}
-            {{ if (findRE . (urls.Parse $url).Hostname) }}
-                {{ $hook = $provider }}
-            {{ end }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-{{ if not $hook }}{{ $hook = "hugo" }}{{ 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 }}
-    {{ $transform = "fit" }}
-    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
-    {{ with $res }}
-        {{ $img = $res.resource }}
-        {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
-    {{ 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 }}
-
-<!-- Derive image width and height -->
-{{ $width := "" }}
-{{ $height := "" }}
-{{ with $dims }}
-    {{ range $dim := (. | last 1) }}
-        {{ $width = (int (index (split $dim "x") 0)) }}
-        {{ $height = (int (index (split $dim "x") 1)) }}
-    {{ end }}
-{{ end }}
-
-<!-- Generate image urls -->
-{{ if hasSuffix $url "svg" }}
-    {{- $fallbackURL = $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 -}}

layouts/partials/assets/helpers/image-dimension.html

@@ -0,0 +1,109 @@
+<!-- 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)) }}
+            {{ $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 (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) }}

layouts/partials/assets/helpers/image-rewrite.html

@@ -0,0 +1,29 @@
+{{- $url := .url -}}
+{{- $account := .account -}}
+{{- $container := .container -}}
+{{ $hook := .hook }}
+
+{{ $host := (urls.Parse $url).Hostname }}
+{{ $dir := (urls.Parse $url).Path }}
+{{ $file := index ((split $dir "/") | collections.Reverse) 0 }}
+{{ $dir = strings.TrimSuffix $file $dir }}
+{{ $error := false }}
+
+{{ $adapter := (printf "assets/adapters/%s-rewrite.html" $hook) }}
+{{ if not (fileExists (path.Join "/layouts/partials" $adapter)) }}
+    {{ warnf "Cannot find adapter: %s" (path.Join "/layouts/partials" $adapter) }}
+    {{ $error = true }}
+{{ end }}
+
+{{ $result := $url }}
+{{ if not $error }}
+    {{ $result = partial $adapter (dict 
+        "account" $account
+        "container" $container
+        "host" $host
+        "dir" $dir
+        "file" $file
+    )}}
+{{ end }}
+
+{{ return $result }}

layouts/partials/assets/image.html

@@ -26,6 +26,7 @@
 {{- $priority := .priority -}}
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
 {{- $sizes := .sizes | default "100vw" -}}
+{{- $plain := .plain | default false -}}
 
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $url := .url -}}
@@ -47,28 +48,29 @@
     "priority" $priority
     "sizes" $sizes
     "absoluteURL" $absoluteURL
+    "plain" $plain
     )
 -}}
 
-{{- if $mode -}}
-    {{- $ext := path.Ext $url -}}
-    {{- $base := strings.TrimSuffix $ext $url -}}
-    {{- range $suffix := $modes -}}
-        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
-    {{- end -}}
-
-    {{- range $suffix := $modes -}}
-        {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
-        {{- $params = merge $params (dict
-            "url" $image
-            "mode" $suffix
-            "modes" $modes)
-        -}}
-    {{- end -}}
-{{ else }}
-    {{- $params = merge $params (dict "url" $url) -}}
-{{- end -}}
-
 {{ if not $error }}
-    {{- partial "assets/helpers/image-definition.html" $params -}}
+    {{- if $mode -}}
+        {{- $ext := path.Ext $url -}}
+        {{- $base := strings.TrimSuffix $ext $url -}}
+        {{- range $suffix := $modes -}}
+            {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
+        {{- end -}}
+
+        {{- range $suffix := $modes -}}
+            {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
+            {{- $params = merge $params (dict
+                "url" $image
+                "mode" $suffix
+                "modes" $modes)
+            -}}
+            {{- partial "assets/helpers/image-definition.html" $params -}}
+        {{- end -}}
+    {{ else }}
+        {{- $params = merge $params (dict "url" $url) -}}
+        {{- partial "assets/helpers/image-definition.html" $params -}}
+    {{- end -}}
 {{ end }}

layouts/partials/assets/navbar-item.html

@@ -19,9 +19,14 @@
 {{- $class := .class -}}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
-
-{{- $menuURL := (or $menu.PageRef $menu.URL) | relLangURL -}}
-{{- $pageURL := $page.RelPermalink | 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 -}}
 {{- $isIcon := $menu.Params.icon -}}

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 -->
@@ -53,6 +33,7 @@
     {{- $size := .size -}}
     {{- $collapsed := .collapsed -}}
     {{- $page := .page -}}
+    {{- $baseURL := .baseURL -}}
     {{- $list := site.Params.docs.releases -}}
     {{- $id := .id -}}
     {{- $version := partial "utilities/GetVersion.html" (dict "page" $page) -}}
@@ -70,7 +51,7 @@
                 {{- end -}}
                 {{ if $item.url }}
                     <li>
-                        {{- $url := (path.Join $item.url) | relLangURL -}}
+                        {{- $url := (urls.JoinPath $baseURL $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 }}&nbsp;({{ T "latest" }}){{ end }}
                             {{ if $active }}
@@ -86,7 +67,7 @@
             {{- 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 -}}
+                    {{- $url := (urls.JoinPath $baseURL site.Params.docs.overview) | relLangURL -}}
                     <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" href="{{ $url }}">{{ T "allVersions" }}</a>
                 </li>
             {{- end -}}
@@ -98,6 +79,7 @@
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $id := .id | default (printf "navbar-%d" 0) -}}
 {{- $page := .page -}}
+{{- $baseURL := $page.Scratch.Get "baseURL" -}}
 
 {{- $defaultMenu := "main" -}}
 {{- $menuName := .menus | default $defaultMenu }}
@@ -117,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 }}
@@ -132,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) -}}
@@ -152,6 +142,10 @@
     {{- end -}}
 {{- end -}}
 
+{{ if $logo }}{{ $logo = urls.JoinPath $baseURL $logo }}{{ end }}
+{{ if $logoLight }}{{ $logoLight = urls.JoinPath $baseURL $logoLight }}{{ end }}
+{{ if $logoDark }}{{ $logoDark = urls.JoinPath $baseURL $logoDark }}{{ end }}
+
 {{- $title := site.Title -}}
 {{- if .title -}}
     {{- $title = .title -}}
@@ -255,8 +249,8 @@
     
                     <!-- Insert version switcher -->
                     {{- if $enableVersions -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id "baseURL" $baseURL) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id "baseURL" $baseURL) -}}
                     {{- end -}}
 
                     <!-- Insert language switcher if applicable -->
@@ -276,7 +270,7 @@
                                     {{- end -}}
                                 {{- else -}}
                                     {{- range site.Languages -}}
-                                        <li><a class="dropdown-item" href="/{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                                        <li><a class="dropdown-item" href="{{ urls.JoinPath $baseURL .Lang }}">{{ default .Lang .LanguageName }}</a></li>
                                     {{- end -}}
                                 {{- end -}}
                             </ul>
@@ -286,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 -->

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 }}

layouts/partials/assets/sidebar.html

@@ -26,8 +26,8 @@
     {{- $group := .group -}}
     {{- $data := .menu -}}
 
-    {{- $doc_slug := $group.title | urlize -}}
-    {{- $href := or $group.link (printf "%s/" (relLangURL (path.Join $baseURL $doc_slug))) -}}
+    {{- $doc_slug := urls.JoinPath  $baseURL ($group.title | urlize) -}}
+    {{- $href := or $group.link (partial "utilities/GetStaticURL" (dict "url" $doc_slug)) -}}
     {{- $collapsed := strings.HasPrefix $page.RelPermalink $href -}}
 
     <li class="mb-1">
@@ -71,11 +71,18 @@
     {{- $level := .level -}}
     {{- $baseURL := .baseURL -}}
     {{- $title := .title -}}
-    {{- $href := .href -}}
     {{- $data := .menu -}}
+    {{ $href := "" }}
 
-    {{- $doc_slug := $title | urlize -}}
-    {{- $href := or $href (printf "%s/" (relLangURL (path.Join $baseURL $doc_slug))) -}}
+    {{ with .href }}
+        {{ if hasPrefix . "http" }}
+            {{ $href = . }}
+        {{ else }}
+            {{- $href = (partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL .))) -}}
+        {{ end }}
+    {{ else }}
+        {{- $href =  partial "utilities/GetStaticURL" (dict "url" (urls.JoinPath $baseURL ($title | urlize))) -}}
+    {{ end }}
     {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}
 
     {{ if eq $level 0}}

layouts/partials/head/head.html

@@ -25,7 +25,7 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
         <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
     {{ else if .Site.Params.style.themeFontPreload }}
-        {{ $font := .Site.Params.style.themeFontPreload }}
+        {{ $font := partial "utilities/GetStaticURL" (dict "url" .Site.Params.style.themeFontPreload) }} 
         <link rel="preload" href="{{ $font }}" as="font" type="font/{{ strings.TrimPrefix "." (path.Ext $font) }}" crossorigin>
     {{- end -}}
     {{ partial "head/seo.html" . }}

layouts/partials/head/icons.html

@@ -35,7 +35,9 @@
     {{- end }}
 {{- end -}}
 
+{{ $base := partial "utilities/GetStaticURL" (dict "url" "/") }}
 {{- range resources.Match "icons/**.svg" -}}
-    {{- $icon := . | resources.ExecuteAsTemplate .RelPermalink $params -}}
+    {{- $target := strings.TrimPrefix $base .RelPermalink -}}
+    {{- $icon := . | resources.ExecuteAsTemplate $target $params -}}
     {{- $icon.Publish -}}
 {{- end -}}

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) -}}

layouts/partials/head/stylesheet.html

@@ -40,6 +40,7 @@
 {{- $overlayOffset := $navbarOffset -}}
 {{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
+    "base-url"                (page.Scratch.Get "baseURL" | default "/")
     "theme-font"              (default "Inter" site.Params.style.themeFont)
     "font-size-base"          (default "1rem" site.Params.style.fontSizeBase)
     "primary"                 (default "#007bff" site.Params.style.primary)

layouts/shortcodes/image.html

@@ -24,6 +24,7 @@
 {{- $portrait := false -}}
 {{- $loading := "" -}}
 {{- $error := false -}}
+{{- $plain := false -}}
 
 {{- if .IsNamedParams -}}
     {{ $url = .Get "src" | default "" -}}
@@ -37,6 +38,7 @@
     {{ $figclass = .Get "figclass" | default "" -}}
     {{ with .Get "mode" }}{{ $mode = partial "utilities/CastBool.html" . }}{{ end -}}
     {{ with .Get "portrait" }}{{ $portrait = partial "utilities/CastBool.html" . }}{{ end -}}
+    {{ with .Get "plain" }}{{ $plain = partial "utilities/CastBool.html" . }}{{ end -}}
 {{ else -}}
     {{ $url = .Get 0 }}
 {{ end -}}
@@ -58,6 +60,7 @@
         "figclass" $figclass
         "mode" $mode
         "portrait" $portrait
+        "plain" $plain
         "loading" $loading
         "page" .Page)
     -}} 

layouts/tags/list.html

@@ -24,7 +24,7 @@
                                 {{ .Count }} {{ if gt .Count 1 }} {{ T "articles" }} {{ else }} {{ T "article" }} {{ end }}
                             </div>
                             <div class="col-9">
-                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Page.Title | .Page.RenderString }}</a>
+                                <a href="{{ .Page.RelPermalink }}">{{ .Page.Title | .Page.RenderString }}</a>
                             </div>
                         </div>
                     {{ end }}
@@ -48,7 +48,7 @@
                                     <p class="text-body-secondary mt-5">{{ $year }}</p>
                                     {{ $.Scratch.Set "lastYear" $year }}
                                 {{ end }}
-                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ if .Draft }}{{ T "draft" | upper }}: {{ end }}{{ .Title | .Page.RenderString }}</a>
+                                <a href="{{ .Page.RelPermalink }}">{{ if .Draft }}{{ T "draft" | upper }}: {{ end }}{{ .Title | .Page.RenderString }}</a>
                             </div>
                         </div>
                     {{ end }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.24.0-beta2",
+  "version": "0.24.5",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -66,28 +66,30 @@
     "url": "https://github.com/gethinode/hinode/issues"
   },
   "homepage": "https://gethinode.com",
-  "devDependencies": {
+  "dependencies": {
     "@fullhuman/postcss-purgecss": "^6.0.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.2",
+    "cssnano-preset-advanced": "^7.0.2",
+    "hugo-bin": "0.124.0",
+    "purgecss-whitelister": "^2.4.0"
+  },
+  "devDependencies": {
     "@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",
     "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.1.1",
-    "hugo-bin": "0.123.1",
+    "eslint-plugin-promise": "^6.2.0",
     "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",
-    "stylelint": "^16.6.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "optionalDependencies": {