Merge pull request #660 from gethinode/develop

Add support for absolute paths

.github/release.yml

@@ -14,7 +14,7 @@ changelog:
       labels:
         - Semver-Minor
         - enhancement
-    - title: 🐛 Bug fixes
+    - title: 🐛 Bug Fixes
       labels:
         - fix
         - bugfix

.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: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x]
 
     runs-on: ${{ matrix.os }}
 

README.md

@@ -9,32 +9,32 @@
 
 <!-- Badges -->
 <p align="center">
-    <a href="https://gohugo.io" alt="Hugo website">
-        <img src="https://img.shields.io/badge/generator-hugo-brightgreen">
+    <a href="https://gohugo.io">
+        <img src="https://img.shields.io/badge/generator-hugo-brightgreen" alt="Hugo website">
     </a>
-    <a href="https://gethinode.com" alt="Hinode theme">
-        <img src="https://img.shields.io/badge/theme-hinode-blue">
+    <a href="https://gethinode.com">
+        <img src="https://img.shields.io/badge/theme-hinode-blue" alt="Hinode theme">
     </a>
-    <a href="https://www.npmjs.com/package/%40gethinode/hinode" alt="npm package">
-        <img src="https://img.shields.io/npm/v/%40gethinode/hinode">
+    <a href="https://www.npmjs.com/package/%40gethinode/hinode">
+        <img src="https://img.shields.io/npm/v/%40gethinode/hinode" alt="npm package">
     </a>
-    <a href="https://app.netlify.com/sites/gethinode-demo/deploys" alt="Netlify Status">
-        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67">
+    <a href="https://app.netlify.com/sites/gethinode-demo/deploys">
+        <img src="https://img.shields.io/netlify/0ad42e3e-fdfa-4d37-8e26-58badd429a67"  alt="Netlify Status">
     </a>
-    <a href="https://stats.uptimerobot.com/xyGVYhLJmV" alt="UptimeRobot Status">
-        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb">
+    <a href="https://stats.uptimerobot.com/xyGVYhLJmV">
+        <img src="https://img.shields.io/uptimerobot/status/m791334689-73d9dfc82030f4f955b2d6bb" alt="UptimeRobot Status">
     </a>
-    <a href="https://github.com/gethinode/hinode/commits/main" alt="Last commit">
-        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg">
+    <a href="https://github.com/gethinode/hinode/commits/main">
+        <img src="https://img.shields.io/github/last-commit/gethinode/hinode.svg" alt="Last commit">
     </a>
-    <a href="https://github.com/gethinode/hinode/issues" alt="Issues">
-        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg">
+    <a href="https://github.com/gethinode/hinode/issues">
+        <img src="https://img.shields.io/github/issues/gethinode/hinode.svg" alt="Issues">
     </a>
-    <a href="https://github.com/gethinode/hinode/pulls" alt="Pulls">
-        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg">
+    <a href="https://github.com/gethinode/hinode/pulls">
+        <img src="https://img.shields.io/github/issues-pr-raw/gethinode/hinode.svg" alt="Pulls">
     </a>
-    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE" alt="License">
-        <img src="https://img.shields.io/github/license/gethinode/hinode">
+    <a href="https://github.com/gethinode/hinode/blob/main/LICENSE">
+        <img src="https://img.shields.io/github/license/gethinode/hinode" alt="License">
     </a>
 </p>
 

assets/js/analytics.js

@@ -11,8 +11,8 @@
 {{- end -}}
 
 {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
-    {{ with .Site.GoogleAnalytics -}}
+{{- if (and (not hugo.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.Config.Services.GoogleAnalytics.ID -}}
         {{ if hasPrefix . "G-"}}
             {{ template "__ga_js_set_doNotTrack" $ }}
 

assets/scss/app-dart.scss

@@ -5,6 +5,7 @@
 
 // Include default variable overrides
 @import "common/variables-dart.scss"; // note: modified for dart-sass
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)
@@ -14,10 +15,11 @@
 @import "common/variables-dark.scss";
 
 // Import Hinode theme styles
+@import "components/abbr.scss";
 @import "components/alert.scss";
 @import "components/blockquote.scss";
 @import "components/breadcrumb.scss";
-@import "components/buttons.scss";
+@import "components/button.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
@@ -25,6 +27,7 @@
 @import "components/comments.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
 @import "components/pagination.scss";
@@ -35,7 +38,7 @@
 @import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";

assets/scss/app.scss

@@ -3,6 +3,7 @@
 
 // Include default variable overrides
 @import "common/variables.scss";
+@import "theme/variables.scss";
 @import "common/icons.scss";
 
 // Import Bootstrap configuration (mounted by core Bootstrap module)
@@ -12,10 +13,11 @@
 @import "common/variables-dark.scss";
 
 // Import Hinode theme styles
+@import "components/abbr.scss";
 @import "components/alert.scss";
 @import "components/blockquote.scss";
 @import "components/breadcrumb.scss";
-@import "components/buttons.scss";
+@import "components/button.scss";
 @import "components/card.scss";
 @import "components/carousel.scss";
 @import "components/clipboard.scss";
@@ -23,6 +25,7 @@
 @import "components/comments.scss";
 @import "components/feature.scss";
 @import "components/footer.scss";
+@import "components/nav.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
 @import "components/pagination.scss";
@@ -33,7 +36,7 @@
 @import "components/table.scss";
 @import "components/timeline.scss";
 @import "components/toc.scss";
-@import "components/vimeo.scss";
+@import "components/video.scss";
 @import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";

assets/scss/common/_styles.scss

@@ -15,6 +15,34 @@ a:active {
     min-height: 100vh;
 }
 
+.fullcover {
+    --navbar-height: #{$navbar-height};
+
+    min-height: calc(100vh - var(--navbar-height));
+}
+
+.fullscreen {
+    --navbar-offset: #{$navbar-offset};
+
+    min-height: calc(100vh - var(--navbar-offset));
+}
+
+.main-content {
+    margin-top: $navbar-offset;
+}
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: margin-left margin-right,
+      class: mx,
+      responsive: true,
+      values: auto 0,
+    )
+  )
+);
+
 .tickmark li::marker {
     content: "✓ ";
 }

assets/scss/common/_variables-dart.scss

@@ -6,7 +6,7 @@ $enable-important-utilities:    true !default;
 $navbar-toggler-focus-width:    0 !default;
 
 $font-family-sans-serif:        h.$theme-font, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-size-base:                h.$font-size-base !default;;
+$font-size-base:                h.$font-size-base !default;
 $headings-font-weight:          600 !default;
 $font-weight-lighter:           lighter !default;
 $font-weight-light:             200 !default;
@@ -18,6 +18,7 @@ strong {
     font-weight:                600 if($enable-important-utilities, !important, null);
 }
 
+$navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;
@@ -39,4 +40,8 @@ $primary-text-emphasis-dark:        mix(white, h.$primary, h.$dark-mode-tint) !d
 $secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint) !default;
 $link-color-dark:                   mix(white, h.$primary, h.$dark-mode-tint) !default;
 $primary-bg-subtle-dark:            mix(black, h.$primary, h.$dark-mode-shade) !default;
-$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+$primary-border-subtle-dark:        mix(black, h.$primary, calc(h.$dark-mode-shade / 2)) !default;
+
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);

assets/scss/common/_variables.scss

@@ -33,4 +33,10 @@ $secondary-text-emphasis-dark:      mix(white, $secondary, $dark-mode-tint) !def
 $link-color-dark:                   mix(white, $primary, $dark-mode-tint) !default;
 $primary-bg-subtle-dark:            mix(black, $primary, $dark-mode-shade) !default;
 $primary-border-subtle-dark:        mix(black, $primary, $dark-mode-shade / 2) !default;
-// scss-docs-end color-mode
+// scss-docs-end color-mode
+
+// scss-docs-start horizontal-nav
+$dropdown-transition: opacity .15s ease-in-out !default;
+$dropdown-horizontal-margin-top: calc((-1.5 * 1rem) - 2px);
+$dropdown-horizontal-padding-y: calc(1rem + 2px);
+// scss-docs-end horizontal-nav

assets/scss/components/_abbr.scss

@@ -0,0 +1,22 @@
+@media (hover: none) {
+    abbr[title] {
+        position: relative;
+        text-decoration: underline dotted;
+    }
+    
+    abbr[title]:hover::after,
+    abbr[title]:focus::after {
+        content: attr(title);
+        position: absolute;
+        left: 0;
+        bottom: -30px;
+        width: auto;
+        white-space: nowrap;
+        background-color: var(--bs-body-bg);
+        color: var(--bs-tooltip-color);
+        border-radius: 3px;
+        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
+        font-size: 14px;
+        padding: 3px 5px;
+    }
+}

assets/scss/components/_button.scss

@@ -28,3 +28,16 @@
     background-color: transparent;
     color: var(--bs-primary) if($enable-important-utilities, !important, null);
 }
+
+a.btn {
+    margin-top: $spacer * .25;
+    margin-bottom: $spacer * .25;
+}
+
+.btn-close {
+    background-color: transparent if($enable-important-utilities, !important, null);
+    background-image: var(--#{$prefix}btn-close-bg) if($enable-important-utilities, !important, null);
+    background-position: center if($enable-important-utilities, !important, null);
+    background-repeat: no-repeat if($enable-important-utilities, !important, null);
+    background-size: $btn-close-width if($enable-important-utilities, !important, null);
+}

assets/scss/components/_card.scss

@@ -15,6 +15,10 @@
     width: 100%;
 }
 
+.card-icon {
+    color: $secondary;
+}
+
 .card-zoom::after .card-img-wrap img {
     content: "";
     position: absolute;

assets/scss/components/_img.scss

@@ -14,3 +14,8 @@
     height: 100%;
     object-fit: cover;
 }
+
+.mirrorred {
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}

assets/scss/components/_nav.scss

@@ -0,0 +1,103 @@
+.nav-tabs > .nav-link.active {
+    border-bottom-color: var(--bs-body-bg) !important;
+    border-bottom-style: solid !important;
+    z-index: 1;
+}
+
+.nav-callout {
+    --#{$prefix}nav-callout-bg: var(--#{$prefix}light);
+    --#{$prefix}nav-callout-active-bg: var(--bs-primary-bg-subtle);
+    --#{$prefix}nav-callout-gap: #{$nav-underline-gap};
+    
+    column-gap: var(--#{$prefix}nav-callout-gap) !important;
+}
+
+.nav-callout > .tab-content {
+    background-color: var(--#{$prefix}nav-callout-bg);
+    padding: 2 * $spacer;
+    margin-top: 0 !important;
+}
+
+.nav-callout > .nav-link {
+    display: flex;
+    text-align: start;
+    vertical-align: text-top;
+    border-radius: 0;
+    padding: 0 0 (4 * $spacer) 0;
+    border-bottom: none;
+}
+
+.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;
+    background-position: 50% bottom;
+    font-weight: 600;
+    color: var(--bs-nav-underline-link-active-color);
+}
+
+.nav-callout .accordion-button {
+    background-color: var(--#{$prefix}nav-callout-bg) !important;
+    border: solid;
+    border-color: var(--#{$prefix}border-color);
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) !important;
+    margin-bottom: 0;
+
+    &:focus {
+        border-bottom: none !important;
+        box-shadow: none;
+    }
+
+    &:not(.collapsed) {
+        box-shadow: none;
+    }
+}
+
+.nav-callout > .accordion-item {
+    margin-top: 2 * $spacer;
+    margin-bottom: 2 * $spacer;
+    border: none;
+}
+
+.nav-callout .accordion-button[aria-expanded="false"] {
+    border-bottom: solid !important;
+    border-color: var(--#{$prefix}border-color) !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius);
+}
+
+.nav-callout .accordion-button[aria-expanded="true"] {
+    border-color: var(--#{$prefix}border-color) !important;
+    border-bottom: none !important;
+    border-radius: var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius) 0 0 !important;
+    padding-bottom: 3 * $spacer;
+    background-image: linear-gradient(to top right, var(--#{$prefix}nav-callout-active-bg) 50%, transparent 0);
+    background-size: 10% (2.5 * $spacer);
+    background-repeat: no-repeat;
+    background-position: 10% bottom;
+}
+
+.nav-callout .accordion-collapse {
+    background-color: var(--#{$prefix}nav-callout-active-bg) !important;
+    border-radius: 0 0 var(--#{$prefix}accordion-inner-border-radius) var(--#{$prefix}accordion-inner-border-radius);
+    border-top: none !important;
+    border-left: solid;
+    border-right: solid;
+    border-bottom: solid;
+    border-color: var(--#{$prefix}border-color);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .nav-callout {
+            --#{$prefix}nav-callout-bg: var(--#{$prefix}tertiary-bg);
+        }
+
+        .nav-callout .accordion-button[aria-expanded="true"] {
+            background-image: linear-gradient(to top right, shade-color($primary, 70%) 50%, transparent 0);
+        }
+
+        .nav-callout .accordion-collapse {
+            background-color: shade-color($primary, 70%) !important;
+        }
+    }
+}

assets/scss/components/_navbar.scss

@@ -108,7 +108,7 @@
     background-color: $white if($enable-important-utilities, !important, null);
 }
 
-.emphasis, {
+.emphasis {
     background-color: $black if($enable-important-utilities, !important, null);
 }
 
@@ -119,3 +119,73 @@
 }
 
 // stylelint-enable annotation-no-unknown
+
+:root {
+    --dropdown-horizontal-bg: var(--#{$prefix}light);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        --dropdown-horizontal-bg: var(--#{$prefix}tertiary-bg);
+    }
+}
+
+.dropdown-horizontal {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $next: breakpoint-next($breakpoint, $grid-breakpoints);
+        $infix: breakpoint-infix($next, $grid-breakpoints);
+
+        @include media-breakpoint-up($next) {
+            &#{$infix} { 
+                position: static !important; 
+            } 
+    
+            &#{$infix} > .dropdown-menu {
+                opacity: 0;
+                display: block;
+                visibility: hidden;
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+                width: 100%;
+                height: auto;
+                text-align: center;
+                border-radius: 0;
+                border: 0;
+                margin-top: $dropdown-horizontal-margin-top;
+                padding-top: $dropdown-horizontal-padding-y;
+                padding-bottom: $dropdown-horizontal-padding-y;
+                box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
+            
+                @include transition($dropdown-transition);
+            }
+    
+            &#{$infix} > .dropdown-menu.show {
+                visibility: visible;
+                opacity: 1;
+            }
+    
+            &#{$infix} > .dropdown-menu > li {
+                display: inline-block;
+                padding-left: $spacer;
+                padding-right: $spacer;
+            }
+    
+            &#{$infix} > .dropdown-menu > li > a {
+                padding-left: .25 * $spacer;
+                padding-right: .25 * $spacer;
+
+                &.active,
+                &:hover,
+                &:focus {
+                    color: var(--bs-body-color);
+                    border-bottom: solid 1px var(--bs-navbar-hover-color);
+                    margin-bottom: -1px;
+                    background-color: transparent;
+                }
+            }
+            
+            &#{$infix} > .nav-link.show {
+                background-color: var(--dropdown-horizontal-bg) if($enable-important-utilities, !important, null);
+            }            
+        }
+    }
+}

assets/scss/components/_toc.scss

@@ -75,6 +75,10 @@
         .toc-button {
             --bs-btn-color: var(--bs-body-color);
             --bs-btn-border-color: var(--bs-body-color);
+
+            &:hover {
+                background-color: transparent;
+            }
         }
 
         #toc-collapse {
@@ -89,4 +93,8 @@
             }
         }
     }
-}
+}
+
+.section-menu > .nav-link.active, .section-menu > .nav-link:hover {
+    color: var(--bs-primary);
+}

assets/scss/components/_video.scss

@@ -1,3 +1,19 @@
+.youtube-embedded {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.youtube-embedded > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border:0;
+}
+
 // Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
 .__h_video {
     position: relative;

assets/scss/layouts/_type.scss

@@ -30,3 +30,7 @@ h6 {
     margin-top: $spacer;
     scroll-margin-top: $navbar-offset;
 }
+
+.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+    scroll-margin-top: $navbar-offset;
+}

assets/scss/theme/_variables.scss

@@ -0,0 +1,2 @@
+// Placeholder to quickly add your own theme variable overrides
+// The file is included at the beginning of the build pipeline

config/_default/hugo.toml

@@ -6,7 +6,6 @@ enableGitInfo = true
 # toml-docs-end main
 
 # additional settings
-# googleAnalytics = "G-xxxxxxxxxx"
 baseURL = "https://example.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -73,6 +72,8 @@ home = ["HTML", "RSS", "REDIR"]
     disableInlineCSS = true
   [services.twitter]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    # ID = "G-xxxxxxxxxx"
 
 [outputFormats]
   [outputFormats.XML]
@@ -83,10 +84,16 @@ home = ["HTML", "RSS", "REDIR"]
     permalinkable = false
     name = "xml"
 
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+
 [module]
   [module.hugoVersion]
     extended = true
-    min = "0.110.0"
+    min = "0.120.0"
     max = ""
   [[module.mounts]]
     source = "archetypes"
@@ -97,6 +104,9 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.mounts]]
     source = "content"
     target = "content"
+  [[module.mounts]]
+    source = "data"
+    target = "data"
   [[module.mounts]]
     source = "i18n"
     target = "i18n"
@@ -120,4 +130,6 @@ home = ["HTML", "RSS", "REDIR"]
     path = "github.com/gethinode/mod-katex"
   [[module.imports]]
     path = "github.com/gethinode/mod-leaflet"
+  [[module.imports]]
+    path = "github.com/gethinode/mod-lottie"
 # toml-docs-end modules

config/_default/params.toml

@@ -6,6 +6,9 @@
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
     endorse = true
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = false
         tab = false
@@ -16,9 +19,11 @@
 # toml-docs-start modules
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
     [modules.fontawesome]
         inline = true
         debug = true
@@ -45,6 +50,11 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 # toml-docs-end home
 
 # toml-docs-start navigation
@@ -53,8 +63,10 @@
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    horizontal = false
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true

config/postcss.config.js

@@ -14,6 +14,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
     ...whitelister([
       './assets/scss/components/_clipboard.scss',
       './assets/scss/components/_command.scss',
+      './assets/scss/components/_nav.scss',
       './assets/scss/components/_navbar.scss',
       './assets/scss/components/_search.scss',
       './assets/scss/components/_syntax.scss',
@@ -27,6 +28,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
       './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.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',
       './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
       './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',

content/_index.md

@@ -1,13 +1,15 @@
 ---
 title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 thumbnail:
     url: /img/sunrise.jpg
     author: Harris Vo
     authorURL: https://unsplash.com/@hoanvokim
     origin: https://unsplash.com/photos/ZX6BPboJrYk
     originName: Unsplash
+actions:
+  get-started:
+    url: "https://gethinode.com/docs"
+    title: "Get started"
+    icon: "fas book-open"
 ---
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-
-{{< button href="https://gethinode.com/docs" icon="fas book-open" order="first" >}}Get Started{{< /button>}}

exampleSite/assets/svgs/custom/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
+</svg>

exampleSite/config/_default/hugo.toml

@@ -5,7 +5,6 @@ paginate = 9
 enableGitInfo = true
 
 # additional settings
-googleAnalytics = "G-T85PPZ36GN"
 baseURL = "https://demo.gethinode.com/"
 canonifyURLs = false
 enableEmoji = true
@@ -63,6 +62,8 @@ home = ["HTML", "RSS", "REDIR"]
     disableInlineCSS = true
   [services.twitter]
     disableInlineCSS = true
+  [services.googleAnalytics]
+    ID = "G-T85PPZ36GN"
 
 [outputFormats]
   [outputFormats.XML]
@@ -73,6 +74,12 @@ home = ["HTML", "RSS", "REDIR"]
     permalinkable = false
     name = "xml"
 
+[minify]
+  [minify.tdewolff.js]
+    keepVarNames = true
+    precision = 0
+    version = 2022
+
 [module]
   replacements = 'github.com/gethinode/hinode -> ../..'
   [[module.imports]]

exampleSite/config/_default/params.toml

@@ -4,6 +4,9 @@
     enableDarkMode = true
     modes = ["light", "dark"]
     canonifyAssetsURLs = false
+    footerBelowFold = false
+    loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = true
         tab = true
@@ -12,9 +15,11 @@
 
 [modules]
     core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex"]
+    optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
     [modules.fontawesome]
         inline = true
         debug = true
@@ -36,14 +41,21 @@
     fullCover = false
     centerHeadline = false
     style = ""
+    [home.feature]
+        orientation = "horizontal"
+        color = "primary"
+        width = 4
+        align = "start"
 
 [navigation]
     anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "3.8em"
+    horizontal = false
+    offset = "5.5rem"
     search = true
+    searchModal = false
     breadcrumb = true
     toc = true
     sidebar = true

exampleSite/config/postcss.config.js

@@ -0,0 +1,46 @@
+const autoprefixer = require('autoprefixer')({})
+const cssnano = require('cssnano')({
+  preset: 'advanced'
+})
+const whitelister = require('purgecss-whitelister')
+const purgecss = require('@fullhuman/postcss-purgecss')({
+  content: ['./exampleSite/hugo_stats.json'],
+  defaultExtractor: (content) => {
+    const els = JSON.parse(content).htmlElements
+    return [...(els.tags || []), ...(els.classes || []), ...(els.ids || [])]
+  },
+  dynamicAttributes: ['data-bs-theme'],
+  safelist: [
+    ...whitelister([
+      './assets/scss/components/_clipboard.scss',
+      './assets/scss/components/_command.scss',
+      './assets/scss/components/_nav.scss',
+      './assets/scss/components/_navbar.scss',
+      './assets/scss/components/_search.scss',
+      './assets/scss/components/_syntax.scss',
+      './assets/scss/components/_syntax-dark.scss',
+      './assets/scss/components/_syntax-light.scss',
+      './assets/scss/components/_table.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-katex/dist/katex.scss',
+      './_vendor/github.com/gethinode/mod-leaflet/dist/leaflet.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',
+      './_vendor/github.com/twbs/bootstrap/scss/_reboot.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_tooltip.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_transitions.scss',
+      './_vendor/github.com/twbs/bootstrap/scss/_utilities.scss'
+    ])
+  ]
+})
+
+module.exports = {
+  plugins: [
+    autoprefixer,
+    cssnano,
+    purgecss
+  ]
+}

exampleSite/content/en/_index.md

@@ -1,14 +1,15 @@
 ---
 author: Mark Dumay
 title: Welcome to Hinode!
+description: A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
 thumbnail:
     url: /img/sunrise.jpg
     author: Harris Vo
     authorURL: https://unsplash.com/@hoanvokim
     origin: https://unsplash.com/photos/ZX6BPboJrYk
     originName: Unsplash
+actions:
+  about:
+    url: "about"
+    title: "About"
 ---
-
-A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-
-{{< button href="about" >}}About{{< /button>}}

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

@@ -241,13 +241,14 @@ Use the `file` shortcode to print and highlight the full content of a given inpu
 
 ## Icon
 
-As an example, the following shortcodes show a square check, a brand logo, and a circle check.
+As an example, the following shortcodes show a square check, a brand logo, a circle check, and a custom icon.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* fa square-check */>}}
 {{</* fab linkedin */>}}
 {{</* fas circle-check */>}}
+{{</* icon custom activity */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -293,9 +294,9 @@ As an example, the following shortcodes render links in different formats.
 - {{</* link url="projects/another-project" /*/>}}
 - {{</* link url="/projects/another-project" /*/>}}
 - {{</* link url="../projects/another-project" case=false /*/>}}
-- {{</* link "/about/" /*/>}}
-- {{</* link "/fr/about/" /*/>}}
-- {{</* link "/fr/about" >}}About (French){{< /link */>}}
+- {{</* link "about" /*/>}}
+- {{</* link "/fr/a-propos/" /*/>}}
+- {{</* link "/fr/a-propos" >}}About (French){{< /link */>}}
 - {{</* link "#image" /*/>}}
 - {{</* link "components/#map" /*/>}}
 

exampleSite/content/en/blog/components.md

@@ -1,7 +1,7 @@
 ---
 author: Mark Dumay
 title: Components
-date: 2023-07-21
+date: 2023-09-23
 description: Use shortcodes to add predefined components powered by external libraries.
 tags: ["bootstrap", "shortcode"]
 thumbnail:
@@ -10,11 +10,21 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet"]
+modules: ["katex", "leaflet", "lottie"]
 ---
 
 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
+
+As an example, the following shortcode shows an animation that plays on hover.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formula (KaTeX)
 
 As an example, the following markdown renders two formulas using the KaTeX typesetting library.

exampleSite/content/en/blog/fourth-post.md

@@ -1,9 +1,10 @@
 ---
 author: Mark Dumay
-title: Fourth post
+title: Fourth post (excluded from search)
 date: 2023-01-01
-description: This is my fourth blog post.
+description: This is my fourth blog post. It is excluded from the search index.
 tags: ["blog"]
+searchExclude: true
 thumbnail:
   url: img/flowers.jpg
   author: Arvee Marie

exampleSite/content/fr/_index.md

@@ -1,14 +1,15 @@
 ---
 author: Mark Dumay
 title: Bienvenue sur Hinode!
+description: Un thème de blog et de documentation pour Hugo basé sur Bootstrap 5.
 thumbnail:
   url: /img/sunrise.jpg
   author: Harris Vo
   authorURL: https://unsplash.com/@hoanvokim
   origin: https://unsplash.com/photos/ZX6BPboJrYk
   originName: Unsplash
+actions:
+  about:
+    url: "a-propos"
+    title: "À propos"
 ---
-
-Un thème de blog et de documentation pour Hugo basé sur Bootstrap 5.
-
-{{< button href="a-propos" >}}À propos{{< /button>}}

exampleSite/content/fr/about.md

@@ -31,9 +31,4 @@ Les fonctionnalités supplémentaires incluent:
 - 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" >}})
-  {.tickmark}
-
-Hinode est inspiré par les thèmes suivants:
-
-- [Blist](https://github.com/apvarun/blist-hugo-theme) - Un thème de blog pour Hugo basé sur Tailwind CSS.
-- [Doks](https://github.com/h-enk/doks) - Un thème Hugo pour la création de sites de documentation sécurisés, rapides et optimisés pour le référencement (SEO), que vous pouvez facilement mettre à jour et personnaliser.
+{.tickmark}

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

@@ -295,7 +295,7 @@ Utilisez le shortcode `file` pour afficher et mettre en évidence le contenu com
 - {{</* link url="projects/another-project" /*/>}}
 - {{</* link url="/projects/another-project" /*/>}}
 - {{</* link url="../projects/another-project" case=false /*/>}}
-- {{</* link "/about/" /*/>}}
+- {{</* link "about" /*/>}}
 - {{</* link "/en/about/" /*/>}}
 - {{</* link "/en/about" >}}About (Anglais){{< /link */>}}
 - {{</* link "#image" /*/>}}
@@ -404,11 +404,11 @@ H{{</* sub 2 */>}}O est un liquide.
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
 {{</* button toast="toast-example-1" */>}}
-    Affiche la notifiaction #1
+    Affiche la notification #1
 {{</* /button */>}}
 
 {{</* button toast="toast-example-2" */>}}
-    Affiche la notifiaction #1
+    Affiche la notification #1
 {{</* /button */>}}
 
 {{</* toast id="toast-example-1" header="Premier titre" */>}}

exampleSite/content/fr/blog/components.md

@@ -11,11 +11,21 @@ thumbnail:
   authorURL: https://unsplash.com/@ryoji__iwata
   origin: Unsplash
   originURL: https://unsplash.com/photos/5siQcvSxCP8
-modules: ["katex", "leaflet"]
+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.
 
+## Animation
+
+À titre d'exemple, le shortcode suivant affiche une animation qui se déclenche au survol.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* animation data="gatin.json" auto=false hover=true class="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Formule (KaTeX)
 
 À titre d'exemple, le markdown suivant affiche deux formules en utilisant la bibliothèque de composition typographique KaTeX.

exampleSite/content/nl/_index.md

@@ -1,14 +1,15 @@
 ---
 author: Mark Dumay
 title: Welkom bij Hinode!
+description: Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.
 thumbnail:
     url: /img/sunrise.jpg
     author: Harris Vo
     authorURL: https://unsplash.com/@hoanvokim
     origin: https://unsplash.com/photos/ZX6BPboJrYk
     originName: Unsplash
+actions:
+  about:
+    url: "over-mij"
+    title: "Over mij"
 ---
-
-Een documentatie en blog thema voor Hugo gebaseerd op Bootstrap 5.
-
-{{< button href="over-mij" >}}Over mij{{< /button>}}

exampleSite/content/nl/about.md

@@ -33,8 +33,3 @@ Overige functies:
 * 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}
-
-Hinode is geinspireerd door de volgende thema's:
-
-* [Blist](https://github.com/apvarun/blist-hugo-theme) - een blog thema voor Hugo op basis van Tailwind CSS.
-* [Doks](https://github.com/h-enk/doks) - een Hugo thema voor het bouwen van veilige, snelle, en SEO-geoptimaliseerde documentatiesites, die je eenvoudig kunt actualiseren en aanpassen.

exampleSite/data/abbr.yml

@@ -8,4 +8,4 @@
   long: "Scalable Vector Graphics"
 
 - id: ci/cd
-  long: "Continous Integration/Continuous Deployment"
+  long: "Continuous Integration/Continuous Deployment"

exampleSite/go.sum

@@ -4,6 +4,8 @@ github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/
 github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc=
 github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+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.2.0 h1:SSMpWzK9SMbi9QRYfil9PJZLLWWLHWzlTc69UxtSWAA=
 github.com/gethinode/mod-flexsearch v1.2.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.3.0 h1:RbfEDw219Y1rOVp9lHmy5ePdF9lyPalDu2J5oVeejrU=
@@ -12,6 +14,14 @@ github.com/gethinode/mod-flexsearch v1.4.0 h1:5e/NVRLyWzUZ9fO/fNsM5o+O7nw+xyln2r
 github.com/gethinode/mod-flexsearch v1.4.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.4.1 h1:z+GKvhJ4v6BsZsWVZRgbO9WcmSZEVUkb3Q9a09yXtd8=
 github.com/gethinode/mod-flexsearch v1.4.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.5.1 h1:9fYlnHgiEXckL0EoC0zlSNO7BWZf5yiOroSWT13Kphc=
+github.com/gethinode/mod-flexsearch v1.5.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.6.0 h1:Rjx+GLOByFLmaWD9hZXwmuKN8A89te6BZAIq2c9QBKg=
+github.com/gethinode/mod-flexsearch v1.6.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.7.0 h1:VFTf6iUyT9b47jTDAxh8nVHU1eUBrdxlykaC90lTfqk=
+github.com/gethinode/mod-flexsearch v1.7.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.7.1 h1:f4rjKkhleDVzqwUmwP1xZdhjru5VQ9g0MRDz0G6oLyY=
+github.com/gethinode/mod-flexsearch v1.7.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-fontawesome v1.2.4 h1:SqE3CQ+boaBIhrVh3MPu4nz0uoHPfEH5t60nNY1CfsI=
 github.com/gethinode/mod-fontawesome v1.2.4/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.2.5 h1:RqkLRj6+s+gM4nKd0IwNMMDA8cRmxfp0fxkVH4FdAGU=
@@ -22,10 +32,34 @@ github.com/gethinode/mod-fontawesome v1.3.1 h1:EdnBuG2B+bi06OcYmcL1NfSxHpRMEGu8T
 github.com/gethinode/mod-fontawesome v1.3.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.3.2 h1:qLJSbAFR2T33BuBtC2Iulm9wZql3cy7AhXjxc2YGzBU=
 github.com/gethinode/mod-fontawesome v1.3.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2dbZ5Iv08Qw=
+github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
+github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.1 h1:C7goQY4HrEua/lpjC++laydNKBuYo1+307ngn5tyXeM=
+github.com/gethinode/mod-fontawesome v1.5.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.6.1 h1:iqOgDGdw7Bs4hnzjF/8JsUn10omyKQZTglLqNenT1K0=
+github.com/gethinode/mod-fontawesome v1.6.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
 github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.3 h1:fvlUWqcUQqv2zRNM2kfmJ6GhXA816Tl1nfVrUkmBStI=
+github.com/gethinode/mod-katex v1.0.3/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.4 h1:NozgWPFnHhx1W+E9DnwMTRpvxPbdqdANEtwp9N3/mj8=
+github.com/gethinode/mod-katex v1.0.4/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp4ia4r4=
 github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.5 h1:69Bv/6zRXhbcTzo7TMr58h3ry47srHRpM1k81LrLbYU=
 github.com/gethinode/mod-leaflet v0.3.5/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+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=
+github.com/gethinode/mod-lottie v1.0.1/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.2 h1:QM/PJqEl1UhNNoPx6y7pVtwev/mDxUyWNHLqDB76YzI=
+github.com/gethinode/mod-lottie v1.0.2/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.1.0 h1:KnfOQ45xdv1tpsKCkF5OiE3QuT29ycppBfY6o+rWl/4=
+github.com/gethinode/mod-lottie v1.1.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.2.0 h1:9S0Y4PlEO66dIvFxayatmDEf8WWxqbLNLi4z563i2gM=
+github.com/gethinode/mod-lottie v1.2.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.3.0 h1:vQ8CXkjdp2IeFskTzu+ZnKOEio8GtN08urVK+oCH81E=
+github.com/gethinode/mod-lottie v1.3.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=

exampleSite/hugo_stats.json

@@ -54,21 +54,21 @@
       "alert",
       "alert-danger",
       "alert-dismissible",
-      "align-content-center",
       "align-items-center",
       "align-items-end",
-      "align-items-start",
       "align-middle",
       "align-self-center",
+      "align-self-end",
       "anchor",
       "badge",
       "bg-body",
       "bg-body-tertiary",
       "bg-danger",
-      "bg-info",
       "bg-opacity-10",
       "bg-primary",
       "bg-primary-subtle",
+      "bi",
+      "bi-activity",
       "border",
       "border-0",
       "border-1",
@@ -96,6 +96,7 @@
       "card-body-link",
       "card-body-margin",
       "card-emphasize",
+      "card-icon",
       "card-img-top",
       "card-img-wrap",
       "card-text",
@@ -118,13 +119,16 @@
       "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-8",
+      "col-md-9",
       "col-md-auto",
       "col-sm-12",
       "col-sm-3",
@@ -134,6 +138,7 @@
       "container",
       "container-fluid",
       "container-xxl",
+      "custom",
       "d-block",
       "d-flex",
       "d-grid",
@@ -164,6 +169,7 @@
       "fa-2x",
       "fa-2xs",
       "fa-4x",
+      "fa-activity",
       "fa-arrow-left",
       "fa-arrow-right",
       "fa-bootstrap",
@@ -197,26 +203,23 @@
       "fab",
       "fade",
       "fas",
-      "feature",
       "figure-caption",
       "fixed-top",
       "flex-column",
       "flex-fill",
       "flex-grow-1",
-      "flex-wrap",
       "font-monospace",
       "footer",
       "form-control",
       "fs-3",
       "fs-5",
-      "fw-30",
       "fw-bold",
       "fw-semibold",
       "g-0",
       "g-3",
       "g-4",
+      "gap-1",
       "gap-2",
-      "gap-3",
       "gradient",
       "h-100",
       "h1",
@@ -245,11 +248,12 @@
       "link-secondary",
       "link-success",
       "link-warning",
+      "lottie-animation",
       "m-0",
+      "main-content",
       "main-nav-toggler",
       "mb-0",
       "mb-3",
-      "mb-4",
       "mb-5",
       "mb-lg-5",
       "me-3",
@@ -267,10 +271,12 @@
       "multi-docs-collapse-15",
       "multi-file-collapse-1",
       "mx-auto",
+      "mx-md-0",
       "mx-md-2",
       "my-2",
       "my-auto",
       "my-md-0",
+      "my-md-auto",
       "nav",
       "nav-item",
       "nav-link",
@@ -281,18 +287,17 @@
       "navbar-collapse",
       "navbar-contrast",
       "navbar-expand-md",
+      "navbar-fixed-top",
       "navbar-nav",
       "navbar-nav-scroll",
       "navbar-toggler",
       "next",
       "no-js",
+      "order-0",
       "order-1",
-      "order-2",
-      "order-3",
-      "order-4",
       "order-first",
-      "order-sm-2",
-      "order-sm-3",
+      "order-md-0",
+      "order-md-1",
       "p-0",
       "p-1",
       "p-2",
@@ -300,7 +305,9 @@
       "p-4",
       "pb-2",
       "pb-3",
+      "pb-4",
       "pb-5",
+      "pb-md-0",
       "pe-3",
       "position-absolute",
       "position-fixed",
@@ -310,7 +317,8 @@
       "ps-1",
       "ps-3",
       "ps-xl-3",
-      "px-3",
+      "pt-5",
+      "pt-md-3",
       "px-4",
       "px-xxl-0",
       "py-1",
@@ -328,15 +336,17 @@
       "row",
       "row-cols-1",
       "row-cols-2",
+      "row-cols-lg-3",
+      "row-cols-md-2",
       "row-cols-md-3",
       "row-cols-sm-2",
       "row-cols-sm-3",
-      "row-cols-sm-4",
       "search",
       "search-input",
       "search-suggestions",
       "shadow",
       "show",
+      "sidebar-overflow",
       "slide",
       "small",
       "spinner-border",
@@ -363,10 +373,12 @@
       "text-decoration-none",
       "text-end",
       "text-info",
+      "text-muted",
       "text-nowrap",
       "text-right",
       "text-secondary",
       "text-sm-start",
+      "text-start",
       "text-uppercase",
       "theme-icon",
       "theme-icon-active",
@@ -420,8 +432,10 @@
       "accordéon",
       "alert",
       "alerte",
+      "animation",
       "badge",
       "barre-de-navigation",
+      "blog",
       "body-docs-collapse-15",
       "body-file-collapse-1",
       "bouton",
@@ -460,6 +474,7 @@
       "leaflet-map-0",
       "lien",
       "link",
+      "lottie-animation-0",
       "map",
       "mark",
       "nav",
@@ -475,6 +490,9 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "projecten",
+      "projects",
+      "projets",
       "publication",
       "release",
       "réduire",

go.mod

@@ -3,9 +3,13 @@ module github.com/gethinode/hinode
 go 1.19
 
 require (
-	github.com/gethinode/mod-bootstrap v1.2.1 // indirect
-	github.com/gethinode/mod-flexsearch v1.4.1 // indirect
-	github.com/gethinode/mod-fontawesome v1.3.2 // indirect
-	github.com/gethinode/mod-katex v1.0.2 // indirect
+	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
+	github.com/gethinode/mod-bootstrap v1.2.2 // indirect
+	github.com/gethinode/mod-flexsearch v1.7.1 // indirect
+	github.com/gethinode/mod-fontawesome v1.6.1 // indirect
+	github.com/gethinode/mod-katex v1.0.4 // indirect
 	github.com/gethinode/mod-leaflet v0.3.5 // indirect
+	github.com/gethinode/mod-lottie v1.3.0 // indirect
+	github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 // indirect
+	github.com/twbs/bootstrap v5.3.2+incompatible // indirect
 )

go.sum

@@ -1,3 +1,5 @@
+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/mod-bootstrap v1.0.1 h1:NDZar+UEL42YHCvzzO+jVgqkZU5INA12BpjX3y6U4I4=
 github.com/gethinode/mod-bootstrap v1.0.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-bootstrap v1.1.0 h1:BbalsW8kmFhv+J+dcc41TGcjIlM/p69AB0h0oGhAXIU=
@@ -8,6 +10,8 @@ github.com/gethinode/mod-bootstrap v1.2.0 h1:JkTcImU3qpi25WgKvUxUYiMoiXtrxrG+Wf/
 github.com/gethinode/mod-bootstrap v1.2.0/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
 github.com/gethinode/mod-bootstrap v1.2.1 h1:z54dgsbhShhlri+X77Z+yLrg0wz/f8C8ojA/wnlhsJc=
 github.com/gethinode/mod-bootstrap v1.2.1/go.mod h1:DcpPc2cNaXUPGEvhD7npuEEPA7573NvakTlrwFbyjr8=
+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.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=
@@ -28,6 +32,14 @@ github.com/gethinode/mod-flexsearch v1.4.0 h1:5e/NVRLyWzUZ9fO/fNsM5o+O7nw+xyln2r
 github.com/gethinode/mod-flexsearch v1.4.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.4.1 h1:z+GKvhJ4v6BsZsWVZRgbO9WcmSZEVUkb3Q9a09yXtd8=
 github.com/gethinode/mod-flexsearch v1.4.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.5.1 h1:9fYlnHgiEXckL0EoC0zlSNO7BWZf5yiOroSWT13Kphc=
+github.com/gethinode/mod-flexsearch v1.5.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.6.0 h1:Rjx+GLOByFLmaWD9hZXwmuKN8A89te6BZAIq2c9QBKg=
+github.com/gethinode/mod-flexsearch v1.6.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.7.0 h1:VFTf6iUyT9b47jTDAxh8nVHU1eUBrdxlykaC90lTfqk=
+github.com/gethinode/mod-flexsearch v1.7.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
+github.com/gethinode/mod-flexsearch v1.7.1 h1:f4rjKkhleDVzqwUmwP1xZdhjru5VQ9g0MRDz0G6oLyY=
+github.com/gethinode/mod-flexsearch v1.7.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 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=
@@ -50,12 +62,24 @@ github.com/gethinode/mod-fontawesome v1.3.1 h1:EdnBuG2B+bi06OcYmcL1NfSxHpRMEGu8T
 github.com/gethinode/mod-fontawesome v1.3.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.3.2 h1:qLJSbAFR2T33BuBtC2Iulm9wZql3cy7AhXjxc2YGzBU=
 github.com/gethinode/mod-fontawesome v1.3.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2dbZ5Iv08Qw=
+github.com/gethinode/mod-fontawesome v1.4.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.0 h1:3mW5dnWauuF9wSWXNIY+PPgTNPlc/xQOQoG7XGic1Yk=
+github.com/gethinode/mod-fontawesome v1.5.0/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.5.1 h1:C7goQY4HrEua/lpjC++laydNKBuYo1+307ngn5tyXeM=
+github.com/gethinode/mod-fontawesome v1.5.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
+github.com/gethinode/mod-fontawesome v1.6.1 h1:iqOgDGdw7Bs4hnzjF/8JsUn10omyKQZTglLqNenT1K0=
+github.com/gethinode/mod-fontawesome v1.6.1/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 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=
 github.com/gethinode/mod-katex v1.0.1/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.2 h1:pIG4n3qLl/IVe7BEiwn+GL8r5lOCtF6FDxlcrPKdAXk=
 github.com/gethinode/mod-katex v1.0.2/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.3 h1:fvlUWqcUQqv2zRNM2kfmJ6GhXA816Tl1nfVrUkmBStI=
+github.com/gethinode/mod-katex v1.0.3/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.4 h1:NozgWPFnHhx1W+E9DnwMTRpvxPbdqdANEtwp9N3/mj8=
+github.com/gethinode/mod-katex v1.0.4/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=
@@ -66,3 +90,19 @@ github.com/gethinode/mod-leaflet v0.3.4 h1:oY+YQ0JiJuhFQNrk9XgFdg0NMsTUQPXNfnILp
 github.com/gethinode/mod-leaflet v0.3.4/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.5 h1:69Bv/6zRXhbcTzo7TMr58h3ry47srHRpM1k81LrLbYU=
 github.com/gethinode/mod-leaflet v0.3.5/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
+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=
+github.com/gethinode/mod-lottie v1.0.1/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.0.2 h1:QM/PJqEl1UhNNoPx6y7pVtwev/mDxUyWNHLqDB76YzI=
+github.com/gethinode/mod-lottie v1.0.2/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.1.0 h1:KnfOQ45xdv1tpsKCkF5OiE3QuT29ycppBfY6o+rWl/4=
+github.com/gethinode/mod-lottie v1.1.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.2.0 h1:9S0Y4PlEO66dIvFxayatmDEf8WWxqbLNLi4z563i2gM=
+github.com/gethinode/mod-lottie v1.2.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+github.com/gethinode/mod-lottie v1.3.0 h1:vQ8CXkjdp2IeFskTzu+ZnKOEio8GtN08urVK+oCH81E=
+github.com/gethinode/mod-lottie v1.3.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
+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/twbs/bootstrap v5.3.2+incompatible h1:tuiO5acc6xnZUR77Sbi5aKWXxjYxbmsSbJwYrhAKoQQ=
+github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

hugo_stats.json

@@ -8,7 +8,6 @@
       "footer",
       "form",
       "head",
-      "hr",
       "html",
       "img",
       "input",
@@ -16,6 +15,7 @@
       "link",
       "meta",
       "nav",
+      "ol",
       "p",
       "path",
       "script",
@@ -28,45 +28,40 @@
     ],
     "classes": [
       "active",
-      "align-content-center",
       "align-items-center",
       "align-self-center",
+      "align-self-end",
       "bg-body",
-      "bg-info",
       "bg-opacity-10",
       "bg-primary",
       "bottom-0",
       "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
       "btn",
       "btn-close",
       "btn-primary",
       "col",
       "col-12",
-      "col-lg-2",
-      "col-lg-4",
+      "col-6",
       "col-md-2",
+      "col-md-3",
       "col-md-4",
       "col-md-8",
-      "col-md-auto",
+      "col-md-9",
       "col-sm-12",
-      "col-sm-6",
       "collapse",
       "collapsed",
       "container-fluid",
       "container-xxl",
-      "d-block",
       "d-flex",
       "d-inline",
-      "d-lg-block",
       "d-md-block",
-      "d-md-flex",
       "d-md-none",
       "d-none",
-      "d-sm-none",
       "display-1",
       "display-4",
       "dropdown",
-      "dropdown-divider-bg",
       "dropdown-item",
       "dropdown-menu",
       "dropdown-menu-end",
@@ -88,27 +83,27 @@
       "fa-sun",
       "fab",
       "fas",
-      "feature",
       "fixed-top",
       "flex-column",
       "flex-fill",
       "flex-grow-1",
-      "flex-wrap",
       "footer",
       "form-control",
       "fs-3",
-      "fw-30",
+      "fs-5",
       "fw-bold",
-      "h-100",
+      "hstack",
       "img-fluid",
       "img-wrap",
       "invisible",
       "is-search",
       "justify-content-center",
+      "justify-content-end",
+      "justify-content-start",
       "link-bg-footer",
       "link-secondary",
+      "main-content",
       "main-nav-toggler",
-      "mb-4",
       "me-auto",
       "middle-bar",
       "min-vh-100",
@@ -117,43 +112,44 @@
       "mt-3",
       "mt-5",
       "mx-auto",
-      "mx-md-2",
+      "mx-md-0",
       "my-auto",
+      "my-md-auto",
       "nav-item",
       "nav-link",
       "navbar",
       "navbar-brand",
       "navbar-collapse",
       "navbar-expand-md",
+      "navbar-fixed-top",
       "navbar-nav",
       "navbar-toggler",
       "no-js",
+      "order-0",
       "order-1",
-      "order-2",
-      "order-3",
-      "order-4",
-      "order-first",
-      "order-sm-2",
-      "order-sm-3",
+      "order-md-0",
+      "order-md-1",
       "p-0",
       "p-2",
       "p-3",
       "p-4",
-      "pb-5",
-      "pe-1",
+      "pb-4",
+      "pb-md-0",
       "position-fixed",
       "position-relative",
-      "px-3",
+      "ps-1",
+      "pt-4",
+      "pt-5",
+      "pt-md-3",
       "px-4",
       "px-xxl-0",
-      "py-2",
-      "py-5",
-      "py-md-1",
+      "py-3",
       "rounded",
       "row",
       "row-cols-1",
+      "row-cols-2",
+      "row-cols-md-2",
       "row-cols-sm-3",
-      "row-cols-sm-4",
       "search",
       "search-input",
       "search-suggestions",
@@ -162,8 +158,10 @@
       "switch-mode-collapsed",
       "text-center",
       "text-decoration-none",
+      "text-muted",
       "text-secondary",
       "text-sm-start",
+      "text-start",
       "theme-icon",
       "theme-icon-active",
       "toast",
@@ -171,9 +169,7 @@
       "toast-container",
       "toast-header",
       "toggler-icon",
-      "top-bar",
-      "vr",
-      "w-100"
+      "top-bar"
     ],
     "ids": [
       "-theme",

i18n/de.yaml

@@ -30,9 +30,9 @@
 - id: shareSystem
   translation: "Betriebssystem"
 - id: copyToClipboard
-  translation: "In Zwischenablage kopieren"
+  translation: "In die Zwischenablage kopieren"
 - id: copiedToClipboard
-  translation: "Der Text befindet sich in die Zwischenablage"
+  translation: "befindet sich in der Zwischenablage"
 - id: link
   translation: "Link zur Webseite"
 - id: code
@@ -65,6 +65,8 @@
   translation: "Startseite"
 - id: languageSwitcherLabel
   translation: "Sprache"
+- id: close
+  translation: "Schließen"
 
 # Table of contents
 - id: toc

i18n/en.yaml

@@ -25,6 +25,20 @@
   translation: "Articles"
 - id: more
   translation: "More {{ . }}"
+- id: emptyList
+  translation: "No articles found"
+- id: emptyTags
+  translation: "No tags found"
+
+# Languages
+- id: lang_de
+  translation: "German"
+- id: lang_en
+  translation: "English"
+- id: lang_nl
+  translation: "Dutch"
+- id: lang_fr
+  translation: "French"
 
 # Sharing
 - id: shareLink
@@ -39,6 +53,8 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: download
+  translation: "Download article"
 
 # Pagination
 - id: paginationNav
@@ -67,12 +83,16 @@
   translation: "Home"
 - id: languageSwitcherLabel
   translation: "Language"
+- id: close
+  translation: "Close"
 
 # Table of contents
 - id: toc
   translation: "On this page"
 - id: seeAlso
   translation: "See also"
+- id: sectionMenu
+  translation: "Select a topic"
 
 # Sidebar
 - id: toggleSidebar

i18n/fr.yaml

@@ -67,6 +67,8 @@
   translation: "Accueil"
 - id: languageSwitcherLabel
   translation: "Langage"
+- id: close
+  translation: "Fermer"
 
 # Table of contents
 - id: toc

i18n/nl.yaml

@@ -23,6 +23,20 @@
   translation: "Artikelen"
 - id: more
   translation: "Meer {{ . }}"
+- id: emptyList
+  translation: "Geen artikelen gevonden"
+- id: emptyTags
+  translation: "Geen tags gevonden"
+
+# Languages
+- id: lang_de
+  translation: "Duits"
+- id: lang_en
+  translation: "Engels"
+- id: lang_nl
+  translation: "Nederlands"
+- id: lang_fr
+  translation: "Frans"
 
 # Sharing
 - id: shareLink
@@ -37,6 +51,8 @@
   translation: "Link"
 - id: code
   translation: "Code"
+- id: download
+  translation: "Download artikel"
 
 # Pagination
 - id: paginationNav
@@ -65,12 +81,16 @@
   translation: "Home"
 - id: languageSwitcherLabel
   translation: "Taal"
+- id: close
+  translation: "Sluiten"
 
 # Table of contents
 - id: toc
   translation: "Inhoudsopgave"
 - id: seeAlso
   translation: "Zie ook"
+- id: sectionMenu
+  translation: "Selecteer een onderwerp"
 
 # Sidebar
 - id: toggleSidebar

layouts/404.html

@@ -1,13 +1,15 @@
 {{ define "main"}}
-    <div class="container-xxl flex-fill d-flex align-content-center flex-wrap feature">
-        <div class="w-100 text-center">
-            <span class="text-secondary fw-bold">
-                {{ partial "assets/icon.html" (dict "icon" "fa face-frown fa-10x") }}
-                <p class="display-1 mt-3 fw-bold">404</p>
-                <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
-            </span>
-            {{- $home := printf "<a href=\"%s\">%s</a>" ("/" | relLangURL) (T "pageNotFoundHome") -}}
-            <p>{{ T "pageNotFound" $home | safeHTML }}</p>
+    <div class="d-flex flex-fill">
+        <div class="container-xxl my-auto">
+            <div class="text-center">
+                <span class="text-secondary fw-bold">
+                    {{ partial "assets/icon.html" (dict "icon" "fa face-frown fa-10x") }}
+                    <p class="display-1 mt-3 fw-bold">404</p>
+                    <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
+                </span>
+                {{- $home := printf "<a href=\"%s\">%s</a>" ("/" | relLangURL) (T "pageNotFoundHome") -}}
+                <p>{{ T "pageNotFound" $home | safeHTML }}</p>
+            </div>
         </div>
     </div>
 {{ end }}

layouts/_default/baseof.html

@@ -1,8 +1,30 @@
-{{- $section := .Section }}
+{{- define "partials/optional-scripts.html" -}}
+    {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
+    {{- range $index, $mod := $modules -}}
+        {{- $filename := printf "js/%s.bundle.js" $mod -}}
+        {{- $match := printf "js/modules/%s/**.js" $mod -}}
+        {{- $skipTemplate := false -}}
+        {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
+            {{- if in site.Params.modules.disableTemplate $mod}}
+                {{- $skipTemplate = true -}}
+            {{- end -}}
+        {{- end -}}
+
+        {{ $state := "" }}
+        {{- with (index site.Params.modules $mod) -}}
+            {{- with index . "state" }}{{ $state = . }}{{ end -}}
+        {{- end -}}
+
+        {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
+    {{- end -}}
+{{- end -}}
+
+{{- /* 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) -}}
@@ -12,10 +34,23 @@
     {{- end -}}
 {{- end -}}
 
+{{- /* Validate module configuration */ -}}
 {{- if and .IsPage (not (in .Site.Params.modules.core "bootstrap")) -}}
     {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
 {{- end -}}
 
+{{- $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" (partial "utilities/GetBreakpoint.html") }}
+
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
@@ -24,77 +59,37 @@
 
     <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{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
-            <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
+        <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" (string .Site.Params.navigation.fixed)
-                    "color" (.Site.Params.navigation.color)
-                    "style" (default "light" .Site.Params.navigation.style)
-                    "size" (default "md" .Site.Params.navigation.size))
+                    "fixed" (string site.Params.navigation.fixed)
+                    "color" site.Params.navigation.color
+                    "style" (default "light" site.Params.navigation.style)
+                    "size" (default "md" site.Params.navigation.size))
                 -}}
-            </div>
-            {{ if .IsHome -}}
-                {{ if .Site.Params.home.fullCover -}}
-                    <div class="d-flex flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                        {{ block "featured" . }}{{ end -}}
-                    </div>
-                {{ else -}}
-                    <div class="{{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                        {{ block "featured" . }}{{ end -}}
-                    </div>
-                    <div class="d-flex flex-column flex-fill">
-                        {{ block "main" . }}{{ end -}}
-                    </div>
-                    {{ if not .Site.Params.main.footerBelowFold }}
-                        <div class="">
-                            {{- partial "footer/social.html" . -}}
-                            {{- partial "footer/footer.html" . -}}
-                        </div>
-                    {{ end }}
-                {{ end -}}
-            {{ else -}}
-                <div class="d-flex flex-column flex-fill {{ if .Site.Params.navigation.fixed }}mt-5{{ end }}">
-                    {{ block "main" . }}{{ end -}}
+                <div class="main-content">
+                    {{ block "featured" . }}{{ end -}}
                 </div>
-                {{ if not .Site.Params.main.footerBelowFold }}
-                    <div class="">
-                        {{- partial "footer/social.html" . -}}
-                        {{- partial "footer/footer.html" . -}}
-                    </div>
+                {{ if .Site.Params.main.footerBelowFold }}
+                    {{ block "main" . }}{{ end -}}
                 {{ end }}
-            {{ end -}}
+            </div>
+
+            {{ if not .Site.Params.main.footerBelowFold }}
+                {{ block "main" . }}{{ end -}}
+                {{- partial "footer/social.html" . -}}
+                {{- partial "footer/footer.html" . -}}
+            {{ end }}
         </div>
 
-        {{ if and .IsHome .Site.Params.home.fullCover -}}
-            <div class="">
-                {{ block "main" . }}{{ end -}}
-            </div>
-            <div class="">
-                {{- partial "footer/social.html" . -}}
-                {{- partial "footer/footer.html" . -}}
-            </div>
-        {{ else if .Site.Params.main.footerBelowFold }}
-            <div class="">
-                {{- partial "footer/social.html" . -}}
-                {{- partial "footer/footer.html" . -}}
-            </div>
+        {{ if .Site.Params.main.footerBelowFold }}
+            {{- partial "footer/social.html" . -}}
+            {{- partial "footer/footer.html" . -}}
         {{ end }}
 
         {{- partial "footer/toast-container.html" . -}}
         {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
-        {{- $modules := site.Params.modules.optional | intersect .Params.modules -}}
-        {{- range $index, $mod := $modules -}}
-            {{- $filename := printf "js/%s.bundle.js" $mod -}}
-            {{- $match := printf "js/modules/%s/**.js" $mod -}}
-            {{- $skipTemplate := false -}}
-            {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
-                {{- if in site.Params.modules.disableTemplate $mod}}
-                    {{- $skipTemplate = true -}}
-                {{- end -}}
-            {{- end -}}
-
-            {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "page" .) }}
-        {{- end -}}
+        {{- partial "partials/optional-scripts.html" . -}}
     </body>
 </html>

layouts/_default/list.html

@@ -1,13 +1,30 @@
+{{- define "featured" }}
+    {{ .Render "list/header" }}
+{{ end }}
+
 {{- define "main" -}}
-    {{- $content := partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) -}}
-    {{- partial "assets/section-list.html" (dict 
-        "page" .
-        "section" .Type
-        "home" false
-        "nested" .Params.Nested
-        "title" (or .Title .Type)
-        "description" .Description
-        "content" $content
-        "paginate" true)
-    -}}
-{{- end -}}
+    {{- $page := . -}}
+    {{- $sections := $.Scratch.Get "sections" -}}
+    {{- $fullCover := $.Scratch.Get "fullCover" -}}
+    {{- $layout := $page.Params.layout -}}
+
+    <div class="container-xxl p-4 px-xxl-0">
+        {{- if ne $layout "featured" -}}
+            {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
+                <div>{{ partial "assets/breadcrumb.html" $page }}</div>
+            {{ end -}}
+        {{- end -}}
+
+        {{ .Render "list/body" }}
+
+        {{ .Render "list/footer" }}
+    </div>
+
+    {{/* Display generated sections */}}
+    {{ range $sections }}
+        {{ .content | safeHTML }}
+    {{ end }}
+
+    {{/* Fill remaining space to push page footer to viewport bottom */}}
+    <div class="container-fluid flex-fill"></div>
+{{- end -}}

layouts/_default/list/body.html

@@ -0,0 +1,27 @@
+{{- $sections := $.Scratch.Get "sections" -}}
+{{- $fullCover := $.Scratch.Get "fullCover" -}}
+{{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+{{- $layout := .Params.layout -}}
+
+<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+    <div class="col-12 col-{{ $breakpoint.current }}-9">
+        {{ if not .IsHome }}
+            {{ with .Title }}<p id="{{ anchorize . }}" class="display-4 mt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+        {{ end }}
+        {{ if (.Params.menu) }}
+            {{- partial "assets/section-menu.html" . -}}
+        {{- end -}}
+        {{- $loading := "" -}}
+        {{- if or (eq $layout "featured") .IsHome -}}
+            {{- if $fullCover }}{{ $loading = site.Params.main.loading }}{{ end }}
+        {{ end }}
+        {{- $content := partial "utilities/ProcessContent" (dict "page" . "raw" .RawContent "loading" $loading) -}}
+        {{- $content | safeHTML -}}
+        {{ if and (and $sections (eq (len $sections) 1)) (not $content) }}
+            <p class="pt-4">{{- T "emptyList" }}.</p>
+        {{ end }}
+    </div>
+    <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
+        {{/* Empty in default layout */}}        
+    </div>
+</div>    

layouts/_default/list/footer.html

@@ -0,0 +1 @@
+{{/* Adds a custom footer directly below the list body */}}

layouts/_default/list/header.html

@@ -0,0 +1,35 @@
+{{- $sections := $.Scratch.Get "sections" -}}
+{{- $headings := slice }}
+{{ if .Params.sectionMenu }}
+    {{ range $sections }}
+        {{ $headings = $headings | append .title }}
+    {{ end }}
+{{ end }}
+
+{{- $orientation := site.Params.list.feature.orientation | default "horizontal" -}}
+{{- $width := site.Params.list.feature.width | default 6 -}}
+{{- $justify := site.Params.list.feature.justify | default "center" -}}
+{{- $align := site.Params.list.feature.align | default "center" -}}
+{{- $actions := .Params.actions -}}
+{{- $layout := .Params.layout -}}
+
+{{ if .IsHome }}
+    {{- $orientation = or site.Params.home.feature.orientation $orientation -}}
+    {{- $width = or site.Params.home.feature.width $width -}}
+    {{- $justify = or site.Params.home.feature.justify $justify -}}
+    {{- $align = or site.Params.home.feature.align $align -}}
+    {{- $actions = (or $actions site.Params.featured.actions) -}}
+{{ end }}
+
+{{/* Display featured section */}}
+{{- if or (eq $layout "featured") .IsHome -}}
+    {{- partial "list/featured.html" (dict 
+        "page" .
+        "headings" $headings
+        "actions" $actions
+        "orientation" $orientation
+        "width" $width
+        "justify" $justify
+        "align" $align) 
+    -}}
+{{- end -}}

layouts/_default/single.html

@@ -1,118 +1,15 @@
-{{- define "partials/header.html" -}}
-    {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
-    {{ if in (slice "docs" "minimal") .Layout }}
-        {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
-        {{ partial "assets/sharing.html" . }}
-        <p class="lead mb-5">{{ .Description }}</p>
-    {{ else }}
-        {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
-        {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-        {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
-        <small class="text-body-secondary text-uppercase">
-            {{ $datestr | i18n "postedOnDate" -}}
-            {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
-            {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
-            {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
-        </small>
+{{- define "partials/single-main.html" -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+    {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
 
-        {{- if gt (len (.GetTerms "tags")) 0 -}}
-            <div class="mt-3">
-                <div class="d-none-dark">
-                    <div class="hstack gap-3">
-                        {{ range (.GetTerms "tags") -}}
-                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
-                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
-                        {{ end -}}
-                    </div>
-                </div>
-                
-                <div class="d-none-light">
-                    <div class="hstack gap-3">
-                        {{ range (.GetTerms "tags") -}}
-                            {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
-                            {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "primary" "size" "sm" "outline" "true") }}
-                        {{ end -}}
-                    </div>
-                </div>
-            </div>
-        {{- end -}}
-        {{ partial "assets/sharing.html" . }}
-        <p class="lead mb-5 mt-3">{{ .Description }}</p>
-    {{ end }}
-{{ end -}}
+    {{ .Render "single/header" }}
 
-{{ define "partials/body.html" -}}
     {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+        <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
     {{- end -}}
+    {{ .Render "single/body" }}
 
-    {{ if not (in (slice "docs" "minimal") .Layout) }}
-        {{- $thumbnail := "" -}}
-        {{- $credits := "" -}}
-        
-        {{- if reflect.IsMap .Params.Thumbnail -}}
-            {{- $thumbnail = .Params.Thumbnail.url -}}
-            {{- $author := "" -}}
-            {{- if and .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author }}
-                {{- $author = partial "utilities/link" (dict "destination" .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author) -}}
-            {{- else if .Params.Thumbnail.author }}
-                {{- $author = .Params.Thumbnail.author -}}
-            {{- end -}}
-
-            {{- $origin := "" -}}
-            {{- if and .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin }}
-                {{- $origin = partial "utilities/link" (dict "destination" .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin) -}}
-            {{- else if .Params.Thumbnail.origin }}
-                {{- $origin = .Params.Thumbnail.origin -}}
-            {{- end }}
-
-            {{- if and $author $origin }}
-                {{ $credits = printf (T "photoFull") $author $origin }}
-            {{ else if $author }}
-                {{ $credits = T "photoShort" $author }}
-            {{ end }}
-        {{ else }}
-            {{- $thumbnail = .Params.Thumbnail -}}
-            {{ if or .Params.photoCredits .Params.photoSource }}
-                {{ warnf "DEPRECATED: frontmatter variables `photoCredits` and `photoSource` have been deprecated in release v0.18: %s" .RelPermalink }}
-            {{ end }}
-            {{- if and .Params.photoCredits .Params.PhotoSource }}{{ $credits = printf (T "photoFull") .Params.photoCredits .Params.PhotoSource }}{{ end -}}
-        {{- end -}}
-
-        {{ if $thumbnail -}}
-            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
-        {{ end -}}
-    {{ end }}
-
-    {{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}
-{{ end -}}
-
-{{ define "partials/footer.html" -}}
-    {{ if eq .Layout "docs" }}
-        <div class="mt-5 small">
-            {{ partial "utilities/git.html" . }}
-        </div>
-    {{ else if ne .Layout "minimal" }}
-        <div class="row row-cols-2 mt-5 mb-3">
-            <div class="col">
-                {{ with .NextInSection -}}
-                    {{ $next := . -}}
-                    {{ with .OutputFormats.Get "html" -}}
-                        <a class="next" href="{{ $next.RelPermalink }}">
-                            {{- partial "assets/icon.html" (dict "icon" "fas arrow-left") }}&nbsp;{{ $next.LinkTitle }}</a>
-                    {{- end -}}
-                {{ end -}}
-            </div>
-            <div class="col text-end">
-                {{ with .PrevInSection -}}
-                    {{ $prev := . -}}
-                    {{ with .OutputFormats.Get "html" -}}
-                        <a class="previous" href="{{ $prev.RelPermalink }}">{{ $prev.LinkTitle }}&nbsp;{{- partial "assets/icon.html" (dict "icon" "fas arrow-right") }}</a>
-                    {{- end -}}
-                {{ end -}}
-            </div>
-        </div>
-    {{ end }}
+    {{ .Render "single/footer" }}
     {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
         <hr>
         {{ partial "assets/comments.html" . }}
@@ -122,50 +19,48 @@
 {{ define "main" -}}
     {{- $menu := .Scratch.Get "sidebar" -}}
     {{- $version := .Scratch.Get "version" -}}
-    {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
-    {{ if and $menu $sidebar -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+
+    {{ $sidebar := "" }}
+    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
+    {{ if and $menu $hasSidebar  }}{{ $sidebar = partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}{{ 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-header">
-                <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper .Section }}</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                <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>
             </div>
             <div class="offcanvas-body">
-                {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
+                {{ . | safeHTML }}
             </div>
         </div>
-    
-        <div class="container-xxl px-3 px-xxl-0">
-            <div class="row row-cols-md-2 row-cols-lg-3">
-                <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
-                    {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
+    {{ end }}
+
+    <div class="container-xxl flex-fill p-4 px-xxl-0">
+        {{ 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 }}
                 </div>
-                <div class="col col-md-9 col-lg-8 mb-5 p-4">
-                    {{ partial "partials/header.html" . }}
-                    {{ partial "partials/body.html" . }}
-                    {{ partial "partials/footer.html" . }}
+                <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 p-4">
+                    {{ partial "partials/single-main.html" . }}
                 </div>
-                <div class="col col-lg-2 d-none d-lg-block pt-5">
-                    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-                        {{ partial "assets/toc.html" . -}}
-                    {{ end -}}
+                <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
+                    {{ $toc | safeHTML }}
                 </div>
             </div>
-        </div>
-    {{ else }}
-        <div class="container-xxl px-3 px-xxl-0">
-            <div class="row row-cols-1 row-cols-sm-3">
-                <div class="col col-md-2 d-none d-md-block"></div>
-                <div class="col col-sm-12 col-md-8">
-                    {{ partial "partials/header.html" . }}
-                    {{ partial "partials/body.html" . }}
-                    {{ partial "partials/footer.html" . }}
+        {{ else }}
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
+                <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
+                    {{ partial "partials/single-main.html" . }}
                 </div>
-                <div class="col col-md-2 d-none d-md-block">
-                    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-                        {{ partial "assets/toc.html" . -}}
-                    {{ end -}}
+                <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
+                    {{ $toc | safeHTML }}
                 </div>
             </div>    
-        </div>
-    {{ end -}}
+        {{ end -}}
+    </div>
 {{ end -}}

layouts/_default/single/body.html

@@ -0,0 +1,3 @@
+{{- partial "single/thumbnail.html" (dict "page" . "class" "mb-5") -}}
+
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/_default/single/footer.html

@@ -0,0 +1,20 @@
+<div class="row row-cols-2 mt-5 mb-3">
+    <div class="col">
+        {{ with .NextInSection -}}
+            {{ if .OutputFormats.Get "html" -}}
+                <a class="next" href="{{ .RelPermalink }}">
+                    {{- partial "assets/icon.html" (dict "icon" "fas arrow-left" "spacing" false) }}&nbsp;{{ .LinkTitle }}
+                </a>
+            {{- end -}}
+        {{ end -}}
+    </div>
+    <div class="col text-end">
+        {{ with .PrevInSection -}}
+            {{ if .OutputFormats.Get "html" -}}
+                <a class="previous" href="{{ .RelPermalink }}">
+                    {{ .LinkTitle }}&nbsp;{{- partial "assets/icon.html" (dict "icon" "fas arrow-right" "spacing" false) }}
+                </a>
+            {{- end -}}
+        {{ end -}}
+    </div>
+</div>

layouts/_default/single/header.html

@@ -0,0 +1,52 @@
+{{- $metadata := "full" -}}
+{{ if isset .Params "metadata" }}
+    {{ $metadata = .Params.metadata }}
+{{ else }}
+    {{- with (index site.Params.pages .Type ) -}}
+        {{ if isset . "metadata" }}{{ $metadata = (index . "metadata") }}{{ end }}
+    {{- end -}}
+{{ end }}
+
+{{- $supportedStates := slice "full" "original" "none" -}}
+{{- if not (in $supportedStates $metadata) -}}
+    {{- errorf "layout [_default/single/header.html] - Invalid value for param 'metadata': %s" $metadata -}}
+{{- end -}}
+
+{{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+{{ if ne $metadata "none" }}
+    {{ $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;
+        {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
+        {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
+    </small>
+{{ end }}
+
+{{- if gt (len (.GetTerms "tags")) 0 -}}
+    <div class="mt-3">
+        <div class="d-none-dark">
+            <div class="hstack gap-1">
+                {{ range (.GetTerms "tags") -}}
+                    {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                    {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "light" "size" "sm") }}
+                {{ end -}}
+            </div>
+        </div>
+        
+        <div class="d-none-light">
+            <div class="hstack gap-1">
+                {{ range (.GetTerms "tags") -}}
+                    {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}}
+                    {{ partial "assets/button.html" (dict "href" $url "title" .LinkTitle "color" "primary" "size" "sm" "outline" "true") }}
+                {{ end -}}
+            </div>
+        </div>
+    </div>
+{{- end -}}
+{{ partial "assets/sharing.html" . }}
+<p class="lead mb-5 mt-3">{{ .Description }}</p>

layouts/_default/single/panel-toc.html

@@ -0,0 +1,42 @@
+{{- $download := .Params.download -}}
+{{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+    {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
+{{- end -}}
+
+{{- $toc := .Site.Params.navigation.toc -}}
+{{ if $toc }}
+    {{ if isset .Params "includeToc" }}
+        {{ $toc = .Params.includeToc }}
+    {{ else }}
+        {{- with (index site.Params.pages .Type) -}}
+            {{ if isset . "includetoc" }}
+                {{ $toc = index . "includetoc" }}
+                {{ if ne (printf "%T" $toc) "bool" }}
+                    {{ errorf "Expected bool value in site parameters: pages.%s.includeToc" $.Type }}
+                {{ end }}
+            {{ end }}
+    {{- end -}}
+    {{ end }}
+{{ end }}
+
+<div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    {{ with $download }}
+        {{ $title := (T "download" ) }}
+        {{ $lang := strings.TrimPrefix "." (path.Ext (path.BaseName .)) }}
+        {{ if and $lang (ne (string site.LanguageCode) $lang) }}
+            {{ range site.Languages }}
+                {{ if eq .LanguageCode $lang }}
+                    {{ $title = printf "%s (%s)" (T "download") (T (printf "lang_%s" .LanguageCode)) }}
+                {{ end }}
+            {{ end }}
+        {{ end }}
+        <div class="mb-5 text-center">
+            {{ $attr := dict "download" (path.Base .) }}
+            {{ partial "assets/button.html" (dict "href" . "title" $title "color" "primary" "outline" "true" "icon" "fas download" "size" "sm" "attributes" $attr) }}
+        </div>
+    {{ end }}
+
+    {{ if $toc }}
+        {{ partial "assets/toc.html" (dict "page" . "download" $download) }}
+    {{ end -}}
+</div>

layouts/docs/single/body.html

@@ -0,0 +1 @@
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/docs/single/footer.html

@@ -0,0 +1,3 @@
+<div class="mt-5 small">
+    {{ partial "utilities/git.html" . }}
+</div>

layouts/docs/single/header.html

@@ -0,0 +1,3 @@
+{{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+{{ partial "assets/sharing.html" . }}
+<p class="lead mb-5">{{ .Description }}</p>

layouts/index.html

@@ -1,40 +0,0 @@
-{{- define "featured" -}}
-    {{- partial "home/featured.html" . -}}
-{{- end -}}
-
-{{- define "main" -}}
-    {{- $page := . -}}
-    {{- $sections := site.Params.home.sections -}}
-    {{- if not $sections -}}
-        {{ range $section := site.Sections }}
-            {{ $sections = $sections | append $section.Type }}
-        {{ end }}
-    {{- end -}}
-
-    {{- range $index, $section := $sections -}}
-        {{- $sectionPage := site.GetPage "section" $section -}}
-        {{- $sectionURL := $sectionPage.RelPermalink -}}
-        {{- $title := or $sectionPage.Title $sectionPage.Type -}}
-        {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
-        {{- $icon := $sectionPage.Params.Icon -}}
-        {{- $content := $sectionPage.Content -}}
-        {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
-        {{- $moreTitle := "" -}}
-        {{- with (index site.Params.sections $section) -}}
-            {{- with index . "reference" }}{{ $moreTitle = . }}{{ end -}}
-        {{- end -}}
-        {{- $moreTitle = or $moreTitle (printf (T "more" (pluralize $sectionTitle))) -}}
-
-        {{- partial "assets/section-list.html" (dict 
-            "page" $page 
-            "section" $section 
-            "home" true 
-            "nested" true 
-            "thumbnail" $thumbnail
-            "icon" $icon
-            "content" $content
-            "moreTitle" $moreTitle
-            "sectionURL" $sectionURL)
-        -}}
-    {{- end -}}
-{{- end -}}

layouts/minimal/single/body.html

@@ -0,0 +1 @@
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/minimal/single/footer.html

@@ -0,0 +1 @@
+{{/* Intentionally left blank to suppress page navigation */}}

layouts/minimal/single/header.html

@@ -0,0 +1,3 @@
+{{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+{{ partial "assets/sharing.html" . }}
+<p class="lead mb-5">{{ .Description }}</p>

layouts/partials/assets/button.html

@@ -28,6 +28,7 @@
     "tab"           Optional flag to indicate if an external link should open in a new tab, defaults to setting
                     "main.externalLinks.tab" in the site's parameters.
     "attributes"    Optional dictionary of key-value pairs added as custom attributes to the button element ('<a>').
+    "spacing"       Optional flag to add spacing to the inline button, defaults to "true".
 -->
 
 {{- $title := trim .title " \r\n" -}}
@@ -126,6 +127,8 @@
 {{- $target := "" -}}
 {{- $rel := "" -}}
 
+{{- $spacing := .spacing | default true -}}
+
 {{- if $isExternal -}}
     {{- if $tab -}}
         {{- $target = "_blank" -}}
@@ -158,7 +161,7 @@
     >
     <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) }}</div>{{ end }}
+        {{- 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>
 
     {{- with $badge }}
@@ -167,4 +170,4 @@
             {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
         </span>
     {{- end -}}  
-</a>
+</a>{{ if $spacing }}&nbsp;{{- end }}

layouts/partials/assets/card-group.html

@@ -31,9 +31,12 @@
     "footer"        Optional footer components of the card, displayed in small caps. Supported values are "full",
                     "publication", "tags", and "none" (default).
     "orientation"   Optional placecement of the thumbnail, either "stacked" (default), "horizontal", or "none".
+    "ratio"         Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
+                    orientation).
 -->
 
 {{- $page := .page -}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
 
 {{- if not (in (slice "*hugolib.pageState" "*hugolib.pageForShortcode") (printf "%T" $page)) -}}
     {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page': %T" $page -}}
@@ -64,7 +67,7 @@
 {{ range $index, $element := $pages }}
     {{ $params := dict }}
     <!-- regular page -->
-    {{- if $element.RelPermalink -}}
+    {{- if and $element.RelPermalink $element.File -}}
         {{- $params = merge $params (dict "path" $element.File.Path) -}}
     <!-- headless page -->
     {{- else -}}
@@ -106,10 +109,10 @@
 {{- end -}}
 {{- $colGrid := "" -}}
 {{- if eq $cols "1" }}{{ $colGrid = "row-cols-1" -}}
-{{- else if eq $cols "2" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" }}{{ else }}{{ $colGrid = "row-cols-2" }}{{ end -}}
-{{- else if eq $cols "3" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ end -}}
-{{- else if eq $cols "4" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ end -}}
-{{- else if eq $cols "5" }}{{ if $responsive }}{{ $colGrid = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ end -}}
+{{- 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 -}}
+{{- 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 -}}
+{{- 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 -}}
+{{- 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 -}}
 {{ end -}}
 
 {{- $gutter := .gutter | default "4" -}}
@@ -139,7 +142,16 @@
 {{- $header := .header -}}
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
-{{- $wrapper := .wrapper | default "p-4 px-xxl-0" -}}
+{{- $ratio := .ratio -}}
+{{- $wrapper := .wrapper | default "p-0" -}}
+
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
 
 {{- if and (eq $cols 1) (eq $orientation "horizontal") }}{{ $orientation = "horizontal-sm" }}{{ end -}}
 
@@ -153,6 +165,8 @@
                 "header" $header
                 "footer" $footer
                 "orientation" $orientation
+                "ratio" $ratio
+                "loading" $loading
             ) -}}
             {{- $params = merge $params $element }}
 
@@ -173,7 +187,7 @@
             <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
         {{- end -}} 
     {{ else }}
-        {{ if gt $count $max }}
+        {{ if and (gt $count $max) $moreTitle }}
             <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
         {{ end }}
     {{ end }}

layouts/partials/assets/card.html

@@ -18,6 +18,8 @@
                     "publication", "tags", and "none" (default).
     "description"   Optional description of the card.
     "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+    "ratio"         Optional ratio of the thumbnail image, defaults to "16x9" (stacked orientation) or "1x1" (horizontal
+                    orientation).
     "alt"           Optional alternate text for the thumbnail, uses "title" by default.
     "icon"          Optional Font Awesome icon, displayed on top or the left of the card.
     "orientation"   Optional placecement of the thumbnail or icon, either "stacked" (default), "horizontal",
@@ -88,6 +90,7 @@
 {{- $href := .href -}}
 {{- $description := .description -}}
 {{- $thumbnail := .thumbnail -}}
+{{- $ratio := .ratio -}}
 {{- $icon := .icon -}}
 
 {{- $color := "" -}}
@@ -143,16 +146,24 @@
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/card.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 {{ if ne $gutter "0" }}<div class="g-{{ $gutter }}">{{ end }}
 {{- if hasPrefix $orientation "horizontal" -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
             <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ end }}">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
                 {{- else if $icon -}}
-                    <div class="p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid text-secondary fa-fw" $icon)) -}}
+                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
                     </div>
                 {{- end -}}
             </div>
@@ -170,10 +181,10 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title)) -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
-            <div class="p-{{ $padding }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
+            <div class="card-icon  p-{{ $padding }}">
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/partials/assets/carousel-item.html

@@ -5,8 +5,16 @@
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
 
-<div class="carousel-item{{ if $active }} active{{ end }}">
-    {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "page" $page "innerClass" "d-block w-100" "portrait" $portrait) }}
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/carousel-item.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
+<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 "innerClass" "d-block w-100" "portrait" $portrait "loading" $loading) }}
     <div class="carousel-caption gradient"></div>
     {{ with $caption }}
         <div class="carousel-caption d-none d-md-block">

layouts/partials/assets/image.html

@@ -21,6 +21,14 @@
                     applicable to vector graphics.
     "portrait":     Optional 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.
+    "loading":      Optional loading behavior of the image, either "eager" (default) or "lazy". The loading of lazily
+                    loaded images is deferred until the image is within scrolling range of the viewport. This should
+                    reduce the initial loading time of the website. It is recommended to lazily load only those images
+                    that are below the page fold.
+    "priority":     Optional fetch priority of the image, either "high", "low", or "auto" (default). The priority
+                    provides a hint to the browser on how it should prioritize the fetch of the image relative to other
+                    images. The implementation is experimental and currently only supported by Chrome, Edge, and Opera.
+                    (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchpriority#browser_compatibility).
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
     "innerClass":   Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
@@ -40,9 +48,7 @@
 {{- $url := .url -}}
 
 {{- $mode := false -}}
-{{- with .mode -}}
-    {{ $mode = . -}}
-{{- end -}}
+{{- with .mode }}{{ $mode = . }}{{ end -}}
 {{- $outerClass := .outerClass -}}
 {{- $innerClass := .innerClass -}}
 {{- $title := .title -}}
@@ -53,6 +59,23 @@
 {{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
 {{- $page := .page -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'loading'" -}}
+    {{ end -}}
+{{- end -}}
+{{- $lazy := eq $loading "lazy" -}}
+
+{{- $priority := .priority -}}
+{{- $validPriorities := slice "high" "low" "auto" -}}
+{{- if $priority -}}
+    {{ if not (in $validPriorities $priority) -}}
+        {{- errorf "partial [assets/image.html] - Invalid value for param 'priority'" -}}
+    {{ end -}}
+{{- end -}}
+{{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
 
 {{- define "partials/image-portrait.html" -}}
     {{- $dimensions := slice }}
@@ -68,12 +91,14 @@
             {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
         {{- end -}}
     {{- end -}}
+
     {{- $ret := "" }}
     {{- if reflect.IsSlice $dim -}}
         {{ $ret = $portraits -}}
     {{- else if gt (len $portraits) 0 -}}
         {{- $ret = index $portraits 0 -}}
     {{- end -}}
+
     {{- return $ret -}}
 {{- end -}}
 
@@ -87,29 +112,23 @@
     {{- $fallback := "" -}}
 
     {{- with $img -}}
-        {{- if eq $ratio "4x3" -}}
-            {{- $dim  = "1400x1050" }}
-        {{- else if eq $ratio "3x2" -}}
-            {{- $dim  = "1400x933" }}
-        {{- else if eq $ratio "1x1" -}}
-            {{- $dim  = "1400x1400" }}
-        {{- else if eq $ratio "16x9" -}}
-            {{- $dim = "1400x788" -}}
-        {{- else if eq $ratio "21x9" -}}
-            {{- $dim = "1400x600" -}}
+        {{- if eq $ratio "4x3" -}}{{- $dim  = "1400x1050" }}
+        {{- else if eq $ratio "3x2" -}}{{- $dim  = "1400x933" }}
+        {{- else if eq $ratio "1x1" -}}{{- $dim  = "1400x1400" }}
+        {{- else if eq $ratio "16x9" -}}{{- $dim = "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}{{- $dim = "1400x600" -}}
         {{- else -}}
             {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
         {{- end -}}
 
-        {{- if $portrait -}}
-            {{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}
-        {{- end -}}
+        {{- if $portrait -}}{{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}{{- end -}}
 
         {{- if $ratio -}}
             {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
         {{- else -}}
             {{- $fallback = ($img.Fit (printf "%s jpg" $dim)) -}}
         {{- end -}}
+
         {{- $clean := path.Ext $img.RelPermalink -}}
         {{- $ext := path.Ext $img.RelPermalink -}}
         {{- $fallback = $fallback | resources.Copy (replace $img.RelPermalink $clean (printf "-%s%s" $dim $ext)) -}}
@@ -131,7 +150,7 @@
     {{- $dims := slice -}}
     {{- with $img -}}
         {{- if eq $ratio "4x3" -}}
-            {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+            {{- $dims = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
         {{- else if eq $ratio "3x2" -}}
             {{- $dims = slice "576x384"  "768x512" "992x661" "1200x800"  "1400x933" -}}
         {{- else if eq $ratio "1x1" -}}
@@ -158,6 +177,7 @@
             {{- else -}}
                 {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
             {{- end -}}
+
             {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
             {{- if $absoluteURL -}}
                 {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
@@ -165,6 +185,7 @@
                 {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
             {{- end -}}
         {{- end -}}
+        
         {{- $imgset = strings.TrimPrefix ", " $imgset -}}
     {{- end -}}
 
@@ -186,7 +207,9 @@
     {{- $imgset := "" -}}
     {{- $mode := .mode -}}
     {{- $modes := .modes -}}
+    {{- $lazy := .lazy -}}
     {{- $page := .page -}}
+    {{- $priority := .priority -}}
     {{- $isVector := false -}}
 
     {{- $segments := split $url "#" -}}
@@ -200,15 +223,26 @@
     {{- if hasSuffix $url "svg" -}}
         {{- $fallbackURL = $url -}}
         {{- $isVector = true -}}
+        {{- $res := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
+        {{ if not $res }}
+            {{- if not (fileExists (path.Join "/static" $url)) -}}
+                {{ warnf "Cannot find vector image resource: %q" $url -}}
+            {{ end }}
+        {{ end }}
     {{- else -}}
-        {{- $img := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+        {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+        {{- $img := "" -}}
+        {{ with $res }}
+            {{ $img = $res.resource }}
+            {{ if $res.mirror }}{{ $innerClass = printf "%s mirrorred" $innerClass }}{{ end }}
+        {{ end }}
         {{- if $img -}}
             {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
-                {{- if $absoluteURL -}}
-                    {{- $fallbackURL = $fallback.Permalink -}}
-                {{- else -}}
-                    {{- $fallbackURL = $fallback.RelPermalink -}}
-                {{- end -}}
+            {{- if $absoluteURL -}}
+                {{- $fallbackURL = $fallback.Permalink -}}
+            {{- else -}}
+                {{- $fallbackURL = $fallback.RelPermalink -}}
+            {{- end -}}
             {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
         {{- end -}}
     {{- end -}}
@@ -219,18 +253,33 @@
         {{- end -}}
     {{- end -}}
 
+    {{- $width := "" -}}
+    {{- $height := "" -}}
+    {{- $input := (split (path.BaseName $fallbackURL) "-") | collections.Reverse -}}
+    {{ if $isVector }}
+        {{- $height = "500" -}}
+        {{ $width = string (partial "utilities/GetWidth.html" (dict "path" $fallbackURL "height" 500)) }}
+    {{- else if gt ($input | len) 1 -}}
+        {{- $dim := (split (index $input 0) "x") -}}
+        {{- if eq ($dim | len) 2 -}}
+            {{- $width = index $dim 0 -}}
+            {{- $height = index $dim 1 -}}
+        {{- end -}}
+    {{- end }}
+
     {{- if $caption -}}
         <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
     {{ end }}
-    <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">
+    <div class="{{ if not $caption }}{{ $outerClass }}{{ end }}">        
         {{- if not $anchor -}}
             <img class="img-fluid {{ $innerClass }}"
-                {{ with $imgset -}}
-                srcset="{{ . }}"
-                sizes="100vw"
-                {{- end }}
                 src="{{ $fallbackURL }}"
-                alt="{{ $title }}">
+                {{ if $lazy }}loading="lazy"{{ end }}
+                {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
+                {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
+                {{ with $height }}height="{{ . }}"{{ end }}
+                {{ with $width }}width="{{ . }}"{{ end }}
+                {{ with $title }}alt="{{ . }}"{{ end }}>
         {{- else }}
             <svg class="{{ $innerClass }}">
                 <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
@@ -238,12 +287,26 @@
         {{ end }}
     </div>
     {{- if $caption -}}
-        <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
-    </figure>
+            <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
+        </figure>
     {{- end -}}
 {{- end -}}
 
+
 <!-- Initiate the regular or color-mode image -->
+{{ $params := dict }}
+{{- $params = merge $params (dict
+    "ratio" $ratio
+    "portrait" $portrait
+    "outerClass" $outerClass
+    "innerClass" $innerClass
+    "title" $title
+    "caption" $caption
+    "lazy" $lazy
+    "priority" $priority
+    "page" $page)
+-}}
+
 {{- if $mode -}}
     {{- $ext := path.Ext $url -}}
     {{- $base := strings.TrimSuffix $ext $url -}}
@@ -253,28 +316,14 @@
 
     {{- range $suffix := $modes -}}
         {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
-        {{- partial "partials/image-definition.html" (dict 
-            "ratio" $ratio
-            "portrait" $portrait
+        {{- $params = merge $params (dict
             "url" $image
-            "outerClass" $outerClass
-            "innerClass" $innerClass
-            "title" $title
-            "caption" $caption
             "mode" $suffix
-            "modes" $modes
-            "page" $page)
+            "modes" $modes)
         -}}
+        {{- partial "partials/image-definition.html" $params -}}
     {{- end -}}
-{{- else -}}
-    {{- partial "partials/image-definition.html" (dict 
-        "ratio" $ratio
-        "portrait" $portrait
-        "url" $url
-        "outerClass" $outerClass
-        "innerClass" $innerClass
-        "title" $title
-        "caption" $caption
-        "page" $page)
-    -}}
+{{ else }}
+    {{- $params = merge $params (dict "url" $url) -}}
+    {{- partial "partials/image-definition.html" $params -}}
 {{- end -}}

layouts/partials/assets/list.html

@@ -28,7 +28,9 @@
     {{- $thumbnail := .thumbnail -}}
     {{- $style := .style -}}
     {{- $mode := .mode -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode) -}}
+    {{- $title := .title -}}
+    {{- $loading := .loading -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "outerClass" $style "mode" $mode "loading" $loading) -}}
 {{- end -}}
 
 {{- $page := .page -}}
@@ -49,6 +51,14 @@
 {{ $vertical := false }}
 {{ $type := "pills" }}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/list.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="d-none d-md-block p-0">
     {{- range $index, $item := $list -}}
         {{- $odd := eq (mod $index 2) 1 -}}
@@ -61,7 +71,7 @@
                         {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
                         {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
                     {{ end }}
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "style" $style "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "title" $item.Title "style" $style "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
@@ -78,7 +88,7 @@
         <div class="container d-flex flex-column">
             <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
                 <div class="col-12 text-center">
-                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "mode" $item.Params.colormode) }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $thumbnail "title" $item.Title "mode" $item.Params.colormode "loading" $loading) }}
                 </div>
                 <div class="col-12 p-3">
                     {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (partial "utilities/GetDescription.html" $item)) }}

layouts/partials/assets/nav-item.html

@@ -10,6 +10,8 @@
     "body"          The body content of the nav-item, supports Markdown and HTML (if enabled).
     "show"          Optional flag to indicate the item should be shown as expanded (only one can be shown at a time).
     "disabled"      Optional flag to indicate the item should be in a disabled state.
+    "type"          Optional type of the item to render, supports "accordion" as alternative format. Defaults to
+                    "tab-pane".
 -->
 
 {{- $id := .id -}}
@@ -21,9 +23,33 @@
 {{- $body := .body -}}
 {{- $show := .show -}}
 {{- $disabled := .disabled -}}
+{{- $type := .type -}}
+{{- $illustration := .illustration -}}
 
-<div class="tab-pane{{ if $show }} active {{ if $fade }}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}{{ with $class }} {{ . }}{{ end }}" id="{{ $parentID }}-{{ $id }}" 
-    role="tabpanel" aria-labelledby="{{ $parentID }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
-    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
-    {{ $body }}
-</div>
+{{ if eq $type "accordion" }}
+    <div class="accordion-item{{ if $show }} show{{ end }}{{ with $class }} {{ . }}{{ end }}">
+        {{- with $header -}}
+            <h2 class="accordion-header m-0" id="accordion-{{ $parentID }}-heading-{{ $id }}">
+                <button class="accordion-button collapsed {{ if $disabled }} text-secondary{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-{{ $parentID }}-item-{{ $id }}" aria-expanded="false" aria-controls="accordion-{{ $parentID }}-item-{{ $id }}"{{ if $disabled }} disabled{{ end }}>
+                    {{ if $illustration }}
+                        <div class="row">
+                            <div class="col-3 col-sm-2 my-auto">{{ $illustration | safeHTML }}</div>
+                            <div class="col-9 col-sm-10 fs-6 fs-sm-5 my-auto">{{ . }}</div>
+                        </div>
+                    {{ else }}
+                        {{ . }}
+                    {{ end }}
+                </button>
+            </h2>
+        {{- end -}}
+        <div id="accordion-{{ $parentID }}-item-{{ $id }}" class="accordion-collapse collapse{{ with $class }} {{ . }}{{ end }}" aria-labelledby="{{ $parentID }}-heading-{{ $id }}" data-bs-parent="#accordion-{{ $parentID }}">
+            <div class="accordion-body">{{- $body | safeHTML -}}</div>
+        </div>
+    </div>
+{{ else }}
+    <div class="tab-pane{{ if $show }} active {{ if $fade }}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}{{ with $class }} {{ . }}{{ end }}" id="{{ $parentID }}-{{ $id }}" 
+        role="tabpanel" aria-labelledby="{{ $parentID }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+        data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+        {{ $body }}
+    </div>
+{{ end }}

layouts/partials/assets/nav.html

@@ -4,11 +4,12 @@
     "page"          Required context of the current page.
     "list"          Required array of pages.
     "title"         Optional title of the tab group.
-    "type"          Optional type of the tab group, either "tabs", "pills" (default), or "underline".
+    "type"          Optional type of the tab group, either "tabs", "pills" (default), "underline" or "callout".
     "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
     "class"         Optional class attribute of the tab group, e.g. “nav-fill”.
     "pane"          Optional style of the panes, either "none" (default) or "persona".
     "width"         Optional responsive width of the tab group, either "50" or "100" (default).
+    "wrap"          Optional flag to enable word wrapping of tab titles, defaults to false.
 
     In addition, the following arguments are passed to the individual tabs.
     "class"         Optional class attribute of the tab element, e.g. “w-50”.
@@ -54,6 +55,7 @@
 {{- $title := .title -}}
 {{- $class := .class -}}
 {{- $color := .color -}}
+{{- $wrap := .wrap | default false -}}
 
 {{ $supportedFlags := slice "true" "false" -}}
 {{ $verticalParam := "false" -}}
@@ -68,7 +70,7 @@
 {{ $type := "pills" }}
 {{ with .type }}
     {{ $type = . -}}
-    {{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+    {{ $supportedNavTypes := slice "tabs" "pills" "underline" "callout" -}}
     {{ if $type }}
         {{ if not (in $supportedNavTypes $type) -}}
             {{ errorf "partial [assets/nav.html] - Invalid value for param 'type': %s" $type -}}
@@ -76,38 +78,80 @@
     {{ end -}}
 {{ end -}}
 
-<div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto pt-5 pb-5">
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/nav.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
+<div class="{{ if eq $width 50 }}col-sm-12 col-md-10 col-lg-8 col-xl-6{{ else }}col-12{{ end }} mx-auto">
     {{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+    {{ if eq $type "callout" }}
+        <div class="d-lg-none">
+            <div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }} nav-callout">
+                {{- range $index, $item := $list -}}
+                    {{ partial "assets/nav-item" (dict 
+                        "id" $index
+                        "parentID" $id
+                        "fade" false
+                        "header" $item.Title
+                        "class" $class
+                        "body" (or $item.Description $item.Content)
+                        "show" false
+                        "disabled" false
+                        "type" "accordion"
+                        "illustration" (partial "utilities/GetIllustration.html" (dict "item" $item "size" "col-12"))
+                        )
+                    }}
+                {{ end -}}
+            </div>
+        </div>
+        <div class="d-none d-lg-block">
+    {{ end }}
+
     <div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
         {{- range $index, $item := $list -}}
             {{ $show := eq $index 0}}
-            <button class="nav-link text-nowrap{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
+            <button class="nav-link {{ if not $wrap }} text-nowrap{{ end }}{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
                     type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
                 {{ $item.Title }}
             </button>
         {{ end -}}
+
+        <div class="tab-content {{ if eq $type "tabs" }}border border-bottom-0  p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+            {{ range $index, $item := $list }}
+                {{ $header := $item.Title }}
+                {{ $body := $item.Content }}
+                {{ $show := eq $index 0}}
+                {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
+                <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
+                    {{- if eq $pane "persona" -}}
+                        {{- partial "assets/persona.html" (dict  
+                            "title" $item.Title
+                            "class" $class
+                            "color" $color
+                            "content" (partial "utilities/GetDescription.html" $item)
+                            "thumbnail" $thumbnail
+                            "loading" $loading
+                        ) -}}
+                    {{- else -}}
+                        {{ $illustration := (partial "utilities/GetIllustration.html" (dict "item" $item)) }}
+                        {{ if $illustration }}
+                            <div class="row">
+                                <div class="col-12 col-lg-10 order-1 order-lg-0">{{- (or $item.Description $item.Content) -}}</div>
+                                <div class="col-12 col-lg-2 order-0 order-lg-1">{{ $illustration | safeHTML }}</div>
+                            </div>
+                        {{ else }}
+                            {{- (or $item.Description $item.Content) -}}
+                        {{ end }}
+                    {{- end -}}
+                </div>    
+            {{ end }}
+        </div>
     </div>
 
-    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
-        {{ range $index, $item := $list }}
-            {{ $header := $item.Title }}
-            {{ $body := $item.Content }}
-            {{ $show := eq $index 0}}
-            {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
-            <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
-                {{- if eq $pane "persona" -}}
-                {{- partial "assets/persona.html" (dict  
-                    "title" $item.Title
-                    "class" $class
-                    "color" $color
-                    "content" (partial "utilities/GetDescription.html" $item)
-                    "thumbnail" $thumbnail
-                ) -}}
-                {{- else -}}
-                    {{- (or $item.Description $item.Content) -}}
-                {{- end -}}
-            </div>    
-        {{ end }}
-    </div>
+    {{ if eq $type "callout" }}</div>{{ end }}
     {{ if $vertical }}</div>{{ end }}
 </div>

layouts/partials/assets/navbar.html

@@ -14,7 +14,7 @@
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
-    "class":        Optional class attribute of the navbar container.
+    "class"         Optional class attribute of the navbar container.
 -->
 
 <!-- Inline partial to render the color mode switcher -->
@@ -25,25 +25,25 @@
 
     <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
         <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "colorMode" }}" aria-expanded="false" id="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
-            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="theme-icon-active">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>{{ if $collapsed }}&nbsp;{{ T "colorMode" }} {{ end }}
             <span class="d-md-none"></span>
         </a>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="{{ $id }}-theme{{ if $collapsed }}-collapsed{{ end }}">
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw") }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas sun fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorLight" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw") }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas moon fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorDark" }}
                 </a>
             </li>
             <li>
                 <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
-                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" ) }}</span>&nbsp;
+                    <span class="theme-icon">{{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke fa-fw" "spacing" false) }}</span>&nbsp;
                     {{ T "colorAuto" }}
                 </a>
             </li>
@@ -68,7 +68,7 @@
             {{- range $index, $item := $list -}}
                 {{- $active := eq $item.label $version -}}
                 {{- $disabled := false -}}
-                {{- if site.IsServer }}
+                {{- if hugo.IsServer }}
                     {{- $disabled = and $item.redirect (gt (len $item.redirect) 0) -}}
                 {{- end -}}
                 {{ if $item.url }}
@@ -154,6 +154,7 @@
         {{- errorf "partial [assets/navbar.html] - Invalid value for param 'search': %s" $searchParam -}}
     {{- end -}}
 {{- end -}}
+{{- $searchModal := and $search site.Params.navigation.searchModal -}}
 
 {{- $enableDarkMode := default false site.Params.main.enableDarkMode -}}
 {{- with .mode -}}
@@ -173,6 +174,8 @@
 
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
+{{- $horizontal := default false site.Params.navigation.horizontal -}}
+
 {{- $logo := site.Params.navigation.logo -}}
 {{- $logoLight := "" -}}
 {{- $logoDark := "" -}}
@@ -221,36 +224,38 @@
 
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-    <nav class="navbar navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
+    <nav class="navbar {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}{{ if $contrast }} navbar-contrast{{ end }}{{ with $color }} bg-{{ . }}{{ end }} p-4"{{ with $theme }} data-bs-theme="{{ . }}"{{ end }}>
         <div class="container-xxl p-0">
             <!-- Insert sidebar toggler when applicable -->
-            <div class="d-flex">
+            <div class="d-flex align-items-center">
                 {{- if $page.Scratch.Get "sidebar" -}}
-                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    <button class="navbar-toggler collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
                         {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- else -}}
                     <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                    <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    <button class="navbar-toggler collapsed p-0 mx-auto invisible" type="button">
                         {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
                     </button>
                 {{- end -}}
             </div>
     
             <!-- Insert the brand logo or name -->
-            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
+            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
                 {{- if (and $logoLight $logoDark) -}}
-                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30">
-                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30">
+                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
+                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
                 {{- else if $logo -}}
-                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30">
+                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
+                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
                 {{- else -}}
                     <span class="fw-bold">{{ $title }}</span>
                 {{- end -}}
             </a>
     
             <!-- Insert main navigation toggler -->
-            <div class="d-flex fw-30">
+            <div class="d-flex">
                 <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
                     aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
                     <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
@@ -261,15 +266,15 @@
     
             <div class="navbar-collapse collapse" id="{{ $id }}-collapse">
                 <!-- Insert search input -->
-                {{- if $search }}{{ partial "assets/search-input.html" -}}{{ end -}}
+                {{- if and $search (not $searchModal)  }}{{ partial "assets/search-input.html" }}{{ end -}}
                 
                 <!-- Render top-menu items (maximum depth of 2) -->
                 <ul class="navbar-nav ms-auto">
                     {{- range $menu := $menus -}}
-                        <li class="nav-item{{ if .HasChildren }} dropdown{{ end }}">
+                        <li class="nav-item{{ if .HasChildren }} dropdown{{ if $horizontal }} dropdown-horizontal-{{ $size }}{{ end }}{{ end }}">
                             {{- partial "assets/navbar-item.html" (dict "menu" $menu "page" $page) -}}
                             {{- if .HasChildren -}}
-                                <ul class="dropdown-menu dropdown-menu-end">
+                                <ul class="dropdown-menu">
                                     {{- range .Children -}}
                                         <li>{{- partial "assets/navbar-item.html" (dict "menu" . "parent" $menu "page" $page) -}}</li>
                                     {{- end -}}
@@ -286,15 +291,21 @@
                         <li><hr class="dropdown-divider-bg"></li>
                     {{- end -}}
     
+                    <!-- Insert version switcher -->
+                    {{- if $enableVersions -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id) -}}
+                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id) -}}
+                    {{- end -}}
+
                     <!-- Insert language switcher if applicable -->
                     {{- if $enableLanguage -}}
                         {{- $currentLang := $page.Language.Lang -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }} {{ T "languageSwitcherLabel" }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw" "spacing" false) }}&nbsp;{{ T "languageSwitcherLabel" }}&nbsp;
                             </a>
                             <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw") }}
+                                {{- partial "assets/icon.html" (dict "icon" "fas globe fa-fw" "spacing" true) }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end ">
                                 {{- if $page.IsTranslated -}}
@@ -310,25 +321,49 @@
                         </li>
                     {{- end -}}
                                     
-                    <!-- Insert version switcher -->
-                    {{- if $enableVersions -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-versions.html" (dict "page" $page "size" $size "collapsed" false "id" .id) -}}
-                    {{- end -}}
-    
                     <!-- Insert color mode switcher -->
                     {{- if $enableDarkMode -}}
-                        <!-- Insert divider -->
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
+                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
+                    {{- end -}}
+
+                    <!-- Insert modal search button -->
+                    {{- if $searchModal }}
                         <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                             <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                         </li>
                         <li><hr class="dropdown-divider-bg"></li>
     
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" true "id" .id) -}}
-                        {{- partial "partials/navbar-mode.html" (dict "size" $size "collapsed" false "id" .id) -}}
-                    {{- end -}}
+                        <a class="nav-link d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                            {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }} {{ T "ui_search" }}
+                        </a>
+                        <a class="nav-link d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{{ T "ui_search" }}" aria-expanded="false">
+                            {{ partial "assets/icon.html" (dict "icon" "fas magnifying-glass fa-fw") }}
+                        </a>
+                    {{ end -}}
                 </ul>
             </div>
         </div>
     </nav>
 </div>
+
+{{/* Insert modal search element */}}
+{{- if $searchModal }}
+    <div class="modal fade search-modal" tabindex="-1" id="search-modal" aria-labelledby="searchModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+            <div class="modal-content h-50">
+                <div class="modal-header">
+                    <div class="w-100">
+                        <form class="search position-relative me-auto">
+                            <input id="search-input-modal" class="search-input form-control is-search" tabindex="1" type="search" placeholder="{{ T "ui_search" }}..." aria-label="{{ T "ui_search" }}" autocomplete="off">
+                        </form>
+                    </div>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ T "close" }}"></button>
+                </div>
+                <div class="modal-body p-2 search-background">
+                    <div class="search-suggestions" data-no-results="{{ T "ui_no_results" }}"></div>
+                </div>
+            </div>
+        </div>
+    </div> 
+{{ end -}}

layouts/partials/assets/page-alert.html

@@ -10,6 +10,6 @@
 {{- if $pageAlertMsg -}}
     <div id="page-alert" class="alert alert-primary alert-no-decoration fade show d-flex align-items-center small m-0 py-1" data-page-alert-version="{{ $version }}">
         <a href="{{ with $pageAlertURL }}{{ . }}{{ else }}#!{{ end }}" class="text-decoration-none flex-grow-1 text-center">{{ $pageAlertMsg }}</a>
-        <button id="page-alert-btn-close" type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        <button id="page-alert-btn-close" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{{ T "close" }}"></button>
     </div>
 {{- end -}}

layouts/partials/assets/persona.html

@@ -56,12 +56,20 @@
 
 {{- $class := .class -}}
 
+{{- $loading := .loading -}}
+{{- $validSettings := slice "lazy" "eager" -}}
+{{- if $loading -}}
+    {{ if not (in $validSettings $loading) -}}
+        {{- errorf "partial [assets/persona.html] - Invalid value for param 'loading': %s" $loading -}}
+    {{ end -}}
+{{- end -}}
+
 <div class="d-none d-md-block">
     <div class="persona position-relative row mt-5 align-middle p-3">
         <div class="col-2">
             <div class="position-absolute top-50 start-0 translate-middle-y col-4 ps-3">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>
@@ -81,7 +89,7 @@
         <div class="col-12">
             <div class="position-absolute top-25 start-50 translate-middle col-6">
                 {{- if $thumbnail -}}
-                    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>

layouts/partials/assets/section-header.html

@@ -20,27 +20,6 @@
     {{- end -}}
 {{- end -}}
 
-<div class="container-fluid p-4 px-xxl-0">
-    {{ with $title }}<p class="display-4 mt-3{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-    {{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
-    {{- if $content -}}
-        <div class="row row-cols-1 row-cols-lg-3 pt-5">
-            <div class="col col-lg-3 d-none d-lg-block"></div>
-            <div class="col col-sm-12 col-lg-6 text-center">
-                <div class="row row-cols-1{{ if ne $sectionHeader "justify-content-center" }} row-cols-sm-2{{ end }} row-gap-5 p-0 align-items-center flex-fill">
-                    {{- if eq $sectionHeader "justify-content-center" -}}
-                        <div class="col p-0 w-50 mx-auto pb-5">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                        <div class="col fs-md-5 fs-6">{{ $content }}</div>
-                    {{- else if eq $sectionHeader "justify-content-end" -}}
-                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
-                    {{- else -}}
-                        <div class="col fs-md-5 fs-6 text-sm-start">{{ $content }}</div>
-                        <div class="col p-0">{{ partial "partials/section-header-img.html" (dict "title" $title "thumbnail" $thumbnail "icon" $icon )}}</div>
-                    {{- end -}}
-                </div>
-            </div>
-            <div class="col col-lg-3 d-none d-lg-block"></div>
-        </div>
-    {{- end -}}
-</div>
+{{ with $title }}<p id="{{ anchorize . }}" class="display-4 py-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+{{ with $description }} <p class="lead mb-5">{{ . }}</p>{{ end }}
+{{ $content }}

layouts/partials/assets/section-list.html

@@ -1,7 +1,7 @@
 {{- $page := .page }}
 {{- $section := .section }}
 {{- if not $section }}{{ errorf "partial [assets/section-list.html] - Missing value for param 'section'" }}{{ end -}}
-{{- $home := .home }}
+{{- $home := .home | default false }}
 {{ if ne (printf "%T" $home) "bool" }}
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
@@ -14,7 +14,9 @@
 {{- $moreTitle := .moreTitle -}}
 {{- $sectionURL := .sectionURL -}}
 {{- $nested := .nested | default true -}}
+{{- $simple := .simple | default false -}}
 {{- $paginate := true -}}
+{{- $kind := .kind | default "regular" -}}
 {{- $sort := "date" -}}
 {{- $order := "desc" -}}
 {{- $separator := false -}}
@@ -32,13 +34,17 @@
 {{- $type := "pills" -}}
 {{- $vertical := "false" -}}
 {{- $width := 100 -}}
+{{- $ratio := "" -}}
+{{- $wrap := false -}}
+{{- $loading := .loading -}}
+{{- $wrapper := .wrapper | default "p-4 px-xxl-0 pb-5" -}}
 
 {{- with (index site.Params.sections $section) -}}
     {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
     {{- with index . "sectionHeader" }}{{ $sectionHeader = . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
     {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
-    {{- if $home }}{{- if (isset . "nested") }}{{ $nested = (index . "nested") }}{{ end -}}{{ end -}}
+    {{- if (isset . "nested") }}{{ $nested = (index . "nested") }}{{ end -}}
     {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
@@ -54,19 +60,47 @@
     {{- with index . "type" }}{{ $type = . }}{{ end -}}
     {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
     {{- with index . "width" }}{{ $width = . }}{{ end -}}
+    {{- with index . "kind" }}{{ $kind = . }}{{ end -}}
+    {{- with index . "ratio" }}{{ $ratio = . }}{{ end -}}
+    {{- with index . "wrap" }}{{ $wrap = . }}{{ end -}}
 {{- end -}}
+
+{{ if isset $page.Params "nested" }}
+    {{ $nested = $page.Params.nested }}
+{{ end }}
 {{ if ne (printf "%T" $nested) "bool" }}
     {{ errorf "partial [assets/section-list.html] - Invalid value for param 'nested'"}}
 {{ end }}
 
-{{ $list := "" }}
-{{ if $nested }}
-    {{ $list = where site.RegularPages "Type" "in" $section }}
+{{ $list := slice }}
+{{ if eq $kind "taxonomy" }}
+    {{ $filter := page.Params.filter }}
+    {{ with $filter }}
+        {{ with index site.Taxonomies $section $filter }}
+            {{ $list = .Pages }}
+        {{ end }}
+    {{ else }}
+        {{ $list = where site.Pages (printf ".Params.%s" $section) "!=" nil }}
+    {{ end }}
+{{ else if eq $kind "related" }}
+    {{ if $page.Keywords}}
+        {{ $keywords := keyVals "tags" $page.Keywords }}
+        {{ $opts := dict "namedSlices" (slice $keywords) }}
+        {{ $list = site.RegularPages.Related $opts }}
+    {{ end }}
 {{ else if $home }}
     {{ $sectionPage := site.GetPage "section" $section }}
-    {{ $list = $sectionPage.RegularPages }}
+    {{ if $nested }}
+        {{ $list = $sectionPage.RegularPagesRecursive }}
+    {{ else }}
+        {{ $list = $sectionPage.Pages }}
+    {{ end }}
 {{ else }}
-    {{ $list = $page.RegularPages }}
+    {{ if $nested }}
+        {{ $list = $page.RegularPagesRecursive }}
+    {{ else }}
+        {{ $list = $page.Pages }}
+    {{ end }}
 {{ end }}
 
 {{ $max := (len $list) -}}
@@ -83,28 +117,35 @@
 {{- end -}}
 
 {{ if gt $max 0 }}
-    {{- if $home -}}
+    {{- if or $home (eq $kind "related") -}}
         {{- $paginate = false -}}
         {{- $max = int (math.Min $homepage $max) -}}
     {{ end -}}
 
+    {{ if $simple }}
+        {{ $title = "" }}
+        {{ $background = "" }}
+    {{ end }}
+
     {{- $params := (dict 
         "page" $page
         "list" $list
         "title" $title
         "icon" $icon
         "thumbnail" $thumbnail
+        "ratio" $ratio
         "sectionHeader" $sectionHeader
         "description" $description
         "content" $content
         "class" $style
         "color" $color
+        "loading" $loading
         )
     -}}
     {{- $partial := "" -}}
 
-    <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
-        <div class="container-xxl flex-fill p-0">
+    <div class="container-fluid {{ with $background }} bg-{{ . }}{{ end }} p-0">
+        <div class="container-xxl {{ $wrapper }}">
             {{- partial "assets/section-header.html" $params -}}
             
             {{ if eq $layout "card" }}
@@ -131,6 +172,7 @@
                     "type" $type
                     "vertical" $vertical
                     "width" $width
+                    "wrap" $wrap
                     ) 
                 -}}
             {{- else -}}

layouts/partials/assets/section-menu.html

@@ -0,0 +1,44 @@
+{{- $page := . -}}
+{{ $items := $page.Parent.Sections }}
+{{ if not $page.Parent.Section }}
+    {{ $items = $page.Sections }}
+{{ end }}
+
+{{- if gt (len $items) 0 }}
+    <div class="d-grid gap-2 mx-auto d-md-none">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "sectionMenu") 
+            "color" "secondary" 
+            "outline" "true" 
+            "class" "toc-button" 
+            "icon" "fas sort"
+            "justify" "between"
+            "collapse" "toc-collapse"
+            "order" "last") 
+        -}}
+    </div>
+
+    <p>
+        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+            <div class="toc toc-panel section-menu text-body p-2 fs-6">
+                    {{- range $items }}
+                        {{ $active := eq $page.RelPermalink .RelPermalink }}
+                        <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
+                    {{- end }}
+            </div>
+        </div>
+    </p>
+
+    <nav class="navbar navbar-expand navbar-services p-0 fs-5 d-none d-md-block">
+        <div class="container-fluid p-0 pb-3">
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {{- range $items }}
+                        {{ $active := eq $page.RelPermalink .RelPermalink }}
+                        <li class="nav-item"><a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+                    {{- end }}
+                </ul>
+            </div>
+        </div>
+    </nav>
+{{- end }}

layouts/partials/assets/sharing.html

@@ -1,12 +1,29 @@
 {{- if .Site.Params.sharing.enabled -}}
-    {{- if or .Params.sharing (not (isset .Params "sharing")) -}}
+    {{- $sharing := true -}}
+    {{ if isset .Params "sharing" }}
+        {{ $sharing = .Params.sharing }}
+    {{ else }}
+        {{- with (index site.Params.pages .Type ) -}}
+            {{ if isset . "sharing" }}
+                {{ $sharing = (index . "sharing") }}
+            {{ end }}
+        {{- end -}}
+    {{ end }}
+
+    {{- if $sharing -}}
         {{- $page := . -}}
         {{- $order := "asc" -}}
         {{- $list := .Site.Params.sharing.providers -}}
         {{- if .Site.Params.sharing.reverse }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
         {{- $sort := .Site.Params.sharing.sort | default "weight" -}}
         {{- $list = sort $list $sort $order -}}
-        <div class="py-3 text-body-secondary hstack gap-2">
+
+        {{- $download := .Params.download -}}
+        {{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+            {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
+        {{- end -}}
+        
+        <div class="py-3 text-body-secondary hstack gap-1">
             {{ T "shareLink" "" }}
             {{- range $index, $item := $list -}}
                 {{- $url := $item.url -}}
@@ -21,11 +38,15 @@
                     {{- $url = "#!" -}}
                     {{- partial "assets/toast.html" (dict "id" $target "message" (printf "%s %s" (T "link")  (T "copiedToClipboard"))) -}}
                 {{- end -}}
-                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" "label" (T "shareLink" $item.name)) }}
+                {{ partial "assets/button.html" (dict "toast" $target "clipboard" $clipboard "href" $url "icon" (printf "%s fa-fw" $item.icon) "class" "btn-social p-0" "label" (T "shareLink" $item.name) "spacing" false) }}
             {{- end -}}
             {{ if .Site.Params.sharing.webshare }}
                 {{ $attr := dict "data-sharing-title" .Title "data-sharing-description" .Description "data-sharing-url" .Permalink }}
-                {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr "label" (T "shareLink" (T "shareSystem"))) }}
+                {{ partial "assets/button.html" (dict "href" "#!" "icon" "fas share-nodes fa-fw" "id" "btn-webshare" "class" "btn-social p-0" "attributes" $attr "label" (T "shareLink" (T "shareSystem")) "spacing" false) }}
+            {{- end -}}
+            {{ with $download }}
+                {{ $attr := dict "download" (path.Base .) }}
+                {{ partial "assets/button.html" (dict "href" . "icon" "fas download fa-fw" "class" "btn-social p-0" "attributes" $attr "spacing" false) }}
             {{- end -}}
         </div>
     {{- end -}}

layouts/partials/assets/toast.html

@@ -25,7 +25,7 @@
 <div id="{{ $id }}" class="toast{{ with $class }} {{ . }}{{ end }}" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
         {{ with $header }}<strong class="me-auto">{{ . }}</strong>{{ end }}
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{{ T "close" }}"></button>
     </div>
     <div class="toast-body">{{ $message }}</div>
 </div>

layouts/partials/assets/toc-main.html

@@ -0,0 +1,20 @@
+{{ $headings := .headings | default slice }}
+{{- range .Fragments.Headings }}
+    {{- range .Headings }}
+        {{- $headings = $headings | append .Title -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if gt (len $headings) 1 }}
+<nav class="navbar navbar-expand navbar-services p-0 fs-5">
+    <div class="container-fluid p-0 pb-3 border-bottom">
+        <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    {{- range $headings }}
+                        <li class="nav-item"><a class="nav-link" href="#{{ anchorize . }}">{{ . }}</a></li>
+                    {{- end }}
+                </ul>
+        </div>
+    </div>
+</nav>
+{{- end }}

layouts/partials/assets/toc.html

@@ -1,7 +1,7 @@
-{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
-{{ if (gt $items 1) -}}
-    <div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
-        <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
-        {{ .TableOfContents }}
-    </div>
+{{- $page := .page -}}
+
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" $page.TableOfContents) -}}
+{{ if gt $items 1 -}}
+    <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
+    {{ $page.TableOfContents }}
 {{ end -}}

layouts/partials/footer/scripts.html

@@ -6,6 +6,14 @@
 {{- $core := .core | default false -}}
 {{- $skipTemplate := .skipTemplate | default false -}}
 
+{{- $state := "async" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- if or $header (eq $state "immediate") }}{{ $state = "" }}{{ end -}}
+{{- $supportedStates := slice "defer" "async" "immediate" -}}
+{{- if and $state (not (in $supportedStates $state)) -}}
+    {{- errorf "partial [footer/script.html] - Invalid value for param 'processing': %s" $state -}}
+{{- end -}}
+
 {{- $modules := "" -}}
 {{ if $core }}
     {{- $modules = site.Params.modules.core -}}
@@ -17,18 +25,18 @@
     {{- $js = $bundle | resources.ExecuteAsTemplate $filename $page -}}
 {{- end -}}
 
-{{- if and (not site.IsServer) $header -}}
+{{- if and (not hugo.IsServer) $header -}}
     {{- $pc := site.Config.Privacy.GoogleAnalytics -}}
-    {{- if and (not $pc.Disable) (hasPrefix site.GoogleAnalytics "G-") }}
-        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+    {{- if and (not $pc.Disable) (hasPrefix site.Config.Services.GoogleAnalytics.ID "G-") }}
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.Config.Services.GoogleAnalytics.ID }}"></script>
     {{- end }}
 {{- end -}}
 
 {{- if gt (len $js.Content) 0 -}}
     {{- if not hugo.IsProduction -}}
-        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}"{{ with $state }} {{ . | safeHTMLAttr }}{{ end }}></script>
     {{ else -}}
         {{ $js = $js | minify | fingerprint -}}
-        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+        <script src="{{ if $absoluteURL }}{{ $js.Permalink }}{{ else }}{{ $js.RelPermalink }}{{ end }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"{{ with $state}} {{ . | safeHTMLAttr }}{{ end }}></script>
     {{ end -}}
 {{ end -}}

layouts/partials/footer/social.html

@@ -7,27 +7,29 @@
 
 {{ if gt .Site.Menus.social 0 }}
     {{- $tab := site.Params.main.externalLinks.tab -}}
-    <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
-            <div class="col col-md-2 d-none d-md-block"></div>
-            <div class="col col-sm-6 col-md-4">
-                {{ if gt .Site.Menus.social 0 }}
-                    <div class="fs-3 fw-bold">{{ or .Site.Params.footer.socialTitle .Site.Params.social.title }}</div>
-                    <p>{{ or .Site.Params.footer.socialCaption .Site.Params.social.caption }}</p>
-                {{ end }}
+    <div class="container-fluid bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
+        <div class="container-xxl px-4 px-xxl-0">
+            <div class="row row-cols-2 py-3 align-items-center">
+                <div class="col col-6">
+                    <div class="row justify-content-end p-0">
+                        <div class="col-12 col-md-8 p-0">
+                            <div class="fs-3 fw-bold">{{ or .Site.Params.footer.socialTitle .Site.Params.social.title }}</div>
+                            <p>{{ or .Site.Params.footer.socialCaption .Site.Params.social.caption }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col col-6 text-sm-start">
+                    {{ range .Site.Menus.social -}}
+                        <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
+                            {{ if hasPrefix .Pre "<i" }}
+                                {{ .Pre | safeHTML }}
+                            {{ else }}
+                                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
+                            {{ end }}
+                        </a>
+                    {{ end -}}
+                </div>
             </div>
-            <div class="col text-sm-start text-center col-sm-6 col-md-4">
-                {{ range .Site.Menus.social -}}
-                    <a href="{{ .URL }}" {{ if $tab }} target="_blank" rel="noopener noreferrer"{{ end }} aria-label="{{ .Name | safeHTML }}" class="text-decoration-none link-secondary d-inline p-2">
-                        {{ if hasPrefix .Pre "<i" }}
-                            {{ .Pre | safeHTML }}
-                        {{ else }}
-                            {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-2x" .Pre) )}}
-                        {{ end }}
-                    </a>
-                {{ end -}}
-            </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
         </div>
     </div>
 {{ end }}

layouts/partials/head/seo.html

@@ -12,8 +12,10 @@
 
 {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
 {{ with $thumbnail -}}
-    {{ $img := partial "utilities/GetImage.html" (dict "url" .) -}}
-    {{ with $img -}}
+{{- $res := partial "utilities/GetImage.html" (dict "url" .) -}}
+{{- $img := "" -}}
+{{ with $res }}{{ $img = $res.resource }}{{ end }}
+{{ with $img -}}
         {{ $dim := "1280x640" -}}
         {{ $scaled := (.Fill (printf "%s jpg" $dim)) -}}
         {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink ".jpg" (printf "-%s.jpg" $dim)) -}}

layouts/partials/head/stylesheet.html

@@ -39,6 +39,7 @@
     "danger"                  (default "#dc3545" site.Params.style.danger)
     "light"                   (default "#f8f9fa" site.Params.style.light)
     "dark"                    (default "#212529" site.Params.style.dark)
+    "navbar-height"           (site.Params.navigation.offset | default "4em")
     "navbar-offset"           $navbarOffset
     "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
     "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
@@ -49,19 +50,21 @@
 {{- $options := (dict "transpiler" $transpiler "targetPath" $target "enableSourceMap" (not hugo.IsProduction) "vars" $vars) -}}
 {{- $bundle := partial "utilities/bundle" (dict "match" $source "filename" (printf "scss/bundle-%d.scss" now.UnixNano) "modules" $modules "basepath" "scss" "debugging" site.Params.debugging.showSCSS) -}}
 
-{{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
+{{- if gt ($bundle.Content | len) 0 }}
+    {{- $css := $bundle | resources.ExecuteAsTemplate $target . | toCSS $options -}}
 
-{{ if $core }}
-    {{- partial "head/icons.html" (dict "css" $css) -}}
-{{ end }}
-{{- if site.Params.style.purge -}}
-    {{- $post_options := dict "config" "config" -}}
-    {{- $css = $css | resources.PostCSS $post_options -}}
-{{- end -}}
+    {{ if $core }}
+        {{- partial "head/icons.html" (dict "css" $css) -}}
+    {{ end }}
+    {{- if site.Params.style.purge -}}
+        {{- $post_options := dict "config" "config" "noMap" hugo.IsProduction -}}
+        {{- $css = $css | resources.PostCSS $post_options -}}
+    {{- end -}}
 
-{{- if not hugo.IsProduction -}}
-    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}">
-{{- else -}}
-    {{- $css = $css | fingerprint | resources.PostProcess -}}
-    <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
+    {{- if not hugo.IsProduction -}}
+        <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}">
+    {{- else -}}
+        {{- $css = $css | minify | fingerprint | resources.PostProcess -}}
+        <link rel="stylesheet" href="{{ if $absoluteURL }}{{ $css.Permalink }}{{ else }}{{ $css.RelPermalink }}{{ end }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
+    {{- end -}}
 {{- end -}}

layouts/partials/home/featured.html

@@ -1,21 +0,0 @@
-<div class="container-fluid flex-fill feature">
-    <div class="row row-cols-1 row-cols-sm-4 h-100 bg-primary px-4 py-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
-        <div class="col col-lg-2 d-none d-lg-block bg-info order-1"></div>
-        <div class="col col-sm-6 col-lg-4 text-center text-sm-start order-3 order-sm-2">
-            <p class="display-4">{{ .Title }}</p>
-            <p>{{ .Content }}<p>
-        </div>
-        <div class="col text-sm-start text-center col-sm-6 col-lg-4 order-2 order-sm-3">
-            {{- $thumbnail := (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) -}}
-            {{- $thumbnail = or $thumbnail .Site.Params.home.featurePhoto -}}
-            {{ if .Site.Params.home.featurePhoto }}
-                {{ warnf "DEPRECATED: parameter `Params.home.featurePhoto` has been deprecated in release v0.18"}}
-            {{ end }}
-            {{- if $thumbnail -}}
-                {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
-            {{ end }}
-            <div class="pb-5 d-block d-sm-none"></div>
-        </div>
-        <div class="col col-lg-2 d-none d-lg-block bg-info order-4"></div>
-    </div>
-</div>

layouts/partials/list/featured.html

@@ -0,0 +1,94 @@
+{{- $page := .page -}}
+{{- $headings := .headings -}}
+{{- $orientation := .orientation | default "stacked" -}}
+{{- $actions := .actions -}}
+{{- $width := .width | default 6 }}
+{{- if or (lt $width 1) (gt $width 12) -}}
+    {{- $width = 6 -}}
+    {{- warnf "partial [list/featured.html] - Invalid column width: %d" $width -}}
+{{ end -}}
+{{- $justify := .justify | default "center" -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [list/featured.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+{{- $align := .align | default "center" -}}
+{{- $supportedAlign := slice "start" "end" "center" -}}
+{{- if not (in $supportedAlign $align) -}}
+    {{- errorf "partial [list/featured.html] - Invalid value for param 'align': %s" $align -}}
+{{- end -}}
+{{- $breadcrumb := and (not $page.IsHome) site.Params.navigation.breadcrumb -}}
+
+{{- define "partials/list/featured-body.html" }}
+    {{- $page := .page -}}
+    {{- $headings := .headings -}}
+    {{- $orientation := .orientation | default "stacked" -}}
+    {{- $actions := .actions -}}
+    {{- $align := .align | default "center" -}}
+
+    <div class="text-{{ $align }}">
+        {{ with $page.Title }}<p class="display-4">{{ . }}</p>{{ end }}
+        <span class="fs-5 text-muted">{{ $page.Description }}</span>
+
+        {{ if $actions }}
+            {{- $actions = sort $actions "weight" "asc" -}}
+            <div class="hstack{{ if gt (len $actions) 1 }} gap-1{{ end }} justify-content-{{ $align}} pt-5 pt-md-3">
+                {{ range $actions }}
+                    {{ partial "assets/button.html" (dict "href" .url "icon" .icon "title" .title "outline" .outline "order" "last" "justify" "start") }}
+                {{ end }}
+            </div>
+        {{ end }}
+    </div>
+{{- end -}}
+
+{{- define "partials/list/featured-illustration.html" }}
+    {{- $page := .page -}}
+    {{- $style := printf "img-wrap mx-auto mx-md-0 %s" .style -}}
+
+    {{ if $page.Params.icon }}
+        {{- $icon := (or (and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.url) $page.Params.Icon) -}}
+        {{- $mode := and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.mode -}}
+        {{ if eq (lower (path.Ext $icon)) ".json" }}
+            {{ partial "assets/animation.html" (dict "data" $icon "mode" $mode "loop" false "hover" true "class" "col-6 mx-auto text-center") }}
+        {{ else }}
+            {{ partial "assets/icon.html" (dict "icon" "mode" $mode $icon "wrapper" "col-6 mx-auto text-center")}}
+        {{ end }}
+    {{ else }}
+        {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}}
+        {{- if $thumbnail }}
+            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" $style "innerClass" "rounded" "title" $page.Site.Title "priority" "high") }}
+        {{ end }}
+    {{ end }}
+{{- end -}}
+
+<div class="container-fluid p-0 {{ with site.Params.home.feature.color }} bg-{{ . }} bg-opacity-{{ site.Params.style.themeOpacity | default "25" | safeHTML }}{{ end }}">
+    <div class="container-xxl p-4 px-xxl-0 {{ if site.Params.home.fullCover }} fullcover{{ end }} d-flex flex-column">
+        {{ if $breadcrumb }}
+            <div>{{ partial "assets/breadcrumb.html" $page }}</div>
+        {{ end -}}
+
+        {{ if eq $orientation "stacked" }}
+            <div class="row justify-content-center flex-fill">
+                <div class="col-12 col-md-{{ $width }} m-auto text-center">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4") }}
+                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions) }}
+                </div>
+            </div>
+        {{ else }}
+            <div class="row row-cols-1 row-cols-md-2 justify-content-{{ $justify }} flex-fill">
+                <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
+                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
+                </div>
+                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto align-self-end">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
+                </div>
+            </div>
+        {{ end }}
+
+        {{ with $headings }}
+            <div class="col col-12 p-0 pt-5">
+                {{ partial "assets/toc-main.html" (dict "headings" .) }}
+            </div>
+        {{ end }}
+    </div>
+</div>

layouts/partials/single/thumbnail.html

@@ -0,0 +1,39 @@
+{{- $page := .page -}}
+{{- $class := printf "img-wrap" -}}
+{{- with .class }}{{ $class = printf "img-wrap %s" . }}{{ end -}}
+{{- $ratio := .ratio | default "21x9" -}}
+{{- $thumbnail := "" -}}
+{{- $credits := "" -}}
+
+{{- if reflect.IsMap $page.Params.Thumbnail -}}
+    {{- $thumbnail = $page.Params.Thumbnail.url -}}
+    {{- $author := "" -}}
+    {{- if and $page.Params.Thumbnail.authorURL "text" $page.Params.Thumbnail.author }}
+        {{- $author = partial "utilities/link" (dict "destination" $page.Params.Thumbnail.authorURL "text" $page.Params.Thumbnail.author) -}}
+    {{- else if $page.Params.Thumbnail.author }}
+        {{- $author = $page.Params.Thumbnail.author -}}
+    {{- end -}}
+
+    {{- $origin := "" -}}
+    {{- if and $page.Params.Thumbnail.originURL "text" $page.Params.Thumbnail.origin }}
+        {{- $origin = partial "utilities/link" (dict "destination" $page.Params.Thumbnail.originURL "text" $page.Params.Thumbnail.origin) -}}
+    {{- else if $page.Params.Thumbnail.origin }}
+        {{- $origin = $page.Params.Thumbnail.origin -}}
+    {{- end }}
+
+    {{- if and $author $origin }}
+        {{ $credits = printf (T "photoFull") $author $origin }}
+    {{ else if $author }}
+        {{ $credits = T "photoShort" $author }}
+    {{ end }}
+{{ else }}
+    {{- $thumbnail = $page.Params.Thumbnail -}}
+    {{ if or $page.Params.photoCredits $page.Params.photoSource }}
+        {{ warnf "DEPRECATED: frontmatter variables `photoCredits` and `photoSource` have been deprecated in release v0.18: %s" $page.RelPermalink }}
+    {{ end }}
+    {{- if and $page.Params.photoCredits $page.Params.PhotoSource }}{{ $credits = printf (T "photoFull") $page.Params.photoCredits $page.Params.PhotoSource }}{{ end -}}
+{{- end -}}
+
+{{ if $thumbnail -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" $ratio "outerClass" $class "innerClass" "rounded" "title" $page.Params.title "caption" $credits "priority" "high") -}}
+{{ end -}}

layouts/partials/utilities/GetBreakpoint.html

@@ -0,0 +1,21 @@
+{{- /* Define main breakpoint */ -}}
+{{ $prev := 0 }}
+{{ $next := 0 }}
+{{ $result := dict }}
+{{- $breakpoints := slice "xs" "sm" "md" "lg" "xl" "xxl" }}
+{{- $breakpoint := site.Params.main.breakpoint | default "md" -}}
+{{- if not (in $breakpoints $breakpoint) -}}
+    {{- errorf "layout [_default/baseof.html] - Invalid value for param 'breakpoint': %s" $breakpoint -}}
+{{ else }}
+    {{ range $index, $item := $breakpoints }}
+        {{ if eq $item $breakpoint }}
+            {{ $prev = sub $index 1 }}
+            {{ $next = add $index 1 }}
+        {{ end }}
+    {{ end }}
+    {{ if lt $prev 0 }}{{ $prev = 0 }}{{ end }}
+    {{ if ge $next (len $breakpoints) }}{{ $next = sub (len $breakpoints) 1 }}{{ end }}
+    {{ $result = dict "prev" (index $breakpoints $prev) "current" $breakpoint "next" (index $breakpoints $next) }}
+{{- end -}}
+
+{{ return $result }}

layouts/partials/utilities/GetIllustration.html

@@ -0,0 +1,21 @@
+{{- $item := .item -}}
+{{- $illustration := "" -}}
+{{- $style := "img-wrap mx-auto mx-md-0" -}}
+{{- $size := .size | default "col-12 col-sm-4 col-lg-12" -}}
+
+{{ if $item.Params.icon }}
+    {{- $icon := (or (and (reflect.IsMap $item.Params.Icon) $item.Params.Icon.url) $item.Params.Icon) -}}
+    {{- $mode := and (reflect.IsMap $item.Params.Icon) $item.Params.Icon.mode -}}
+    {{ if eq (lower (path.Ext $icon)) ".json" }}
+        {{ $illustration = partial "assets/animation.html" (dict "data" $icon "mode" $mode "loop" false "hover" true "class" (printf "mx-auto text-center %s" $size)) }}
+    {{ else }}
+        {{ $illustration = partial "assets/icon.html" (dict "icon" "mode" $mode $icon "wrapper" "mx-auto text-center")}}
+    {{ end }}
+{{ else }}
+    {{- $thumbnail := (or (and (reflect.IsMap $item.Params.Thumbnail) $item.Params.Thumbnail.url) $item.Params.Thumbnail) -}}
+    {{- if $thumbnail }}
+        {{ $illustration = partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" $style "innerClass" "rounded" "title" $item.Site.Title) }}
+    {{ end }}
+{{ end }}
+
+{{ return $illustration }}

layouts/partials/utilities/GetImage.html

@@ -10,20 +10,11 @@
 
 {{ $url := .url -}}
 {{ $page := .page -}}
+{{ $mirror := false }}
 
 {{ $supportedMediaTypes := slice "image/png" "image/jpeg" "image/gif" "image/tiff" "image/bmp" "image/webp" -}}
-{{ $img := "" }}
 {{ $remote := hasPrefix (lower $url) "http" }}
-{{ if $remote }}
-    {{ $img = resources.GetRemote $url -}}
-{{ else }}
-    {{ if $page }}
-        {{ $img = $page.Resources.Get $url -}}
-    {{ end }}
-    {{ if not $img }}
-        {{ $img = resources.GetMatch $url }}
-    {{ end }}
-{{ end }}
+{{- $img := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
 
 {{ with $img -}}
     {{ if in $supportedMediaTypes (string $img.MediaType) -}}
@@ -38,6 +29,34 @@
             {{ end -}}
             {{ $img = $img.Content | resources.FromString (printf "/img/%s" $filename) -}}
         {{ end -}}
+
+        <!-- 
+            Rotate the image if needed based on EXIF orientation. EXIF defines the following values:
+            (source: https://sirv.com/help/articles/rotate-photos-to-be-upright/#EXIF_orientation_values)
+            1 = 0 degrees: the correct orientation, no adjustment is required.
+            2 = 0 degrees, mirrored: image has been flipped back-to-front.
+            3 = 180 degrees: image is upside down.
+            4 = 180 degrees, mirrored: image has been flipped back-to-front and is upside down.
+            5 = 90 degrees: image has been flipped back-to-front and is on its side.
+            6 = 90 degrees, mirrored: image is on its side.
+            7 = 270 degrees: image has been flipped back-to-front and is on its far side.
+            8 = 270 degrees, mirrored: image is on its far side.
+        -->
+        {{ with $img.Exif }}
+            {{ $filter := "" }}
+            {{ $orientation := .Tags.Orientation }}
+            {{ if or (eq $orientation 3) (eq $orientation 4) }}
+                {{ $filter = images.Process "r180" }}
+            {{ else if or (eq $orientation 5) (eq $orientation 6) }}
+                {{ $filter = images.Process "r270" }}
+            {{ else if or (eq $orientation 7) (eq $orientation 8) }}
+                {{ $filter = images.Process "r90" }}
+            {{ end }}
+            {{ with $filter }}{{ $img = $img.Filter . }}{{ end }}
+
+            {{- $isMirrored := slice 2 4 5 7 -}}
+            {{- if (in $isMirrored $orientation) }}{{ $mirror = true }}{{ end -}}
+        {{ end }}
     {{ else -}}
         {{ warnf "Image type '%s' is not supported: %s" $img.MediaType $url -}}
         {{ $img = "" -}}
@@ -46,4 +65,4 @@
     {{ warnf "Cannot find image resource: %q" $url -}}
 {{ end -}}
 
-{{ return $img -}}
+{{ return (dict "resource" $img "mirror" $mirror) -}}

layouts/partials/utilities/GetPage.html

@@ -0,0 +1,33 @@
+{{- $ref := "" -}}
+{{- $anchor := "" -}}
+
+{{ $url := .url }}
+{{ if not $url }}
+    {{- errorf "partial [utilities/GetPage.html] - Expected param 'url'" -}}
+{{ end }}
+
+{{ $page := .page }}
+{{ if not $page }}
+    {{- errorf "partial [utilities/GetPage.html] - Expected param 'page'" -}}
+{{ end }}
+
+{{- $isExternal := ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host -}}
+{{- if not $isExternal -}}
+    {{- $ref = $page.GetPage $url -}}
+    {{ if not $ref }}
+        {{ $ref = (index (where $page.Site.AllPages "RelPermalink" (printf "%s/" (strings.TrimSuffix "/" $url))) 0)}} 
+    {{ end }}
+
+    {{- if not $ref }}
+        {{- $segments := split $url "/" -}}
+        {{- if and (hasPrefix $url "/")  (gt (len $segments) 1) -}}
+            {{- $prefix := index $segments 1 -}}
+            {{ with index (where site.Sites "Language.Lang" $prefix) 0 }}
+                {{- $path := printf "/%s" (strings.TrimPrefix (printf "/%s/" $prefix) $url) }}
+                {{- $ref = .GetPage $path -}}
+            {{ end }}
+        {{- end -}}
+    {{- end -}}
+{{- end -}}
+
+{{ return $ref }}

layouts/partials/utilities/GetResource.html

@@ -0,0 +1,40 @@
+<!-- 
+    Retrieve a local or remote resource. If the url starts with 'http', the resource is retrieved from an external
+    location. Else, the url is matched with a page resource and site asset (in that order). 
+    
+    This partial supports both relative and absolute paths. Hugo has different methods to retrieve page bundle assets
+    and site assets. Absolute paths are converted to a relative path to make them compatible with Hugo's methods. The
+    prefix of an absolute path is truncated if it matches either with the page bundle folder (starting with "/content/")
+    or the assets folder ("/assets/"). 
+    
+    The partial returns nil if the resource cannot be found. The partial supports the following arguments:
+    "url"           Required path or url of the resource, e.g. "img/example.jpg" or "https://example.com/img.jpg"
+    "page"          Optional page context, used to retrieve a resource from page resources.
+-->
+
+{{ $url := .url -}}
+{{ $page := .page -}}
+{{ if hasPrefix $url "/" }}
+    {{ $pageContext := (path.Join "/content" $page.File.Dir) -}}
+    {{ if hasPrefix $url $pageContext }}
+        {{ $url = strings.TrimPrefix $pageContext $url -}}
+    {{ else if hasPrefix $url "/assets/" }}
+        {{ $url = strings.TrimPrefix "/assets/" $url -}}
+    {{ end }}
+    {{ $url = strings.TrimPrefix "/" $url -}}
+{{ end }}
+
+{{ $res := "" }}
+{{ $remote := hasPrefix (lower $url) "http" }}
+{{ if $remote }}
+    {{ $res = resources.GetRemote $url -}}
+{{ else }}
+    {{ if $page }}
+        {{ $res = $page.Resources.Get $url -}}
+    {{ end }}
+    {{ if not $res }}
+        {{ $res = resources.GetMatch $url }}
+    {{ end }}
+{{ end }}
+
+{{ return $res -}}

layouts/partials/utilities/GetSections.html

@@ -0,0 +1,78 @@
+{{- $page := .page -}}
+{{- $loading := .loading -}}
+
+{{/* Add title for current page */}}
+{{- $items := slice -}}
+{{ $items = $items | append (dict "title" $page.Title "content" "" )}}
+
+{{/* Identify page sections */}}
+{{- $sections := slice -}}
+{{- $sections = $sections | append $page.Type -}}
+{{ with $page.Params.sections }}
+    {{ $sections = $sections | append . }}
+{{ end }}
+
+{{ if $page.IsHome }}
+    {{- if not $page.Params.sections -}}
+        {{- with site.Params.home.sections }}
+            {{ $sections = $sections | append . }}
+        {{ else }}
+            {{ range $section := site.Sections }}
+                {{ $sections = $sections | append $section.Type }}
+            {{ end }}
+        {{ end }}
+    {{- end -}}
+{{ end }}
+
+{{/* Generate title and content for each section */}}
+{{- range $index, $section := $sections -}}
+    {{- $sectionPage := site.GetPage "section" $section -}}
+    {{- $sectionURL := $sectionPage.RelPermalink -}}
+    {{ with $sectionPage.Params.redirect}}
+        {{ $target := partial "utilities/GetPage.html" (dict "url" . "page" $page) }}
+        {{- if not $target -}}
+            {{ if eq (printf "%T" $page.File) "*hugolib.fileInfo"}}
+                {{- errorf "Cannot find redirect target on page '%s': %s" $page.File . -}}
+            {{ else }}
+                {{- errorf "Cannot find redirect target: %s" . -}}
+            {{ end }}
+        {{ else }}
+            {{- $sectionURL = $target.RelPermalink -}}
+        {{ end }}
+    {{ end }}
+    {{- $title := or $sectionPage.Title $sectionPage.Type -}}
+
+    {{- with (index site.Params.sections $section) -}}
+        {{- with index . "title" }}{{ $title = or . $title }}{{ end -}}
+    {{- end -}}
+
+    {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
+    {{- $icon := $sectionPage.Params.Icon -}}
+    {{- $content := "" -}}
+    {{ if not $sectionPage.IsSection }}{{ $content = $sectionPage.Content }}{{ end -}}
+    {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
+    {{- $moreTitle := "" -}}
+    {{- with (index site.Params.sections $section) -}}
+        {{- with index . "reference" }}{{ $moreTitle = . }}{{ end -}}
+    {{- end -}}
+    {{- $moreTitle = or $moreTitle (printf (T "more" (pluralize $sectionTitle))) -}}
+
+    {{- $sectionContent := trim (partial "assets/section-list.html" (dict 
+        "page" $page 
+        "section" $section 
+        "home" $page.IsHome
+        "simple" (eq (len $sections) 1)
+        "thumbnail" $thumbnail
+        "icon" $icon
+        "content" $content
+        "moreTitle" $moreTitle
+        "sectionURL" $sectionURL
+        "loading" $loading)) " \r\n"
+    -}}
+
+    {{ if $sectionContent }}
+        {{ $items = $items | append (dict "title" $title "content" $sectionContent)}}
+    {{ end }}
+{{- end -}}
+
+{{ return $items }}

layouts/partials/utilities/GetWidth.html

@@ -0,0 +1,17 @@
+{{ $path := .path }}
+{{ $height := .height }}
+{{ $width := "" }}
+
+{{ if eq (path.Ext $path) ".svg" }}
+    {{ $path := path.Join "static" .path }}
+    {{ if fileExists $path }}
+        {{ with findRE `viewBox="\d*\.?\d+[\s,]\d*\.?\d+[\s,]\d*\.?\d+[\s,]\d*\.?\d+"` (readFile $path) 1 }}
+            {{ $content := split (index (split (index . 0) `"`) 1) " " }}
+            {{ $viewbox_width := float (index $content 2) }}
+            {{ $viewbox_height := float (index $content 3) }}
+            {{ $width = int (math.Round (mul (div $height $viewbox_height) $viewbox_width)) }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+
+{{ return $width }}

layouts/partials/utilities/bundle.html

@@ -55,8 +55,6 @@
     {{- end -}}
 {{- end -}}
 
-{{/* warnf "FILES: %s" $sorted */}}
-
 {{ $bundle := "" }}
 {{ if gt (len $sorted) 0 }}
     {{ $bundle = $sorted | resources.Concat $filename -}}

layouts/partials/utilities/link.html

@@ -26,7 +26,7 @@
     {{- end -}}
 
     {{- if $cue -}}
-        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs") }}
+        {{ $suffix := partial "assets/icon.html" (dict "icon" "fas up-right-from-square fa-2xs" "spacing" false) }}
         {{- $text = printf "%s %s" $text $suffix | safeHTML -}}
     {{- end -}}
 {{- else -}}
@@ -35,25 +35,12 @@
         {{- if ne (len $segments) 2 }}
             {{- errorf "partial [utilities/link.html] - Malformed path, expected one anchor '#' only: %s" $destination -}}
         {{ else }}
-            {{- $destination = index $segments 0 -}}            
-            {{- $anchor = index $segments 1 -}}            
+            {{- $destination = index $segments 0 -}}
+            {{- $anchor = index $segments 1 -}}
         {{ end }}
     {{ end }}
-    {{- $destination = strings.TrimSuffix "/" $destination -}}
-    {{- $ref := $page.GetPage $destination -}}
-
-    {{- if not $ref }}
-        {{- $segments := split $destination "/" -}}
-        {{- if and (hasPrefix $destination "/")  (gt (len $segments) 1) -}}
-            {{- $prefix := index $segments 1 -}}
-            {{- $page := .Page -}}
-            {{ with index (where site.Sites "Language.Lang" $prefix) 0 }}
-                {{- $path := printf "/%s" (strings.TrimPrefix (printf "/%s/" $prefix) $destination) }}
-                {{- $ref = .GetPage $path -}}
-            {{ end }}
-        {{- end -}}
-    {{- end -}}
 
+    {{ $ref := partial "utilities/GetPage.html" (dict "url" $destination "page" $page) }}
     {{- if not $ref -}}
         {{- errorf "partial [utilities/link.html] - Cannot find page: %s" $destination -}}
         {{- $error = true -}}
@@ -71,6 +58,6 @@
     {{- end -}}
 {{- end -}}
 
-{{ if not $error }}
+{{ if not $error -}}
     <a {{ with $class }}class="{{ . }}" {{ end }}href="{{ $destination | safeURL }}"{{ with $target }} target="{{ . }}"{{ end }}{{ with $rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>
-{{ end }}
+{{- end }}