Merge pull request #1035 from gethinode/develop

Fix table parameter initialization
Merge branch 'main' into develop
2025-10-07 18:14:28 +00:00 · 2024-07-13 08:12:16 +02:00 · 2024-07-13 08:01:34 +02:00 · 2024-07-13 08:00:11 +02:00 · 2024-07-12 13:44:35 +00:00 · 2024-07-12 13:37:34 +00:00
59 changed files with 1350 additions and 3197 deletions
--- a/assets/js/critical/color.js
+++ b/assets/js/critical/color.js
@@ -9,44 +9,49 @@
 (() => {
  'use strict'

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

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

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

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

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

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

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

 {{- end -}}
--- a/assets/scss/app-dart.scss
+++ b/assets/scss/app-dart.scss
@@ -39,6 +39,8 @@
@import "components/toc.scss";
@import "components/video.scss";
@import "common/animation.scss";
+@import "common/masonry.scss";
+@import "common/scrollbar.scss";
@import "common/styles.scss";
@import "layouts/reboot.scss";
@import "layouts/type.scss";
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -37,6 +37,8 @@
@import "components/toc.scss";
@import "components/video.scss";
@import "common/animation.scss";
+@import "common/masonry.scss";
+@import "common/scrollbar.scss";
@import "common/styles.scss";
@import "layouts/reboot.scss";
@import "layouts/type.scss";
--- 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/_masonry.scss
+++ b/assets/scss/common/_masonry.scss
@@ -0,0 +1,38 @@
+.masonry {
+    --masonry-padding: 4px;
+}
+
+.m-row {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 var(--masonry-padding);
+}
+
+.m-col {
+    flex: 100%;
+    max-width: 100%;
+    padding: 0 var(--masonry-padding);
+}
+
+.m-col div {
+    margin-top: calc(2 * var(--masonry-padding));
+    border-radius: 5px;
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "m-col": (
+            property: max-width,
+            responsive: true,
+            class: m-col,
+            values: (
+                1: 100%,
+                2: 50%,
+                3: 33.3%,
+                4: 25%,
+                5: 20%,
+            )
+        )
+    )
+);
--- a/assets/scss/common/_scrollbar.scss
+++ b/assets/scss/common/_scrollbar.scss
@@ -0,0 +1,34 @@
+@mixin scrollbar(
+  $foreground-color: var(--bs-primary),
+  $background-color: var(--bs-tertiary-bg),
+  $size: 10px
+) {
+	// For Safari and Chrome (to force appearance in Chrome)
+	&::-webkit-scrollbar {
+		width: $size;
+		height: $size;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: calc($size / 2);
+		background: $foreground-color;
+	}
+
+	&::-webkit-scrollbar-track {
+		border-radius: calc($size / 2);
+		background: $background-color;
+	}
+
+	// Standard version (Firefox, only appears on scroll)
+	@supports (-moz-appearance:none) {
+		scrollbar-color: $foreground-color $background-color;
+	}
+}
+
+.scrollbar-horizontal
+{
+    @include scrollbar;
+
+	overflow-x: scroll;
+	margin: auto;
+}
--- 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/_card.scss
+++ b/assets/scss/components/_card.scss
@@ -97,3 +97,56 @@
 .card-button-link {
    text-decoration: underline if($enable-important-utilities, !important, null);
 }
+
+// support horizontally scrollable card groups
+.card-container-wrapper {
+	position: relative;
+}
+
+div.card-container-wrapper::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	height: calc(100% - 2rem);
+	background: linear-gradient(
+		90deg, 
+		var(--bs-body-bg) 0%,
+		transparent 1.5rem,
+		transparent calc(100% - 1.5rem),
+		var(--bs-body-bg) 100%
+	);
+	pointer-events: none;
+}
+
+.card-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+	gap: 1.5rem;
+    margin-bottom: 2rem;
+	scroll-snap-type: x proximity;
+}
+
+.card-block-1 {
+    width: 80%;
+	scroll-snap-align: center;
+}
+
+.card-block-2 {
+    width: 40%;
+	scroll-snap-align: center;
+}
+
+.card-block-3 {
+    width: 27%;
+	scroll-snap-align: center;
+}
+
+.card-block-4 {
+    width: 20%;
+	scroll-snap-align: center;
+}
+
+.card-block-5 {
+    width: 16%;
+	scroll-snap-align: center;
+}
--- 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/assets/scss/components/_table.scss
+++ b/assets/scss/components/_table.scss
@@ -1,3 +1,15 @@
+.datatable-container {
+    border-bottom: none if($enable-important-utilities, !important, null);
+}
+
+.datatable-bottom {
+    padding-top: 0 if($enable-important-utilities, !important, null);
+}
+
+.datatable-sorter {
+    padding-right: 1rem;
+}
+
@if $enable-dark-mode {
    @include color-mode(dark) {
        .table-striped, .table-striped-columns {
@@ -9,5 +21,13 @@
            --bs-table-hover-bg: var(--bs-tertiary-bg);
            --bs-table-striped-color: var(--bs-body-color);
        }
+
+        .datatable-pagination-list-item {
+            &:hover,
+            &:focus,
+            &.datatable-active {
+                color: var(--bs-body-bg) !important;
+            }
+        } 
    }
 }
--- a/config/_default/hugo.toml
+++ b/config/_default/hugo.toml
@@ -134,6 +134,8 @@ home = ["HTML", "RSS", "REDIR"]
    path = "github.com/gethinode/mod-leaflet"
  [[module.imports]]
    path = "github.com/gethinode/mod-lottie"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-simple-datatables"
  [[module.imports]]
    path = "github.com/gethinode/mod-utils/v2"
 # toml-docs-end modules
--- a/data/structures/card-group.yml
+++ b/data/structures/card-group.yml
@@ -92,7 +92,8 @@ arguments:
    type: bool
    optional: true
    comment: >-
-      Flag to indicate a horizontal line should be added between items on small screens.
+      Flag to indicate a horizontal line should be added between items on small
+      screens.
  wrapper:
    type: string
    optional: true
@@ -102,7 +103,8 @@ arguments:
    type: bool
    optional: true
    comment: >-
-      Flag indicating if the number of columns should be responsive, defaults to `true`.
+      Flag indicating if the number of columns should be responsive, defaults to
+      `true`.
  buttonType:
    type: select
    optional: true
@@ -113,6 +115,13 @@ arguments:
      values:
        - link
        - button
+  scroll:
+    type: bool
+    optional: true
+    comment: >-
+      Enables horizontal scrolling of the cards. By default, the card group
+      wraps any cards beyond the amount of defined columns to a new line. When
+      `scroll` is set to true, a horizontal scroll bar is added instead.
  hook:
    type: string
    optional: true
--- 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
@@ -169,6 +175,19 @@ arguments:
        - start
        - end
        - center
+  scroll:
+    type: bool
+    parent: cascade
+    optional: true
+    group: partial
+    comment: >-
+      Enables horizontal scrolling of the cards. By default, the card group
+      wraps any cards beyond the amount of defined columns to a new line. When
+      `scroll` is set to true, a horizontal scroll bar is added instead.
+  wrapper:
+    type: string
+    optional: true
+    comment: Element class of the card wrapper.
  style:
    type: string
    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.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/navbar-item.yml
+++ b/data/structures/navbar-item.yml
@@ -32,3 +32,8 @@ arguments:
    comment: >-
      Flag to indicate if an external link should open in a new tab, defaults
      to setting `main.externalLinks.tab` in the site's parameters.
+  plain:
+    type: bool
+    optional: true
+    comment: >-
+      Renders the navigation item as plain item, ignoring any children.
--- a/data/structures/table.yml
+++ b/data/structures/table.yml
@@ -1,6 +1,7 @@
 comment: >-
  Makes a markdown table responsive. Responsive tables scroll horizontally to
-  improve their layout on smaller screens.
+  improve their layout on smaller screens. To features `sortable`, `paging`,
+  and `searchable` require the module `simple-datatables`.
 arguments:
  breakpoint:
    type: select
@@ -24,6 +25,21 @@ arguments:
    type: string
    optional: true
    comment: Class attribute of the table element, e.g. `table-striped-columns w-auto`.
+  sortable:
+    type: bool
+    optional: true
+    comment: Toggle the ability to sort the columns.
+    release: v0.24.13
+  paging:
+    type: bool
+    optional: true
+    comment: Whether paging is enabled for the table.
+    release: v0.24.13
+  searchable:
+    type: bool
+    optional: true
+    comment: Toggle the ability to search the dataset.
+    release: v0.24.13
 body:
  type: string
  optional: false
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -136,7 +136,7 @@ As an example, the following shortcode displays a card group of three elements.

 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" gutter="3" button=true buttonType="link" */>}}
+{{</* card-group padding="3" gutter="3" button=true buttonType="link" cols=2 scroll=true */>}}
    {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
        Sass files.
--- a/exampleSite/content/en/blog/components.md
+++ b/exampleSite/content/en/blog/components.md
@@ -10,7 +10,7 @@ thumbnail:
  authorURL: https://unsplash.com/@ryoji__iwata
  origin: Unsplash
  originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet", "lottie"]
+modules: ["katex", "leaflet", "lottie", "simple-datatables"]
 ---

 Hinode provides several shortcodes on top of the common [Bootstrap elements]({{< relref "bootstrap-elements" >}}). Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
@@ -25,6 +25,49 @@ As an example, the following shortcode shows an animation that plays on hover.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

+## Data tables
+
+As an example, the following shortcode displays a responsive table that uses advanced controls.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="markdown" >}}
+{{</* table sortable="true" paging="true" searchable="true" */>}}
+|  #  | Heading |
+|-----|---------|
+|  1. | Item 1  |
+|  2. | Item 2  |
+|  3. | Item 3  |
+|  4. | Item 4  |
+|  5. | Item 5  |
+|  6. | Item 6  |
+|  7. | Item 7  |
+|  8. | Item 8  |
+|  9. | Item 9  |
+| 10. | Item 10  |
+| 11. | Item 11  |
+| 12. | Item 12  |
+| 13. | Item 13  |
+| 14. | Item 14  |
+| 15. | Item 15  |
+| 16. | Item 16  |
+| 17. | Item 17  |
+| 18. | Item 18  |
+| 19. | Item 19  |
+| 20. | Item 20  |
+| 21. | Item 21  |
+| 22. | Item 22  |
+| 23. | Item 23  |
+| 24. | Item 24  |
+| 25. | Item 25  |
+| 26. | Item 26  |
+| 27. | Item 27  |
+| 28. | Item 28  |
+| 29. | Item 29  |
+| 30. | Item 30  |
+{{</* /table */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formula (KaTeX)

 As an example, the following markdown renders two formulas using the KaTeX typesetting library.
--- a/exampleSite/content/en/blog/image.md
+++ b/exampleSite/content/en/blog/image.md
@@ -15,7 +15,7 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
-    ratio="21x9" caption="Cloudinary image" class="rounded" */>}}
+    ratio="21x9" caption="Cloudinary image" class="rounded" plain=true */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -22,6 +22,7 @@
      "i",
      "img",
      "input",
+      "label",
      "li",
      "link",
      "mark",
@@ -69,6 +70,7 @@
      "align-self-end",
      "anchor",
      "badge",
+      "ball",
      "bg-body",
      "bg-body-tertiary",
      "bg-danger",
@@ -101,11 +103,14 @@
      "btn-sm",
      "btn-social",
      "card",
+      "card-block-2",
      "card-body",
      "card-body-link",
      "card-body-margin",
      "card-button",
      "card-button-link",
+      "card-container",
+      "card-container-wrapper",
      "card-emphasize",
      "card-icon",
      "card-img-bg",
@@ -123,6 +128,7 @@
      "carousel-indicators",
      "carousel-inner",
      "carousel-item",
+      "checkbox",
      "chroma",
      "col",
      "col-10",
@@ -131,13 +137,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",
@@ -147,6 +151,9 @@
      "col-sm-12",
      "col-sm-3",
      "col-sm-6",
+      "col-sm-9",
+      "col-xl-10",
+      "col-xl-2",
      "collapse",
      "collapsed",
      "container",
@@ -167,6 +174,7 @@
      "d-none-light",
      "d-sm-block",
      "d-sm-none",
+      "data-table",
      "display-1",
      "display-4",
      "dropdown",
@@ -188,7 +196,6 @@
      "fa-arrow-right",
      "fa-bootstrap",
      "fa-circle-check",
-      "fa-circle-half-stroke",
      "fa-code",
      "fa-docker",
      "fa-ellipsis",
@@ -223,6 +230,8 @@
      "flex-fill",
      "flex-grow-1",
      "flex-md-grow-0",
+      "flex-nowrap",
+      "flex-row",
      "font-monospace",
      "footer",
      "form-control",
@@ -257,6 +266,7 @@
      "justify-content-center",
      "justify-content-end",
      "justify-content-start",
+      "label",
      "lead",
      "leaflet-map",
      "link-bg-body",
@@ -278,6 +288,7 @@
      "me-auto",
      "middle-bar",
      "min-vh-100",
+      "mode-switch",
      "ms-1",
      "ms-3",
      "ms-auto",
@@ -309,6 +320,7 @@
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
+      "navbar-mode-selector",
      "navbar-nav",
      "navbar-nav-scroll",
      "navbar-title",
@@ -376,6 +388,7 @@
      "row-cols-md-3",
      "row-cols-sm-2",
      "row-cols-sm-3",
+      "scrollbar-horizontal",
      "search",
      "search-input",
      "search-suggestions",
@@ -391,7 +404,6 @@
      "sticky-top",
      "stretched-link",
      "svg-inline--fa",
-      "switch-mode-collapsed",
      "syntax-highlight",
      "tab-content",
      "tab-pane",
@@ -419,8 +431,6 @@
      "text-sm-start",
      "text-start",
      "text-uppercase",
-      "theme-icon",
-      "theme-icon-active",
      "tickmark",
      "timeline",
      "timeline-bg-dark",
@@ -459,8 +469,6 @@
      "w-50"
    ],
    "ids": [
-      "-theme",
-      "-theme-collapsed",
      "TableOfContents",
      "abbr",
      "accordion",
@@ -496,6 +504,7 @@
      "collapse",
      "collapse-1",
      "command-prompt",
+      "data-tables",
      "docs",
      "documentation",
      "example",
@@ -532,6 +541,8 @@
      "nav-0-btn-2",
      "navbar",
      "navbar-0-collapse",
+      "navbar-mode",
+      "navbar-mode-checkbox",
      "navbar-sample-collapse",
      "navigation",
      "notification",
--- a/go.mod
+++ b/go.mod
@@ -9,8 +9,9 @@ require (
 	github.com/gethinode/mod-fontawesome v1.9.0 // indirect
 	github.com/gethinode/mod-katex v1.1.0 // indirect
 	github.com/gethinode/mod-leaflet v1.1.0 // indirect
-	github.com/gethinode/mod-lottie v1.5.0 // indirect
-	github.com/gethinode/mod-utils/v2 v2.3.2 // indirect
+	github.com/gethinode/mod-lottie v1.5.5 // indirect
+	github.com/gethinode/mod-simple-datatables v1.0.2 // 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
@@ -174,6 +174,20 @@ github.com/gethinode/mod-lottie v1.4.7 h1:5Hes0xY/l8ygzJ8YQIzdqCmvGrDQs8D8qZ/vR1
 github.com/gethinode/mod-lottie v1.4.7/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
 github.com/gethinode/mod-lottie v1.5.0 h1:LwEEY+p+sPrN01yz7GyVOsF5lZ4qMln69+gAxJs1DDA=
 github.com/gethinode/mod-lottie v1.5.0/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
+github.com/gethinode/mod-lottie v1.5.1 h1:84ZmOTKJH75wsd/YjPaaBRkTeLnmRROv9iFlQVMC+jA=
+github.com/gethinode/mod-lottie v1.5.1/go.mod h1:z0Q6EADM7pN7gmhCzDx2VR4uG5mxn9qbsphtxjIkssY=
+github.com/gethinode/mod-lottie v1.5.2 h1:UvrNAQeD/97Q5fbv3uKIY48fY3IWJeLy/v206Gb0F6Y=
+github.com/gethinode/mod-lottie v1.5.2/go.mod h1:HM1pA85EiPO7RtNysw/a2ZzRqktO2WvB/KyWLOuynzg=
+github.com/gethinode/mod-lottie v1.5.3 h1:fvCjCoZoCEhY2aou30oEsEo6N4tVSI0ijFyXS3wNib0=
+github.com/gethinode/mod-lottie v1.5.3/go.mod h1:XHVMuPsuJIm9/Eb2ql4jsT49/BQqMlBiirQoty4uHAo=
+github.com/gethinode/mod-lottie v1.5.4 h1:+xbamSsjcnP2tyzGl0CA1enma7gkAp67wenmuP0XELY=
+github.com/gethinode/mod-lottie v1.5.4/go.mod h1:gALqz48aYpoDLxJOI3LzIpdy0Eq/lOBNtlcOxABa9tg=
+github.com/gethinode/mod-lottie v1.5.5 h1:uEJKsz+ovsZtbGkMhPONcIhtG6M3RjYiK+iVoScLOVo=
+github.com/gethinode/mod-lottie v1.5.5/go.mod h1:VTvBxD8VokICwnEqM0VUZFZHBYxLf4/grDFQyEh1DL0=
+github.com/gethinode/mod-simple-datatables v1.0.0 h1:Dj4WGw12OkaimwkCpLn5Jhmd49dvNJW9O2P/W9F+HlQ=
+github.com/gethinode/mod-simple-datatables v1.0.0/go.mod h1:K8T7fIdb8pMOB+OSW4A5lz5IW99+HyzcTgx764fvOGw=
+github.com/gethinode/mod-simple-datatables v1.0.2 h1:zhqxHet3iLQWYCBbGROALpOY9zQlptMycFkz1Tto5bA=
+github.com/gethinode/mod-simple-datatables v1.0.2/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
 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=
@@ -204,6 +218,22 @@ github.com/gethinode/mod-utils/v2 v2.3.1 h1:blqynoRJ+H2SPfSU28iYheYWPH39MKNtK5HK
 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
@@ -29,6 +29,10 @@
 {{- /* Define main breakpoint */ -}}
 {{- $.Scratch.Set "breakpoint" (partial "utilities/GetBreakpoint.html") }}

+{{- /* Define base URL */ -}}
+{{ $lang := site.LanguageCode | default site.Language.Lang }}
+{{ $.Scratch.Set "baseURL" (strings.TrimSuffix (printf "%s/" $lang) site.Home.RelPermalink) }}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
    <head>
--- 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/hugo.html
+++ b/layouts/partials/assets/adapters/hugo.html
@@ -27,7 +27,7 @@
    {{ $url = urls.JoinPath "https://" $host $url }}
 {{ end }}

-<!-- Initialize image if needed -->
+<!-- Initialize image if needed, do not raise additional warnings -->
 {{ $format := .format | default "webp" }}
 {{ if and (not $img) (ne $format "svg") }}
    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" page) -}}
@@ -37,7 +37,6 @@
    {{ end }}

    {{ if not $img }}
-        {{ errorf "partial [assets/adapter/hugo.html] - Expected 'img' argument" -}}
        {{ $error = true }}
    {{ end }}
 {{ end }}
--- 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/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/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -34,6 +34,8 @@
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
 {{- $buttonType := .buttonType -}}
+{{- $iconRounded := .iconRounded }}
+{{- $scroll := .scroll | default false }}
 {{- $hook := .hook | default "assets/card.html" }}

 <!-- Override arguments -->
@@ -81,37 +83,34 @@

 {{- $sizes := "100vw" }}
 {{- $colGrid := "" -}}
-{{- if eq $cols "1" }}
-    {{ $colGrid = "row-cols-1" -}}
-{{- else if eq $cols "2" }}
-    {{ if $responsive }}
-        {{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}
-    {{ else }}
-        {{ $colGrid = "row-cols-2" }}
+{{ if $scroll }}
+    {{- $colGrid = (printf "card-block-%d" $cols) -}}
+{{ else }}
+    {{ $colGrid = printf "row-cols-%s" $cols }}
+    {{- if eq $cols "1" }}
+        {{ $colGrid = "row-cols-1" -}}
+    {{- else if eq $cols "2" }}
+        {{ if $responsive }}
+            {{ $colGrid = printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current }}
+        {{ end -}}
+        {{ $sizes = printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize }}
+    {{- else if eq $cols "3" }}
+        {{ if $responsive }}
+            {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}
+        {{ end -}}
+        {{ $sizes = printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
+    {{- else if eq $cols "4" }}
+        {{ if $responsive }}
+            {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}
+        {{ end -}}
+        {{ $sizes = printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
+    {{- else if eq $cols "5" }}
+        {{ if $responsive }}
+            {{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}
+        {{ end -}}
+        {{ $sizes = printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
    {{ end -}}
-    {{ $sizes = printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize }}
-{{- else if eq $cols "3" }}
-    {{ if $responsive }}
-        {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current }}
-    {{ else }}
-        {{ $colGrid = "row-cols-3" }}
-    {{ end -}}
-    {{ $sizes = printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
-{{- else if eq $cols "4" }}
-    {{ if $responsive }}
-        {{ $colGrid = printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current }}
-    {{ else }}
-        {{ $colGrid = "row-cols-4" }}
-    {{ end -}}
-    {{ $sizes = printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
-{{- else if eq $cols "5" }}
-    {{ if $responsive }}
-        {{ $colGrid = printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current }}
-    {{ else }}
-        {{ $colGrid = "row-cols-5" }}
-    {{ end -}}
-    {{ $sizes = printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize }}
-{{ end -}}
+{{ end }}

 {{- if not $paginate -}}
    {{- $list = first $max $list -}}
@@ -120,8 +119,8 @@
 {{- if and (eq $cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}

 <!-- Main code -->
-<div class="container-fluid {{ $wrapper }}">
-    <div class="row {{ $colGrid }} g-{{ $gutter }}">
+<div class="container {{ $wrapper }} {{ if $scroll }}card-container-wrapper{{ end }}">
+    <div class="row g-{{ $gutter }} {{ if $scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100{{ else }}{{ $colGrid }}{{ end }}">
        {{ range $index, $element := $list }}
            {{- $params := (dict
                "class" (printf "h-100 %s" $class)
@@ -139,8 +138,9 @@
                "button" $button
                "buttonLabel" $buttonLabel
                "buttonType" $buttonType
+                "iconRounded" $iconRounded
            ) -}}
-            {{- $params = merge $params $element }}
+            {{- $params = merge $element $params }}

            <div class="col">
                {{- partial $hook $params -}}
@@ -151,7 +151,7 @@
                </div>
            {{- end -}}
        {{- end -}}
-        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
+        {{ if $cards }}{{- print $cards | safeHTML }}{{ end }}
    </div>

    {{ if $paginator }}
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -11,6 +11,7 @@

 <!-- Initialize arguments and default values -->
 {{- $alt := .alt -}}
+{{- $wrapper := .wrapper -}}
 {{- $class := .class -}}
 {{- $color := .color -}}
 {{- $description := .description -}}
@@ -20,6 +21,7 @@
 {{- $href := .href -}}
 {{- $icon := .icon -}}
 {{- $iconStyle := "" -}}
+{{- $iconRounded := .iconRounded | default false -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
 {{- $sizes := .sizes | default "100vw" -}}
@@ -119,28 +121,61 @@

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

 <!-- Main code -->
-{{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
+{{ if or (ne $gutter "0") ($wrapper) }}<div class="g-{{ $gutter }} {{ $wrapper }}">{{ 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 col-sm-3 col-md-4 col-xl-2" }}
+            {{ $col2 = "col-10 col-sm-9 col-md-8 col-xl-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 }} p-{{ $padding }}">
+                    <div class="card-icon {{ if $iconRounded }}fa-stack {{ $stack }} mx-auto{{ else }}fa-wrapper h-100 {{ end }} 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 +208,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 }}">
@@ -204,4 +244,4 @@
    </div>
 {{- end -}}

-{{ if ne $gutter "0" }}</div>{{ end }}
+{{ if or (ne $gutter "0") ($wrapper) }}</div>{{ end }}
--- a/layouts/partials/assets/helpers/image-definition.html
+++ b/layouts/partials/assets/helpers/image-definition.html
@@ -14,14 +14,10 @@
 {{- $url := .url -}}
 {{- $mode := .mode -}}
 {{- $modes := .modes -}}
-
-{{- $fallbackURL := "" -}}
-{{- $anchor := "" -}}
-{{- $imgset := "" -}}
-{{- $isVector := false -}}
-
+{{- $plain := .plain | default false }}

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

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

 <!-- Add color modes -->
 {{- range $none := $modes -}}
--- 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/image.html
+++ b/layouts/partials/assets/image.html
@@ -26,6 +26,7 @@
 {{- $priority := .priority -}}
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
 {{- $sizes := .sizes | default "100vw" -}}
+{{- $plain := .plain | default false -}}

 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $url := .url -}}
@@ -47,6 +48,7 @@
    "priority" $priority
    "sizes" $sizes
    "absoluteURL" $absoluteURL
+    "plain" $plain
    )
 -}}

--- a/layouts/partials/assets/navbar-item.html
+++ b/layouts/partials/assets/navbar-item.html
@@ -16,12 +16,18 @@
 {{- $page := .page -}}
 {{- $menu := .menu -}}
 {{- $parent := .parent -}}
+{{- $plain := .plain | default false -}}
 {{- $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 -}}
@@ -51,7 +57,7 @@
    {{- $mainNav = urlize (lower $parent.Name) -}}
    {{- $childNav = urlize (lower $menu.Name) -}}
    {{- $anchorClass = "dropdown-item" -}}
-{{- else if $menu.HasChildren -}}
+{{- else if and (not $plain) $menu.HasChildren -}}
    {{- $anchorClass = "nav-link dropdown-toggle" -}}
    {{- $button = " role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"" -}}
 {{- else -}}
@@ -65,20 +71,29 @@

 <!-- Main code -->
 {{ if not $error }}
-    <a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{. }}{{ end }}" 
-        {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
-        data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
-        href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
-        
-        {{- with $menu.Pre }}
-            {{ if hasPrefix . "<i" }}
-                {{ . | safeHTML }}
-            {{ else }}
-                {{ partial "assets/icon.html" (dict "icon" (string .) )}}
-            {{ end }}
-        {{ end -}}
-        <span {{ if $isActive }} class="active"{{ end }}>{{ if not $isIcon }}{{ $menu.Name }}{{ end }}</span>
-        {{- with $menu.Post }}{{ . }}{{ end -}}
-        {{- if not $isIcon }}&nbsp;{{ $suffix }}{{ end -}}
-    </a>
+    {{ if $menu.Params.button }}
+        {{ partial "assets/button.html" (dict 
+            "title" $menu.Name
+            "icon" $menu.Pre
+            "href" $menuURL
+            "size" "sm"
+        )}}
+    {{ else }}
+        <a class="{{ $anchorClass }}{{ if $isActive }} active{{ end }}{{ with $class }} {{ . }}{{ end }}" 
+            {{ if $isIcon }}aria-label="{{ $menu.Name }}"{{ end }}
+            data-nav="main" data-nav-main="{{ $mainNav }}"{{ with $childNav }} data-nav-child="{{ . }}"{{ end }} 
+            href="{{ $menuURL }}{{ $params | safeHTMLAttr }}"{{ with $externalHref }} {{ . | safeHTMLAttr }}{{ end }} {{ $button | safeHTMLAttr }}>
+            
+            {{- with $menu.Pre }}
+                {{ if hasPrefix . "<i" }}
+                    {{ . | safeHTML }}
+                {{ else }}
+                    {{ partial "assets/icon.html" (dict "icon" (string .) )}}
+                {{ end }}
+            {{ end -}}
+            <span {{ if $isActive }} class="active"{{ end }}>{{ if or (not $isIcon) $plain }}{{ $menu.Name }}{{ end }}</span>
+            {{- with $menu.Post }}{{ . }}{{ end -}}
+            {{- if not $isIcon }}&nbsp;{{ $suffix }}{{ end -}}
+        </a>
+    {{ end }}
 {{ end }}
--- 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 -}}
@@ -170,6 +164,11 @@
 {{- $contrast := false -}}
 {{- if in (slice "primary" "secondary" "success" "danger") $color }}{{ $contrast = true }}{{ end -}}

+{{- $flex := false }}
+{{ if gt (where $menus "Params.spacing" true | len) 0 }}
+    {{ $flex = true }}
+{{ end }}
+
 <!-- Main code -->
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
    {{- partial "assets/page-alert.html" (dict "page" $page) -}}
@@ -231,23 +230,27 @@
                {{- if and $search (not $searchModal)  }}{{ partial "assets/search-input.html" }}{{ end -}}
                
                <!-- Render top-menu items (maximum depth of 2) -->
-                <ul class="navbar-nav ms-auto">
+                <ul class="navbar-nav {{ if $flex }}d-flex w-100{{ else }}ms-auto{{ end }}">
                    {{- range $menu := $menus -}}
-                        <li class="nav-item{{ if .HasChildren }} dropdown{{ if $horizontal }} dropdown-horizontal-{{ $size }}{{ end }}{{ end }}">
-                            {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
-                            {{- if .HasChildren -}}
-                                <ul class="dropdown-menu">
-                                    {{- range .Children -}}
-                                        <li>{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}</li>
-                                    {{- end -}}
-                                </ul>
-                            {{- end -}}
-                        </li>
+                        {{ if $menu.Params.spacing }}
+                            <li class="nav-item flex-grow-1"></li>
+                        {{ else }}
+                            <li class="nav-item {{ if .HasChildren }} dropdown{{ if $horizontal }} dropdown-horizontal-{{ $size }}{{ end }}{{ end }}">
+                                {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
+                                {{- if .HasChildren -}}
+                                    <ul class="dropdown-menu">
+                                        {{- range .Children -}}
+                                            <li>{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}</li>
+                                        {{- end -}}
+                                    </ul>
+                                {{- end -}}
+                            </li>
+                        {{- end -}}
                    {{- end -}}
    
                    <!-- Insert divider if applicable -->
                    {{- if and $menus (or $enableLanguage $enableVersions) -}}
-                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block me-auto">
                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                        </li>
                        <li><hr class="dropdown-divider-bg"></li>
@@ -255,14 +258,14 @@
    
                    <!-- 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 -->
                    {{- if $enableLanguage -}}
                        {{- $currentLang := $page.Language.Lang -}}
-                        <li class="nav-item dropdown">
+                        <li class="nav-item dropdown me-auto">
                            <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw" "spacing" false) }}&nbsp;{{ T "languageSwitcherLabel" }}
                            </a>
@@ -276,7 +279,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,12 +289,11 @@
                    <!-- 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 -->
                    {{- if $searchModal }}
-                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
+                        <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block me-auto">
                            <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                        </li>
                        <li><hr class="dropdown-divider-bg"></li>
--- 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/assets/table.html
+++ b/layouts/partials/assets/table.html
@@ -7,6 +7,9 @@
 {{ $page := .page }}
 {{ $input := .input }}
 {{ $args := .args }}
+{{ $sortable := .sortable | default false }}
+{{ $paging := .paging | default false }}
+{{ $searchable := .searchable | default false }}

 {{- $responsiveVals := slice "table-responsive" "table-responsive-none" "table-responsive-sm" "table-responsive-md" "table-responsive-lg" "table-responsive-xl" "table-responsive-xxl" -}}
 {{- $responsive := intersect $args $responsiveVals -}}
@@ -18,13 +21,21 @@
    {{ $responsive = (slice "table-responsive") -}}
 {{- end -}}

+{{- $class := delimit $main " " -}}
+{{ if or $sortable $paging $searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
 {{- $input := $input | $page.RenderString }}
 {{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
 {{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
 {{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
-{{- $class := delimit $main " " -}}
+
+{{ $attributes := "" }}
+{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
+{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+
 {{- $old := "<table>" -}}
-{{- $new := printf "<table class=\"table %s\">" $class -}}
+{{- $new := printf "<table class=\"table %s\" %s>" $class (trim $attributes " ") -}}
+
 {{ $input := replace $input $old $new -}}
 {{- with $responsive }}<div class="{{ delimit . " " }}">{{ end -}}
 {{ $input | safeHTML }}
--- a/layouts/partials/footer/optional-scripts.html
+++ b/layouts/partials/footer/optional-scripts.html
@@ -4,6 +4,7 @@
 {{ else }}
    {{ $page_modules = $page_modules | append .Params.modules }}
 {{ end }}
+{{ with .Scratch.Get "dependencies" }}{{ $page_modules = append $page_modules . | uniq }}{{ end }}

 {{ $config := page.Scratch.Get "modules" }}
 {{ if not $config }}
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -14,6 +14,7 @@
    {{ end }}
        
    {{ $page_modules := slice | append .Page.Params.modules }}
+    {{ with .Scratch.Get "dependencies" }}{{ $page_modules = append $page_modules . | uniq }}{{ end }}
    {{- $modules := $config.optional | intersect $page_modules -}}
    {{- range $index, $mod := $modules -}}
        {{- $source := printf "scss/%s.scss" $mod -}}
@@ -25,7 +26,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
@@ -40,6 +40,7 @@
 {{- $overlayOffset := $navbarOffset -}}
 {{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
+    "base-url"                (page.Scratch.Get "baseURL" | default "/")
    "theme-font"              (default "Inter" site.Params.style.themeFont)
    "font-size-base"          (default "1rem" site.Params.style.fontSizeBase)
    "primary"                 (default "#007bff" site.Params.style.primary)
--- a/layouts/partials/utilities/AddModule.html
+++ b/layouts/partials/utilities/AddModule.html
@@ -0,0 +1,9 @@
+{{ with .module }}
+	{{- $dependencies := page.Scratch.Get "dependencies" -}}
+	{{- if reflect.IsSlice $dependencies -}}
+		{{- $dependencies = complement $dependencies . -}}
+	{{ else }}
+		{{- $dependencies = slice . -}}
+	{{ end }}
+	{{- page.Scratch.Set "dependencies" $dependencies -}}
+{{ end }}
--- 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,8 @@
 {{- $subtle := .Get "subtle" | default false -}}
 {{- $button := .Get "button" | default false -}}
 {{- $buttonType := .Get "buttonType" | default "" -}}
+{{- $iconRounded := .Get "iconRounded" | default false -}}
+{{- $scroll := .Get "scroll" | default false -}}

 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -58,5 +60,7 @@
    "subtle" $subtle
    "button" $button
    "buttonType" $buttonType
+    "iconRounded" $iconRounded
+    "scroll" $scroll
    ) 
 -}}
--- 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 -}}
@@ -34,6 +35,9 @@
 {{- $title := .Get "title" -}}
 {{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
 {{- $buttonType := partial "utilities/GetArgParent" (dict "page" . "arg" "buttonType") | default "" -}}
+{{- $cols := partial "utilities/GetArgParent" (dict "page" . "arg" "cols") | default 3 -}}
+{{- $scroll := partial "utilities/GetArgParent" (dict "page" . "arg" "scroll") | default false -}}
+{{- $wrapper := "" -}}

 <!-- Override arguments -->
 {{ if $path }}
@@ -48,6 +52,11 @@
    {{ $class = (printf "h-100 %s" $class) }}
 {{ end }}

+{{ if $scroll }}
+    {{ $wrapper = printf "card-block-%d p-0" $cols }}
+{{ end }}
+
+
 <!-- Main code -->
 {{ if not $error -}}
    <!-- Render card -->
@@ -64,9 +73,12 @@
        "description" $description
        "ratio" $ratio
        "icon" $icon
+        "iconRounded" $iconRounded
        "align" $align
        "style" $style
        "subtle" $subtle
+        "scroll" $scroll
+        "wrapper" $wrapper
        "thumbnail" $thumbnail
        "loading" $loading
        "alt" $alt
--- 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/table.html
+++ b/layouts/shortcodes/table.html
@@ -15,22 +15,35 @@
 <!-- Initialize arguments -->
 {{ $breakpoint := "" }}
 {{ $class := "" }}
+{{ $sortable := false }}
+{{ $paging := false }}
+{{ $searchable := false }}
+
 {{- if .IsNamedParams -}}
    {{ $breakpoint = .Get "breakpoint" }}
    {{ $class = .Get "class" | default "" }}
+    {{ with (.Get "sortable")}} {{ $sortable = partial "utilities/CastBool.html" . }}{{ end }}
+    {{ with (.Get "paging")}} {{ $paging = partial "utilities/CastBool.html" . }}{{ end }}
+    {{ with (.Get "searchable")}} {{ $searchable = partial "utilities/CastBool.html" . }}{{ end }}
 {{ else }}
    {{ $breakpoint = .Get 0 }}
 {{ end }}

 <!-- Main code -->
+ {{ if or $sortable $paging $searchable }}{{ $class = trim (printf "%s data-table" $class) " " }}{{ end }}
 {{- $input := .Inner | .Page.RenderString }}
 {{- $input = replace $input "style=\"text-align:left\"" "class=\"text-start\"" -}}
 {{- $input = replace $input "style=\"text-align:center\"" "class=\"text-center\"" -}}
 {{- $input = replace $input "style=\"text-align:right\"" "class=\"text-end\"" -}}
-{{- $old := "<table>" -}}
-{{- $new := printf "<table class=\"table %s\">" $class -}}
-{{ $input := replace $input $old $new -}}

+{{ $attributes := "" }}
+{{ if $sortable }}{{ $attributes = printf "%s data-table-sortable=true" $attributes }}{{ end }}
+{{ if $paging }}{{ $attributes = printf "%s data-table-paging=true" $attributes }}{{ end }}
+{{ if $searchable }}{{ $attributes = printf "%s data-table-searchable=true" $attributes }}{{ end }}
+
+{{- $old := "<table>" -}}
+{{- $new := printf "<table class=\"table %s\" %s>" $class (trim $attributes " ") -}}
+{{ $input := replace $input $old $new -}}
 {{ if not $error }}
    {{ if eq $breakpoint "none" }}
        {{ $input | safeHTML }}
--- 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
@@ -82,8 +82,8 @@
 	# Redirected in exampleSite/config/_default/hugo.toml
 	# srcdir = ""

-[[plugins]]
-    package = "@netlify/plugin-lighthouse"
+# [[plugins]]
+    # package = "@netlify/plugin-lighthouse"
    # [plugins.inputs]
    # output_path = "reports/lighthouse.html"
 # toml-docs-end plugins
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.24.0-beta4",
+  "version": "0.24.14",
  "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.4",
+    "cssnano-preset-advanced": "^7.0.4",
+    "hugo-bin": "0.125.2",
+    "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.123.1",
+    "eslint-plugin-promise": "^6.4.0",
    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^11.0.0",
-    "purgecss-whitelister": "^2.4.0",
-    "replace-in-files-cli": "^2.2.0",
-    "rimraf": "^5.0.7",
+    "replace-in-files-cli": "^3.0.0",
+    "rimraf": "^6.0.1",
    "shx": "^0.3.4",
-    "stylelint": "^16.6.0",
+    "stylelint": "^16.7.0",
    "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"
  },