Merge pull request #1271 from gethinode/develop

Fix passing of button label argument to card

.eslintignore

@@ -1,6 +0,0 @@
-assets/js/critical/color.js
-assets/js/analytics.js
-assets/js/flexsearch.js
-assets/js/sharing.js
-assets/js/vendor
-node_modules

.github/workflows/lint-build.yml

@@ -43,7 +43,7 @@ jobs:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
 
     runs-on: ${{ matrix.os }}
 

.gitignore

@@ -1,4 +1,5 @@
-/_vendor
+_vendor/
+prebuild/
 public/
 resources/
 node_modules/

README.md

@@ -123,7 +123,7 @@ Hinode is inspired by the following themes:
 ## Donate
 
 <!-- markdownlint-disable MD033 -->
-<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
+<a href="https://www.buymeacoffee.com/markdumay" target="_blank" rel="noopener noreferrer nofollow"><img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;"></a>
 <!-- markdownlint-enable MD033 -->
 
 ## License

assets/js/alert.js

@@ -1,14 +1,15 @@
+/* eslint-disable no-undef */
 const alert = document.getElementById('page-alert')
 const closeBtn = document.getElementById('page-alert-btn-close')
 if (alert !== null && closeBtn !== null) {
   const version = alert.getAttribute('data-page-alert-version') || 'unknown'
-  const hideAlert = sessionStorage.getItem(`page-alert-${version}`) !== null
+  const hideAlert = getSessionStorage(`page-alert-${version}`, null, 'functional') !== null
   if (hideAlert) {
     alert.classList.add('d-none')
   }
 
   closeBtn.addEventListener('click', () => {
-    sessionStorage.setItem(`page-alert-${version}`, 'seen')
+    setSessionStorage(`page-alert-${version}`, 'seen', 'functional')
     alert.classList.add('d-none')
   })
 }

assets/js/analytics.js

@@ -1,21 +0,0 @@
-// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
-
-{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
-  {{ with site.Config.Services.GoogleAnalytics.ID }}
-    {{ if strings.HasPrefix (lower .) "ua-" }}
-      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
-    {{ else }}
-        var doNotTrack = false;
-        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
-          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
-          var doNotTrack = (dnt == "1" || dnt == "yes");
-        }
-        if (!doNotTrack) {
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '{{ . }}');
-        }
-    {{ end }}
-  {{ end }}
-{{ end }}

assets/js/critical/_cookie.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-undef, no-unused-vars */
+function hasConsent (category) {
+  // TODO: placeholder function
+  return true
+}
+
+function getLocalStorage (key, def, category) {
+  if (hasConsent(category)) {
+    return localStorage.getItem(key)
+  } else {
+    return def
+  }
+}
+
+function setLocalStorage (key, val, category) {
+  if (hasConsent(category)) {
+    localStorage.setItem(key, val)
+  }
+}
+
+function getSessionStorage (key, def, category) {
+  if (hasConsent(category)) {
+    return sessionStorage.getItem(key)
+  } else {
+    return def
+  }
+}
+
+function setSessionStorage (key, val, category) {
+  if (hasConsent(category)) {
+    sessionStorage.setItem(key, val)
+  }
+}

assets/js/critical/color.js

@@ -11,8 +11,8 @@
 
   const supportedThemes = ['auto', 'dark', 'light'];
 
-  // retrieves the currently stored theme from local storage (cookie)
-  const storedTheme = localStorage.getItem('theme')
+  // retrieves the currently stored theme from local storage
+  const storedTheme = getLocalStorage('theme', 'auto', 'functional')
 
   // retrieves the theme preferred by the client, defaults to light
   function getPreferredTheme() {
@@ -25,7 +25,7 @@
       return storedTheme
     } else {
       const preference = getPreferredTheme()
-      localStorage.setItem('theme', preference)
+      setLocalStorage('theme', preference, 'functional')
       return preference
     }
   }
@@ -35,7 +35,7 @@
     if (!supportedThemes.includes(theme)) {
       theme = 'auto'
     }
-    localStorage.setItem('theme', theme)
+    setLocalStorage('theme', theme, 'functional')
 
     if (theme === 'auto') {
       document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
@@ -61,32 +61,16 @@
   })
 
   window.addEventListener('DOMContentLoaded', () => {
-    setTheme(getTheme())
-    const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
-
-    document.querySelectorAll('.ball').forEach(ball => {
-      ball.classList.add('notransition');
-    })
-    
     document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
-      chk.checked = light
       chk.addEventListener('change', function () {
+        document.documentElement.setAttribute('data-bs-theme-animate', 'true')
         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
-    })
-  });  
+  // initialize theme directly when script is invoked
+  setTheme(getTheme())
 })()
 
 {{- end -}}

assets/js/critical/languageSelector.js

@@ -0,0 +1,68 @@
+/* eslint-disable */
+{{- if site.Params.main.enableLanguageSelectionStorage -}}
+{{- $folder := (urls.Parse site.BaseURL).Path | default "/" -}}
+
+(() => {
+  'use strict'
+
+  const folder = '{{ $folder }}'
+
+  // Function to get the selected language from local storage
+  function getLanguage () {
+    return getLocalStorage('selectedLanguage', document.documentElement.lang, 'functional')
+  }
+
+  // Function to set the selected language in local storage
+  function setLanguage (language) {
+    setLocalStorage('selectedLanguage', language, 'functional')
+  }
+  
+  // Function to apply the selected language to the website
+  function applyLanguage (language, href) {
+    if (document.documentElement.lang !== language) {
+      if (href) {
+        if (window.location.pathname !== href) {
+          window.location.href = href
+        }
+      } else {
+        window.location.href = folder + language + '/'
+      }
+    }
+  }
+
+  // Event listener for language selection
+  document.addEventListener('DOMContentLoaded', () => {
+    const storedLanguage = getLanguage()
+    const languageItems = document.querySelectorAll('#language-selector .dropdown-item')
+
+    if (languageItems.length > 0) {
+      // Redirect if the stored language differs from the active language
+      if ((storedLanguage) && (document.documentElement.lang !== storedLanguage)) {
+        languageItems.forEach(item => {
+          if (item.getAttribute('hreflang') === storedLanguage) {
+            applyLanguage(storedLanguage, item.getAttribute('href'))
+          }
+        })
+      }
+
+      // Update the stored language when the user selects a new one
+      languageItems.forEach(item => {
+        item.addEventListener('click', () => {
+          const selectedLanguage = item.getAttribute('hreflang')
+
+          if (selectedLanguage) {
+            setLanguage(selectedLanguage)
+          }
+        })
+      })
+    }
+    else {
+      // Redirect to the localized homepage
+      const defaultLang = '{{ site.LanguageCode | default site.Language.Lang }}'
+      let language = storedLanguage ? storedLanguage : defaultLang
+      window.location.href = folder + language + '/'
+    }
+  })
+})()
+{{- end -}} 
+/* eslint-enable */

assets/js/navbar.js

@@ -1,23 +1,34 @@
+const fixed = {{ site.Params.navigation.fixed }}
 const navbar = document.querySelector('.navbar')
 const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
 function updateNavbar () {
+  let storedTheme
+  if (typeof getLocalStorage === "function") {
+    storedTheme = getLocalStorage('theme', null, 'functional')
+  }
+
   if (window.scrollY > 75) {
     navbar.classList.add('nav-active')
-    const storedTheme = localStorage.getItem('theme')
+    if (storedTheme) {
       navbar.setAttribute('data-bs-theme', storedTheme)
+    }
   } else {
     navbar.classList.remove('nav-active')
     const defaultTheme = navbar.getAttribute('data-bs-overlay')
+
+    const targetTheme = defaultTheme ? defaultTheme : storedTheme
+    if (targetTheme) {
       navbar.setAttribute('data-bs-theme', defaultTheme)
     }
   }
+}
 
 if ((navbar !== null) && (window.performance.getEntriesByType)) {
   if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
-    updateNavbar()
+    fixed && updateNavbar()
   }
 }
 
@@ -29,7 +40,7 @@ if (navbar !== null && togglers !== null) {
     attributeFilter: ['data-bs-theme']
   }
   const Observer = new MutationObserver((mutationrecords) => {
-    updateNavbar()
+    fixed && updateNavbar()
   })
   Observer.observe(html, config)
 
@@ -40,7 +51,7 @@ if (navbar !== null && togglers !== null) {
 
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
-    updateNavbar()
+    fixed && updateNavbar()
   }
 
   // set the navbar background color to opaque when expanded

assets/js/sharing.js

@@ -14,23 +14,22 @@ function webShareAPI (title, description, link) {
     .catch((error) => console.log('Error sharing', error))
 }
 
-const shareBtn = document.getElementById('btn-webshare')
-
-if (shareBtn !== null) {
+const shareButtons = document.querySelectorAll('[data-sharing-url]')
+shareButtons.forEach(btn => {
   if (navigator.share) {
-    const title = shareBtn.getAttribute('data-sharing-title')
-    const description = shareBtn.getAttribute('data-sharing-description')
-    const url = shareBtn.getAttribute('data-sharing-url')
+    const title = btn.getAttribute('data-sharing-title')
+    const description = btn.getAttribute('data-sharing-description')
+    const url = btn.getAttribute('data-sharing-url')
 
     // show button if it supports webShareAPI
-    shareBtn.style.display = 'block'
-    shareBtn.addEventListener('click', () =>
+    btn.style.display = 'block'
+    btn.addEventListener('click', () =>
       webShareAPI(title, description, url)
     )
   } else {
     // hide button if host does not support Web Share API
-    shareBtn.style.display = 'none'
-  }
+    btn.style.display = 'none'
   }
+})
 
 {{- end -}}

assets/js/video.js

@@ -0,0 +1,3 @@
+document.querySelectorAll('[data-video-padding]').forEach(element => {
+  element.style.paddingBottom = element.getAttribute('data-video-padding')
+})

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

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

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%,
+            )
+        )
+    )
+);

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

assets/scss/common/_styles.scss

@@ -1,5 +1,5 @@
 @if $enable-dark-mode {
-    body { 
+    [data-bs-theme-animate="true"] body { 
         transition: background-color 0.5s, color 0.5s; 
     }
 }
@@ -146,6 +146,24 @@ $utilities: map-merge(
     }    
 }
 
+.main-cover {
+    min-height: 100vh;
+}    
+
+@include media-breakpoint-up(xxl) {
+    .main-cover {
+        min-height: calc(min(100vh, 1000px));
+    }    
+}
+
+/* stylelint-disable media-feature-range-notation */
+@media (min-height: 1400px) { 
+    .main-cover {
+        min-height: calc(min(100vh, 1000px));
+    }
+}
+/* stylelint-enable media-feature-range-notation */
+
 $utilities: map-merge(
     $utilities,
     (

assets/scss/components/_blockquote.scss

@@ -1,6 +1,54 @@
 .blockquote {
-    // background: var(--bs-light);
     border-left: 0.3rem solid;
     border-color: $secondary;
     padding: 1rem 1.5rem;
 }
+
+.blockquote-alert {
+    --bs-blockquote-alert-color: $secondary;
+
+    border-left: 0.3rem solid;
+    border-color: var(--bs-blockquote-alert-color);
+    padding: .5rem 1.5rem;
+}
+
+.blockquote-alert > p:nth-of-type(2) {
+    margin-bottom: 0;
+}
+
+.blockquote-alert-heading {
+    font-weight: bold;
+    color: var(--bs-blockquote-alert-color);
+}
+
+.blockquote-alert-caution {
+    --bs-blockquote-alert-color: var(--#{$prefix}danger);
+}
+
+.blockquote-alert-important {
+    --bs-blockquote-alert-color: var(--#{$prefix}primary);
+}
+
+.blockquote-alert-note {
+    --bs-blockquote-alert-color: var(--#{$prefix}info);
+}
+
+.blockquote-alert-tip {
+    --bs-blockquote-alert-color: var(--#{$prefix}success);
+}
+
+.blockquote-alert-warning {
+    --bs-blockquote-alert-color: var(--#{$prefix}warning);
+}
+
+.blockquote-alert a.btn-link {
+    --bs-link-color: var(--bs-blockquote-alert-color);
+    --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color), black 20%);
+
+    color: var(--bs-link-color) !important;
+
+    &:hover,
+    &:focus {
+        color: var(--bs-link-hover-color) !important;
+    }
+}

assets/scss/components/_button.scss

@@ -44,4 +44,7 @@ a.btn {
 
 .btn-link {
     --bs-btn-padding-x: 0;
+    --bs-btn-padding-y: 0;
+
+    margin: 0 !important;
 }

assets/scss/components/_card.scss

@@ -5,11 +5,21 @@
     background-color: var(--#{$prefix}secondary-bg);
 }
 
-.card-img-wrap {
+.card .card-img-wrap {
     overflow: hidden;
     position: relative;
 }
 
+.card .card-img-wrap:has(.card-img-top) {
+  border-top-left-radius: var(--#{$prefix}card-inner-border-radius);
+  border-top-right-radius: var(--#{$prefix}card-inner-border-radius);
+}
+
+.card .card-img-wrap:has(.card-img-bottom) {
+  border-bottom-right-radius: var(--#{$prefix}card-inner-border-radius);
+  border-bottom-left-radius: var(--#{$prefix}card-inner-border-radius);
+}
+
 .card-zoom {
     cursor: pointer;
 }
@@ -97,3 +107,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;
+}

assets/scss/components/_nav.scss

@@ -1,4 +1,8 @@
-.nav-tabs > .nav-link.active {
+.nav-tabs .nav-tabs {
+    border: none;
+}
+
+.nav-tabs .nav-link.active {
     border-bottom-color: var(--bs-body-bg) !important;
     border-bottom-style: solid !important;
     z-index: 1;
@@ -12,13 +16,13 @@
     column-gap: var(--#{$prefix}nav-callout-gap) !important;
 }
 
-.nav-callout > .tab-content {
+.nav-callout + .tab-content {
     background-color: var(--#{$prefix}nav-callout-bg);
     padding: 2 * $spacer;
     margin-top: 0 !important;
 }
 
-.nav-callout > .nav-link {
+.nav-callout .nav-link {
     display: flex;
     text-align: start;
     vertical-align: text-top;
@@ -27,7 +31,7 @@
     border-bottom: none;
 }
 
-.nav-callout > .nav-link.active {
+.nav-callout .nav-link.active {
     background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-bg) 50%, transparent 0);
     background-size: 50% (3 * $spacer);
     background-repeat: no-repeat;
@@ -53,7 +57,7 @@
     }
 }
 
-.nav-callout > .accordion-item {
+.nav-callout .accordion-item {
     margin-top: 2 * $spacer;
     margin-bottom: 2 * $spacer;
     border: none;

assets/scss/components/_navbar.scss

@@ -1,11 +1,81 @@
 // stylelint-disable annotation-no-unknown
 
+// 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}border-color);
+	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));
+}
+
+@if $enable-dark-mode {
+    [data-bs-theme="light"] .mode-switch .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);
+}
+
 // Source: https://jsfiddle.net/njhgr40m/
+
+@if $enable-dark-mode {
+    [data-bs-theme-animate="true"] .navbar {
+        transition: 0.5s ease-in-out;
+    }
+}
+
 .navbar {
     --bs-navbar-expanded-color: var(--bs-body-bg);
     --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
 
-    transition: 0.5s ease-in-out;
     background-color: transparent;
 
     @each $state, $val in $theme-colors {
@@ -22,6 +92,15 @@
     margin: 0 .15rem;
 }
 
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer;
+    width: 100% !important;
+}
+
 .navbar-contrast .nav-link.active, .navbar-contrast .nav-link.show, .navbar-contrast .nav-link:hover {
     border-bottom: solid 1px var(--bs-navbar-hover-color);
     margin-bottom: -1px;
@@ -33,6 +112,16 @@
     --bs-navbar-disabled-color: white !important;
     --bs-navbar-active-color: white !important;
     --bs-navbar-toggler-color: white;
+
+    .navbar-title, .mode-switch {
+        --#{$prefix}border-color: white;
+
+        color: white !important;
+    }
+
+    .mode-switch .fa-moon {
+        color: $white;
+    }
 }
 
 .navbar-expanded {
@@ -112,7 +201,7 @@
     background-color: var(--bs-navbar-toggler-color);
 }
 
-.emphasis, .emphasis-dark, .emphasis-light {
+.emphasis {
     background-color: var(--bs-navbar-toggler-color);
 }
 
@@ -133,15 +222,6 @@
     --navbar-offset: #{$navbar-offset-xs};
 }
 
-.navbar-title {
-    display: inline-block;
-    white-space: normal;
-    text-align: center !important;
-    vertical-align: middle;
-    padding: 0 $spacer;
-    width: 100% !important;
-}
-
 .navbar-container {
     width: 100% !important;
 }
@@ -235,60 +315,7 @@
     }
 }
 
-// adapted from https://www.codeply.com/p/UsTEwDkzNp#
-.checkbox {
-	opacity: 0;
+.navbar-overlay {
     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);
+    z-index: $zindex-fixed;
 }

assets/scss/components/_table.scss

@@ -1,3 +1,16 @@
+.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-left: 0;
+    padding-right: 1rem;
+}
+
 @if $enable-dark-mode {
     @include color-mode(dark) {
         .table-striped, .table-striped-columns {
@@ -9,5 +22,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;
+            }
+        } 
     }
 }

assets/scss/components/_video.scss

@@ -1,11 +1,11 @@
-.youtube-embedded {
+.video-embedded {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
 }
 
-.youtube-embedded > iframe {
+.video-embedded > iframe {
     position: absolute;
     top: 0;
     left: 0;

config/_default/hugo.toml

@@ -1,7 +1,6 @@
 # toml-docs-start main
 title = "Hinode"
 copyright = "Copyright © 2024 Mark Dumay."
-paginate = 9
 enableGitInfo = true
 # toml-docs-end main
 
@@ -27,6 +26,32 @@ defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = false
 # toml-docs-end language
 
+# toml-docs-start headers
+[outputFormats]
+  [outputFormats.server]
+    mediaType = "application/toml"
+    baseName = "server"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+  [outputFormats.netlify]
+    mediaType = "application/toml"
+    baseName = "netlify"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+# toml-docs-end headers
+
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
+
 # toml-docs-start redirect
   [outputFormats.REDIR]
     mediaType = "text/netlify"
@@ -36,11 +61,13 @@ notAlternative = true
 
 [mediaTypes."text/netlify"]
 delimiter = ""
-
-[outputs]
-home = ["HTML", "RSS", "REDIR"]
 # toml-docs-end redirect
 
+# toml-docs-start outputs
+[outputs]
+home = ["HTML", "RSS", "REDIR", "netlify", "server"]
+# toml-docs-end outputs
+
 # toml-docs-start build
 [build]
   writeStats = true
@@ -49,6 +76,9 @@ home = ["HTML", "RSS", "REDIR"]
 [taxonomies]
   tag = 'tags'
 
+[pagination]
+  pagerSize = 9
+
 [privacy]
   [privacy.vimeo]
     disabled = false
@@ -75,15 +105,6 @@ home = ["HTML", "RSS", "REDIR"]
   [services.googleAnalytics]
     # ID = "G-xxxxxxxxxx"
 
-[outputFormats]
-  [outputFormats.XML]
-    isPlainText = false
-    mediaType = "application/xml"
-    isHtml = false
-    noUgly = true
-    permalinkable = false
-    name = "xml"
-
 [minify]
   [minify.tdewolff.js]
     keepVarNames = true
@@ -95,7 +116,7 @@ home = ["HTML", "RSS", "REDIR"]
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.120.0"
+    min = "0.134.0"
     max = ""
   [[module.mounts]]
     source = "archetypes"
@@ -125,15 +146,29 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.imports]]
     path = "github.com/gethinode/mod-bootstrap"
   [[module.imports]]
-    path = "github.com/gethinode/mod-flexsearch"
+    path = "github.com/gethinode/mod-csp"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch/v2"
   [[module.imports]]
     path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-google-analytics"
   [[module.imports]]
     path = "github.com/gethinode/mod-katex"
   [[module.imports]]
     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
+
+# toml-docs-start segments
+[segments]
+  [segments.headers]
+    [[segments.headers.includes]]
+       kind = '{home}'
+       output = '{netlify,server}'
+# toml-docs-end segments

config/_default/languages.toml

@@ -11,5 +11,5 @@
         title = "Follow me"
         caption = "I work on everything coding and tweet developer memes"
     [en.params.footer]
-        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+        # license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
 # toml-docs-end lang-param

config/_default/markup.toml

@@ -24,9 +24,15 @@ defaultMarkdownHandler = "goldmark"
         table = true
         taskList = true
         typographer = true
+    [goldmark.extensions.passthrough]
+        enable = true
+    [goldmark.extensions.passthrough.delimiters]
+        block = [['\[', '\]'], ['$$', '$$']]
+        inline = [['\(', '\)'], ['$', '$']]
     [goldmark.parser]
         autoHeadingID = true
         autoHeadingIDType = 'github'
+        wrapStandAloneImageWithinParagraph = false
     [goldmark.parser.attribute]
         block = true
     [goldmark.renderer]

config/_default/params.toml

@@ -3,12 +3,15 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    enableLanguageSelectionStorage = false
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     endorse = true
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    [main.internalLinks]
+        validate = true
     [main.externalLinks]
         cue = false
         tab = false
@@ -26,11 +29,24 @@
         host = "imgix"
 # toml-docs-end images
 
+# toml-docs-start videos
+[videos]
+    [videos.cloudinary]
+        host = "cloudinary"
+        account = "demo"
+    [videos.vimeo]
+        host = "vimeo"
+    [videos.youtube]
+        host = "youtube"
+# toml-docs-end videos
+
+
 # toml-docs-start debugging
 [debugging]
     showJS = false
     showSCSS = false
     purgeHTMLComments = false
+    includeSVGOrigin = true
 # toml-docs-end debugging
 
 # toml-docs-start docs
@@ -170,16 +186,16 @@
     # linkedIn = ""
     github = "https://github.com/gethinode/hinode"
     section = "blog"
-    [author]
+    [schema.author]
         name = "Mark Dumay"
         # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
-    [logo]
+    [schema.logo]
         url = "img/logo512x512.png"
         width = 512
         height = 512
-    [image]
+    [schema.image]
         url = "img/logo1280x640.png"
         width = 1280
         height = 640
@@ -190,3 +206,38 @@
 
 [links]
     hinode = "https://gethinode.com"
+
+# toml-docs-start headers
+[headers]
+  [headers.netlify]
+    source = "netlify.toml"
+# toml-docs-end headers
+
+# toml-docs-start csp
+[modules.hinode.csp]
+    style-src = ["www.youtube.com"]
+    font-src = ["fonts.gstatic.com"]
+    frame-src = [
+        "player.cloudinary.com",
+        "www.youtube-nocookie.com",
+        "www.youtube.com"
+    ]
+    img-src = [
+        "data:",
+        "*.imgix.net",
+        "*.imagekit.io",
+        "*.cloudinary.com",
+        "i.ytimg.com"
+    ]
+# toml-docs-end csp
+
+[modules.vimeo]
+    local = true
+    integration = "optional"
+    state = "async"
+    url = "https://player.vimeo.com/api/player.js"
+
+[modules.vimeo.csp]
+    frame-src = ["player.vimeo.com"]
+    img-src = ["i.vimeocdn.com"]
+    script-src = ["player.vimeo.com"]

config/_default/server.toml

@@ -1,42 +1,29 @@
-# toml-docs-start server-config
+# Auto-generated file - do not modify
+
 [[headers]]
   for = '/**'
+
   [headers.values]
-    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
-    X-Content-Type-Options = "nosniff"
-    X-XSS-Protection = "1; mode=block"
-    Content-Security-Policy = """\
-        default-src 'self'; \
-        script-src 'self' https://*.google-analytics.com https://*.googletagmanager.com; \
-        style-src 'self' https://fonts.googleapis.com https://www.youtube.com; \
-        object-src 'none'; \
+    Access-Control-Allow-Origin = '*'
+    Content-Security-Policy = """
         base-uri 'self'; \
-        connect-src 'self'
-            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
-        font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        connect-src 'self' *.google-analytics.com *.analytics.google.com *.googletagmanager.com; \
+        default-src 'none'; \
+        font-src 'self' fonts.gstatic.com; \
+        form-action 'self'; \
+        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
+        img-src 'self' *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
-        media-src 'self' \
+        media-src 'self'; \
+        object-src 'none'; \
+        script-src 'self' *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
+        style-src 'self' www.youtube.com; \
         """
-    X-Frame-Options = "SAMEORIGIN"
-    Referrer-Policy = "strict-origin"
-    Permissions-Policy = """\
-        geolocation=(), \
-        midi=(), \
-        sync-xhr=(), \
-        microphone=(), \
-        camera=(), \
-        magnetometer=(), \
-        gyroscope=(), \
-        fullscreen=(), \
-        payment=() \
-        """
-    cache-control = """\
-        max-age=0, \
-        no-cache, \
-        no-store, \
-        must-revalidate \
-        """
-    Access-Control-Allow-Origin = "*"
-# toml-docs-end server-config
+    Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
+    Referrer-Policy = 'strict-origin'
+    Strict-Transport-Security = 'max-age=31536000; includeSubDomains; preload'
+    X-Content-Type-Options = 'nosniff'
+    X-Frame-Options = 'SAMEORIGIN'
+    X-XSS-Protection = '1; mode=block'
+    cache-control = 'max-age=0, no-cache, no-store, must-revalidate '
+

config/postcss.config.js

@@ -10,7 +10,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
   dynamicAttributes: ['data-bs-theme'],
-  safelist: [
+  safelist: ['was-validated',
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
       './assets/scss/components/_command.scss',
@@ -24,9 +24,11 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './assets/scss/components/_video.scss',
       './assets/scss/theme/fonts.scss',
       './assets/scss/theme/theme.scss',
-      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
+      './_vendor/github.com/gethinode/mod-simple-datatables/dist/simple-datatables.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_dropdown.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_modal.scss',

data/netlify.toml

@@ -0,0 +1,35 @@
+# toml-docs-start netlify
+[build]
+    publish = "exampleSite/public"
+    command = "npm run build:example"
+
+[build.environment]
+    DART_SASS_VERSION = "1.78.0"
+    HUGO_VERSION = "0.134.1"
+    HUGO_ENV = "production"
+    HUGO_ENABLEGITINFO = "true"
+    NODE_VERSION = "20.17.0"
+    NPM_VERSION = "10.8.2"
+# toml-docs-end netlify
+
+[context.deploy-preview]
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
+
+[context.branch-deploy]
+    command = "npm run build:example -- -b $DEPLOY_PRIME_URL"
+
+[dev]
+    framework = "#custom"
+    command = "npm run start:example"
+    targetPort = 1313
+    port = 8888
+    publish = "public"
+    autoLaunch = false
+
+# toml-docs-start plugins
+[[plugins]]
+    package = "@gethinode/netlify-plugin-dartsass"
+
+[[plugins]]
+    package = "netlify-plugin-hugo-cache-resources"
+# toml-docs-end plugins

data/server.toml

@@ -0,0 +1,41 @@
+# toml-docs-start server-config
+[[headers]]
+    for = "/**"
+    [headers.values]
+        Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+        X-Content-Type-Options = "nosniff"
+        X-XSS-Protection = "1; mode=block"
+        X-Frame-Options = "SAMEORIGIN"
+        Referrer-Policy = "strict-origin"
+        Permissions-Policy = """\
+            geolocation=(), \
+            midi=(), \
+            sync-xhr=(), \
+            microphone=(), \
+            camera=(), \
+            magnetometer=(), \
+            gyroscope=(), \
+            fullscreen=(), \
+            payment=() \
+            """
+        cache-control = """\
+            max-age=0, \
+            no-cache, \
+            no-store, \
+            must-revalidate \
+            """
+        Access-Control-Allow-Origin = "*"
+        Content-Security-Policy = """\
+            default-src 'none'; \
+            script-src 'self'; \
+            font-src 'self'; \
+            connect-src 'self'; \
+            img-src 'self'; \
+            style-src 'self'; \
+            base-uri 'self'; \
+            object-src 'none'; \
+            form-action 'self'; \
+            manifest-src 'self'; \
+            media-src 'self' \
+            """
+# toml-docs-end server-config

data/structures/card-group.yml

@@ -92,17 +92,21 @@ 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
+    default: p-0
     optional: true
     comment: >-
       Class attributes of the wrapper element, e.g. `p-4 px-xxl-0`.
   responsive:
     type: bool
     optional: true
+    default: 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,8 +117,50 @@ 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.
+  spacer:
+    type: bool
+    optional: true
+    comment: >-
+      Inserts a spacer before the card.
+    release: v0.24.16
+    group: partial
   hook:
     type: string
     optional: true
+    default: assets/card.html
     comment: Render hook for the card partial.
     group: partial
+  bento:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Trigger to use a bento-style layout instead of default grid layout.
+    release: v0.27.0
+  valign:
+    type: select
+    optional: true
+    comment: >-
+      Defines the vertical card alignment, only applicable in bento layout.
+    release: v0.27.0
+    options:
+      values:
+        - start
+        - center
+        - end
+  styles:
+    type:
+      - '[]map[string]interface {}'
+    optional: true
+    comment: >-
+      Styles to apply to the individual cards. Supported elements are `ratio`,
+      `orientation`, `portrait`, and `width`. The styles are rotated when the
+      amount of cards exceeds the available amount of styles.
+    release: v0.27.0

data/structures/card.yml

@@ -90,6 +90,19 @@ arguments:
         - publication
         - tags
         - none
+  body:
+    type: select
+    optional: true
+    default: full
+    parent: cascade
+    release: v0.24.16
+    comment: >-
+      Body of the card. 
+    options:
+      values:
+        - full
+        - title
+        - none
   footer:
     type: select
     optional: true
@@ -146,6 +159,16 @@ arguments:
         - 16x9
         - 21x9
     group: partial
+  portrait:
+    type: bool
+    parent: cascade
+    optional: true
+    default: false
+    release: v0.24.16
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The image itself is
+      not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
   alt:
     type: string
     optional: true
@@ -157,6 +180,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 +198,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
@@ -186,6 +228,7 @@ arguments:
         - stacked
         - horizontal
         - horizontal-sm
+        - overlay
         - none
   subtle:
     type: bool
@@ -230,6 +273,25 @@ arguments:
       One or more strings separated by commas, indicating the source sizes of an
       image set.
     group: partial
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the thumbnail's crop box, defaults to anchor value set in
+      `imaging` section of the site configuration (usually `Smart`).
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+    release: v0.24.23
 body:
   optional: true
   comment: >-

data/structures/image-adapter.yml

@@ -60,3 +60,20 @@ arguments:
     type: int
     optional: false
     comment: Width of the image in pixels.
+  anchor:
+    type: select
+    optional: true
+    comment: Anchor of the crop box.
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+

data/structures/image.yml

@@ -36,6 +36,7 @@ arguments:
   page:
     type:
       - '*hugolib.pageState'
+      - '*hugolib.pageForRenderHooks'
       - '*hugolib.pageForShortcode'
     optional: true
     comment: Page context, used to match page resources.
@@ -109,7 +110,10 @@ arguments:
       image set.
     group: partial
   title:
-    type: string
+    type:
+      - string
+      - hstring.RenderedString
+      - hstring.HTML
     optional: true
     comment: Alternate text of the image.
   caption:
@@ -138,3 +142,22 @@ arguments:
       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
+  anchor:
+    type: select
+    optional: true
+    comment: 
+      Anchor of the crop box, defaults to anchor value set in `imaging` section
+      of the site configuration (usually `Smart`).
+    options:
+      values:
+        - TopLeft
+        - Top
+        - TopRight
+        - Left
+        - Center
+        - Right
+        - BottomLeft
+        - Bottom
+        - BottomRight
+        - Smart
+    release: v0.24.22

data/structures/link.yml

@@ -10,6 +10,7 @@ arguments:
   page:
     type:
       - '*hugolib.pageState'
+      - '*hugolib.pageForRenderHooks'
       - '*hugolib.pageForShortcode'
     optional: false
     group: partial
@@ -70,11 +71,18 @@ arguments:
     type:
       - string
       - template.HTML
+      - hstring.RenderedString
+      - hstring.HTML
     optional: true
     group: partial
+    comment: Link description.
+  title:
+    type: string
+    optional: true
     comment: Link title.
+    release: v0.26.0
 body:
   type: string
   optional: true
   group: shortcode
-  comment: Link title.
+  comment: Link description.

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.

data/structures/release.yml

@@ -38,3 +38,12 @@ arguments:
     optional: true
     default: false
     comment: Flag to render the release button inline.
+  type:
+    type: select
+    optional: true
+    default: button
+    comment: Type of the element.
+    options:
+      values:
+        - link
+        - button

data/structures/script.yml

@@ -0,0 +1,46 @@
+comment: >-
+  Includes a reference to a local or external JavaScript file. Hinode uses the
+  template defined in `layouts/partials/templates/script.html` to generate the
+  link to a (bundled) JavaScript file. It includes context such as the state,
+  category, and integrity. For example, you can adapt this template to implement
+  cookie consent management.
+arguments:
+  link:
+    type: string
+    optional: false
+    comment: >-
+      Location of the script source, either an URL for an external script or a
+      (relative) path for a local script.
+  state:
+    type: select
+    optional: true
+    comment: >-
+      Defines the loading behavior of the script bundle. By default, scripts are
+      loaded immediately. Use `async` to process the script in the background.
+      Use `defer` to load the script in relative order when the DOM is fully
+      built.
+    options:
+      values:
+        - async
+        - defer
+        - immediate
+  category:
+    type: select
+    optional: true
+    default: other
+    comment: >-
+      Assigns the script to a category that can be used for cookie consent
+      management.
+    options:
+      values:
+        - necessary
+        - functional
+        - analytics
+        - performance
+        - advertisement
+        - other
+  integrity:
+    type: string
+    optional: true
+    comment: >-
+      Cryptographic hash of the script to enable Subresource Integrity (SRI).

data/structures/scripts.yml

@@ -0,0 +1,24 @@
+comment: >-
+  Bundles a JavaScript file for client-side processing. Scripts can be included
+  as critical, core, or optional file.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    comment: Context of the current page.
+  type:
+    type: select
+    default: core
+    optional: true
+    comment: >-
+      Type of script bundle. Critical scripts are included in the page header
+      and are loaded immediately. Core scripts are bundled by category and are
+      loaded asynchronously. Optional scripts are loaded individually on the
+      pages that require them. They use the synchronization method as defined
+      in their containing module.
+    values:
+      - critical
+      - core
+      - optional

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

data/structures/video.yml

@@ -0,0 +1,90 @@
+comment: >-
+  Embeds a responsive video player for supported video providers. The video is
+  embedded in a responsive frame.
+arguments:
+  page:
+    type:
+      - '*hugolib.pageState'
+      - '*hugolib.pageForShortcode'
+    optional: false
+    group: partial
+    release: v0.26.5
+    comment: Context of the current page.
+  position:
+    type:
+      - 'text.Position'
+    optional: true
+    group: partial
+    release: v0.26.5
+    comment: Filename and position from which the shortcode was called.
+  host:
+    type: string
+    optional: true
+    default: youtube
+    release: v0.26.5
+    comment: >-
+      Host name of the video provider. It should match one of the registered
+      providers in the site's parameters under `videos`.
+  title:
+    type: string
+    optional: true
+    comment: >-
+      Title of the video. You can also set `autotitle` to retrieve the title
+      programmatically at build time, if supported by the provider.
+  class:
+    type: string
+    optional: true
+    position: 1
+    comment: >-
+      Class attribute of the video wrapper element.
+  id:
+    type: string
+    optional: false
+    position: 0
+    comment: Public ID of the video to be embedded.
+  account:
+    type: string
+    optional: true
+    comment: >-
+      Account name of the video asset, required by some digital asset managers.
+      You can also set the default account name in the site's parameters.
+    release: v0.26.5
+  autoplay:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag indicating the video should start playing immediately when loaded, if
+      supported by the browser. The audio will be muted.
+  autotitle:
+    type: bool
+    optional: true
+    default: false
+    release: v0.25.2
+    comment: >-
+      Trigger to retrieve the title from the video metadata, if supported by the
+      provider.
+  ratio:
+    type: select
+    optional: true
+    comment: >-
+      Ratio of the video. If set, determines the padding of the embedded video
+      frame. When not specified, the video dimensions used to calculate the
+      padding are retrieved programmatically.
+    options:
+      values:
+        - 1x1
+        - 3x2
+        - 4x3
+        - 16x9
+        - 21x9
+    release: v0.26.5
+  portrait:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to adjust the ratio from landscape to portrait. The image itself is
+      not rotated, only the crop area is adjusted. Not applicable to vector
+      graphics.
+    release: v0.26.5

data/structures/youtube.yml

@@ -1,26 +0,0 @@
-comment: >-
-  Embeds a responsive video player for YouTube videos. Only the ID of the video
-  is required. In privacy-enhanced mode, YouTube will not store information
-  about visitors on your website unless the user plays the embedded video.
-arguments:
-  title:
-    type: string
-    optional: true
-    comment: >-
-      Title of the video.
-  class:
-    type: string
-    optional: true
-    position: 1
-    comment: >-
-      Class attribute of the video wrapper element.
-  id:
-    type: string
-    optional: false
-    position: 0
-    comment: Identifier of the video to be embedded.
-  autoplay:
-    type: bool
-    optional: true
-    default: false
-    comment: Flag indicating the video should start playing immediately when loaded.

eslint.config.js

@@ -0,0 +1,14 @@
+'use strict'
+
+module.exports = require('neostandard')({
+  ignores: [
+    'assets/js/critical/languageSelector.js',
+    'assets/js/critical/color.js',
+    'assets/js/analytics.js',
+    'assets/js/flexsearch.js',
+    'assets/js/navbar.js',
+    'assets/js/sharing.js',
+    'assets/js/vendor',
+    'node_modules',
+  ]
+})

exampleSite/.gitignore

@@ -1,4 +1,5 @@
-/_vendor
+_vendor/
+exampleSite/public/
 public/
 resources/
 

exampleSite/config/_default/hugo.toml

@@ -1,7 +1,6 @@
 resourcedir = '../resources/'
 title = "Hinode"
 copyright = "Copyright © 2024 Mark Dumay."
-paginate = 9
 enableGitInfo = true
 
 # additional settings
@@ -21,6 +20,28 @@ languageCode = "en-us"
 defaultContentLanguage = "en"
 defaultContentLanguageInSubdir = true
 
+[outputFormats]
+  [outputFormats.netlify]
+    mediaType = "application/toml"
+    baseName = "netlify"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+  [outputFormats.server]
+    mediaType = "application/toml"
+    baseName = "server"
+    isPlainText = true
+    notAlternative = true
+    permalinkable = true
+    root = true
+  [outputFormats.XML]
+    isPlainText = false
+    mediaType = "application/xml"
+    isHtml = false
+    noUgly = true
+    permalinkable = false
+    name = "xml"
   [outputFormats.REDIR]
     mediaType = "text/netlify"
     baseName = "_redirects"
@@ -31,7 +52,7 @@ notAlternative = true
 delimiter = ""
 
 [outputs]
-home = ["HTML", "RSS", "REDIR"]
+home = ["HTML", "RSS", "REDIR", "netlify", "server"]
 
 [build]
   writeStats = true
@@ -39,6 +60,9 @@ home = ["HTML", "RSS", "REDIR"]
 [taxonomies]
   tag = 'tags'
 
+[pagination]
+  pagerSize = 9
+
 [privacy]
   [privacy.vimeo]
     disabled = false
@@ -65,15 +89,6 @@ home = ["HTML", "RSS", "REDIR"]
   [services.googleAnalytics]
     ID = "G-T85PPZ36GN"
 
-[outputFormats]
-  [outputFormats.XML]
-    isPlainText = false
-    mediaType = "application/xml"
-    isHtml = false
-    noUgly = true
-    permalinkable = false
-    name = "xml"
-
 [minify]
   [minify.tdewolff.js]
     keepVarNames = true
@@ -82,8 +97,36 @@ home = ["HTML", "RSS", "REDIR"]
   [minify.tdewolff.html]
     keepWhitespace = true
 
+[segments]
+  [segments.headers]
+    [[segments.headers.includes]]
+       kind = '{home}'
+       output = '{netlify,server}'
+
 [module]
   # Build and serve using local hinode clone declared in the named Hugo workspace:
   workspace = "hinode.work"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-cookieyes/v2"
   [[module.imports]]
     path = "github.com/gethinode/hinode"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-bootstrap"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-csp"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-flexsearch/v2"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-fontawesome"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-google-analytics"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-katex"
+  [[module.imports]]
+    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"

exampleSite/config/_default/languages.toml

@@ -11,7 +11,7 @@ tagline = "A Hugo Theme"
 title = "Follow me"
 caption = "I work on everything coding and tweet developer memes"
 [en.params.footer]
-# license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+# license = "Licensed under Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
 # toml-docs-end lang-param
 [en.params.sections.blog]
 reference = "More Posts"
@@ -22,13 +22,15 @@ reference = "More Projects"
 languageName = "Nederlands"
 contentDir = "content/nl"
 weight = 2
+[nl.params.opengraph]
+locale = "nl_NL"
 [nl.params.head]
 tagline = "Een Hugo Thema"
 [nl.params.social]
 title = "Volg mij"
 caption = "Ik doe aan programmeren en tweet memes"
 [nl.params.footer]
-# license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+# license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
 [nl.params.sections.blog]
 reference = "Meer artikelen"
 [nl.params.sections.projects]
@@ -39,13 +41,15 @@ reference = "Meer projecten"
 languageName = "Français"
 contentDir = "content/fr"
 weight = 2
+[fr.params.opengraph]
+locale = "fr_FR"
 [fr.params.head]
 tagline = "Un thème Hugo"
 [fr.params.social]
 title = "Suivez-moi"
 caption = "Je code et je tweet des mèmes de développeurs."
 [fr.params.footer]
-# license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer'>CC BY-NC-SA 4.0</a>)."
+# license = "Gelicenseerd onder Creative Commons (<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' class='link-secondary' target='_blank' rel='noopener noreferrer nofollow'>CC BY-NC-SA 4.0</a>)."
 [fr.params.sections.blog]
 reference = "Plus d'articles"
 [fr.params.sections.projects]

exampleSite/config/_default/markup.toml

@@ -24,9 +24,15 @@ defaultMarkdownHandler = "goldmark"
         table = true
         taskList = true
         typographer = true
+    [goldmark.extensions.passthrough]
+        enable = true
+    [goldmark.extensions.passthrough.delimiters]
+        block = [['\[', '\]'], ['$$', '$$']]
+        inline = [['\(', '\)'], ['$', '$']]
     [goldmark.parser]
         autoHeadingID = true
         autoHeadingIDType = 'github'
+        wrapStandAloneImageWithinParagraph = false
     [goldmark.parser.attribute]
         block = true
     [goldmark.renderer]

exampleSite/config/_default/netlify.toml

@@ -0,0 +1,19 @@
+[[redirects]]
+	from = '/fr/*'
+	to = '/fr/404.html'
+	status = 404
+
+[[redirects]]
+	from = '/nl/*'
+	to = '/nl/404.html'
+	status = 404
+
+[[redirects]]
+	from = '/en/*'
+	to = '/en/404.html'
+	status = 404
+
+[[redirects]]  # Default language should be last.
+	from = '/*'
+	to = '/en/404.html'
+	status = 404

exampleSite/config/_default/params.toml

@@ -2,11 +2,14 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    enableLanguageSelectionStorage = true
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     footerBelowFold = false
     loading = "lazy"
     breakpoint = "md"
+    [main.internalLinks]
+        validate = true
     [main.externalLinks]
         cue = true
         tab = true
@@ -17,6 +20,7 @@
     showJS = false
     showSCSS = false
     purgeHTMLComments = true # prevents a Goldmark warning when processing HTML comments (as used by markdownlint)
+    includeSVGOrigin = true
 
 [docs]
     basePath = "/" # TODO: replace
@@ -163,16 +167,16 @@
     # linkedIn = ""
     github = "https://github.com/gethinode/hinode"
     section = "blog"
-    [author]
+    [schema.author]
         name = "Mark Dumay"
         # twitter = "https://twitter.com/markdumay"
         linkedin = "https://www.linkedin.com/in/markdumay/"
         github = "https://github.com/markdumay"
-    [logo]
+    [schema.logo]
         url = "img/logo512x512.png"
         width = 512
         height = 512
-    [image]
+    [schema.image]
         url = "img/logo1280x640.png"
         width = 1280
         height = 640
@@ -189,3 +193,6 @@
     observatory = "https://observatory.mozilla.org/analyze/demo.gethinode.com"
     pagespeed = "https://pagespeed.web.dev/report?url=https%3A%2F%2Fdemo.gethinode.com%2F"
     hinode = "https://gethinode.com"
+
+[modules.cookieyes]
+    url = "https://cdn-cookieyes.com/client_data/a54b5553f349dd13bd225f8e/script.js"

exampleSite/config/_default/server.toml

@@ -1,42 +1,49 @@
-# toml-docs-start server-config
+# Auto-generated file - do not modify
+
 [[headers]]
   for = '/**'
+
   [headers.values]
-    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
-    X-Content-Type-Options = "nosniff"
-    X-XSS-Protection = "1; mode=block"
-    Content-Security-Policy = """\
-        default-src 'self'; \
-        script-src 'self' https://*.google-analytics.com https://*.googletagmanager.com; \
-        style-src 'self' https://fonts.googleapis.com https://www.youtube.com; \
-        object-src 'none'; \
+    Access-Control-Allow-Origin = '*'
+    Content-Security-Policy = """
         base-uri 'self'; \
-        connect-src 'self'
-            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
-        font-src 'self' https://fonts.gstatic.com; \
-        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        connect-src 'self' *.cookieyes.com cdn-cookieyes.com *.google-analytics.com *.analytics.google.com *.googletagmanager.com; \
+        default-src 'none'; \
+        font-src 'self' fonts.gstatic.com; \
+        form-action 'self'; \
+        frame-src player.cloudinary.com www.youtube-nocookie.com www.youtube.com player.vimeo.com; \
+        img-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com data: *.imgix.net *.imagekit.io *.cloudinary.com i.ytimg.com tile.openstreetmap.org i.vimeocdn.com; \
         manifest-src 'self'; \
-        media-src 'self' \
+        media-src 'self'; \
+        object-src 'none'; \
+        script-src 'self' cdn-cookieyes.com *.google-analytics.com *.googletagmanager.com player.vimeo.com; \
+        style-src 'self' 'unsafe-inline' www.youtube.com; \
         """
-    X-Frame-Options = "SAMEORIGIN"
-    Referrer-Policy = "strict-origin"
-    Permissions-Policy = """\
-        geolocation=(), \
-        midi=(), \
-        sync-xhr=(), \
-        microphone=(), \
-        camera=(), \
-        magnetometer=(), \
-        gyroscope=(), \
-        fullscreen=(), \
-        payment=() \
-        """
-    cache-control = """\
-        max-age=0, \
-        no-cache, \
-        no-store, \
-        must-revalidate \
-        """
-    Access-Control-Allow-Origin = "*"
-# toml-docs-end server-config
+    Permissions-Policy = 'geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=() '
+    Referrer-Policy = 'strict-origin'
+    Strict-Transport-Security = 'max-age=31536000; includeSubDomains; preload'
+    X-Content-Type-Options = 'nosniff'
+    X-Frame-Options = 'SAMEORIGIN'
+    X-XSS-Protection = '1; mode=block'
+    cache-control = 'max-age=0, no-cache, no-store, must-revalidate '
+
+[[redirects]]
+  from = '/fr/*'
+  status = 404
+  to = '/fr/404.html'
+
+[[redirects]]
+  from = '/nl/*'
+  status = 404
+  to = '/nl/404.html'
+
+[[redirects]]
+  from = '/en/*'
+  status = 404
+  to = '/en/404.html'
+
+[[redirects]]
+  from = '/*'
+  status = 404
+  to = '/en/404.html'
+

exampleSite/config/postcss.config.js

@@ -10,7 +10,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
   },
   dynamicAttributes: ['data-bs-theme'],
-  safelist: [
+  safelist: ['was-validated',
     ...whitelister([
       './_vendor/github.com/gethinode/hinode/assets/scss/components/_clipboard.scss',
       './_vendor/github.com/gethinode/hinode/assets/scss/components/_command.scss',
@@ -24,7 +24,8 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './_vendor/github.com/gethinode/hinode/assets/scss/components/_video.scss',
       './_vendor/github.com/gethinode/hinode/assets/scss/theme/fonts.scss',
       './_vendor/github.com/gethinode/hinode/assets/scss/theme/theme.scss',
-      './_vendor/github.com/gethinode/mod-flexsearch/assets/scss/modules/flexsearch/flexsearch.scss',
+      './exampleSite/_vendor/github.com/gethinode/mod-cookieyes/v2/assets/scss/cookieyes.scss',
+      './_vendor/github.com/gethinode/mod-flexsearch/v2/assets/scss/modules/flexsearch/flexsearch.scss',
       './_vendor/github.com/gethinode/mod-katex/dist/katex.scss',
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_carousel.scss',

exampleSite/content/en/about.md

@@ -27,6 +27,6 @@ Additional features include:
 * Reusable Bootstrap components through configurable shortcodes and partials
 * Versioned documentation, including sidebar navigation and version switcher
 * Responsive image handling for multiple screen sizes and resolutions
-* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{< param "links.pagespeed" >}})
-* Secure by default, scoring A+ on [Mozilla Observatory test]({{< param "links.observatory" >}})
+* Optimized search results, scoring 100 points for SEO on [PageSpeed Insights]({{% param "links.pagespeed" %}})
+* Secure by default, scoring A+ on [Mozilla Observatory test]({{% param "links.observatory" %}})
 {.tickmark}

exampleSite/content/en/blog/bootstrap-elements.md

@@ -12,7 +12,7 @@ thumbnail:
   originURL: https://unsplash.com/photos/QLPWQvHvmII
 ---
 
-Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{< param "links.hinode_docs" >}}) for more details.
+Hinode provides several shortcodes that wrap common Bootstrap components. Refer to the [official documentation]({{% param "links.hinode_docs" %}}) for more details.
 
 ## Abbr
 
@@ -121,7 +121,7 @@ As an example, the following shortcode displays a group of three buttons.
 
 ## Card
 
-As an example, the following shortcode displays a stacked card that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
+As an example, the following shortcode displays a stacked card that links to the [about]({{% ref "about" %}}) page. It includes a custom header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
@@ -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.
@@ -255,14 +255,22 @@ As an example, the following shortcodes show a square check, a brand logo, a cir
 
 ## Image
 
-As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+As an example, the following shortcode displays an image with rounded corners and a 4x3 aspect ratio in portrait mode.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* image src="img/flowers.jpg" ratio="21x9" caption="Figure caption" class="rounded" */>}}
+{{</* image src="img/flowers.jpg" ratio="4x3" caption="Figure caption" class="rounded col-md-6"
+  portrait=true wrapper="text-center" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+The same image, but then using Markdown syntax:
+
+{{< example lang="hugo" >}}
+![Flowers](/img/flowers.jpg "Figure caption")
+{class="rounded col-md-6" ratio="4x3" portrait=true wrapper="text-center"}
+{{< /example >}}
+
 As an example, the following shortcode displays a regular vector image.
 
 <!-- markdownlint-disable MD037 -->
@@ -410,7 +418,7 @@ As an example, the following shortcode displays superscript text.
 
 As an example, the following shortcode displays a responsive table.
 
-<!-- markdownlint-disable MD037 -->
+<!-- markdownlint-disable MD037 MD058 -->
 {{< example lang="markdown" >}}
 {{</* table */>}}
 | #  | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
@@ -420,7 +428,7 @@ As an example, the following shortcode displays a responsive table.
 | 3. | cell    | cel     | cel     | cel     | cel     | cel     | cel     | cel     | cel     |
 {{</* /table */>}}
 {{< /example >}}
-<!-- markdownlint-enable MD037 -->
+<!-- markdownlint-enable MD037 MD058 -->
 
 ## Timeline
 
@@ -465,3 +473,13 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 {{</* tooltip color="primary" title="Tooltip caption" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
+
+## Video
+
+As an example, the following shortcode displays an Elephants video hosted by Cloudinary.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* video host="cloudinary" account="demo" id="elephants" autoplay=true */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->

exampleSite/content/en/blog/components.md

@@ -10,10 +10,10 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet", "lottie"]
+modules: ["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.
+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.
 
 ## Animation
 
@@ -25,9 +25,52 @@ 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 MD058 -->
+{{< 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.
+As an example, the following markdown renders two formulas using server-side math rendering using KaTeX.
 
 {{< example lang="markdown" >}}
 This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula

exampleSite/content/en/blog/image.md

@@ -14,7 +14,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"
+{{</* image src="https://res.cloudinary.com/demo/dog.webp"
     ratio="21x9" caption="Cloudinary image" class="rounded" plain=true */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
@@ -26,7 +26,7 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://ik.imagekit.io/demo/default-image.jpg"
-    ratio="21x9" caption="ImageKit.io image" class="rounded" */>}}
+    ratio="21x9" caption="ImageKit.io image" class="rounded" anchor="Center" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -37,6 +37,6 @@ As an example, the following shortcode displays an image with rounded corners an
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* image src="https://assets.imgix.net/examples/bluehat.jpg"
-    ratio="21x9" caption="imgix image" class="rounded" */>}}
+    ratio="21x9" caption="imgix image" class="rounded" anchor="Top" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

exampleSite/content/en/cookies.md

@@ -0,0 +1,44 @@
+---
+title: Cookie Policy
+description: Cookie policy of gethinode.com
+date: 2024-09-19
+layout: docs
+---
+<!-- markdownlint-disable MD036 -->
+*Effective Date 19-Sep-2024*
+
+## What are cookies?
+
+This Cookie Policy explains what cookies are and how we use them, the types of cookies we use i.e, the information we collect using cookies and how that information is used, and how to manage the cookie settings.
+
+Cookies are small text files that are used to store small pieces of information. They are stored on your device when the website is loaded on your browser. These cookies help us make the website function properly, make it more secure, provide better user experience, and understand how the website performs and to analyze what works and where it needs improvement.
+
+## How do we use cookies?
+
+As most of the online services, our website uses first-party and third-party cookies for several purposes. First-party cookies are mostly necessary for the website to function the right way, and they do not collect any of your personally identifiable data.
+
+The third-party cookies used on our website are mainly for understanding how the website performs, how you interact with our website, keeping our services secure, providing advertisements that are relevant to you, and all in all providing you with a better and improved user experience and help speed up your future interactions with our website.
+
+## Types of Cookies we use
+
+{{< cky-audit >}}
+
+## Manage cookie preferences
+
+{{< cky-banner >}}
+
+You can change your cookie preferences any time by clicking the above button. This will let you revisit the cookie consent banner and change your preferences or withdraw your consent right away.
+
+In addition to this, different browsers provide different methods to block and delete cookies used by websites. You can change the settings of your browser to block/delete the cookies. Listed below are the links to the support documents on how to manage and delete cookies from the major web browsers.
+
+Chrome: https://support.google.com/accounts/answer/32050
+
+Safari: https://support.apple.com/en-in/guide/safari/sfri11471/mac
+
+Firefox: https://support.mozilla.org/en-US/kb/clear-cookies-and-site-data-firefox?redirectslug=delete-cookies-remove-info-websites-stored&redirectlocale=en-US
+
+Internet Explorer: https://support.microsoft.com/en-us/topic/how-to-delete-cookie-files-in-internet-explorer-bca9446f-d873-78de-77ba-d42645fa52fc
+
+If you are using any other web browser, please visit your browser’s official support documents.
+
+*Cookie Policy generated by {{< link "https://www.cookieyes.com" >}}CookieYes - Cookie Policy Generator{{< /link >}}.*

exampleSite/content/en/privacy.md

@@ -0,0 +1,47 @@
+---
+title: Privacy Policy
+description: Privacy policy of gethinode.com
+date: 2024-09-19
+layout: docs
+---
+<!-- markdownlint-disable MD036 -->
+*Effective Date 19-Sep-2024*
+
+This Privacy Policy describes the policies of gethinode.com on the collection, use and disclosure of your information that we collect when you use our website (https://gethinode.com, referred to as the “Service”). By accessing or using the Service, you are consenting to the collection, use and disclosure of your information in accordance with this Privacy Policy. If you do not consent to the same, please do not access or use the Service.
+
+We may modify this Privacy Policy at any time without any prior notice to you and will post the revised Privacy Policy on the Service. The revised Policy will be effective 180 days from when the revised Policy is posted in the Service and your continued access or use of the Service after such time will constitute your acceptance of the revised Privacy Policy. We therefore recommend that you periodically review this page.
+
+## How we share your information
+
+We will not transfer your personal information to any third party without seeking your consent, except in limited circumstances as described
+below:
+
+- Analytics
+
+We require such third party’s to use the personal information we transfer to them only for the purpose for which it was transferred and not to retain it for longer than is required for fulfilling the said purpose.
+
+We may also disclose your personal information for the following: (1) to comply with applicable law, regulation, court order or other legal process; (2) to enforce your agreements with us, including this Privacy Policy; or (3) to respond to claims that your use of the Service violates any third-party rights. If the Service or our company is merged or acquired with another company, your information will be one of the assets that is transferred to the new owner.
+
+## Your rights
+
+Depending on the law that applies, you may have a right to access and rectify or erase your personal data or receive a copy of your personal data, restrict or object to the active processing of your data, ask us to share (port) your personal information to another entity,withdraw any consent you provided to us to process your data, a right to lodge a complaint with a statutory authority and such other rights as may be relevant under applicable laws. <!-- To exercise these rights, you can write to us at privacy@gethinode.com. We will respond to your request in accordance with applicable law. -->
+
+Do note that if you do not allow us to collect or process the required personal information or withdraw the consent to process the same for the required purposes, you may not be able to access or use the services for which your information was sought.
+
+## Cookies etc.
+
+To learn more about how we use these and your choices in relation to these tracking technologies, please refer to our {{< link "cookies" >}}Cookie Policy/Settings{{< /link >}}.
+
+## Security
+
+The security of your information is important to us and we will use reasonable security measures to prevent the loss, misuse or unauthorized alteration of your information under our control. However, given the inherent risks, we cannot guarantee absolute security and consequently, we cannot ensure or warrant the security of any information you transmit to us and you do so at your own risk.
+
+## Third party links & use of your information
+
+Our Service may contain links to other websites that are not operated by us. This Privacy Policy does not address the privacy policy and other practices of any third parties, including any third party operating any website or service that may be accessible via a link on the Service. We strongly advise you to review the privacy policy of every site you visit. We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+
+<!-- ## Grievance / Data Protection Officer
+
+If you have any queries or concerns about the processing of your information that is available with us, you may email us at privacy@gethinode.com. We will address your concerns in accordance with applicable law. -->
+
+*Privacy Policy generated with {{< link "https://www.cookieyes.com" >}}CookieYes{{< /link >}}.*

exampleSite/content/fr/about.md

@@ -28,6 +28,6 @@ Les fonctionnalités supplémentaires incluent:
 - Composants bootstrap réutilisables à travers des codes et partiels configurables
 - Documentation versionnée, incluant une navigation latérale et un sélecteur de version.
 - Gestion d'images adaptatives pour plusieurs tailles d'écran et résolutions.
-- Résultats de recherche optimisés, obtenant un score de 100 points pour le référencement (SEO) sur [PageSpeed Insights]({{< param "links.pagespeed" >}}).
-- Sécurisé par défaut, obtenant un score A+ au test [Mozilla Observatory]({{< param "links.observatory" >}})
+- Résultats de recherche optimisés, obtenant un score de 100 points pour le référencement (SEO) sur [PageSpeed Insights]({{% param "links.pagespeed" %}}).
+- Sécurisé par défaut, obtenant un score A+ au test [Mozilla Observatory]({{% param "links.observatory" %}})
 {.tickmark}

exampleSite/content/fr/blog/bootstrap-elements.md

@@ -13,7 +13,7 @@ thumbnail:
   originURL: https://unsplash.com/photos/QLPWQvHvmII
 ---
 
-Hinode propose plusieurs shortcodes qui enveloppent des composants Bootstrap courants. Consultez la [documentation officielle]({{< param "links.hinode_docs" >}}) pour plus de détails.
+Hinode propose plusieurs shortcodes qui enveloppent des composants Bootstrap courants. Consultez la [documentation officielle]({{% param "links.hinode_docs" %}}) pour plus de détails.
 
 ## Abbr
 
@@ -121,7 +121,7 @@ En-tête 6 {{</* badge title="Nouveau" */>}}
 
 ## Carte
 
-À titre d'exemple, le shortcode suivant affiche une carte empilée qui renvoie à la page [à propos]({{< ref "about" >}}). Elle inclut un en-tête personnalisé.
+À titre d'exemple, le shortcode suivant affiche une carte empilée qui renvoie à la page [à propos]({{% ref "about" %}}). Elle inclut un en-tête personnalisé.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}

exampleSite/content/fr/blog/components.md

@@ -14,7 +14,7 @@ thumbnail:
 modules: ["katex", "leaflet", "lottie"]
 ---
 
-Hinode propose plusieurs shortcodes en plus des [éléments Bootstrap]({{< relref "bootstrap-elements" >}}) courants. Consultez la [documentation officielle]({{< param "links.hinode_docs" >}}) pour plus de détails.
+Hinode propose plusieurs shortcodes en plus des [éléments Bootstrap]({{% relref "bootstrap-elements" %}}) courants. Consultez la [documentation officielle]({{% param "links.hinode_docs" %}}) pour plus de détails.
 
 ## Animation
 

exampleSite/content/nl/about.md

@@ -29,6 +29,6 @@ Overige functies:
 * Herbruikbare Bootstrap componenten via shortcodes en partials
 * Versiebeheer van documentatiepagina's, inclusief secundaire navigatie en selectie van versies
 * Optimalisering van foto's voor meerdere schermafmetingen en resoluties
-* Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{< param "links.pagespeed" >}})
-* Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{< param "links.observatory" >}})
+* Optimale zoekresultaten, met 100 punten voor SEO volgens [PageSpeed Insights]({{% param "links.pagespeed" %}})
+* Veilige communicatie, met een score van A+ volgens [Mozilla Observatory]({{% param "links.observatory" %}})
 {.tickmark}

exampleSite/data/server.toml

@@ -0,0 +1,63 @@
+# toml-docs-start server-config
+[[headers]]
+    for = "/**"
+    [headers.values]
+        Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
+        X-Content-Type-Options = "nosniff"
+        X-XSS-Protection = "1; mode=block"
+        X-Frame-Options = "SAMEORIGIN"
+        Referrer-Policy = "strict-origin"
+        Permissions-Policy = """\
+            geolocation=(), \
+            midi=(), \
+            sync-xhr=(), \
+            microphone=(), \
+            camera=(), \
+            magnetometer=(), \
+            gyroscope=(), \
+            fullscreen=(), \
+            payment=() \
+            """
+        cache-control = """\
+            max-age=0, \
+            no-cache, \
+            no-store, \
+            must-revalidate \
+            """
+        Access-Control-Allow-Origin = "*"
+        Content-Security-Policy = """\
+            default-src 'none'; \
+            script-src 'self'; \
+            font-src 'self'; \
+            connect-src 'self'; \
+            img-src 'self'; \
+            style-src 'self'; \
+            base-uri 'self'; \
+            object-src 'none'; \
+            form-action 'self'; \
+            manifest-src 'self'; \
+            media-src 'self' \
+            """
+# toml-docs-end server-config
+
+# toml-docs-start server-custom-404
+[[redirects]]
+	from = '/fr/*'
+	to = '/fr/404.html'
+	status = 404
+
+[[redirects]]
+	from = '/nl/*'
+	to = '/nl/404.html'
+	status = 404
+
+[[redirects]]
+	from = '/en/*'
+	to = '/en/404.html'
+	status = 404
+
+[[redirects]]  # Default language should be last.
+	from = '/*'
+	to = '/en/404.html'
+	status = 404
+# toml-docs-end server-custom-404

exampleSite/go.mod

@@ -2,3 +2,6 @@ module github.com/gethinode/hinode/exampleSite
 
 go 1.19
 
+require (
+	github.com/gethinode/mod-cookieyes/v2 v2.2.2 // indirect
+)

exampleSite/go.sum

@@ -1,14 +1,2 @@
-github.com/gethinode/hinode v0.22.5 h1:zpjSDgWQVbq4BjPduxwexQB18gawFeinzPkaRRTs2Tg=
-github.com/gethinode/hinode v0.22.5/go.mod h1:hsskrlBRnTbpCjrDtGbK8C1VYGML7ezHtCDGDiYL2mQ=
-github.com/gethinode/mod-bootstrap v1.2.2 h1:Q8E04OKWr9owk7nhQ/NBukUgSFhsECxZsOLEaf5oeiQ=
-github.com/gethinode/mod-bootstrap v1.2.2/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
-github.com/gethinode/mod-flexsearch v1.9.0 h1:AE+w7QeZTxh36JNTG+CASDLxaqlCZKn+EUD6ulnPGak=
-github.com/gethinode/mod-flexsearch v1.9.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
-github.com/gethinode/mod-fontawesome v1.8.1 h1:iyvULrpaGizQoI5Vl9WjFYcMGWefdyG90NGK2UKax+k=
-github.com/gethinode/mod-fontawesome v1.8.1/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
-github.com/gethinode/mod-katex v1.0.5 h1:AVhcTINYory0ygChQERf8PcyJkbT1oqhmLRF6ESnWOY=
-github.com/gethinode/mod-katex v1.0.5/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
-github.com/gethinode/mod-leaflet v1.0.0 h1:HdnWafOGkkK1hYGfqLYF3pp9dAFS/caxlzML9sO1rCc=
-github.com/gethinode/mod-leaflet v1.0.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
-github.com/gethinode/mod-lottie v1.4.3 h1:IKZO8a4yQyPKUwZ6POsZRIH/B++yEzXDe5HxrFF79KA=
-github.com/gethinode/mod-lottie v1.4.3/go.mod h1:nt4wLnDFIhjBGRMuQJJ2bH80VREpbcsBUsdO6uWXjLs=
+github.com/gethinode/mod-cookieyes/v2 v2.2.2 h1:VNIdbZnzXw/0Jito/IcDNqQ9yRYLCGrDwyrMqtSJgE4=
+github.com/gethinode/mod-cookieyes/v2 v2.2.2/go.mod h1:tULb7D7CoTycGUyL7ryqHJKaX11XuL2SN+XwP7/DI0Y=

exampleSite/hinode.work.sum

@@ -1,18 +1,9 @@
-github.com/airbnb/lottie-web v5.12.2+incompatible h1:Ldogtlhiucf7mMsgisyxSBY0qunV44+lpa9Icy2KoQc=
-github.com/airbnb/lottie-web v5.12.2+incompatible/go.mod h1:nTss557UK9FGnp8QYlCMO29tjUHwbdAHG/DprbGfHGE=
 github.com/gethinode/hinode v0.22.5 h1:zpjSDgWQVbq4BjPduxwexQB18gawFeinzPkaRRTs2Tg=
 github.com/gethinode/hinode v0.22.5/go.mod h1:hsskrlBRnTbpCjrDtGbK8C1VYGML7ezHtCDGDiYL2mQ=
-github.com/gethinode/mod-flexsearch v1.8.1 h1:xwPvmmxd8Tdyxp8/rnd9KRGqIDtZs/YwAQJ1i9oQMiM=
-github.com/gethinode/mod-flexsearch v1.8.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
-github.com/gethinode/mod-fontawesome v1.8.0 h1:YEuCmvCdzcemF1eFK35Wnp1asKKO3/xbxGArnjq6PRY=
-github.com/gethinode/mod-fontawesome v1.8.0/go.mod h1:uvuC2YL8mdXNp6NRzFOu4TWsHvtY9AZ8YxJkF23/M/8=
-github.com/gethinode/mod-leaflet v0.4.0 h1:Xc6c1UTf4m1saQLFfFWT5sEpwj25xVGuS8csGC82UUI=
-github.com/gethinode/mod-leaflet v0.4.0/go.mod h1:yr+bUKAstifdB16mbYh69OayAmgPOlNUubAmVn5eL2M=
-github.com/gethinode/mod-lottie v1.4.1 h1:RzCjYsxFPqyBsYAcdPeUP0rvF+hD9eEl7NrxuaRiKQQ=
-github.com/gethinode/mod-lottie v1.4.1/go.mod h1:QjKlEmYbekrNGwa9EdFlPcXxwWWcraJUQ6xIL+syA60=
-github.com/gethinode/mod-utils v1.0.2 h1:0b3i+/bBHY1Td9N6khDbL1nf3d5HGc4QzI4BbEWHoU4=
-github.com/gethinode/mod-utils v1.0.2/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
-github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=
-github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
-github.com/twbs/bootstrap v5.3.2+incompatible h1:tuiO5acc6xnZUR77Sbi5aKWXxjYxbmsSbJwYrhAKoQQ=
-github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
+github.com/gethinode/mod-cookieyes v1.0.2 h1:WL9sjpYKjkV+jRKIrm6H82UpthQjFksvKGptW6HD/QU=
+github.com/gethinode/mod-cookieyes v1.0.2/go.mod h1:VrBUKm5apop6KIb+R8eRqvlf3AAPnv5aMajL0RorIjY=
+github.com/gethinode/mod-cookieyes/v2 v2.0.3 h1:o5PAAOjx8baRcSkhTAQuZ+hX9cK8oWjeC3sYxt1DT2c=
+github.com/gethinode/mod-cookieyes/v2 v2.0.4 h1:QgYSD3S23351e7xEeQb+Mon+e+I6RbnnrTyvpxBST1A=
+github.com/gethinode/mod-cookieyes/v2 v2.0.4/go.mod h1:tULb7D7CoTycGUyL7ryqHJKaX11XuL2SN+XwP7/DI0Y=
+github.com/gethinode/mod-cookieyes/v2 v2.1.2 h1:hzGCbRbpNAVkLr+jFWpAQaXHG0lgK+KgIpaZYsI1J+U=
+github.com/gethinode/mod-cookieyes/v2 v2.1.2/go.mod h1:tULb7D7CoTycGUyL7ryqHJKaX11XuL2SN+XwP7/DI0Y=

exampleSite/hugo_stats.json

@@ -3,8 +3,8 @@
     "tags": [
       "a",
       "abbr",
+      "annotation",
       "body",
-      "br",
       "button",
       "code",
       "div",
@@ -15,18 +15,28 @@
       "form",
       "h2",
       "h3",
-      "h5",
       "head",
       "hr",
       "html",
       "i",
+      "iframe",
       "img",
       "input",
       "label",
       "li",
       "link",
       "mark",
+      "math",
       "meta",
+      "mfrac",
+      "mi",
+      "mn",
+      "mo",
+      "mrow",
+      "mspace",
+      "msqrt",
+      "msub",
+      "msup",
       "nav",
       "noscript",
       "ol",
@@ -34,12 +44,14 @@
       "path",
       "pre",
       "script",
+      "semantics",
       "small",
       "span",
       "strong",
       "sub",
       "sup",
       "svg",
+      "symbol",
       "table",
       "tbody",
       "td",
@@ -103,11 +115,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",
@@ -127,6 +142,8 @@
       "carousel-item",
       "checkbox",
       "chroma",
+      "cky-audit-table-element",
+      "cky-banner-element",
       "col",
       "col-10",
       "col-12",
@@ -134,22 +151,24 @@
       "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",
+      "col-md-6",
       "col-md-8",
       "col-md-9",
       "col-md-auto",
       "col-sm-12",
       "col-sm-3",
       "col-sm-6",
+      "col-sm-9",
+      "col-xl-10",
+      "col-xl-2",
       "collapse",
       "collapsed",
       "container",
@@ -170,6 +189,7 @@
       "d-none-light",
       "d-sm-block",
       "d-sm-none",
+      "data-table",
       "display-1",
       "display-4",
       "dropdown",
@@ -179,7 +199,6 @@
       "dropdown-menu-end",
       "dropdown-toggle",
       "emphasis",
-      "emphasis-dark",
       "end-0",
       "fa",
       "fa-10x",
@@ -225,12 +244,15 @@
       "flex-fill",
       "flex-grow-1",
       "flex-md-grow-0",
+      "flex-nowrap",
+      "flex-row",
       "font-monospace",
       "footer",
       "form-control",
       "fs-3",
       "fs-5",
       "fs-6",
+      "fs-lg-5",
       "fs-md-5",
       "fw-30",
       "fw-bold",
@@ -259,6 +281,7 @@
       "justify-content-center",
       "justify-content-end",
       "justify-content-start",
+      "katex",
       "label",
       "lead",
       "leaflet-map",
@@ -291,6 +314,7 @@
       "mt-4",
       "mt-5",
       "mt-auto",
+      "mt-md-0",
       "multi-docs-collapse-15",
       "multi-file-collapse-1",
       "mx-auto",
@@ -320,11 +344,6 @@
       "navbar-toggler",
       "next",
       "no-js",
-      "offcanvas",
-      "offcanvas-body",
-      "offcanvas-header",
-      "offcanvas-start",
-      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -381,6 +400,7 @@
       "row-cols-md-3",
       "row-cols-sm-2",
       "row-cols-sm-3",
+      "scrollbar-horizontal",
       "search",
       "search-input",
       "search-suggestions",
@@ -455,6 +475,7 @@
       "top-bar",
       "translate-middle",
       "translate-middle-y",
+      "video-embedded",
       "visually-hidden",
       "vr",
       "w-100",
@@ -482,7 +503,6 @@
       "body-file-collapse-1",
       "bouton",
       "breadcrumb",
-      "btn-webshare",
       "button",
       "button-group",
       "card",
@@ -496,10 +516,43 @@
       "collapse",
       "collapse-1",
       "command-prompt",
+      "cookies-etc",
+      "custom-activity",
+      "data-tables",
       "docs",
       "documentation",
       "example",
       "exemple",
+      "fa-face-frown",
+      "fa-square-check",
+      "fab-bootstrap",
+      "fab-docker",
+      "fab-facebook",
+      "fab-github",
+      "fab-linkedin",
+      "fab-medium",
+      "fab-whatsapp",
+      "fab-x-twitter",
+      "fas-angle-left",
+      "fas-angle-right",
+      "fas-angles-left",
+      "fas-angles-right",
+      "fas-arrow-left",
+      "fas-arrow-right",
+      "fas-circle-check",
+      "fas-code",
+      "fas-ellipsis",
+      "fas-globe",
+      "fas-heart",
+      "fas-house",
+      "fas-link",
+      "fas-magnifying-glass",
+      "fas-moon",
+      "fas-rocket",
+      "fas-share-nodes",
+      "fas-sort",
+      "fas-sun",
+      "fas-up-right-from-square",
       "fichier",
       "fil-dariane",
       "file",
@@ -509,6 +562,8 @@
       "formule-katex",
       "groupe-de-boutons",
       "groupe-de-cartes",
+      "how-do-we-use-cookies",
+      "how-we-share-your-information",
       "icon",
       "image",
       "imagekitio",
@@ -516,20 +571,22 @@
       "indicateur-de-chargement",
       "infobulle",
       "invite-de-commandes",
+      "language-selector",
       "leaflet-map-0",
       "lien",
       "link",
       "lottie-animation-0",
+      "manage-cookie-preferences",
       "map",
       "mark",
       "nav",
-      "nav-0",
       "nav-0-0",
       "nav-0-1",
       "nav-0-2",
       "nav-0-btn-0",
       "nav-0-btn-1",
       "nav-0-btn-2",
+      "nav-nav-0",
       "navbar",
       "navbar-0-collapse",
       "navbar-mode",
@@ -537,8 +594,6 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
-      "offcanvas-label",
-      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",
@@ -546,10 +601,12 @@
       "publication",
       "release",
       "réduire",
+      "security",
       "spinner",
       "sub",
       "sup",
       "table",
+      "third-party-links--use-of-your-information",
       "timeline",
       "toast",
       "toast-container",
@@ -558,7 +615,11 @@
       "toast-example-2",
       "toast-message-email-4",
       "toc-collapse",
-      "tooltip"
+      "tooltip",
+      "types-of-cookies-we-use",
+      "video",
+      "what-are-cookies",
+      "your-rights"
     ]
   }
 }

exampleSite/layouts/_default/baseof.html

@@ -0,0 +1,80 @@
+{{- /* Set version-aware sidebar menu */ -}}
+{{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
+{{- $.Scratch.Set "version" $version -}}
+{{ with partial "utilities/GetMenu" (dict "page" . "version" $version) }}{{ $.Scratch.Set "sidebar" . }}{{ end }}
+
+{{- /* Validate if current version is latest */ -}}
+{{- if and site.Params.docs.checkVersion $version -}}
+    {{- if ne $version "latest" -}}
+        {{- if partial "utilities/IsOlder" (dict "current" $version) -}}
+            {{- $.Scratch.Set "pageAlertMsg" (T "newerVersionAlert" site.Title) -}}
+            {{- $.Scratch.Set "pageAlertURL" (or site.Params.docs.latestURL site.baseURL) -}}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
+
+{{- /* Initialize module configuration */ -}}
+{{- $modules := partialCached "utilities/InitModules.html" . -}}
+{{- $.Scratch.Set "modules" $modules -}}
+
+{{- $fullCover := or (or (and .IsHome .Site.Params.home.fullCover) .Page.Params.fullCover) .Site.Params.main.footerBelowFold }}
+{{- $.Scratch.Set "fullCover" $fullCover -}}
+
+{{- /* Define section headings */ -}}
+{{- $loading := "" -}}
+{{- if $fullCover }}{{ $loading = .Site.Params.main.loading }}{{ end -}}
+{{ $sections := partial "utilities/GetSections.html" (dict "page" . "loading" $loading) }}
+{{- $.Scratch.Set "sections" $sections -}}
+
+{{- /* Define main breakpoint */ -}}
+{{- $.Scratch.Set "breakpoint" (partialCached "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>
+        {{- partial "footer/scripts.html" (dict "page" . "type" "critical") -}}
+        {{ block "head" . }}{{ end -}}
+    </head>
+
+    <body>
+        <div class="d-flex flex-column min-vh-100">
+            <div class="d-flex flex-column {{ if $fullCover }} fullscreen{{ end }}{{ if .IsHome }} {{ .Site.Params.home.style }}{{ end }}">
+                {{- partial "assets/navbar.html" (dict
+                    "page" .
+                    "fixed" site.Params.navigation.fixed
+                    "overlay" site.Params.navigation.overlay
+                    "overlayMode" site.Params.navigation.overlayMode
+                    "color" site.Params.navigation.color
+                    "style" (default "light" site.Params.navigation.style)
+                    "size" (default "md" site.Params.navigation.size))
+                -}}
+                <div class="main-content">
+                    {{ block "featured" . }}{{ end -}}
+                </div>
+                {{ if .Site.Params.main.footerBelowFold }}
+                    {{ block "main" . }}{{ end -}}
+                {{ end }}
+            </div>
+
+            {{ if not .Site.Params.main.footerBelowFold }}
+                {{ block "main" . }}{{ end -}}
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            {{ end }}
+        </div>
+
+        {{ if .Site.Params.main.footerBelowFold }}
+            {{- partial "footer/social.html" . -}}
+            {{- partial "footer/footer.html" . -}}
+        {{ end }}
+
+        {{- partial "footer/toast-container.html" . -}}
+        {{- partial "assets/symbols.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "page" .) -}}
+        {{- partial "footer/scripts.html" (dict "page" . "type" "optional") -}}
+    </body>
+</html>

exampleSite/layouts/partials/footer/footer.html

@@ -0,0 +1,15 @@
+<footer class="container-fluid footer text-center p-3">
+    <div class="container-xxl text-center">
+        <small>
+            {{- $copyright := printf "%s © %s %s %s." (T "copyright") (dateFormat "2006" now) .Site.Title (T "rights") }}
+            {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
+            {{ .Site.Params.footer.license | safeHTML }} |
+            {{ partial "assets/link.html" (dict "destination" "/en/privacy" "text" (T "privacy") "class" "link-bg-footer" "page" .Page) }} |
+            {{ partial "assets/link.html" (dict "destination" "/en/cookies" "text" (T "cookies") "class" "link-bg-footer" "page" .Page) }} |
+            {{ if .Site.Params.main.endorse }}
+                {{ $link := partial "assets/link.html" (dict "destination" (index site.Params.links "hinode") "text" "Hinode" "class" "link-bg-footer" "page" .Page) }}
+                {{ T "poweredBy" $link | safeHTML }}
+            {{ end }}
+        </small>
+    </div>
+</footer>

go.mod

@@ -4,13 +4,16 @@ go 1.19
 
 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
-	github.com/gethinode/mod-bootstrap v1.3.0 // indirect
-	github.com/gethinode/mod-flexsearch v1.12.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.9.0 // indirect
-	github.com/gethinode/mod-katex v1.1.0 // indirect
-	github.com/gethinode/mod-leaflet v1.1.0 // indirect
-	github.com/gethinode/mod-lottie v1.5.4 // indirect
-	github.com/gethinode/mod-utils/v2 v2.3.7 // indirect
-	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
+	github.com/gethinode/mod-bootstrap v1.3.1 // indirect
+	github.com/gethinode/mod-csp v1.0.3 // indirect
+	github.com/gethinode/mod-flexsearch/v2 v2.0.2 // indirect
+	github.com/gethinode/mod-fontawesome v1.10.0 // indirect
+	github.com/gethinode/mod-google-analytics v1.1.3 // indirect
+	github.com/gethinode/mod-katex v1.1.2 // indirect
+	github.com/gethinode/mod-leaflet v1.2.0 // indirect
+	github.com/gethinode/mod-lottie v1.5.11 // indirect
+	github.com/gethinode/mod-simple-datatables v1.0.14 // indirect
+	github.com/gethinode/mod-utils/v2 v2.8.3 // indirect
+	github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )

go.sum

@@ -22,6 +22,16 @@ github.com/gethinode/mod-bootstrap v1.2.8 h1:kIKSO6qqE8xA0KQC5s6kkEv5UDc8oT17Hal
 github.com/gethinode/mod-bootstrap v1.2.8/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-bootstrap v1.3.0 h1:UxNmXgXo7gA8C8z1ar47+tSccmKYpaYBBN+txB0pwBk=
 github.com/gethinode/mod-bootstrap v1.3.0/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.3.1 h1:ZUX72St0WZ5tyXpEPBJlayX/dmCH3cGErzsozkUKCok=
+github.com/gethinode/mod-bootstrap v1.3.1/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-csp v1.0.0 h1:Obp0MVMBjIPZbKDh6Ejl5pImDG7yERMLf2or9UVnwPA=
+github.com/gethinode/mod-csp v1.0.0/go.mod h1:Nb22QMicoUHgZQUKP5TCgVrSI8K3KU7jLuLBShmotjg=
+github.com/gethinode/mod-csp v1.0.1 h1:IUUwPc41UNw7DAFuJ75nNPzhkPExenxXU7susdLaxdQ=
+github.com/gethinode/mod-csp v1.0.1/go.mod h1:Nb22QMicoUHgZQUKP5TCgVrSI8K3KU7jLuLBShmotjg=
+github.com/gethinode/mod-csp v1.0.2 h1:KX8EeoCGbHhGSo5r0YIa9BmPZ6S6v7L9CChTejREkK4=
+github.com/gethinode/mod-csp v1.0.2/go.mod h1:Nb22QMicoUHgZQUKP5TCgVrSI8K3KU7jLuLBShmotjg=
+github.com/gethinode/mod-csp v1.0.3 h1:tRmnuVZ3UpCc9HR8qsAwbU0OJ/UsNVSbse0SZuwGcCg=
+github.com/gethinode/mod-csp v1.0.3/go.mod h1:Nb22QMicoUHgZQUKP5TCgVrSI8K3KU7jLuLBShmotjg=
 github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
 github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
@@ -68,6 +78,12 @@ github.com/gethinode/mod-flexsearch v1.11.3 h1:ykxpUg8M4vr1C4QzxJOPGt+1ZmPAD/gOC
 github.com/gethinode/mod-flexsearch v1.11.3/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch v1.12.0 h1:zg1IHvc8VO9WEtQuQnuG6HeWFNByvyqC9JYWDtpsP6s=
 github.com/gethinode/mod-flexsearch v1.12.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.12.1 h1:clkGUWaNPe9Dt/66Apy7oH9NwVQfnD6OpGSLffeC9sY=
+github.com/gethinode/mod-flexsearch v1.12.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch/v2 v2.0.1 h1:5unGUSb1tX1LBtKygnLfdt7CnVJuFKSt6VXiKRxdojc=
+github.com/gethinode/mod-flexsearch/v2 v2.0.1/go.mod h1:d7MMkVlz0l6cEk76e0mkveEsDxGfu5Sv+HUIhoGguhE=
+github.com/gethinode/mod-flexsearch/v2 v2.0.2 h1:5FkLbjORwKvK544H/yaAltyIB7eptRPxxh5VcfDDeqM=
+github.com/gethinode/mod-flexsearch/v2 v2.0.2/go.mod h1:d7MMkVlz0l6cEk76e0mkveEsDxGfu5Sv+HUIhoGguhE=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -108,6 +124,24 @@ github.com/gethinode/mod-fontawesome v1.8.2 h1:LAzLytyh9c9gLzBWMju6Gtp3uEojhBQEY
 github.com/gethinode/mod-fontawesome v1.8.2/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
 github.com/gethinode/mod-fontawesome v1.9.0 h1:xqUB8AnezMHAt8lye4ksqvmHSVPCOkiHsHGUbqNoeP0=
 github.com/gethinode/mod-fontawesome v1.9.0/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.9.1 h1:cQk84vriqffM4fuUUoM9j3SSD+3ppeW2j4ta7AiToMU=
+github.com/gethinode/mod-fontawesome v1.9.1/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.10.0 h1:Izs2AKc+YVBa1TywcH54OKLTNCUMXRoFIqOs+n0FgOo=
+github.com/gethinode/mod-fontawesome v1.10.0/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-google-analytics v1.0.0 h1:fly42RQ69bdyJe8WFefsBIo7WMIXkd3wZn32kyAr4h4=
+github.com/gethinode/mod-google-analytics v1.0.0/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.0.1 h1:zbmOdnAhhFCA7qWw7fnR46biWhqW2r06sIaTWyhB5R0=
+github.com/gethinode/mod-google-analytics v1.0.1/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.0.2 h1:ljrAYdAPqiQg6rdnL6Je8zLK6mhlXoTGJ/vGtIUpX+w=
+github.com/gethinode/mod-google-analytics v1.0.2/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.0.3 h1:QUm4AeBR6D9cLx26F6Cy5qQvQe/19c2wTJAqxmCfAq4=
+github.com/gethinode/mod-google-analytics v1.0.3/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.1.1 h1:XzMXd6nBDl5Lj1Q5pd8MWtE87FI/vRCsUAkAvfuXDxE=
+github.com/gethinode/mod-google-analytics v1.1.1/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.1.2 h1:mcoqaRRorut+PxYxJnOEMfKIlVIIOd6vxKhuEYTwFzw=
+github.com/gethinode/mod-google-analytics v1.1.2/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
+github.com/gethinode/mod-google-analytics v1.1.3 h1:24qxV5vKIex3zSdow+5r0o8rox1lrO31oGi0/XusBy4=
+github.com/gethinode/mod-google-analytics v1.1.3/go.mod h1:dl628cFozpCvoIMCiV7ujzQipjxcm3eatXrSfLPWNII=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
@@ -128,6 +162,10 @@ github.com/gethinode/mod-katex v1.0.9 h1:cCJoR28tZwkDvXps17o9Jwfe3aQQAZ3Rxk0jCNR
 github.com/gethinode/mod-katex v1.0.9/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.1.0 h1:PxST3HPUt6F2X/xKakTVeTkwWqCtEr53K1vYEOyQu3I=
 github.com/gethinode/mod-katex v1.1.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.1.1 h1:z8+mfVI6UTWcfpQMVPIzxQzt6Lp9BcmXxSOILQ84qFg=
+github.com/gethinode/mod-katex v1.1.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.1.2 h1:TbeVIWeG5TqldlVxpM1upOWj11RljXy4fhpOQIwOnS4=
+github.com/gethinode/mod-katex v1.1.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
 github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
@@ -146,6 +184,10 @@ github.com/gethinode/mod-leaflet v1.0.1 h1:L4Coe6HTD9O0Txs1S8AtVg+6/TEneSF9i6fJK
 github.com/gethinode/mod-leaflet v1.0.1/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-leaflet v1.1.0 h1:FXzPCic5XmUluxQ6e7LYUhhLnxuQOBwry8qjG9k30UY=
 github.com/gethinode/mod-leaflet v1.1.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.1.1 h1:AIHR4k8SjmeoZxtjLgSS6/N3jKeZNZGdZTgu/7MwP4c=
+github.com/gethinode/mod-leaflet v1.1.1/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.2.0 h1:5q5LHmGNi9N4cdRDCsl/6oI8vY3oQ2ogNUjP3NCnk4Y=
+github.com/gethinode/mod-leaflet v1.2.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
 github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
 github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
@@ -182,6 +224,44 @@ github.com/gethinode/mod-lottie v1.5.3 h1:fvCjCoZoCEhY2aou30oEsEo6N4tVSI0ijFyXS3
 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-lottie v1.5.6 h1:dxz5nmD0XXEt/DAOc1s5fIPynj5bhzDL32EEwLFCSmk=
+github.com/gethinode/mod-lottie v1.5.6/go.mod h1:VTvBxD8VokICwnEqM0VUZFZHBYxLf4/grDFQyEh1DL0=
+github.com/gethinode/mod-lottie v1.5.7 h1:hcf04kmKv7xrI2byxtgHwkScYIHfP9aquInHNZP+qbk=
+github.com/gethinode/mod-lottie v1.5.7/go.mod h1:rhWg+MSSnWmqHKNEViE/9/78RjQD6uWWFASgjvFjgyo=
+github.com/gethinode/mod-lottie v1.5.8 h1:glg5HcjOBkFt5MoF7p24NN+RzctExPQUDXvdhPx9u6I=
+github.com/gethinode/mod-lottie v1.5.8/go.mod h1:Z/FlAcCJWYI1Z9tQnL0yRN4lqhyZl9CqYpfJUPVDaGc=
+github.com/gethinode/mod-lottie v1.5.9 h1:1MFsq8pO7s4RXu1sA0z75xdp63FPdJ6ar9OhEieDSj8=
+github.com/gethinode/mod-lottie v1.5.9/go.mod h1:TA1rPRwSilT5mXUakNSVlXNrgTpE87mUOB/fdunAdA0=
+github.com/gethinode/mod-lottie v1.5.10 h1:tYFgk74T9zWy2FRkfkRI+8QVQy6lnuABnTeWQ8nUX5w=
+github.com/gethinode/mod-lottie v1.5.10/go.mod h1:L7NpvCAm04R59GSAAm/UFoDCs/6UtrIC5zQEjgQSr4k=
+github.com/gethinode/mod-lottie v1.5.11 h1:xhxBPDS0iyUY+C1ANaD5EeQV7fO1FG0wMoCjgrCMi/0=
+github.com/gethinode/mod-lottie v1.5.11/go.mod h1:6FKqk8c+Jkbk2udCxUKVLF1K1wrGwthPsOvRzeoPXRQ=
+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-simple-datatables v1.0.3 h1:JL2nBlEHWMmkE7EZrpfpmzka47dklJUh23/xKJkOQoI=
+github.com/gethinode/mod-simple-datatables v1.0.3/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
+github.com/gethinode/mod-simple-datatables v1.0.5 h1:2Aa4k1Bd1WEYHbskFQj+1X35BB7abB8RXHE7Uk2N4pg=
+github.com/gethinode/mod-simple-datatables v1.0.5/go.mod h1:mmrcvAJU2i3SMU56VmQ5PW43uDXBcsJKcZwCHrvl3Kc=
+github.com/gethinode/mod-simple-datatables v1.0.6 h1:voKiwLAfC7kfD+atv7ah0sOf8OcPRyxEB/Q92gx1d00=
+github.com/gethinode/mod-simple-datatables v1.0.6/go.mod h1:Y7AzIYAWpzDKLvH96eqBA/Gs3jompWCgxadLuoKZ/rc=
+github.com/gethinode/mod-simple-datatables v1.0.7 h1:pfxWhgmn/njJcynNIDnUyeOBW0tsy2E4TP21sEYsqRs=
+github.com/gethinode/mod-simple-datatables v1.0.7/go.mod h1:Y7AzIYAWpzDKLvH96eqBA/Gs3jompWCgxadLuoKZ/rc=
+github.com/gethinode/mod-simple-datatables v1.0.8 h1:J8hA+SXdTLaRNZwN70ZEyADn+VgNoAaxVDMXsMPTZBg=
+github.com/gethinode/mod-simple-datatables v1.0.8/go.mod h1:RsTHWAt1J9/m7kzhYNSJB7CDyk+8DrG+46/aFrP6KJw=
+github.com/gethinode/mod-simple-datatables v1.0.9 h1:8OnpY/axFkgxJ598DHW4nDtxsCYmgTakAG4ZC2wRS3A=
+github.com/gethinode/mod-simple-datatables v1.0.9/go.mod h1:rgQWdDZ6lTR9+08dGY1zBDLZI/UneKPufakAK20+lmI=
+github.com/gethinode/mod-simple-datatables v1.0.10 h1:/nYy4oCgooUJhTBgLdQzMnJEjolkD+dp2nkfLNT9Klg=
+github.com/gethinode/mod-simple-datatables v1.0.10/go.mod h1:rgQWdDZ6lTR9+08dGY1zBDLZI/UneKPufakAK20+lmI=
+github.com/gethinode/mod-simple-datatables v1.0.12 h1:myyVp1ctQA6j+5UTWcDwQmy8ipXdjs8T+qpTpRPBPII=
+github.com/gethinode/mod-simple-datatables v1.0.12/go.mod h1:QuH7wz1igohzCgL76xI1960mFxPPrqgvGtLwR/0cFyQ=
+github.com/gethinode/mod-simple-datatables v1.0.13 h1:3GTn46Zh56SFzCUP7CUSrmp/ZoiaVG19q4xdObSx6Pc=
+github.com/gethinode/mod-simple-datatables v1.0.13/go.mod h1:a2qIdYegX5gBubGbspuHv/2UA/8O89oUG/U5hd7jLK8=
+github.com/gethinode/mod-simple-datatables v1.0.14 h1:332WtbaQtTm7VP0b7zYfpogTBcOEetkJrNd01K4d/JE=
+github.com/gethinode/mod-simple-datatables v1.0.14/go.mod h1:mP3yjAdVE1G6JHfv8VVsRmvaPlPwddXknI675AuVs2I=
 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=
@@ -222,12 +302,38 @@ github.com/gethinode/mod-utils/v2 v2.3.6 h1:Ta+WKc83sK9ZROKmUwS4pA32Qm0bQqoMmWHE
 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/gethinode/mod-utils/v2 v2.4.0 h1:mmG4hWaeA4krAg933pibH+TrjFmPHkAi/DUbe3SM38I=
+github.com/gethinode/mod-utils/v2 v2.4.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.5.0 h1:9QboNU9KTpmJDS9JBjxavbknLVBJilocqo5KhC2FdME=
+github.com/gethinode/mod-utils/v2 v2.5.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.5.2 h1:URGTpJo0dN4/oF2yL6o2d2pkcSlG1F0hgIF9UqpIs/E=
+github.com/gethinode/mod-utils/v2 v2.5.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.6.0 h1:r7l/E6fbPZHnjFyJY4T/xzekd7Xp3czNVCMgKoKR8wc=
+github.com/gethinode/mod-utils/v2 v2.6.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.7.0 h1:5CKygjsc7X4dFtb90ihWyDVvUp2iqoJE8C7M+jeWYus=
+github.com/gethinode/mod-utils/v2 v2.7.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.8.0 h1:BdB+onItuO29g5ZLEz/HEwq9c4xBEM4GGqQc3kQ++js=
+github.com/gethinode/mod-utils/v2 v2.8.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.8.1 h1:u7sFbgJ5sBEMYC/GwcMRyjRAd5NxTjBnbld5b0V5n98=
+github.com/gethinode/mod-utils/v2 v2.8.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.8.2 h1:rKndAMmRBSO5Cgoa/2CvF5XchDSvLvd4TYAbfbbQVhE=
+github.com/gethinode/mod-utils/v2 v2.8.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.8.3 h1:t1MJcIdFhYi0gCkm8f0DYZwyfq7pRdRc0eNpqZa11ic=
+github.com/gethinode/mod-utils/v2 v2.8.3/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=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 h1:H6xa5YyCHr78M+qqCApM4Kvz/eMA7pfGskYmfkEBRCA=
 github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
+github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87 h1:6PNbL0/LxO8Xl8MZSe5uvCidYNpFTz9nlWTqj2qdlzA=
+github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/twbs/bootstrap v5.3.2+incompatible h1:tuiO5acc6xnZUR77Sbi5aKWXxjYxbmsSbJwYrhAKoQQ=
 github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
 github.com/twbs/bootstrap v5.3.3+incompatible h1:goFoqinzdHfkeegpFP7pvhbd0g+A3O2hbU3XCjuNrEQ=

hugo_stats.json

@@ -1,179 +1,7 @@
 {
   "htmlElements": {
-    "tags": [
-      "a",
-      "body",
-      "button",
-      "div",
-      "footer",
-      "form",
-      "head",
-      "html",
-      "img",
-      "input",
-      "label",
-      "li",
-      "link",
-      "meta",
-      "nav",
-      "ol",
-      "p",
-      "path",
-      "script",
-      "small",
-      "span",
-      "strong",
-      "svg",
-      "title",
-      "ul"
-    ],
-    "classes": [
-      "active",
-      "align-items-center",
-      "align-self-center",
-      "align-self-end",
-      "ball",
-      "bg-body",
-      "bg-opacity-10",
-      "bg-primary",
-      "bottom-0",
-      "bottom-bar",
-      "breadcrumb",
-      "breadcrumb-item",
-      "btn",
-      "btn-close",
-      "btn-primary",
-      "checkbox",
-      "col",
-      "col-12",
-      "col-6",
-      "col-md-2",
-      "col-md-3",
-      "col-md-4",
-      "col-md-8",
-      "col-md-9",
-      "col-sm-12",
-      "collapse",
-      "collapsed",
-      "container-fluid",
-      "container-xxl",
-      "d-flex",
-      "d-inline",
-      "d-md-block",
-      "d-none",
-      "display-1",
-      "display-4",
-      "emphasis",
-      "end-0",
-      "fa",
-      "fa-10x",
-      "fa-2x",
-      "fa-book-open",
-      "fa-ellipsis",
-      "fa-face-frown",
-      "fa-fw",
-      "fa-github",
-      "fa-linkedin",
-      "fa-medium",
-      "fa-moon",
-      "fa-sun",
-      "fab",
-      "fas",
-      "fixed-top",
-      "flex-column",
-      "flex-fill",
-      "footer",
-      "form-control",
-      "fs-3",
-      "fs-5",
-      "fw-30",
-      "fw-bold",
-      "hstack",
-      "img-fluid",
-      "img-wrap",
-      "invisible",
-      "is-search",
-      "justify-content-center",
-      "justify-content-end",
-      "justify-content-start",
-      "label",
-      "link-bg-footer",
-      "link-secondary",
-      "main-content",
-      "main-nav-toggler",
-      "me-auto",
-      "middle-bar",
-      "min-vh-100",
-      "mode-switch",
-      "ms-auto",
-      "ms-md-3",
-      "mt-3",
-      "mt-5",
-      "mx-auto",
-      "mx-md-0",
-      "my-auto",
-      "my-md-auto",
-      "nav-item",
-      "nav-link",
-      "navbar",
-      "navbar-brand",
-      "navbar-collapse",
-      "navbar-container",
-      "navbar-expand-md",
-      "navbar-fixed-top",
-      "navbar-mode-selector",
-      "navbar-nav",
-      "navbar-toggler",
-      "no-js",
-      "order-0",
-      "order-1",
-      "order-md-0",
-      "order-md-1",
-      "p-0",
-      "p-2",
-      "p-3",
-      "p-4",
-      "pb-4",
-      "pb-md-0",
-      "position-fixed",
-      "position-relative",
-      "ps-1",
-      "pt-4",
-      "pt-5",
-      "pt-md-3",
-      "px-4",
-      "px-xxl-0",
-      "py-3",
-      "rounded",
-      "row",
-      "row-cols-1",
-      "row-cols-2",
-      "row-cols-md-2",
-      "row-cols-sm-3",
-      "search",
-      "search-input",
-      "search-suggestions",
-      "shadow",
-      "svg-inline--fa",
-      "text-center",
-      "text-decoration-none",
-      "text-muted",
-      "text-secondary",
-      "text-sm-start",
-      "text-start",
-      "toast",
-      "toast-body",
-      "toast-container",
-      "toast-header",
-      "toggler-icon",
-      "top-bar"
-    ],
-    "ids": [
-      "navbar-0-collapse",
-      "navbar-mode",
-      "navbar-mode-checkbox",
-      "toast-container",
-      "toast-copied-code-message"
-    ]
+    "tags": null,
+    "classes": null,
+    "ids": null
   }
 }

i18n/de.yaml

@@ -23,12 +23,28 @@
   translation: "Artikel"
 - id: more
   translation: "Weitere {{ . }}"
+- id: emptyList
+  translation: "Keine weiteren Artikel gefunden"
+- id: emptyTags
+  translation: "Keine Schlagworte gefunden"
+- id: readMore
+  translation: "Weiterlesen"
+
+# Languages
+- id: lang_de
+  translation: "Deutsch"
+- id: lang_en
+  translation: "Englisch"
+- id: lang_nl
+  translation: "Niederländisch"
+- id: lang_fr
+  translation: "Französisch"
 
 # Sharing
 - id: shareLink
   translation: "Diese Seite teilen per {{ . }}"
 - id: shareSystem
-  translation: "Betriebssystem"
+  translation: "System"
 - id: copyToClipboard
   translation: "In die Zwischenablage kopieren"
 - id: copiedToClipboard
@@ -52,7 +68,7 @@
 
 # Navigation
 - id: colorMode
-  translation: "Thema umschalten"
+  translation: "Modus umschalten"
 - id: colorLight
   translation: "Light"
 - id: colorDark
@@ -76,7 +92,7 @@
 
 # Sidebar
 - id: toggleSidebar
-  translation: "Menünavigation anzuzeigen oder auszublenden"
+  translation: "Menünavigation anzeigen oder ausblenden"
 
 # Feature
 - id: addedFeature
@@ -110,6 +126,36 @@
 
 # Comments
 - id: show
-  translation: "Zeige"
+  translation: "Anzeigen"
 - id: comments
   translation: "Kommentare"
+
+# Arguments
+- id: name
+  translation: "Name"
+- id: type
+  translation: "Typ"
+- id: required
+  translation: "Erforderlich"
+- id: default
+  translation: "Standard"
+- id: comment
+  translation: "Kommentar"
+- id: supportedValues
+  translation: "Unterstützte Werte"
+
+# Alerts
+- id: caution
+  translation: Vorsicht
+- id: important
+  translation: Wichtig
+- id: note
+  translation: Hinweis
+- id: tip
+  translation: Tipp
+- id: warning
+  translation: Warnung
+
+# Image
+- id: image
+  translation: Bild

i18n/en.yaml

@@ -149,3 +149,19 @@
   translation: "Comment"
 - id: supportedValues
   translation: "Supported values"
+
+# Alerts
+- id: caution
+  translation: Caution
+- id: important
+  translation: Important
+- id: note
+  translation: Note
+- id: tip
+  translation: Tip
+- id: warning
+  translation: Warning
+
+# Image
+- id: image
+  translation: image

i18n/fr.yaml

@@ -149,3 +149,7 @@
   translation: "Commentaire"
 - id: supportedValues
   translation: "Valeurs supportées"
+
+# Image
+- id: image
+  translation: image

i18n/nl.yaml

@@ -148,3 +148,19 @@
   translation: "Toelichting"
 - id: supportedValues
   translation: "Toegestane waarden"
+
+# Alerts
+- id: caution
+  translation: Voorzichtig
+- id: important
+  translation: Belangrijk
+- id: note
+  translation: Opmerking
+- id: tip
+  translation: Tip
+- id: warning
+  translation: Waarschuwing
+
+# Image
+- id: image
+  translation: Bild

layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,31 @@
+{{/* Adapted from https://gohugo.io/render-hooks/blockquotes/#alerts */}}
+
+{{ $icons := dict
+    "caution" "fa hand"
+    "important" "fas exclamation"
+    "note" "fas circle-info"
+    "tip" "fa lightbulb"
+    "warning" "fas triangle-exclamation"
+}}
+
+{{ if eq .Type "alert" }}
+    {{ $alert := .AlertType }}
+    {{ $icon := (index $icons $alert) }}
+
+    <blockquote class="blockquote-alert blockquote-alert-{{ $alert }}">
+        <p class="blockquote-alert-heading">
+            {{ with $icon }} 
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" .)) }}
+                {{ or (i18n $alert) (title $alert) }}
+            {{ else }}
+                {{ title $alert }}
+                {{ warnf "Unsupported alert type: '%s'. See %s" $alert $.Position }}
+            {{ end }}
+        </p>
+    {{ trim .Text "\n\r" | safeHTML }}
+    </blockquote>
+{{ else }}
+    <blockquote class="blockquote">
+        {{ trim .Text "\n\r" | safeHTML }}
+    </blockquote>
+{{ end }}

layouts/_default/_markup/render-codeblock-math.html

@@ -0,0 +1,11 @@
+{{ with transform.ToMath .Inner (dict "displayMode" true) }}
+    {{ with .Err }}
+        {{ errorf "Failed to render KaTeX: %q. See %s" . $.Position }}
+    {{ else }}
+        {{ if $.Attributes.class }}
+            <div class="{{ $.Attributes.class }}">{{ . }}</div>
+        {{ else }}
+            {{ . }}
+        {{ end }}
+    {{ end }}
+{{ end }}

layouts/_default/_markup/render-heading.html

@@ -1,5 +1,12 @@
-{{ if site.Params.navigation.anchor }}
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}" aria-labelledby="{{ .Anchor | safeURL }}">{{- partial "assets/icon.html" (dict "icon" "fas link anchor") }}</a></h{{ .Level }}>
+{{ $text := trim .Text " \n\r" }}
+
+{{ if and site.Params.navigation.anchor $text }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">
+    {{- .Text | safeHTML -}}
+    <a href="#{{ .Anchor | safeURL }}" aria-labelledby="{{ .Anchor | safeURL }}">
+        {{- partial "assets/icon.html" (dict "icon" "fas link anchor") }}
+    </a>
+</h{{ .Level }}>
 {{ else }}
 <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
 {{ end }}

layouts/_default/_markup/render-image.html

@@ -0,0 +1,15 @@
+{{ partial "assets/image.html" (dict 
+    "url" .Destination
+    "page" .Page
+    "caption" .Title
+    "title" .Text 
+    "anchor" .Attributes.anchor
+    "class" .Attributes.class
+    "figclass" .Attributes.figclass
+    "loading" .Attributes.loading
+    "mode" .Attributes.mode
+    "plain" .Attributes.plain
+    "portrait" .Attributes.portrait
+    "ratio"  .Attributes.ratio
+    "wrapper" .Attributes.wrapper
+) }}

layouts/_default/_markup/render-link.html

@@ -0,0 +1,15 @@
+{{ if gt (findRE `^HAHAHUGO` .Destination 1) 0 }}
+    {{ errorf "Invalid markdown link destination, use '%s' syntax when using shortcodes as input. See '%s'" 
+        ("{{% %}}" | htmlUnescape)
+        .Page.File.Path
+    }}
+{{ else if not .Destination }}
+    {{ errorf "Missing markdown link destination,  see '%s'" .Page.File.Path }}
+{{ else }}
+    {{ partial "assets/link.html" (dict 
+        "destination" .Destination
+        "page" .Page
+        "text" .Text 
+        "title" .Title
+    ) }}
+{{- end }}

layouts/_default/_markup/render-passthrough.html

@@ -0,0 +1,13 @@
+{{ $opts := dict }}
+
+{{ if eq .Type "block" }}
+    {{ $opts = dict "displayMode" true }}
+{{ end }}
+
+{{ with transform.ToMath .Inner $opts }}
+    {{ with .Err }}
+        {{ errorf "Failed to render KaTeX: %q. See %s" . $.Position }}
+    {{ else }}
+        {{ . }}
+    {{ end }}
+{{ end }}

layouts/_default/_markup/render-table.html

@@ -0,0 +1,40 @@
+{{/* Adapted from https://gohugo.io/render-hooks/tables/ */}}
+
+<!-- Ensure presence of `.table` class attribute to trigger Bootstrap styling -->
+{{ $attr := .Attributes }}
+{{ $class := split $attr.class " " }}
+{{ if not (in $class "table") }}
+    {{ $attr = merge $attr (dict "class" (trim (delimit ($class | append "table") " ") " ")) }}
+{{ end }}
+
+{{ $align := dict "left" "start" "center" "center" "right" "end" }}
+
+<table
+  {{- range $k, $v := $attr }}
+    {{- if $v }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end }}>
+  <thead>
+    {{- range .THead }}
+      <tr>
+        {{- range . }}
+          <th {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
+            {{- .Text -}}
+          </th>
+        {{- end }}
+      </tr>
+    {{- end }}
+  </thead>
+  <tbody>
+    {{- range .TBody }}
+      <tr>
+        {{- range . }}
+          <td {{ with .Alignment }}class="text-{{ index $align . }}"{{ end }}>
+            {{- .Text -}}
+          </td>
+        {{- end }}
+      </tr>
+    {{- end }}
+  </tbody>
+</table>

layouts/_default/baseof.html

@@ -14,7 +14,7 @@
 {{- end -}}
 
 {{- /* Initialize module configuration */ -}}
-{{- $modules := partial "utilities/InitModules.html" (dict "page" .) -}}
+{{- $modules := partialCached "utilities/InitModules.html" . -}}
 {{- $.Scratch.Set "modules" $modules -}}
 
 {{- $fullCover := or (or (and .IsHome .Site.Params.home.fullCover) .Page.Params.fullCover) .Site.Params.main.footerBelowFold }}
@@ -27,7 +27,7 @@
 {{- $.Scratch.Set "sections" $sections -}}
 
 {{- /* Define main breakpoint */ -}}
-{{- $.Scratch.Set "breakpoint" (partial "utilities/GetBreakpoint.html") }}
+{{- $.Scratch.Set "breakpoint" (partialCached "utilities/GetBreakpoint.html" .) }}
 
 {{- /* Define base URL */ -}}
 {{ $lang := site.LanguageCode | default site.Language.Lang }}
@@ -36,11 +36,12 @@
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
+        {{- partial "footer/scripts.html" (dict "page" . "type" "critical") -}}
+        {{- partial "footer/scripts.html" (dict "page" . "type" "functional") -}}
         {{ block "head" . }}{{ end -}}
     </head>
 
     <body>
-        {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
         <div class="d-flex flex-column min-vh-100">
             <div class="d-flex flex-column {{ if $fullCover }} fullscreen{{ end }}{{ if .IsHome }} {{ .Site.Params.home.style }}{{ end }}">
                 {{- partial "assets/navbar.html" (dict
@@ -73,7 +74,8 @@
         {{ end }}
 
         {{- partial "footer/toast-container.html" . -}}
-        {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
-        {{- partial "footer/optional-scripts.html" . -}}
+        {{- partial "assets/symbols.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "page" .) -}}
+        {{- partial "footer/scripts.html" (dict "page" . "type" "optional") -}}
     </body>
 </html>

layouts/_default/single.html

@@ -1,10 +1,12 @@
 {{ define "main" -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-    {{ $sidebar := .Render "single/sidebar" }}
+    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
+    {{ $sidebar := "" }}
+    {{ if $hasSidebar }}{{ $sidebar = .Render "single/sidebar" }}{{ end }}
     {{ $toc := .Render "single/panel-toc" }}
 
     {{ with $sidebar }}
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ T "close" }}"></button>
@@ -16,7 +18,7 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if $sidebar -}}
+        {{ if $hasSidebar -}}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
                 <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}

layouts/_default/single/header.html

@@ -14,14 +14,16 @@
 
 {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
 {{ if ne $metadata "none" }}
+    <small class="text-body-secondary text-uppercase">
+        {{ if .Date }}
             {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
             {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-    <small class="text-body-secondary text-uppercase">
             {{ $datestr | i18n "postedOnDate" -}}
             {{ if eq $metadata "full" }}
                 {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }}
             {{ end }}
             &bull;
+        {{ end }}
         {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
         {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
     </small>

layouts/_default/single/sidebar.html

@@ -1,7 +1,5 @@
 {{- $menu := .Scratch.Get "sidebar" -}}
 {{- $version := .Scratch.Get "version" -}}
-{{ $sidebar := "" }}
-{{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
-{{ if and $menu $hasSidebar  }}
+{{ if $menu  }}
     {{ partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}
-{{ end }}
+{{ end -}}

layouts/alias.html

@@ -7,6 +7,11 @@
     <meta name="robots" content="noindex">
     <meta charset="utf-8">
     <noscript><meta http-equiv="refresh" content="0; url={{ .Permalink }}"></noscript>
+    {{ if site.Params.main.enableLanguageSelectionStorage }} 
+      {{- partial "footer/scripts.html" (dict "page" page "type" "critical") -}}
+      {{- partial "footer/scripts.html" (dict "page" page "type" "functional") -}}
+    {{ else }}
       <script src='{{ partial "utilities/GetStaticURL" (dict "url" "js/alias.js") }}'></script>
+    {{ end }}
   </head>
 </html>

layouts/partials/assets/adapters/cloudinary.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "north_west"
+    "Top" "north"
+    "TopRight" "north_east"
+    "Left" "west"
+    "Center" "center"
+    "Right" "east"
+    "BottomLeft" "south_west"
+    "Bottom" "south"
+    "BottomRight" "south_east"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/cloudinary.html] - Invalid arguments" -}}
@@ -20,24 +33,38 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c_fill" }}{{ else }}{{ $transform = "c_fit" }}{{ end }}
 {{ $element := "" }}
 
 <!-- Split path between upload dir and sub dir -->
-{{ $newdir := urls.JoinPath (index (split $dir "upload") 0) "upload" }}
-{{ $file = urls.JoinPath (index (split $dir "upload") 1) $file }}
-{{ $dir = $newdir }}
+{{ $dir = path.Clean (trim .dir "/") }}
+{{ $api := "image/upload" }}
+
+<!-- Define the account, optional API segment, and directory -->
+{{ $elements := split $dir "/" }}
+{{ $account := index $elements 0 }}
+{{ $operation := "" }}
+{{ if and (in (slice "image" "video") (index $elements 1)) (eq (index $elements 2) "upload") }}
+    {{ $api = delimit (slice | append (index $elements 1) | append (index $elements 2)) "/" }}
+    {{ $dir = delimit (after 3 $elements) "/" }}
+{{ else }}
+    {{ $dir = delimit (after 1 $elements) "/" }}
+{{ end }}
 
 <!-- Generate image URL -->
 {{ if not $error }}
-    {{ $operation := "" }}
     {{ if $format }}
         {{ $operation = printf "%s,h_%d,w_%d" $transform $height $width }}
         {{ $file = printf "%s.%s" (strings.TrimSuffix (path.Ext $file) $file) $format }}
     {{ else }}
         {{ $operation = printf "f_auto,%s,h_%d,w_%d" $transform $height $width }}
     {{ end }}
-    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,g_%s" $operation . }}
+    {{ end }}
+    {{- $element = partial "utilities/URLJoin.html" (dict "elements" (slice "https://" $host $account $api $operation $dir $file)) -}}
 {{ end }}
 
 {{ return $element }}

layouts/partials/assets/adapters/hugo.html

@@ -20,11 +20,12 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := .anchor | default "" }}
 {{ $element := "" }}
 {{ $absoluteURL := .absoluteURL }}
-{{ $url := urls.JoinPath $dir $file }}
+{{ $url := partial "utilities/URLJoin.html" (dict "elements" (slice $dir $file)) }}
 {{ if $host }}
-    {{ $url = urls.JoinPath "https://" $host $url }}
+    {{ $url = partial "utilities/URLJoin.html" (dict "elements" (slice "https://" $host $url)) }}
 {{ end }}
 
 <!-- Initialize image if needed, do not raise additional warnings -->
@@ -46,13 +47,20 @@
 {{ if not $error }}
     {{ $scaled := "" }}
     {{ if eq $transform "fill" }}
-        {{- $scaled = $img.Fill (printf "%dx%d %s" $width $height $format) -}}
+        {{- $scaled = $img.Fill (printf "%dx%d %s %s" $width $height $anchor $format) -}}
     {{ else }}
         {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
     {{ end }}
 
     {{- $clean := path.Ext $img.RelPermalink -}}
-    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%dx%d.%s" $width $height $format)) -}}
+    {{ $destination := "" }}
+    {{ if $anchor }}
+        {{ $destination = printf "-%dx%d-%s.%s" $width $height (lower $anchor) $format }}
+    {{ else }}
+        {{ $destination = printf "-%dx%d.%s" $width $height $format }}
+    {{ end }}
+
+    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean $destination) -}}
     {{- if $absoluteURL -}}
         {{- $element = $scaled.Permalink -}}
     {{- else -}}

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

@@ -22,9 +22,9 @@
 {{ 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) }}
+    {{ $element = partial "utilities/URLJoin.html" (dict "elements" (slice "https://ik.imagekit.io" $account $dir $file)) }}
 {{ else }}
-    {{ $element = urls.JoinPath (slice "https://" $host $dir $file) }}
+    {{ $element = partial "utilities/URLJoin.html" (dict "elements" (slice "https://" $host $dir $file)) }}
 {{ end }}
 
 {{ return $element }}

layouts/partials/assets/adapters/imagekit.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top_left"
+    "Top" "top"
+    "TopRight" "top_right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom_left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom_right"
+    "Smart" "auto"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imagekit.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "c-maintain_ratio" }}{{ else }}{{ $transform = "c-at_max" }}{{ end }}
 {{ $element := "" }}
 
@@ -31,7 +46,7 @@
 
 <!-- Split path between end point and image path -->
 {{ $newdir := printf "/%s" (index (split $dir "/") 1) }}
-{{ $file = urls.JoinPath (strings.TrimPrefix $newdir $dir) $file }}
+{{ $file = partial "utilities/URLJoin.html" (dict "elements" (slice (strings.TrimPrefix $newdir $dir) $file)) }}
 {{ $dir = $newdir }}
 
 <!-- Generate image URL -->
@@ -42,7 +57,10 @@
     {{ else }}
         {{ $operation = printf "tr:f-auto,%s,h-%d,w-%d" $transform $height $width }}
     {{ end }}
-    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+    {{ with $anchor }}
+        {{ $operation = printf "%s,fo-%s" $operation . }}
+    {{ end }}
+    {{- $element = partial "utilities/URLJoin.html" (dict "elements" (slice "https://" $host $dir $operation $file)) -}}
 {{ end }}
 
 {{ return $element }}

layouts/partials/assets/adapters/imgix.html

@@ -6,6 +6,19 @@
 
 {{ $error := false }}
 
+{{ $anchorMap := dict
+    "TopLeft" "top,left"
+    "Top" "top"
+    "TopRight" "top,right"
+    "Left" "left"
+    "Center" "center"
+    "Right" "right"
+    "BottomLeft" "bottom,left"
+    "Bottom" "bottom"
+    "BottomRight" "bottom,right"
+    "Smart" "faces,edges,center"
+}}
+
 <!-- Validate arguments -->
 {{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
     {{ errorf "partial [assets/adapter/imgix.html] - Invalid arguments" -}}
@@ -20,6 +33,8 @@
 {{ $transform := .transform }}
 {{ $height := .height }}
 {{ $width := .width }}
+{{ $anchor := "" }}
+{{ with .anchor }}{{ $anchor = index $anchorMap . }}{{ end }}
 {{ if eq $transform "fill" }}{{ $transform = "crop" }}{{ else }}{{ $transform = "max" }}{{ end }}
 {{ $element := "" }}
 
@@ -37,7 +52,10 @@
     {{ else }}
         {{ $operation = printf "f_auto&fit=%s&h=%d&w=%d" $transform $height $width }}
     {{ end }}
-    {{- $element = printf "%s?%s" (urls.JoinPath (slice "https://" $host $dir $file)) $operation -}}
+    {{ with $anchor }}
+        {{ $operation = printf "%s&crop=%s" $operation . }}
+    {{ end }}
+    {{- $element = printf "%s?%s" (partial "utilities/URLJoin.html" (dict "elements" (slice "https://" $host $dir $file))) $operation -}}
 {{ end }}
 
 {{ return $element }}

layouts/partials/assets/button.html

@@ -64,7 +64,7 @@
 {{- if $isExternal -}}
     {{- if $tab -}}
         {{- $target = "_blank" -}}
-        {{- $rel = "noopener noreferrer" -}}
+        {{- $rel = "noopener noreferrer nofollow" -}}
     {{- end -}}
 
     {{- if and $title $cue -}}
@@ -95,10 +95,10 @@
         {{- end -}}
         role="button"
         >
-        <div class="d-flex justify-content-{{ $justify }}">
-            <div class="my-auto">{{ $title | safeHTML }}</div>
-            {{- with $icon }}<div class="align-self-center{{ if $title }}{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon "spacing" false) }}</div>{{ end }}
-        </div>
+        <span class="d-flex justify-content-{{ $justify }}">
+            <span class="my-auto">{{ $title | safeHTML }}</span>
+            {{- with $icon }}<span class="align-self-center{{ if $title }}{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon "spacing" false) }}</span>{{ end }}
+        </span>
 
         {{- with $badge }}
             <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">

layouts/partials/assets/card-group.html

@@ -4,163 +4,181 @@
     Visit gethinode.com/license for more details.
 -->
 
-<!-- Validate arguments -->
-{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "card-group" "child" "card" "args" .) }}
-    {{- errorf "partial [assets/card-group.html] - Invalid arguments" -}}
+<!-- Define inline partials -->
+{{ define "partials/assets/style.html" }}
+	{{ $style := "" }}
+    {{ if gt (len .styles) 0 }}
+        {{ $def := index .styles (mod .index (len .styles)) }}
+        {{ $style = index $def .key }}
+    {{ end }}
+    {{ return ($style | default .default ) }}
 {{ end }}
 
-<!-- Initialize arguments and default values -->
-{{- $page := .page -}}
+<!-- Initialize arguments -->
+{{ $args := partial "utilities/InitArgs.html" (dict "structure" "card-group" "child" "card" "args" .) }}
+{{ if $args.err }}
+    {{ partial "utilities/LogErr.html" (dict 
+        "partial" "assets/card-group.html" 
+        "msg" "Invalid arguments"
+        "details" $args.errmsg
+        "file" page.File
+    )}}
+{{ end }}
+
+<!-- Initialize local variables -->
+{{ $list := $args.list }}
+{{- $class := $args.class -}}
+{{- $orientation := $args.orientation -}}
+{{ $cardWrapper := "" }}
+
 {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
-{{ $pages := .list }}
-{{ $cards := .cards }}
-{{- $paginate := .paginate | default false -}}
-{{- $moreURL := .href -}}
-{{- $moreTitle := .hrefTitle -}}
-{{- $gutter := .gutter | default 4 -}}
-{{- $separator := .separator | default false -}}
-{{- $class := .class -}}
-{{- $color := .color -}}
-{{- $padding := .padding -}}
-{{- $header := .header -}}
-{{- $footer := .footer -}}
-{{- $orientation := .orientation -}}
-{{- $ratio := .ratio -}}
-{{- $wrapper := .wrapper | default "p-0" -}}
-{{- $style := .style -}}
-{{- $align := .align -}}
-{{- $subtle := .subtle }}
-{{- $loading := .loading -}}
-{{- $button := .button -}}
-{{- $buttonLabel := .buttonLabel -}}
-{{- $buttonType := .buttonType -}}
-{{- $hook := .hook | default "assets/card.html" }}
+{{ $colsMap := dict
+    "auto" ""
+    "1" "row-cols-1"
+    "2" (printf "row-cols-1 row-cols-%s-1 row-cols-%s-2" $breakpoint.prev $breakpoint.current)
+    "3" (printf "row-cols-1 row-cols-%s-2 row-cols-%s-3" $breakpoint.prev $breakpoint.current)
+    "4" (printf "row-cols-1 row-cols-%s-2 row-cols-%s-4" $breakpoint.prev $breakpoint.current)
+    "5" (printf "row-cols-1 row-cols-%s-3 row-cols-%s-5" $breakpoint.prev $breakpoint.current)
+}}
+{{ $sizesMap := dict
+    "auto" "100vw"
+    "1" "100vw"
+    "2" (printf "(min-width: %s) 50vw, 100vw" $breakpoint.currentSize)
+    "3" (printf "(min-width: %s) 33.3vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
+    "4" (printf "(min-width: %s) 25vw, (min-width: %s) 50vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
+    "5" (printf "(min-width: %s) 20vw, (min-width: %s) 33.3vw, 100vw" $breakpoint.currentSize $breakpoint.prevSize)
+}}
 
-<!-- Override arguments -->
-{{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
+{{ if not $args.responsive }}
+    {{ $colsMap = dict  "auto" "" "1" "row-cols-1" "2" "row-cols-2" "3" "row-cols-3" "4" "row-cols-4" "5" "row-cols-5" }}
+    {{ $sizesMap = dict "auto" "100vw" "1" "100vw" "2" "50vw" "3" "33.3vw" "4" "25vw" "5" "20vw" }}
+{{ end }}
+
+<!-- Apply optional pagination -->
+{{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $list) }}
 {{ $paginator := "" }}
-{{ if and $isPages $paginate }}
-    {{ with .pagination }}
-        {{ $paginator = $page.Paginate $pages . }}
+{{ if and $isPages $args.paginate }}
+    {{ with $args.pagination }}
+        {{ $paginator = $args.page.Paginate $list . }}
     {{ else }}
-        {{ $paginator = $page.Paginate $pages }}
+        {{ $paginator = $args.page.Paginate $list }}
     {{ end }}
-    {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
+    {{ $list = first $paginator.PagerSize (after (mul (sub $paginator.PageNumber 1) $paginator.PagerSize) $list) }}
 {{ end }}
 
-{{ $list := slice }}
+<!-- Initialize list elements -->
+{{ $elements := slice }}
 {{ if $isPages }}
-    {{ range $index, $element := $pages }}
+    {{ range $index, $element := $list }}
         {{ $params := dict }}
         <!-- regular page -->
         {{- if and $element.RelPermalink $element.File -}}
             {{- $params = merge $params (dict "path" $element.File.Path) -}}
         <!-- headless page -->
         {{- else -}}
-            {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
+            {{- $thumbnail := "" -}}
+            {{ if reflect.IsMap $element.Params.Thumbnail }}{{ $thumbnail = $element.Params.Thumbnail.url }}{{ else }}{{ $thumbnail = $element.Params.Thumbnail }}{{ end }}
+            {{- $anchor := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.anchor) "") -}}
             {{- $params = merge $params (dict
                 "title" $element.Title
                 "href" $element.RelPermalink
+                "buttonLabel" $element.buttonLabel
                 "description" (partial "utilities/GetDescription.html" (dict "page" $element "raw" true))
                 "thumbnail" $thumbnail
+                "anchor" $anchor
                 "icon" $element.Params.icon
             ) -}}
         {{- end -}}
 
-        {{- $list = $list | append $params }}
+        {{- $elements = $elements | append $params }}
     {{ end }}
-{{ else if $pages }}
-    {{ $list = $list | append $pages }}
+{{ else if $list }}
+    {{ $elements = $elements | append $list }}
 {{ end }}
 
-{{- $count := len $list -}}
+<!-- Limit list to max elements -->
+{{- $count := len $elements -}}
 {{- $max := $count -}}
-{{- $max = math.Min (.max | default $count) $count -}}
-{{- $responsive := .responsive | default true -}}
-{{- $cols := string .cols | default "3" -}}
-
-{{- $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" }}
-    {{ 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 -}}
-
-{{- if not $paginate -}}
-    {{- $list = first $max $list -}}
+{{- $max = math.Min ($args.max | default $count) $count -}}
+{{- if not $args.paginate -}}
+    {{- $elements = first $max $elements -}}
 {{- end -}}
 
-{{- if and (eq $cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
+{{/* Initialize grid and layout */}}
+{{- $sizes := "100vw" }}
+{{- $colGrid := "" -}}
+{{ if not $args.scroll }}
+    {{ $colGrid = index $colsMap $args.cols }}
+    {{ $sizes = index $sizesMap $args.cols }}
+{{ else }}
+    {{ if in (slice "2" "3" "4" "5") $args.cols }}
+        {{ $sizes = replace (printf "%.1fvw" (div 100.0 (int $args.cols))) ".0" "" }}
+    {{ end }}
+{{ end }}
+
+{{- if and (eq $args.cols "1") (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
+
+{{ if not $args.spacer }}
+    {{ $class = printf "%s h-100" $class }}
+{{ end }}
 
 <!-- Main code -->
-<div class="container-fluid {{ $wrapper }}">
-    <div class="row {{ $colGrid }} g-{{ $gutter }}">
-        {{ range $index, $element := $list }}
+<div class="{{ $args.wrapper }}">
+    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0">
+        <div class="row g-{{ $args.gutter }} {{ if $args.scroll }}d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end }}
+        {{ if $args.bento }}{{ with $args.valign }}align-items-{{ . }}{{ end }}{{ else }}{{ $colGrid }}{{ end }}">
+            {{ range $index, $element := $elements }}
                 {{- $params := (dict
-                "class" (printf "h-100 %s" $class)
-                "color" $color
-                "footer" $footer
-                "header" $header
-                "loading" $loading
+                    "class" (printf " %s" $class)
+                    "color" $args.color
+                    "footer" $args.footer
+                    "body" $args.body
+                    "header" $args.header
+                    "loading" $args.loading
                     "sizes" $sizes
-                "orientation" $orientation
-                "padding" $padding
-                "ratio" $ratio
-                "subtle" $subtle
-                "style" $style
-                "align" $align
-                "button" $button
-                "buttonLabel" $buttonLabel
-                "buttonType" $buttonType
+                    "orientation" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "orientation" "default" $orientation))
+                    "padding" $args.padding
+                    "ratio" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "ratio" "default" $args.ratio))
+                    "portrait" (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "portrait" "default" $args.portrait))
+                    "subtle" $args.subtle
+                    "style" $args.style
+                    "align" $args.align
+                    "button" $args.button
+                    "buttonLabel" $element.buttonLabel
+                    "buttonType" $args.buttonType
+                    "iconRounded" $args.iconRounded
                 ) -}}
-            {{- $params = merge $params $element }}
+                {{- $params = merge $element $params }}
 
-            <div class="col">
-                {{- partial $hook $params -}}
+                {{ if $args.scroll }}
+                    {{ $width := (partial "assets/style.html" (dict "styles" $args.styles "index" $index "key" "width" "default" "3")) }}
+                    {{ $size := $args.cols }}
+                    {{ if and (gt $args.cols 1) (eq $width "6") }}{{ $size = sub (int $args.cols) 1 }}{{ end }}
+                    {{ $cardWrapper = printf "card-block card-block-%d" (int $size) }}
+                {{ end }}
+
+                <!--add col-$width -->
+                <div class="{{ with $cardWrapper }}{{ . }}{{ else }}col{{ end }}">
+                    {{ if $args.spacer }}<div class="spacer"></div>{{ end }}
+                    {{- partial $args.hook $params -}}
                 </div>
-            {{- if and (lt $index (sub $max 1)) $separator -}}
+                {{- if and (lt $index (sub $max 1)) $args.separator -}}
                     <div class="col d-block d-sm-none">
                         <hr>
                     </div>
                 {{- end -}}
             {{- end -}}
-        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
+            {{ if $args.cards }}{{- print $args.cards | safeHTML }}{{ end }}
+        </div>
     </div>
 
     {{ if $paginator }}
         {{- if gt $paginator.TotalPages 1 -}}
-            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
+            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $args.page "format" "terse") }}</div>
         {{- end -}} 
     {{ else }}
-        {{ if and (gt $count $max) $moreTitle }}
-            <a class="btn btn-outline-primary mt-4" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
+        {{ if and (gt $count $max) $args.hrefTitle }}
+            <a class="btn btn-outline-primary mt-4" href="{{ $args.href| safeURL }}" role="button">{{ $args.hrefTitle }}</a>
         {{ end }}
     {{ end }}
 </div>

layouts/partials/assets/card.html

@@ -11,15 +11,18 @@
 
 <!-- Initialize arguments and default values -->
 {{- $alt := .alt -}}
+{{- $wrapper := .wrapper -}}
 {{- $class := .class -}}
 {{- $color := .color -}}
 {{- $description := .description -}}
+{{- $body := .body | default "full" -}}
 {{- $footer := .footer | default "none" -}}
 {{- $gutter := .gutter | default "0" -}}
 {{- $header := .header | default "full" -}}
 {{- $href := .href -}}
 {{- $icon := .icon -}}
 {{- $iconStyle := "" -}}
+{{- $iconRounded := .iconRounded | default false -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
 {{- $sizes := .sizes | default "100vw" -}}
@@ -27,7 +30,9 @@
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := (string .padding) | default "auto" -}}
 {{- $ratio := .ratio -}}
+{{- $portrait := .portrait | default false -}}
 {{- $thumbnail := .thumbnail -}}
+{{- $anchor := .anchor | default "" -}}
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
@@ -46,17 +51,28 @@
 <!-- Override arguments -->
 {{- $page := "" }}
 {{- if .path }}
-    {{- $page = site.GetPage .path }}
-    {{- if not $page }}
-        {{- errorf "partial [assets/card.html] - Cannot find page: %s" .path -}}
+    {{ $page = partial "utilities/GetPage.html" (dict "url" .path "page" page) }}
+    {{ $validate := site.Params.main.internalLinks.validate | default true }}
+    {{- if and $validate (not $page) }}
+        {{ if page.File }}
+            {{- warnf "partial [assets/card.html] - Cannot find target page '%s', see '%s'" .path page.File.Path -}}
+        {{ else }}
+            {{- warnf "partial [assets/card.html] - Cannot find target page '%s'" .path -}}
+        {{ end }}
     {{- end }}
 {{- end }}
 {{- with $page -}}
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
     {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
     {{- if not $description }}{{ $description = partial "utilities/GetDescription.html" (dict "page" .) }}{{ end -}}
-    {{- if not $thumbnail }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
+    {{- if and (not $thumbnail) (not $icon) }}
+        {{ if reflect.IsMap .Params.Thumbnail }}{{ $thumbnail = .Params.Thumbnail.url }}{{ else }}{{ $thumbnail = .Params.Thumbnail }}{{ end }}
+    {{ end -}}
+    {{ if not $ratio }}
+        {{- if and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.ratio }}{{ $ratio = .Params.Thumbnail.ratio }}{{ end -}}
+    {{ end }}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
+    {{- if not $anchor }}{{ $anchor = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.anchor) "") }}{{ end -}}
 {{- end -}}
 
 {{ if (hasPrefix $orientation "horizontal") }}
@@ -67,6 +83,8 @@
 {{ end }}
 
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
+{{- if eq $body "title" }}{{ $description = "" }}{{ end -}}
+{{- if eq $body "none" }}{{ $title = "" }}{{ $description = "" }}{{ end -}}
 
 <!-- Inline partial to render the card's body -->
 {{- define "partials/card-body.html" -}}
@@ -78,7 +96,7 @@
     
     {{- if $href -}}
         <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
-                <p class="card-title fs-5 fw-bold">{{ $title }}</p>
+                <p class="card-title fs-lg-5 fs-6">{{ $title }}</p>
             {{ with $description }}
                 <div class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
                 {{ . | safeHTML }}
@@ -87,7 +105,7 @@
         </a>
     {{- else -}}
         <div>
-            {{ with $title }}<p class="card-title fs-5 fw-bold">{{ . }}</p>{{ end -}}
+            {{ with $title }}<p class="card-title fs-lg-5 fs-6">{{ . }}</p>{{ end -}}
             {{ with $description }}<div class="card-text">{{ . | safeHTML }}</div>{{ end -}}
         </div>
     {{- end -}}
@@ -106,7 +124,7 @@
 
     <p class="card-text"><small class="{{ if $color }}text-bg-{{ $color }}{{ else }}text-body-secondary{{ end }} text-uppercase">
         {{- if in (slice "full" "publication") $keywords -}}
-            {{- partial "utilities/date.html" (dict "date" $page.Date "format" "long") -}}&nbsp;&bull;
+            {{ with $page.Date }}{{ partial "utilities/date.html" (dict "date" . "format" "long") }}&nbsp;&bull;{{ end -}}
             {{ $page.ReadingTime | lang.FormatNumber 0 }} {{ i18n "minutesShort" }} {{ i18n "read" -}}
         {{- end -}}
 
@@ -125,29 +143,62 @@
 {{- 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 }}">
+        <div class="row g-0 row-cols-2 h-100{{ if $button }} pb-5{{ end }}">
             {{- if $thumbnail -}}
-                    {{- 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) -}}
+                <div class="{{ $col1 }}">
+                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "portrait" $portrait "sizes" $sizes "anchor" $anchor "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
+                </div>
             {{- else if $icon -}}
-                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
+                <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>
                 </div>
             {{- end -}}
-            </div>
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-8 col-md-10{{ else }}col-8{{ 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">
                         {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description "button" $button) -}}
                     </div>
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
-                    {{ if $button }}
+                    {{ if and $href $button }}
                         {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
                         {{ $buttonClass := "card-button mb-n4" }}
                         {{ if eq $buttonType "link" }}{{ $buttonClass = "card-button card-button-link mb-n4" }}{{ end }}
@@ -169,15 +220,22 @@
     </div>
 {{- else -}}
     <!-- Render stacked / default card -->
+    {{ $overlay := eq $orientation "overlay" }}
     <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- 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) -}}
+            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "portrait" $portrait "anchor" $anchor "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 }}">
+            <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 }}">
+        <div class="card-body d-flex flex-column p-{{ $padding }} {{ if $overlay }}card-img-overlay card-overlay-gradient p-4{{ end }}" {{ if $overlay }}data-bs-theme="dark"{{ end }}>
+            {{ if $overlay }}<div class="flex-grow-1"></div>{{ end }}
             {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}}{{ end }}
             {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
             {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
@@ -204,4 +262,4 @@
     </div>
 {{- end -}}
 
-{{ if ne $gutter "0" }}</div>{{ end }}
+{{ if or (ne $gutter "0") ($wrapper) }}</div>{{ end }}

layouts/partials/assets/carousel-item.html

@@ -20,10 +20,11 @@
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
 {{- $loading := .loading | default "eager" -}}
+{{- $title := .caption | default (T "image") -}}
 
 <!-- Main code -->
 <div class="carousel-item{{ if $active }} active{{ end }}" {{ if not $active }} fetchpriority="low"{{ end }}>
-    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "class" "d-block w-100" "portrait" $portrait "loading" $loading) }}
+    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "class" "d-block w-100" "portrait" $portrait "loading" $loading "title" $title) }}
     <div class="carousel-caption gradient"></div>
     {{ with $caption }}
         <div class="carousel-caption d-none d-md-block">

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

@@ -15,97 +15,34 @@
 {{- $mode := .mode -}}
 {{- $modes := .modes -}}
 {{- $plain := .plain | default false }}
-
-{{- $fallbackURL := "" -}}
-{{- $anchor := "" -}}
-{{- $imgset := "" -}}
-{{- $isVector := false -}}
+{{- $anchor := .anchor }}
+{{- $alt := or $title $caption (T "image") }}
 
 <!-- Split url into base and anchor when applicable (only relevant for vector images) -->
+{{- $fileAnchor := "" -}}
 {{- $segments := split $url "#" -}}
 {{- if gt (len $segments) 2 -}}
     {{- errorf "Invalid path or url: %q" $url -}}
 {{- else if eq (len $segments) 2 }}
     {{- $url = index $segments 0 -}}
-    {{- $anchor = index $segments 1 -}}
+    {{- $fileAnchor = index $segments 1 -}}
 {{- end -}}
 
-<!-- Identify image provider -->
-{{ $hook := "" }}
-{{ $account := "" }}
-{{ $container := "" }}
-{{ $rewrite := false }}
-{{ range $provider, $val := site.Params.images }}
-    {{ if not $hook }}    
-        {{ with index $val "host" }}
-            {{ if (findRE . (urls.Parse $url).Hostname) }}
-                {{ $hook = $provider }}
-                {{ with index $val "account" }}{{ $account = . }}{{ end }}
-                {{ with index $val "rewrite" }}{{ $rewrite = . }}{{ end }}
-                {{ with index $val "container" }}{{ $container = . }}{{ end }}
-            {{ end }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}
-
-<!-- Rewrite the origin URL if applicable -->
-{{ if $rewrite }}
-    {{ $url = partial "assets/helpers/image-rewrite.html" (dict "url" $url "account" $account "container" $container "hook" $hook) }}
-{{ end }}
-
-<!-- Define image dimensions -->
-{{ $dims := slice }}
-{{- $res := "" -}}
-{{- $img := "" -}}
-{{ $transform := "" }}
-{{- if hasSuffix $url "svg" -}}
-    {{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
-    {{ if not $res }}
-        {{- if not (fileExists (path.Join "/static" $url)) -}}
-            {{ warnf "Cannot find vector image resource: %q" $url -}}
-        {{ else }}
-            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
-            {{ $dims = $dims | append (printf "%sx500" $width) }}
-        {{ end }}
-    {{ end }}
-{{ else if $ratio }}
-    {{ $transform = "fill" }}
-    {{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
-    {{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
-{{ else if not $plain }}
-    {{ $transform = "fit" }}
-    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
-    {{ if and $res $res.resource }}
-        {{ $img = $res.resource }}
-        {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
-
-        {{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
-        {{ range $width := $widths -}}
-            {{- $dims = $dims | append (printf "%dx%d" (int $width) (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
-        {{- end -}}
-    {{ end }}
-{{ end }}
-
-<!-- Derive image width and height -->
-{{ $width := "" }}
-{{ $height := "" }}
-{{ if not $plain }}
-    {{ with $dims }}
-        {{ range $dim := (. | last 1) }}
-            {{ $width = (int (index (split $dim "x") 0)) }}
-            {{ $height = (int (index (split $dim "x") 1)) }}
-        {{ end }}
-    {{ end }}
-{{ end }}
-
-<!-- Generate image urls -->
-{{ if or (hasSuffix $url "svg") $plain }}
-    {{- $fallbackURL = partial "utilities/GetStaticURL" (dict "url" $url) -}}
-{{ else }}
-    {{- $fallbackURL = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" ($dims | last 1) "transform" $transform "hook" $hook "format" "jpg" "includeWidth" false) -}}
-    {{- $imgset = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
-{{ end }}
+<!-- Obtain fallback URL and imageset definition -->
+{{ $target := partial "assets/helpers/image-dimension.html" (dict 
+    "page" $page
+    "url" .url
+    "ratio" $ratio
+    "portrait" $portrait
+    "plain" $plain 
+    "imageset" true
+    "anchor" $anchor
+) }}
+{{ $fallbackURL := index $target "target" }}
+{{ $imgset := index $target "set" }}
+{{ $height := index $target "height" }}
+{{ $width := index $target "width" }}
+{{ $data := index $target "data" }}
 
 <!-- Add color modes -->
 {{- range $none := $modes -}}
@@ -117,9 +54,17 @@
 <!-- Generate image definition -->
 {{- if $caption -}}
     <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
+{{ else }}
+    {{ with $wrapper }}<div class="{{ . }}">{{ end }}
 {{ end }}
-<div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
-    {{- if not $anchor -}}
+
+{{ if $data }}
+    {{- if site.Params.debugging.includeSVGOrigin }}
+        {{ printf "<!-- <svg src=\"%s\"> -->" $.url | safeHTML }}
+    {{ end -}}
+    {{- $data = replace $data "<svg" (printf "<svg class=\"%s\"" $class) -}}
+    {{- $data | safeHTML -}}
+{{- else if not $fileAnchor -}}
     <img class="img-fluid {{ $class }}"
         src="{{ $fallbackURL }}"
         {{ if $lazy }}loading="lazy"{{ end }}
@@ -127,14 +72,15 @@
         {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
         {{ with $height }}height="{{ . }}"{{ end }}
         {{ with $width }}width="{{ . }}"{{ end }}
-            {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
+        {{ with $alt }}alt="{{ . }}"{{ end }}>
 {{- else }}
     <svg class="{{ $class }}">
-            <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+        <use href="{{ $fallbackURL }}#{{ $fileAnchor }}"></use>
     </svg>
 {{ end }}
-</div>
 {{- if $caption -}}
         <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
     </figure>
+{{ else if $wrapper }}
+    </div>
 {{- end -}}

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

@@ -0,0 +1,145 @@
+<!-- Initialize arguments -->
+{{- $page := .page -}}
+{{- $url := .url -}}
+{{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
+{{- $height := .height -}}
+{{- $width := .width -}}
+{{- $plain := .plain | default false }}
+{{- $targetURL := "" -}}
+{{- $set := "" -}}
+{{- $imageset := .imageset | default false }}
+{{- $anchor := .anchor | default "" -}}
+
+<!-- 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 := "" -}}
+{{- $data := "" -}}
+{{ $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 }}
+    {{ else if eq (string $res.MediaType) "image/svg+xml" }}
+        {{ $data = $res.Content }}
+    {{ else }}
+        {{ warnf "Unsupported media type '%s': %q" (string $res.MediaType) $url -}}
+    {{ 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 }}
+    {{ if $portrait }}
+        {{ with $dims }}
+            {{ $newDims := slice }}
+            {{ range $dim := . }}
+                {{ $width = (int (index (split $dim "x") 1)) }}
+                {{ $height = (int (index (split $dim "x") 0)) }}
+                {{- $newDims = $newDims | append (printf "%dx%d" (int $width) $height ) -}}
+            {{ end }}
+            {{ $dims = $newDims }}
+        {{ end }}
+
+        {{ $newWidth := $height }}
+        {{ $newHeight := $width }}
+        {{ $width = $newWidth }}
+        {{ $height = $newHeight }}
+    {{ else  }}
+        {{ with $dims }}
+            {{ range $dim := (. | last 1) }}
+                {{ $width = (int (index (split $dim "x") 0)) }}
+                {{ $height = (int (index (split $dim "x") 1)) }}
+            {{ end }}
+        {{ 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)
+        "anchor" $anchor
+        "transform" $transform
+        "hook" $hook
+        "format" "png"
+        "includeWidth" false
+    )}}
+    {{ if $imageset }}
+        {{- $set = partial "assets/helpers/image-set.html" (dict 
+            "url" $url
+            "img" $img
+            "dims" $dims
+            "anchor" $anchor
+            "transform" $transform
+            "hook" $hook
+        ) -}}
+    {{ end }}
+{{ end }}
+
+{{ return (dict "target" $targetURL "set" $set "height" $height "width" $width "data" $data) }}