Merge pull request #1010 from gethinode/develop

Fix passing of icon rounded arg to card partial
Merge branch 'main' into develop
2025-10-07 10:04:22 +00:00 · 2024-06-23 06:36:24 +02:00 · 2024-06-23 06:20:41 +02:00 · 2024-06-23 06:02:30 +02:00 · 2024-06-23 06:02:00 +02:00 · 2024-06-22 18:59:40 +02:00
66 changed files with 1735 additions and 3021 deletions
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain
 The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.

 - [Go binary][golang_download]
- [Hugo][nodejs] (extended version)
+- [Hugo][hugo_download] (extended version)

 [Git][git_download] is recommended, but is not a strict requirement.

--- 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/_icons.scss
+++ b/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
--- 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/common/_variables-dart.scss
+++ b/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;
--- a/assets/scss/common/_variables.scss
+++ b/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;;
--- a/assets/scss/components/_button.scss
+++ b/assets/scss/components/_button.scss
@@ -41,3 +41,7 @@ a.btn {
    background-repeat: no-repeat if($enable-important-utilities, !important, null);
    background-size: $btn-close-width if($enable-important-utilities, !important, null);
 }
+
+.btn-link {
+    --bs-btn-padding-x: 0;
+}
--- a/assets/scss/components/_card.scss
+++ b/assets/scss/components/_card.scss
@@ -68,8 +68,7 @@
    }
 }

-.card-zoom card-body-link,
-.card-body-link {
+.card-zoom .card-body-link {
    &:hover,
    &:focus {
        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
@@ -78,8 +77,7 @@

@if $enable-dark-mode {
    @include color-mode(dark) {
-        .card-zoom card-body-link,
-        .card-body-link {
+        .card-zoom .card-body-link {
            &:hover,
            &:focus {
                color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
--- 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/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -16,25 +16,15 @@
        transpiler = "libsass"
 # toml-docs-end main

-# toml-docs-start modules
-[modules]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex", "lottie"]
-    excludeSCSS = ["bootstrap"]
-    disableTemplate = ["katex"]
-    [modules.katex]
-        state = "defer"
-    [modules.flexsearch]
-        frontmatter = false
-        filter = ""
-    [modules.fontawesome]
-        inline = true
-        debug = true
-        skipMissing = false
-    [modules.utils]
-        filter = "[^0-9A-Za-zŽžÀ-ÿ ;.,\\/'’\"]-"
-        raw = false        
-# toml-docs-end modules
+# toml-docs-start images
+[images]
+    [images.cloudinary]
+        host = "cloudinary"
+    [images.imagekit]
+        host = "imagekit"
+    [images.imgix]
+        host = "imgix"
+# toml-docs-end images

 # toml-docs-start debugging
 [debugging]
--- a/config/_default/server.toml
+++ b/config/_default/server.toml
@@ -15,7 +15,7 @@ for = '/**'
            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
        font-src 'self' https://fonts.gstatic.com; \
        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
        manifest-src 'self'; \
        media-src 'self' \
        """
--- a/data/dimensions.yml
+++ b/data/dimensions.yml
@@ -0,0 +1,48 @@
+- ratio: 4x3
+  dimensions:
+    - 576x432
+    - 768x576
+    - 992x744
+    - 1200x900
+    - 1400x1050
+    - 2800x2100
+- ratio: 3x2
+  dimensions:
+    - 576x384
+    - 768x512
+    - 992x661
+    - 1200x800
+    - 1400x933
+    - 2800x1867
+- ratio: 1x1
+  dimensions:
+    - 576x576
+    - 768x768
+    - 992x992
+    - 1200x1200
+    - 1400x1400
+    - 2800x2800
+- ratio: 16x9
+  dimensions:
+    - 576x324
+    - 768x432
+    - 992x558
+    - 1200x675
+    - 1400x788
+    - 2800x1575
+- ratio: 21x9
+  dimensions:
+    - 576x247
+    - 768x329
+    - 992x425
+    - 1200x514
+    - 1400x600
+    - 2800x1200
+- ratio: auto
+  dimensions:
+    - 576
+    - 768
+    - 992
+    - 1200
+    - 1400
+    - 2800
--- 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-adapter-rewrite.yml
+++ b/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'.
--- a/data/structures/image-adapter.yml
+++ b/data/structures/image-adapter.yml
@@ -0,0 +1,62 @@
+comment: >-
+  Defines the interface to be implemented by a CDN image adapter.
+arguments:
+  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'.
+  absoluteURL:
+    type: string
+    optional: true
+    default: false
+    comment: >-
+      Defines if a local image should use absolute instead of relative paths.
+  img:
+    type: "*resources.resourceAdapter"
+    optional: true
+    comment: >-
+      Image resource to process. Must be set when handling local images.
+  format:
+    type: select
+    optional: true
+    comment: >-
+      Image format; leave empty for an auto format (if supported) or default
+      format (usually jpg).
+    options:
+      values:
+        - png
+        - jpg
+        - gif
+        - tiff
+        - bmp
+        - webp
+  transform:
+    type: select
+    optional: false
+    comment: Image transformation.
+    options:
+      values:
+        - fill
+        - fit
+  height:
+    type: int
+    optional: false
+    comment: Height of the image in pixels.
+  width:
+    type: int
+    optional: false
+    comment: Width of the image in pixels.
--- a/data/structures/image.yml
+++ b/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
--- a/data/structures/link.yml
+++ b/data/structures/link.yml
@@ -56,6 +56,12 @@ arguments:
      Flag to indicate if the retrieved title (e.g. no inner text is provided)
      of an internal link should use its original case. If false, the title is
      set to lower case.
+  external:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to indicate if a link that contains baseURL host should be forced as external.
  class:
    type: string
    optional: true
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -13,21 +13,6 @@
    [main.build]
        transpiler = "dartsass"

-[modules]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex", "lottie"]
-    excludeSCSS = ["bootstrap"]
-    disableTemplate = ["katex"]
-    [modules.katex]
-        state = "defer"
-    [modules.flexsearch]
-        frontmatter = false
-        filter = ""
-    [modules.fontawesome]
-        inline = true
-        debug = true
-        skipMissing = false
-
 [debugging]
    showJS = false
    showSCSS = false
@@ -70,6 +55,14 @@
 [messages]
    placement = "bottom-right"

+[dam]
+    dimensions = "dimensions.yml"
+
+[[dam.providers]]
+    name = "Cloudinary"
+    pattern = "cloudinary"
+    adapter = "assets/adapters/cloudinary.html"
+
 [sharing]
    enabled = true
    sort = "weight"
--- a/exampleSite/config/_default/server.toml
+++ b/exampleSite/config/_default/server.toml
@@ -15,7 +15,7 @@ for = '/**'
            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
        font-src 'self' https://fonts.gstatic.com; \
        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
        manifest-src 'self'; \
        media-src 'self' \
        """
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -291,6 +291,7 @@ As an example, the following shortcodes render links in different formats.
 - {{</* link name=hinode cue=true tab=true >}}Named link opening in new tab with icon{{< /link */>}}
 - {{</* link hinode /*/>}}
 - {{</* link href="https://developer.mozilla.org" >}}External link{{< /link */>}}
+- {{</* link href="https://demo.gethinode.com/en/about/" >}}Surrogate external link{{< /link */>}}
 - {{</* link "./projects/another-project" >}}Internal link with title{{< /link */>}}
 - {{</* link url="projects/another-project" /*/>}}
 - {{</* link url="/projects/another-project" /*/>}}
--- a/exampleSite/content/en/blog/image.md
+++ b/exampleSite/content/en/blog/image.md
@@ -0,0 +1,42 @@
+---
+author: Mark Dumay
+title: Local and remote images
+date: 2024-05-19
+description: Include responsive images from local sources and selected CDN image providers.
+tags: ["blog"]
+thumbnail:
+  url: https://assets.imgix.net/examples/bluehat.jpg
+---
+
+## Cloudinary
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
+    ratio="21x9" caption="Cloudinary image" class="rounded" plain=true */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## ImageKit.io
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://ik.imagekit.io/demo/default-image.jpg"
+    ratio="21x9" caption="ImageKit.io image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Imgix
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://assets.imgix.net/examples/bluehat.jpg"
+    ratio="21x9" caption="imgix image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
--- 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",
@@ -93,6 +96,7 @@
      "btn-close",
      "btn-group",
      "btn-light",
+      "btn-link",
      "btn-outline-primary",
      "btn-outline-secondary",
      "btn-primary",
@@ -122,6 +126,7 @@
      "carousel-indicators",
      "carousel-inner",
      "carousel-item",
+      "checkbox",
      "chroma",
      "col",
      "col-10",
@@ -130,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",
@@ -186,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",
@@ -199,6 +202,7 @@
      "fa-globe",
      "fa-heart",
      "fa-house",
+      "fa-inverse",
      "fa-link",
      "fa-linkedin",
      "fa-magnifying-glass",
@@ -208,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",
@@ -256,6 +263,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "lead",
      "leaflet-map",
      "link-bg-body",
@@ -277,6 +285,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-1",
      "ms-3",
      "ms-auto",
@@ -308,6 +317,7 @@
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-nav-scroll",
      "navbar-title",
@@ -390,7 +400,6 @@
      "sticky-top",
      "stretched-link",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "syntax-highlight",
      "tab-content",
      "tab-pane",
@@ -418,8 +427,6 @@
      "text-sm-start",
      "text-start",
      "text-uppercase",
-      "theme-icon",
-      "theme-icon-active",
      "tickmark",
      "timeline",
      "timeline-bg-dark",
@@ -458,8 +465,6 @@
      "w-50"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "TableOfContents",
      "abbr",
      "accordion",
@@ -491,6 +496,7 @@
      "carrousel",
      "carte",
      "chronologie",
+      "cloudinary",
      "collapse",
      "collapse-1",
      "command-prompt",
@@ -509,6 +515,8 @@
      "groupe-de-cartes",
      "icon",
      "image",
+      "imagekitio",
+      "imgix",
      "indicateur-de-chargement",
      "infobulle",
      "invite-de-commandes",
@@ -528,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
@@ -4,13 +4,13 @@ go 1.19

 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
-	github.com/gethinode/mod-bootstrap v1.2.8 // indirect
-	github.com/gethinode/mod-flexsearch v1.11.3 // indirect
-	github.com/gethinode/mod-fontawesome v1.8.2 // indirect
-	github.com/gethinode/mod-katex v1.0.9 // indirect
-	github.com/gethinode/mod-leaflet v1.0.1 // indirect
-	github.com/gethinode/mod-lottie v1.4.6 // indirect
-	github.com/gethinode/mod-utils/v2 v2.2.2 // indirect
+	github.com/gethinode/mod-bootstrap v1.3.0 // indirect
+	github.com/gethinode/mod-flexsearch v1.12.0 // indirect
+	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.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
@@ -20,6 +20,8 @@ github.com/gethinode/mod-bootstrap v1.2.6 h1:joKKVqWzPgitPbUFlU4oIRj72YXsEHkVun3
 github.com/gethinode/mod-bootstrap v1.2.6/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-bootstrap v1.2.8 h1:kIKSO6qqE8xA0KQC5s6kkEv5UDc8oT17HalGIwB+dSc=
 github.com/gethinode/mod-bootstrap v1.2.8/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.3.0 h1:UxNmXgXo7gA8C8z1ar47+tSccmKYpaYBBN+txB0pwBk=
+github.com/gethinode/mod-bootstrap v1.3.0/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
 github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
@@ -64,6 +66,8 @@ github.com/gethinode/mod-flexsearch v1.11.1 h1:TtaE6Dv0lH4x73SHDaZpQJLjk52lRu/Vo
 github.com/gethinode/mod-flexsearch v1.11.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch v1.11.3 h1:ykxpUg8M4vr1C4QzxJOPGt+1ZmPAD/gOCZoFcZxWoWw=
 github.com/gethinode/mod-flexsearch v1.11.3/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.12.0 h1:zg1IHvc8VO9WEtQuQnuG6HeWFNByvyqC9JYWDtpsP6s=
+github.com/gethinode/mod-flexsearch v1.12.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -102,6 +106,8 @@ github.com/gethinode/mod-fontawesome v1.8.1 h1:iyvULrpaGizQoI5Vl9WjFYcMGWefdyG90
 github.com/gethinode/mod-fontawesome v1.8.1/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
 github.com/gethinode/mod-fontawesome v1.8.2 h1:LAzLytyh9c9gLzBWMju6Gtp3uEojhBQEYw0o38EUKZY=
 github.com/gethinode/mod-fontawesome v1.8.2/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.9.0 h1:xqUB8AnezMHAt8lye4ksqvmHSVPCOkiHsHGUbqNoeP0=
+github.com/gethinode/mod-fontawesome v1.9.0/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
@@ -120,6 +126,8 @@ github.com/gethinode/mod-katex v1.0.8 h1:tFGFz/JIEogCz4wvUsUncrOsOupPxsjP+TwU/3N
 github.com/gethinode/mod-katex v1.0.8/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.9 h1:cCJoR28tZwkDvXps17o9Jwfe3aQQAZ3Rxk0jCNRQdbU=
 github.com/gethinode/mod-katex v1.0.9/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.1.0 h1:PxST3HPUt6F2X/xKakTVeTkwWqCtEr53K1vYEOyQu3I=
+github.com/gethinode/mod-katex v1.1.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
 github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
@@ -136,6 +144,8 @@ github.com/gethinode/mod-leaflet v1.0.0 h1:HdnWafOGkkK1hYGfqLYF3pp9dAFS/caxlzML9
 github.com/gethinode/mod-leaflet v1.0.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-leaflet v1.0.1 h1:L4Coe6HTD9O0Txs1S8AtVg+6/TEneSF9i6fJK8jdWUw=
 github.com/gethinode/mod-leaflet v1.0.1/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.1.0 h1:FXzPCic5XmUluxQ6e7LYUhhLnxuQOBwry8qjG9k30UY=
+github.com/gethinode/mod-leaflet v1.1.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
 github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
 github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
@@ -160,6 +170,18 @@ github.com/gethinode/mod-lottie v1.4.4 h1:Lv7J+lAMx++aK9h0L7vAgsjyOZgrjux4xPz4Tp
 github.com/gethinode/mod-lottie v1.4.4/go.mod h1:7tsZjlFgMlj2iWBIS9uOtHHsCrfx9W7S8OsBrZeSVGU=
 github.com/gethinode/mod-lottie v1.4.6 h1:L6zvfbq+FQUWTG3X/wWFCvb91WOxJuIkJUlZOd+QJ1Q=
 github.com/gethinode/mod-lottie v1.4.6/go.mod h1:1/+7U/Q5IuaqkzTrvXK1CnPE7ANnTRsG5k+KaXQUQwE=
+github.com/gethinode/mod-lottie v1.4.7 h1:5Hes0xY/l8ygzJ8YQIzdqCmvGrDQs8D8qZ/vR1fQh/Q=
+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=
@@ -184,6 +206,28 @@ github.com/gethinode/mod-utils/v2 v2.1.1 h1:aLBcS9Zbx+dqnu5oBsTM01AkkN5nwwifgbV4
 github.com/gethinode/mod-utils/v2 v2.1.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.2.2 h1:ZRxWIJKmZIDYsoMS3WhxxC+BWJrkd1dcZ8rz/cLZExc=
 github.com/gethinode/mod-utils/v2 v2.2.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.0 h1:e3uhlAGasvXe+cgvcmzRe05Zo4UEx86uk0TbnxtyB6U=
+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/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/404.html
+++ b/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>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -13,10 +13,9 @@
    {{- end -}}
 {{- end -}}

-{{- /* Validate module configuration */ -}}
-{{- if and .IsPage (not (in .Site.Params.modules.core "bootstrap")) -}}
-    {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
-{{- end -}}
+{{- /* Initialize module configuration */ -}}
+{{- $modules := partial "utilities/InitModules.html" (dict "page" .) -}}
+{{- $.Scratch.Set "modules" $modules -}}

 {{- $fullCover := or (or (and .IsHome .Site.Params.home.fullCover) .Page.Params.fullCover) .Site.Params.main.footerBelowFold }}
 {{- $.Scratch.Set "fullCover" $fullCover -}}
@@ -30,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>
--- a/layouts/_default/single/header.html
+++ b/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>
--- a/layouts/alias.html
+++ b/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>
--- a/layouts/partials/assets/adapters/cloudinary.html
+++ b/layouts/partials/assets/adapters/cloudinary.html
@@ -0,0 +1,43 @@
+<!-- 
+    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" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/cloudinary.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "c_fill" }}{{ else }}{{ $transform = "c_fit" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Split path between upload dir and sub dir -->
+{{ $newdir := urls.JoinPath (index (split $dir "upload") 0) "upload" }}
+{{ $file = urls.JoinPath (index (split $dir "upload") 1) $file }}
+{{ $dir = $newdir }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "%s,h_%d,w_%d" $transform $height $width }}
+        {{ $file = printf "%s.%s" (strings.TrimSuffix (path.Ext $file) $file) $format }}
+    {{ else }}
+        {{ $operation = printf "f_auto,%s,h_%d,w_%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/hugo.html
+++ b/layouts/partials/assets/adapters/hugo.html
@@ -0,0 +1,63 @@
+<!-- 
+    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" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/hugo.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $img := .img }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ $element := "" }}
+{{ $absoluteURL := .absoluteURL }}
+{{ $url := urls.JoinPath $dir $file }}
+{{ if $host }}
+    {{ $url = urls.JoinPath "https://" $host $url }}
+{{ end }}
+
+<!-- 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) -}}
+    {{ if $res }}
+        {{ $img = $res.resource }}
+        <!-- TODO: $res.mirror  -->
+    {{ end }}
+
+    {{ if not $img }}
+        {{ $error = true }}
+    {{ end }}
+{{ end }}
+
+
+<!-- Process image and generate image URL -->
+{{ if not $error }}
+    {{ $scaled := "" }}
+    {{ if eq $transform "fill" }}
+        {{- $scaled = $img.Fill (printf "%dx%d %s" $width $height $format) -}}
+    {{ else }}
+        {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
+    {{ end }}
+
+    {{- $clean := path.Ext $img.RelPermalink -}}
+    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%dx%d.%s" $width $height $format)) -}}
+    {{- if $absoluteURL -}}
+        {{- $element = $scaled.Permalink -}}
+    {{- else -}}
+        {{- $element = $scaled.RelPermalink -}}
+    {{- end -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/imagekit-rewrite.html
+++ b/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 }}
--- a/layouts/partials/assets/adapters/imagekit.html
+++ b/layouts/partials/assets/adapters/imagekit.html
@@ -0,0 +1,48 @@
+<!-- 
+    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" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/imagekit.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "c-maintain_ratio" }}{{ else }}{{ $transform = "c-at_max" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Validate image format is supported -->
+{{ if and $format (not (in (slice "jpg" "jpeg" "webp" "avif" "png") $format)) }}
+    {{ warnf "Image format not supported by ImageKit.io: %s.%s" (path.BaseName $file) $format }}
+    {{ $format = "jpg" }}
+{{ end }}
+
+<!-- Split path between end point and image path -->
+{{ $newdir := printf "/%s" (index (split $dir "/") 1) }}
+{{ $file = urls.JoinPath (strings.TrimPrefix $newdir $dir) $file }}
+{{ $dir = $newdir }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "tr:f-%s,%s,h-%d,w-%d" $format $transform $height $width }}
+    {{ else }}
+        {{ $operation = printf "tr:f-auto,%s,h-%d,w-%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/imgix.html
+++ b/layouts/partials/assets/adapters/imgix.html
@@ -0,0 +1,43 @@
+<!-- 
+    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" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/imgix.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "crop" }}{{ else }}{{ $transform = "max" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Validate image format is supported -->
+{{ if and $format (not (in (slice "avif" "gif" "jp2" "jpg" "json" "jxr" "pjpg" "mp4" "png" "png8" "png32" "webm" "webp" "blurhash") $format)) }}
+    {{ warnf "Image format not supported by imgix: %s.%s" (path.BaseName $file) $format }}
+    {{ $format = "jpg" }}
+{{ end }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "fm=%s&fit=%s&h=%d&w=%d" $format $transform $height $width }}
+    {{ else }}
+        {{ $operation = printf "f_auto&fit=%s&h=%d&w=%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = printf "%s?%s" (urls.JoinPath (slice "https://" $host $dir $file)) $operation -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/breadcrumb.html
+++ b/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 }}
--- a/layouts/partials/assets/button.html
+++ b/layouts/partials/assets/button.html
@@ -85,7 +85,7 @@
        {{- with $clipboard }} data-clipboard="{{ $clipboard }}"{{ end -}}
        {{- if eq $type "button" }} class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class -}}"
        {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-        {{- else }} class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+        {{- else }} class="btn btn-link link-{{ $color }} position-relative {{ $class }}"{{ end -}}
        {{- with $tooltip }} data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
        {{- with $collapse }} data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
        {{- if eq $state "active" }} data-bs-toggle="button" aria-pressed="true"{{ end -}}
--- 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 -->
@@ -139,6 +140,7 @@
                "button" $button
                "buttonLabel" $buttonLabel
                "buttonType" $buttonType
+                "iconRounded" $iconRounded
            ) -}}
            {{- $params = merge $params $element }}

--- 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" -}}
@@ -119,7 +120,7 @@

        {{- range $index, $tag := first $maxTags ($page.GetTerms "tags") -}}
            {{- if gt $index 0 }}&nbsp;&bull;&nbsp;{{ 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 -}}
@@ -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/GetDimension.html
+++ b/layouts/partials/assets/helpers/GetDimension.html
@@ -0,0 +1,25 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+-->
+
+{{ $ratio := .ratio }}
+{{ $dim := "" }}
+{{ $default := dict "4x3" "1400x1050" "3x2" "1400x933" "1x1" "1400x1400" "16x9" "1400x788" "21x9" "1400x600" "auto" "1400" }}
+
+<!-- Initialize dimensions data - stripping unsupported file extension -->
+{{ $config := "dimensions" }}
+{{ with index site.Params "dam" }}{{ with index . "dimensions" }}{{ $config = . }}{{ end }}{{ end }}
+{{ $config = path.Join (path.Dir $config) (path.BaseName $config) }}
+
+{{ with index site.Data $config }}
+    {{ $matches := first 1 (where . "ratio" $ratio) }}
+    {{ if eq ($matches | len) 1 }}
+        {{ $dim = (index $matches 0).dimensions }}
+    {{ end }}
+{{ end }}
+
+{{ if not $dim }}
+    {{ $dim = slice (index $default $ratio)  }}
+{{ end }}
+
+{{ return $dim }}
--- a/layouts/partials/assets/helpers/SetPortrait.html
+++ b/layouts/partials/assets/helpers/SetPortrait.html
@@ -0,0 +1,23 @@
+{{- $dim := .dim -}}
+
+{{- $dimensions := slice }}
+{{- $dimensions = $dimensions | append $dim -}}
+{{- $portraits := slice }}
+{{- range $d := $dimensions -}}
+    {{- $p := split $d "x" }}
+    {{ if ne (len $p) 2 }}
+        {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
+        {{- $portraits = $portraits | append $d -}}
+    {{- else -}}
+        {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $ret := "" }}
+{{- if reflect.IsSlice $dim -}}
+    {{ $ret = $portraits -}}
+{{- else if gt (len $portraits) 0 -}}
+    {{- $ret = index $portraits 0 -}}
+{{- end -}}
+
+{{- return $ret -}}
--- a/layouts/partials/assets/helpers/image-definition.html
+++ b/layouts/partials/assets/helpers/image-definition.html
@@ -0,0 +1,72 @@
+<!-- Initialize arguments -->
+{{- $page := .page -}}
+{{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
+{{- $wrapper := .wrapper -}}
+{{- $class := .class -}}
+{{- $title := .title -}}
+{{- $caption := .caption -}}
+{{- $figclass := .figclass -}}
+{{- $lazy := .lazy -}}
+{{- $priority := .priority -}}
+{{- $sizes := .sizes -}}
+{{- $absoluteURL := .absoluteURL -}}
+{{- $url := .url -}}
+{{- $mode := .mode -}}
+{{- $modes := .modes -}}
+{{- $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 -}}
+{{- else if eq (len $segments) 2 }}
+    {{- $url = index $segments 0 -}}
+    {{- $anchor = index $segments 1 -}}
+{{- 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 -}}
+    {{- if ne $none $mode -}}
+        {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
+    {{- end -}}
+{{- end -}}
+
+<!-- Generate image definition -->
+{{- if $caption -}}
+    <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
+{{ end }}
+<div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
+    {{- if not $anchor -}}
+        <img class="img-fluid {{ $class }}"
+            src="{{ $fallbackURL }}"
+            {{ if $lazy }}loading="lazy"{{ end }}
+            {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
+            {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
+            {{ with $height }}height="{{ . }}"{{ end }}
+            {{ with $width }}width="{{ . }}"{{ end }}
+            {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
+    {{- else }}
+        <svg class="{{ $class }}">
+            <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+        </svg>
+    {{ end }}
+</div>
+{{- if $caption -}}
+        <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
+    </figure>
+{{- end -}}
--- 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/helpers/image-rewrite.html
+++ b/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 }}
--- a/layouts/partials/assets/helpers/image-set.html
+++ b/layouts/partials/assets/helpers/image-set.html
@@ -0,0 +1,46 @@
+{{- $url := .url -}}
+{{ $img := .img }}
+{{ $absoluteURL := .absoluteURL }}
+{{ $dims := .dims }}
+{{- $ratio := .ratio -}}
+{{ $hook := .hook }}
+{{ $transform := .transform }}
+{{ $format := .format }}
+{{ $includeWidth := .includeWidth | default true }}
+
+{{ $host := (urls.Parse $url).Hostname }}
+{{ $dir := (urls.Parse $url).Path }}
+{{ $file := index ((split $dir "/") | collections.Reverse) 0 }}
+{{ $dir = strings.TrimSuffix $file $dir }}
+
+{{ $adapter := (printf "assets/adapters/%s.html" $hook) }}
+{{ if not (fileExists (path.Join "/layouts/partials" $adapter)) }}
+    {{ warnf "Cannot find adapter: %s" (path.Join "/layouts/partials" $adapter) }}
+    {{ $hook = "hugo" }}
+    {{ $adapter = "assets/adapters/hugo.html" }}
+{{ end }}
+
+{{ $imgset := slice }}
+{{- range $index, $dim := $dims -}}
+    {{ $width := (int (index (split $dim "x") 0)) }}
+    {{ $height := (int (index (split $dim "x") 1)) }}
+
+    {{- $element := partial $adapter (dict 
+        "host" $host
+        "dir" $dir
+        "file" $file
+        "img" $img
+        "absoluteURL" $absoluteURL
+        "transform" $transform
+        "width" $width
+        "height" $height
+        "format" $format
+    )}}
+    {{ if $includeWidth }}
+        {{ $imgset = $imgset | append (printf "%s %dw" $element $width) }}
+    {{ else }}
+        {{ $imgset = $imgset | append $element }}
+    {{ end }}
+{{- end -}}
+
+{{ return (delimit $imgset ", ") }}
--- a/layouts/partials/assets/image.html
+++ b/layouts/partials/assets/image.html
@@ -13,250 +13,30 @@
 {{ end }}

 <!-- Initialize arguments -->
-{{ $destination := .destination }}
-
-<!-- Initialize arguments -->
-{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $page := .page -}}
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
-{{- $url := .url -}}
-
-{{- $mode := .mode -}}
-{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
 {{- $wrapper := .wrapper -}}
 {{- $class := .class -}}
 {{- $title := .title -}}
 {{- $caption := .caption -}}
 {{- $figclass := .figclass -}}
-
-{{- $page := .page -}}
-
 {{- $loading := .loading -}}
 {{- $lazy := eq $loading "lazy" -}}
 {{- $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 -}}
+{{- $mode := .mode -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}

-{{- define "partials/image-portrait.html" -}}
-    {{- $dimensions := slice }}
-    {{- $dim := .dim -}}
-    {{- $dimensions = $dimensions | append $dim -}}
-    {{- $portraits := slice }}
-    {{- range $d := $dimensions -}}
-        {{- $p := split $d "x" }}
-        {{ if ne (len $p) 2 }}
-            {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
-            {{- $portraits = $portraits | append $d -}}
-        {{- else -}}
-            {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
-        {{- end -}}
-    {{- end -}}
-
-    {{- $ret := "" }}
-    {{- if reflect.IsSlice $dim -}}
-        {{ $ret = $portraits -}}
-    {{- else if gt (len $portraits) 0 -}}
-        {{- $ret = index $portraits 0 -}}
-    {{- end -}}
-
-    {{- return $ret -}}
-{{- end -}}
-
-<!-- Generate a fallback image of type jpg -->
-{{- define "partials/image-default.html" -}}
-    {{- $img := .img -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := and .portrait .ratio -}}
-    {{- $width := "1400" -}}
-    {{- $dim := "" -}}
-    {{- $fallback := "" -}}
-
-    {{- with $img -}}
-        {{- if eq $ratio "4x3" -}}{{- $dim  = "1400x1050" }}
-        {{- else if eq $ratio "3x2" -}}{{- $dim  = "1400x933" }}
-        {{- else if eq $ratio "1x1" -}}{{- $dim  = "1400x1400" }}
-        {{- else if eq $ratio "16x9" -}}{{- $dim = "1400x788" -}}
-        {{- else if eq $ratio "21x9" -}}{{- $dim = "1400x600" -}}
-        {{- else -}}
-            {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
-        {{- end -}}
-
-        {{- if $portrait -}}{{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}{{- end -}}
-
-        {{- if $ratio -}}
-            {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
-        {{- else -}}
-            {{- $fallback = ($img.Fit (printf "%s jpg" $dim)) -}}
-        {{- end -}}
-
-        {{- $clean := path.Ext $img.RelPermalink -}}
-        {{- $ext := path.Ext $img.RelPermalink -}}
-        {{- $fallback = $fallback | resources.Copy (replace $img.RelPermalink $clean (printf "-%s%s" $dim $ext)) -}}
-    {{- end -}}
-
-    {{- return $fallback -}}
-{{- end -}}
-
-<!-- Generate a image set of type webp -->
-{{- define "partials/image-scaled.html " -}}
-    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-    {{- $img := .img -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := and .portrait .ratio -}}
-    {{- $imgset := "" -}}
-
-    {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
-    {{- $dims := slice -}}
-    {{- with $img -}}
-        {{- if eq $ratio "4x3" -}}
-            {{- $dims = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
-        {{- else if eq $ratio "3x2" -}}
-            {{- $dims = slice "576x384"  "768x512" "992x661" "1200x800"  "1400x933" -}}
-        {{- else if eq $ratio "1x1" -}}
-            {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
-        {{- else if eq $ratio "16x9" -}}
-            {{- $dims = slice "576x324"  "768x432" "992x558" "1200x675"  "1400x788" -}}
-        {{- else if eq $ratio "21x9" -}}
-            {{- $dims = slice "576x247"  "768x329" "992x425" "1200x514"  "1400x600" -}}
-        {{- else -}}
-            {{- range $width := $widths -}}
-                {{- $dims = $dims | append (printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
-            {{- end -}}
-        {{- end -}}
-
-        {{- if $portrait -}}
-            {{- $dims = partial "partials/image-portrait.html" (dict "dim" $dims) -}}
-        {{- end -}}
-
-        {{- $scaled := "" -}}
-        {{- range $index, $dim := $dims -}}
-            {{- $clean := path.Ext $img.RelPermalink -}}
-            {{- if $ratio -}}
-                {{- $scaled = $img.Fill (printf "%s webp" $dim) -}}
-            {{- else -}}
-                {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
-            {{- end -}}
-
-            {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
-            {{- if $absoluteURL -}}
-                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
-            {{- else -}}
-                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
-            {{- end -}}
-        {{- end -}}
-        
-        {{- $imgset = strings.TrimPrefix ", " $imgset -}}
-    {{- end -}}
-
-    {{- return $imgset -}}
-{{- end -}}
-
-<!-- Define the img with optional caption -->
-{{- define "partials/image-definition.html" -}}
-    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := .portrait -}}
-    {{- $url := .url -}}
-    {{- $wrapper := .wrapper -}}
-    {{- $class := .class -}}
-    {{- $title := .title -}}
-    {{- $caption := .caption -}}
-    {{- $figclass := .figclass -}}
-    {{- $fallbackURL := "" -}}
-    {{- $anchor := "" -}}
-    {{- $imgset := "" -}}
-    {{- $mode := .mode -}}
-    {{- $modes := .modes -}}
-    {{- $lazy := .lazy -}}
-    {{- $page := .page -}}
-    {{- $sizes := .sizes -}}
-    {{- $priority := .priority -}}
-    {{- $isVector := false -}}
-
-    {{- $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 -}}
-        {{- $anchor = index $segments 1 -}}
-    {{- end -}}
-
-    {{- if hasSuffix $url "svg" -}}
-        {{- $fallbackURL = $url -}}
-        {{- $isVector = true -}}
-        {{- $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 -}}
-            {{ end }}
-        {{ end }}
-    {{- else -}}
-        {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
-        {{- $img := "" -}}
-        {{ with $res }}
-            {{ $img = $res.resource }}
-            {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
-        {{ end }}
-        {{- if $img -}}
-            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
-            {{- if $absoluteURL -}}
-                {{- $fallbackURL = $fallback.Permalink -}}
-            {{- else -}}
-                {{- $fallbackURL = $fallback.RelPermalink -}}
-            {{- end -}}
-            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
-        {{- end -}}
-    {{- end -}}
-
-    {{- range $none := $modes -}}
-        {{- if ne $none $mode -}}
-            {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
-        {{- end -}}
-    {{- end -}}
-
-    {{- $width := "" -}}
-    {{- $height := "" -}}
-    {{- $input := (split (path.BaseName $fallbackURL) "-") | collections.Reverse -}}
-    {{ if $isVector }}
-        {{- $height = "500" -}}
-        {{ $width = string (partial "utilities/GetWidth.html" (dict "path" $fallbackURL "height" 500)) }}
-    {{- else if gt ($input | len) 1 -}}
-        {{- $dim := (split (index $input 0) "x") -}}
-        {{- if eq ($dim | len) 2 -}}
-            {{- $width = index $dim 0 -}}
-            {{- $height = index $dim 1 -}}
-        {{- end -}}
-    {{- end }}
-
-    {{- if $caption -}}
-        <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
-    {{ end }}
-    <div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
-        {{- if not $anchor -}}
-            <img class="img-fluid {{ $class }}"
-                src="{{ $fallbackURL }}"
-                {{ if $lazy }}loading="lazy"{{ end }}
-                {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
-                {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
-                {{ with $height }}height="{{ . }}"{{ end }}
-                {{ with $width }}width="{{ . }}"{{ end }}
-                {{ with $title }}alt="{{ . }}"{{ end }}>
-        {{- else }}
-            <svg class="{{ $class }}">
-                <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
-            </svg>
-        {{ end }}
-    </div>
-    {{- if $caption -}}
-            <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
-        </figure>
-    {{- end -}}
-{{- end -}}
-
-<!-- Initiate the regular or color-mode image -->
+<!-- Main code -->
 {{ $params := dict }}
 {{- $params = merge $params (dict
+    "page" $page
    "ratio" $ratio
    "portrait" $portrait
    "wrapper" $wrapper
@@ -267,26 +47,30 @@
    "lazy" $lazy
    "priority" $priority
    "sizes" $sizes
-    "page" $page)
+    "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 -}}
+{{ if not $error }}
+    {{- 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 "partials/image-definition.html" $params -}}
+        {{- 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 -}}
-{{ else }}
-    {{- $params = merge $params (dict "url" $url) -}}
-    {{- partial "partials/image-definition.html" $params -}}
-{{- end -}}
+{{ end }}
--- a/layouts/partials/assets/link.html
+++ b/layouts/partials/assets/link.html
@@ -13,14 +13,15 @@
 {{ end }}

 <!-- Initialize arguments -->
-{{ $destination := .destination }}
+{{ $destination := strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) .destination }}

 {{- $target := "" -}}
 {{- $rel := "" -}}
 {{- $case := .case | default true }}
+{{- $external := .external | default false }}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
-{{- $isExternal := ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host -}}
+{{- $isExternal := or (ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host) $external -}}
 {{- $page := .page -}}
 {{- $anchor := "" -}}
 {{- $text := .text -}}
--- a/layouts/partials/assets/navbar-item.html
+++ b/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 -}}
--- 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 -->
@@ -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 -->
--- 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 := $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 $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 = urls.JoinPath $baseURL . -}}
+        {{ end }}
+    {{ else }}
+        {{- $href = urls.JoinPath $baseURL ($title | urlize) -}}
+    {{ end }}
    {{- $active := eq (strings.TrimSuffix "/" $page.RelPermalink) (strings.TrimSuffix "/" $href) -}}

    {{ if eq $level 0}}
@@ -114,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/footer/optional-scripts.html
+++ b/layouts/partials/footer/optional-scripts.html
@@ -5,19 +5,24 @@
    {{ $page_modules = $page_modules | append .Params.modules }}
 {{ end }}

-{{- $modules := site.Params.modules.optional | intersect $page_modules  -}}
+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [footer/optional-scripts.html] - Cannot initialize module configuration" }}
+{{ end }}
+
+{{- $modules := $config.optional | intersect $page_modules  -}}
 {{- range $index, $mod := $modules -}}
    {{- $filename := printf "js/%s.bundle.js" $mod -}}
    {{- $match := printf "js/modules/%s/**.js" $mod -}}
    {{- $skipTemplate := false -}}
-    {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
-        {{- if in site.Params.modules.disableTemplate $mod}}
+    {{- if reflect.IsSlice $config.disableTemplate -}}
+        {{- if in $config.disableTemplate $mod}}
            {{- $skipTemplate = true -}}
        {{- end -}}
    {{- end -}}

    {{ $state := "" }}
-    {{- with (index site.Params.modules $mod) -}}
+    {{- with (index $config.modules $mod) -}}
        {{- with index . "state" }}{{ $state = . }}{{ end -}}
    {{- end -}}

--- a/layouts/partials/footer/scripts.html
+++ b/layouts/partials/footer/scripts.html
@@ -14,9 +14,14 @@
    {{- errorf "partial [footer/script.html] - Invalid value for param 'processing': %s" $state -}}
 {{- end -}}

+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [footer/scripts.html] - Cannot initialize module configuration" }}
+{{ end }}
+
 {{- $modules := "" -}}
 {{ if $core }}
-    {{- $modules = site.Params.modules.core -}}
+    {{- $modules = $config.core -}}
 {{- end -}}

 {{- $bundle := partial "utilities/bundle" (dict "match" $match "filename" $filename "modules" $modules "basepath" "js/modules" "all" true "debugging" site.Params.debugging.showJS) -}}
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -7,8 +7,14 @@
    <meta name="theme" content="{{ printf "Hinode %s" $version }}">
    {{ partialCached "head/stylesheet-core.html" . -}}

+
+    {{ $config := page.Scratch.Get "modules" }}
+    {{ if not $config }}
+        {{ errorf "partial [head/head.html] - Cannot initialize module configuration" }}
+    {{ end }}
+        
    {{ $page_modules := slice | append .Page.Params.modules }}
-    {{- $modules := site.Params.modules.optional | intersect $page_modules -}}
+    {{- $modules := $config.optional | intersect $page_modules -}}
    {{- range $index, $mod := $modules -}}
        {{- $source := printf "scss/%s.scss" $mod -}}
        {{- $target := printf "css/%s.css" $mod -}}
@@ -19,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" . }}
--- a/layouts/partials/head/icons.html
+++ b/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 -}}
--- 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/head/stylesheet.html
+++ b/layouts/partials/head/stylesheet.html
@@ -14,11 +14,16 @@
 {{- $core := .core | default true -}}

 {{- $modules := "" -}}
+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [head/stylesheet.html] - Cannot initialize module configuration" }}
+{{ end }}
+
 {{ if $core }}
-    {{- if reflect.IsSlice site.Params.modules.excludeSCSS -}}
-        {{- $modules = complement site.Params.modules.excludeSCSS (or site.Params.modules.core slice) -}}
+    {{- if reflect.IsSlice $config.excludeSCSS -}}
+        {{- $modules = complement $config.excludeSCSS (or $config.core slice) -}}
    {{ else }}
-        {{- $modules = site.Params.modules.core -}}
+        {{- $modules = $config.core -}}
    {{ end }}
 {{- end -}}

@@ -35,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)
--- a/layouts/partials/utilities/InitModules.html
+++ b/layouts/partials/utilities/InitModules.html
@@ -0,0 +1,52 @@
+{{ $page := .page }}
+
+{{ $core := slice }}
+{{ $optional := slice }}
+{{ $excludeSCSS := slice }}
+{{ $disableTemplate := slice }}
+{{ $modules := dict }}
+
+{{ range $key, $mod := $page.Site.Params.modules }}
+    {{ if eq $key "core" }}
+        {{ warnf "DEPRECATED: module parameter `core` has been deprecated in release v0.24.0" }}
+        {{ $core = $core | append $mod }}
+    {{ else if eq $key "optional" }}
+        {{ warnf "DEPRECATED: module parameter `optional` has been deprecated in release v0.24.0" }}
+        {{ $optional = $optional | append $mod }}
+    {{ else if eq $key "excludescss" }}
+        {{ warnf "DEPRECATED: module parameter `excludeSCSS` has been deprecated in release v0.24.0" }}
+        {{ $excludeSCSS = $excludeSCSS | append $mod }}
+    {{ else if eq $key "disabletemplate" }}
+        {{ warnf "DEPRECATED: module parameter `disableTemplate` has been deprecated in release v0.24.0" }}
+        {{ $disableTemplate = $disableTemplate | append $mod }}
+    {{ else if reflect.IsMap $mod }}
+        {{ $integration := index $mod "integration" }}
+        {{ if eq $integration "core" }}
+            {{ $core = $core | append $key }}
+        {{ else if eq $integration "optional" }}
+            {{ $optional = $optional | append $key }}
+        {{ else if $integration }}
+            {{ warnf "Unrecognized module integration setting: %s" $integration }}
+        {{ end }}
+        
+        {{ if eq (index $mod "excludeSCSS") true }}
+            {{ $excludeSCSS = $excludeSCSS | append $key }}
+        {{ end }}
+
+        {{ if eq (index $mod "disableTemplate") true }}
+            {{ $disableTemplate = $disableTemplate | append $key }}
+        {{ end }}
+
+        {{ $modules = merge $modules (dict $key $mod) }}
+    {{ else }}
+        {{ warnf "Unsupported module parameter: %s" $key }}
+    {{ end }}
+{{ end }}
+
+{{ $modules := dict "modules" $modules "core" $core "optional" $optional "excludeSCSS" $excludeSCSS "disableTemplate" $disableTemplate }}
+
+{{- if and $page.IsPage (not (in $core "bootstrap")) -}}
+    {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
+{{- end -}}
+
+{{ return $modules }}
--- 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/layouts/shortcodes/image.html
+++ b/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)
    -}} 
--- a/layouts/shortcodes/link.html
+++ b/layouts/shortcodes/link.html
@@ -18,6 +18,7 @@
 {{ $url := "" }}
 {{ $class := "" }}
 {{ $case := true }}
+{{ $external := false }}
 {{ $cue := site.Params.main.externalLinks.cue }}
 {{ $tab := site.Params.main.externalLinks.tab }}
 {{ $text := trim .Inner " \r\n" | .Page.RenderString | safeHTML }}
@@ -30,6 +31,7 @@
    {{- $cue = .Get "cue" | default site.Params.main.externalLinks.cue -}}
    {{- $tab = .Get "tab" | default site.Params.main.externalLinks.tab -}}
    {{- $case = .Get "case" | default true -}}
+    {{- $external = .Get "external" | default false -}}
    {{- $class = .Get "class" | default "" -}}
 {{ else }}
    {{ $href = .Get 0 }}
@@ -42,7 +44,11 @@
 {{ end }}

 {{- if hasPrefix $href "http" -}}
-    {{ $url = $href }}
+    {{- if $external -}}
+        {{ $url = $href }}
+    {{- else -}}
+    {{ $url = strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) $href }}
+    {{- end -}}
 {{- else if not (strings.Contains $href "/") -}}
    {{ $url = index site.Params.links $href }}
 {{- end -}}
@@ -65,7 +71,12 @@
    {{ end }}
 {{ end }}

-{{- $isExternal := ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host -}}
+{{ if and $external (not (hasPrefix $url "http")) }}
+    {{ errorf "External link must start with 'http': %s" .Position -}}
+    {{ $error = true -}}
+{{ end }}
+
+{{- $isExternal := or (ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host) $external -}}
 {{- if not $isExternal -}}
    {{ $ref := partial "utilities/GetPage.html" (dict "url" $url "page" .Page) }}
    {{- if not $ref -}}
@@ -80,5 +91,5 @@

 <!-- Main code -->
 {{- if not $error -}}
-    {{ partial "assets/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class "page" .Page) }}
+    {{ partial "assets/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "external" $external "class" $class "page" .Page) }}
 {{- end -}}
--- a/layouts/tags/list.html
+++ b/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 }}
--- a/netlify.toml
+++ b/netlify.toml
@@ -33,7 +33,7 @@
            font-src 'self' https://*.netlify.app https://fonts.gstatic.com; \
            frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com \
                app.netlify.com; \
-            img-src 'self' data: https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+            img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
            manifest-src 'self'; \
            media-src 'self' \
            """
@@ -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.23.18",
+  "version": "0.24.9",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -66,33 +66,33 @@
    "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.1.1",
-    "hugo-bin": "0.122.8",
+    "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.5",
+    "rimraf": "^5.0.7",
    "shx": "^0.3.4",
-    "stylelint": "^16.5.0",
+    "stylelint": "^16.6.1",
    "stylelint-config-standard-scss": "^13.1.0"
  },
  "optionalDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
-    "@netlify/plugin-lighthouse": "*",
    "fsevents": "*",
    "netlify-plugin-hugo-cache-resources": "^0.2.1"
  },