Merge pull request #631 from gethinode/develop

Make page breakpoint configurable

assets/js/analytics.js

@@ -11,8 +11,8 @@
 {{- end -}}
 
 {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+{{- if (and (not hugo.IsServer) (not $pc.Disable)) -}}
-    {{ with .Site.GoogleAnalytics -}}
+    {{ 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)
@@ -26,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";
@@ -36,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)
@@ -24,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";
@@ -34,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/_variables-dart.scss

@@ -41,3 +41,7 @@ $secondary-text-emphasis-dark:      mix(white, h.$secondary, h.$dark-mode-tint)
 $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;
+
+$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

@@ -34,3 +34,9 @@ $link-color-dark:                   mix(white, $primary, $dark-mode-tint) !defau
 $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-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/_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

@@ -130,8 +130,6 @@
     }
 }
 
-$dropdown-transition: opacity .15s ease-in-out !default;
-
 .dropdown-horizontal {
     @each $breakpoint in map-keys($grid-breakpoints) {
         $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -152,9 +150,9 @@ $dropdown-transition: opacity .15s ease-in-out !default;
                 text-align: center;
                 border-radius: 0;
                 border: 0;
-                margin-top: calc((-1.5 * $spacer) - 2px);
+                margin-top: $dropdown-horizontal-margin-top;
-                padding-top: calc(1 * $spacer + 2px);
+                padding-top: $dropdown-horizontal-padding-y;
-                padding-bottom: 1 * $spacer;
+                padding-bottom: $dropdown-horizontal-padding-y;
                 box-shadow: 0.125rem 0.25rem rgba(0, 0, 0, .075);
             
                 @include transition($dropdown-transition);

assets/scss/components/_toc.scss

@@ -94,3 +94,7 @@
         }
     }
 }
+
+.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/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"

config/_default/params.toml

@@ -8,6 +8,7 @@
     endorse = true
     footerBelowFold = false
     loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = false
         tab = false

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',

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

@@ -6,6 +6,7 @@
     canonifyAssetsURLs = false
     footerBelowFold = false
     loading = "lazy"
+    breakpoint = "md"
     [main.externalLinks]
         cue = true
         tab = true
@@ -17,6 +18,8 @@
     optional = ["leaflet", "katex", "lottie"]
     excludeSCSS = ["bootstrap"]
     disableTemplate = ["katex"]
+    [modules.katex]
+        state = "defer"
     [modules.fontawesome]
         inline = true
         debug = true

exampleSite/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',

exampleSite/go.sum

@@ -32,6 +32,8 @@ github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2
 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-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=

exampleSite/hugo_stats.json

@@ -56,7 +56,6 @@
       "alert-dismissible",
       "align-items-center",
       "align-items-end",
-      "align-items-start",
       "align-middle",
       "align-self-center",
       "align-self-end",
@@ -120,12 +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",
@@ -141,6 +144,7 @@
       "d-grid",
       "d-inline",
       "d-inline-flex",
+      "d-lg-block",
       "d-md-block",
       "d-md-flex",
       "d-md-none",
@@ -209,9 +213,6 @@
       "form-control",
       "fs-3",
       "fs-5",
-      "fullcover",
-      "fullscreen",
-      "fw-30",
       "fw-bold",
       "fw-semibold",
       "g-0",
@@ -335,6 +336,7 @@
       "row",
       "row-cols-1",
       "row-cols-2",
+      "row-cols-lg-3",
       "row-cols-md-2",
       "row-cols-md-3",
       "row-cols-sm-2",
@@ -344,6 +346,7 @@
       "search-suggestions",
       "shadow",
       "show",
+      "sidebar-overflow",
       "slide",
       "small",
       "spinner-border",

go.mod

@@ -3,10 +3,13 @@ module github.com/gethinode/hinode
 go 1.19
 
 require (
+	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.6.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.5.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.5.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=
@@ -60,6 +62,8 @@ github.com/gethinode/mod-fontawesome v1.4.0 h1:JfmVYwQl19jmZxgxY64yvGqJAAEiFkKf2
 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-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=
@@ -92,3 +96,7 @@ github.com/gethinode/mod-lottie v1.2.0 h1:9S0Y4PlEO66dIvFxayatmDEf8WWxqbLNLi4z56
 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

@@ -15,6 +15,7 @@
       "link",
       "meta",
       "nav",
+      "ol",
       "p",
       "path",
       "script",
@@ -29,11 +30,14 @@
       "active",
       "align-items-center",
       "align-self-center",
+      "align-self-end",
       "bg-body",
       "bg-opacity-10",
       "bg-primary",
       "bottom-0",
       "bottom-bar",
+      "breadcrumb",
+      "breadcrumb-item",
       "btn",
       "btn-close",
       "btn-primary",
@@ -85,7 +89,6 @@
       "form-control",
       "fs-3",
       "fs-5",
-      "fw-30",
       "fw-bold",
       "hstack",
       "img-fluid",

i18n/en.yaml

@@ -27,6 +27,18 @@
   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
@@ -79,6 +91,8 @@
   translation: "On this page"
 - id: seeAlso
   translation: "See also"
+- id: sectionMenu
+  translation: "Select a topic"
 
 # Sidebar
 - id: toggleSidebar

i18n/nl.yaml

@@ -25,6 +25,18 @@
   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
@@ -77,6 +89,8 @@
   translation: "Inhoudsopgave"
 - id: seeAlso
   translation: "Zie ook"
+- id: sectionMenu
+  translation: "Selecteer een onderwerp"
 
 # Sidebar
 - id: toggleSidebar

layouts/_default/baseof.html

@@ -48,6 +48,9 @@
 {{ $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>

layouts/_default/list.html

@@ -1,40 +1,5 @@
 {{- define "featured" }}
-    {{- $sections := $.Scratch.Get "sections" -}}
+    {{ .Render "list/header" }}
-    {{- $headings := slice }}
-    {{ if .Params.sectionMenu }}
-        {{ range $sections }}
-            {{ $headings = $headings | append .title }}
-        {{ end }}
-    {{ end }}
-
-    {{- $page := . -}}
-    {{- $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 := $page.Params.actions -}}
-    {{- $layout := $page.Params.layout -}}
-
-    {{ if $page.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") $page.IsHome -}}
-        {{- partial "list/featured.html" (dict 
-            "page" .
-            "headings" $headings
-            "actions" $actions
-            "orientation" $orientation
-            "width" $width
-            "justify" $justify
-            "align" $align) 
-        -}}
-    {{- end -}}
 {{ end }}
 
 {{- define "main" -}}
@@ -43,47 +8,16 @@
     {{- $fullCover := $.Scratch.Get "fullCover" -}}
     {{- $layout := $page.Params.layout -}}
 
-    <div class="container-xxl px-4 px-xxl-0">
+    <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 -}}
 
-        <div class="row row-cols-1 row-cols-sm-2">
+        {{ .Render "list/body" }}
-            <div class="col col-sm-12 col-md-8">
+
-                {{ if not $page.IsHome }}
+        {{ .Render "list/footer" }}
-                    {{ with $page.Title }}<p id="{{ anchorize . }}" class="display-4 mt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
-                {{ end }}
-                {{ if ($page.Params.menu) }}
-                    {{- partial "assets/section-menu.html" $page -}}
-                {{- end -}}
-                {{- $loading := "" -}}
-                {{- if or (eq $layout "featured") $page.IsHome -}}
-                    {{- if $fullCover}}{{ $loading = site.Params.main.loading }}{{ end }}
-                {{ end }}
-                {{- $content := partial "utilities/ProcessContent" (dict "page" $page "raw" $page.RawContent "loading" $loading) -}}
-                {{ $content | safeHTML }}
-                {{ if and (and $sections (eq (len $sections) 1)) (not $content) }}
-                    <p class="pt-4">{{- T "emptyList" }}.</p>
-                {{ end }}
-            </div>
-            {{ with $page.Params.contact }}
-                {{- $contact := site.GetPage . }}
-                {{- if not $contact }}
-                    {{- errorf "Error processing content file '%s' - Cannot find contact: %s" $page.File . -}}
-                {{- else -}}
-                    {{ $color := site.Params.contact.color | default "primary" }}
-                    {{ $style := site.Params.contact.style | default "shadow" }}
-                    <div class="col col-md-4 d-none d-md-block pt-5">
-                        {{- partial "assets/card.html" (dict "path" $page.Params.contact "color" $color "header" "none" "footer" "none" "ratio" "1x1" "class" (printf "w-75 mx-auto mt-4 %s" $style)) -}}
-                    </div>
-                    <div class="col col-sm-12 d-md-none pt-5">
-                        {{- partial "assets/card.html" (dict "path" $page.Params.contact "color" $color "header" "none" "footer" "none" "orientation" "horizontal" "class" $style) -}}
-                    </div>
-                {{- end }}
-            {{ end }}
-        </div>    
     </div>
 
     {{/* Display generated sections */}}
@@ -91,6 +25,6 @@
         {{ .content | safeHTML }}
     {{ end }}
 
-    {{/* Fill remaining space to push footer to viewport bottom */}}
+    {{/* 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,13 +1,13 @@
 {{- define "partials/single-main.html" -}}
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
     {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
 
     {{ .Render "single/header" }}
 
     {{- 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" }}
-    {{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}
 
     {{ .Render "single/footer" }}
     {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
@@ -17,21 +17,15 @@
 {{ end -}}
 
 {{ define "main" -}}
-    {{- $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 -}}
-    
     {{- $menu := .Scratch.Get "sidebar" -}}
     {{- $version := .Scratch.Get "version" -}}
+    {{- $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 := "" }}
+    {{ $toc := .Render "single/panel-toc" }}
-    {{- $hasTOC := and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-    {{ if $hasTOC }}{{ $toc = partial "assets/toc.html" (dict "page" . "download" $download) }}{{ end -}}
 
     {{ with $sidebar -}}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
@@ -46,34 +40,24 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if and $menu $hasSidebar -}}
+        {{ if $hasSidebar -}}
-            <div class="row row-cols-md-2 row-cols-lg-3">
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
-                <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
+                <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">
+                <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">
+                <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
-                    {{ $toc | safeHTML }}
-                </div>
-            </div>
-        {{ else if $hasSidebar }}
-            <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/single-main.html" . }}
-                </div>
-                <div class="col col-md-2 d-none d-md-block">
                     {{ $toc | safeHTML }}
                 </div>
             </div>
         {{ else }}
-            <div class="row row-cols-1 row-cols-sm-2">
+            <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
-                <div class="col col-sm-12 col-md-9">
+                <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
                     {{ partial "partials/single-main.html" . }}
                 </div>
-                <div class="col col-md-3 d-none d-md-block">
+                <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
                     {{ $toc | safeHTML }}
                 </div>
             </div>    

layouts/_default/single/body.html

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

layouts/_default/single/header.html

@@ -1,12 +1,31 @@
-{{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
+{{- $metadata := "full" -}}
-{{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
+{{ 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 }}
-<small class="text-body-secondary text-uppercase">
+{{ if ne $metadata "none" }}
-    {{ $datestr | i18n "postedOnDate" -}}
+    {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
-    {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
+    {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-    {{ .ReadingTime | lang.FormatNumber 0 }}&nbsp;{{ i18n "minutesShort" }} {{ i18n "read" }} &bull;
+    <small class="text-body-secondary text-uppercase">
-    {{ .WordCount | lang.FormatNumber 0 }}&nbsp;{{ i18n "words" }}
+        {{ $datestr | i18n "postedOnDate" -}}
-</small>
+        {{ 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">

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

@@ -1 +1 @@
-{{/* Intentionally left blank to suppress thumbnail */}}
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/minimal/single/body.html

@@ -1 +1 @@
-{{/* Intentionally left blank to suppress thumbnail */}}
+{{ partial "utilities/ProcessContent" (dict "page" .Page "raw" .RawContent) }}

layouts/partials/assets/card-group.html

@@ -36,6 +36,7 @@
 -->
 
 {{- $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 -}}
@@ -108,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 "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 = "row-cols-1 row-cols-sm-2 row-cols-md-3" }}{{ else }}{{ $colGrid = "row-cols-3" }}{{ 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 = "row-cols-1 row-cols-sm-2 row-cols-md-4" }}{{ else }}{{ $colGrid = "row-cols-4" }}{{ 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 = "row-cols-1 row-cols-sm-3 row-cols-md-5" }}{{ else }}{{ $colGrid = "row-cols-5" }}{{ 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" -}}
@@ -186,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/carousel-item.html

@@ -13,7 +13,7 @@
     {{ end -}}
 {{- end -}}
 
-<div class="carousel-item{{ if $active }} active{{ 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 }}

layouts/partials/assets/image.html

@@ -25,6 +25,10 @@
                     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.
@@ -64,6 +68,15 @@
 {{- 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 }}
     {{- $dim := .dim -}}
@@ -196,6 +209,7 @@
     {{- $modes := .modes -}}
     {{- $lazy := .lazy -}}
     {{- $page := .page -}}
+    {{- $priority := .priority -}}
     {{- $isVector := false -}}
 
     {{- $segments := split $url "#" -}}
@@ -209,8 +223,19 @@
     {{- 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 -}}
@@ -250,6 +275,7 @@
             <img class="img-fluid {{ $innerClass }}"
                 src="{{ $fallbackURL }}"
                 {{ if $lazy }}loading="lazy"{{ end }}
+                {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
                 {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
                 {{ with $height }}height="{{ . }}"{{ end }}
                 {{ with $width }}width="{{ . }}"{{ end }}
@@ -277,6 +303,7 @@
     "title" $title
     "caption" $caption
     "lazy" $lazy
+    "priority" $priority
     "page" $page)
 -}}
 

layouts/partials/assets/list.html

@@ -28,8 +28,9 @@
     {{- $thumbnail := .thumbnail -}}
     {{- $style := .style -}}
     {{- $mode := .mode -}}
+    {{- $title := .title -}}
     {{- $loading := .loading -}}
-    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode "loading" $loading) -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "outerClass" $style "mode" $mode "loading" $loading) -}}
 {{- end -}}
 
 {{- $page := .page -}}
@@ -70,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 "loading" $loading) }}
+                    {{ 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)) }}
@@ -87,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 "loading" $loading) }}
+                    {{ 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 }}" 
+{{ if eq $type "accordion" }}
-    role="tabpanel" aria-labelledby="{{ $parentID }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+    <div class="accordion-item{{ if $show }} show{{ end }}{{ with $class }} {{ . }}{{ end }}">
-    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+        {{- with $header -}}
-    {{ $body }}
+            <h2 class="accordion-header m-0" id="accordion-{{ $parentID }}-heading-{{ $id }}">
-</div>
+                <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,7 +4,7 @@
     "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".
@@ -70,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 -}}
@@ -86,8 +86,31 @@
     {{ 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">
+<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}}
@@ -96,29 +119,39 @@
                 {{ $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 }}">
+    {{ if eq $type "callout" }}</div>{{ 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 -}}
-                    {{- (or $item.Description $item.Content) -}}
-                {{- end -}}
-            </div>    
-        {{ end }}
-    </div>
     {{ if $vertical }}</div>{{ end }}
 </div>

layouts/partials/assets/navbar.html

@@ -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 }}
@@ -227,14 +227,14 @@
     <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 -}}
@@ -255,7 +255,7 @@
             </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>

layouts/partials/assets/persona.html

@@ -69,7 +69,7 @@
         <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" "loading" $loading) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>
@@ -89,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" "loading" $loading) -}}
+                    {{- partial "assets/image.html" (dict "url" $thumbnail "title" $title "ratio" "1x1" "innerClass" "rounded-5" "loading" $loading) -}}
                 {{ end }}
             </div>
         </div>

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 }}
@@ -37,6 +37,7 @@
 {{- $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 -}}
@@ -77,6 +78,14 @@
     {{ 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 $page.IsSection }}
+    {{ $list = $page.Pages }}
 {{ else if $nested }}
     {{ $list = where site.RegularPages "Type" "in" $section }}
 {{ else if $home }}
@@ -100,7 +109,7 @@
 {{- end -}}
 
 {{ if gt $max 0 }}
-    {{- if $home -}}
+    {{- if or $home (eq $kind "related") -}}
         {{- $paginate = false -}}
         {{- $max = int (math.Min $homepage $max) -}}
     {{ end -}}
@@ -128,7 +137,7 @@
     {{- $partial := "" -}}
 
     <div class="container-fluid {{ with $background }} bg-{{ . }}{{ end }} p-0">
-        <div class="container-xxl p-4 px-xxl-0 pb-5">
+        <div class="container-xxl {{ $wrapper }}">
             {{- partial "assets/section-header.html" $params -}}
             
             {{ if eq $layout "card" }}

layouts/partials/assets/section-menu.html

@@ -5,7 +5,31 @@
 {{ end }}
 
 {{- if gt (len $items) 0 }}
-    <nav class="navbar navbar-expand navbar-services p-0 fs-5">
+    <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">

layouts/partials/assets/sharing.html

@@ -1,11 +1,28 @@
 {{- 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 -}}
+
+        {{- $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 -}}
@@ -27,6 +44,10 @@
                 {{ $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")) "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 -}}
 {{- end -}}

layouts/partials/assets/toc.html

@@ -1,17 +1,7 @@
 {{- $page := .page -}}
-{{- $download := .download -}}
 
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" $page.TableOfContents) -}}
-{{ if or $download (gt $items 1) -}}
+{{ 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>
-        {{ with $download }}
+    {{ $page.TableOfContents }}
-            <div class="mb-5">
-                {{ $attr := dict "download" (path.Base .) }}
-                {{ partial "assets/button.html" (dict "href" . "title" (T "download" ) "color" "primary" "outline" "true" "icon" "fas download" "attributes" $attr) }}
-            </div>
-        {{ end }}
-
-        <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
-        {{ $page.TableOfContents }}
-    </div>
 {{ end -}}

layouts/partials/footer/scripts.html

@@ -25,10 +25,10 @@
     {{- $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-") }}
+    {{- if and (not $pc.Disable) (hasPrefix site.Config.Services.GoogleAnalytics.ID "G-") }}
-        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.GoogleAnalytics }}"></script>
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.Config.Services.GoogleAnalytics.ID }}"></script>
     {{- end }}
 {{- 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" .) -}}
+{{- $res := partial "utilities/GetImage.html" (dict "url" .) -}}
-    {{ with $img -}}
+{{- $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/list/featured.html

@@ -56,13 +56,13 @@
     {{ 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) }}
+            {{ 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 {{ if $breadcrumb }} pb-4 px-4 {{ else }} p-4 {{ end }} px-xxl-0 {{ if site.Params.home.fullCover }} fullcover{{ end }} d-flex flex-column">
+    <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 -}}

layouts/partials/single/thumbnail.html

@@ -1,20 +1,24 @@
+{{- $page := .page -}}
+{{- $class := printf "img-wrap" -}}
+{{- with .class }}{{ $class = printf "img-wrap %s" . }}{{ end -}}
+{{- $ratio := .ratio | default "21x9" -}}
 {{- $thumbnail := "" -}}
 {{- $credits := "" -}}
 
-{{- if reflect.IsMap .Params.Thumbnail -}}
+{{- if reflect.IsMap $page.Params.Thumbnail -}}
-    {{- $thumbnail = .Params.Thumbnail.url -}}
+    {{- $thumbnail = $page.Params.Thumbnail.url -}}
     {{- $author := "" -}}
-    {{- if and .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author }}
+    {{- if and $page.Params.Thumbnail.authorURL "text" $page.Params.Thumbnail.author }}
-        {{- $author = partial "utilities/link" (dict "destination" .Params.Thumbnail.authorURL "text" .Params.Thumbnail.author) -}}
+        {{- $author = partial "utilities/link" (dict "destination" $page.Params.Thumbnail.authorURL "text" $page.Params.Thumbnail.author) -}}
-    {{- else if .Params.Thumbnail.author }}
+    {{- else if $page.Params.Thumbnail.author }}
-        {{- $author = .Params.Thumbnail.author -}}
+        {{- $author = $page.Params.Thumbnail.author -}}
     {{- end -}}
 
     {{- $origin := "" -}}
-    {{- if and .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin }}
+    {{- if and $page.Params.Thumbnail.originURL "text" $page.Params.Thumbnail.origin }}
-        {{- $origin = partial "utilities/link" (dict "destination" .Params.Thumbnail.originURL "text" .Params.Thumbnail.origin) -}}
+        {{- $origin = partial "utilities/link" (dict "destination" $page.Params.Thumbnail.originURL "text" $page.Params.Thumbnail.origin) -}}
-    {{- else if .Params.Thumbnail.origin }}
+    {{- else if $page.Params.Thumbnail.origin }}
-        {{- $origin = .Params.Thumbnail.origin -}}
+        {{- $origin = $page.Params.Thumbnail.origin -}}
     {{- end }}
 
     {{- if and $author $origin }}
@@ -23,13 +27,13 @@
         {{ $credits = T "photoShort" $author }}
     {{ end }}
 {{ else }}
-    {{- $thumbnail = .Params.Thumbnail -}}
+    {{- $thumbnail = $page.Params.Thumbnail -}}
-    {{ if or .Params.photoCredits .Params.photoSource }}
+    {{ if or $page.Params.photoCredits $page.Params.photoSource }}
-        {{ warnf "DEPRECATED: frontmatter variables `photoCredits` and `photoSource` have been deprecated in release v0.18: %s" .RelPermalink }}
+        {{ warnf "DEPRECATED: frontmatter variables `photoCredits` and `photoSource` have been deprecated in release v0.18: %s" $page.RelPermalink }}
     {{ end }}
-    {{- if and .Params.photoCredits .Params.PhotoSource }}{{ $credits = printf (T "photoFull") .Params.photoCredits .Params.PhotoSource }}{{ 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" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
+    {{- 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 := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
-    {{ $img = resources.GetRemote $url -}}
-{{ else }}
-    {{ if $page }}
-        {{ $img = $page.Resources.Get $url -}}
-    {{ end }}
-    {{ if not $img }}
-        {{ $img = resources.GetMatch $url }}
-    {{ end }}
-{{ end }}
 
 {{ 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/GetResource.html

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

@@ -3,7 +3,7 @@
 
 {{/* Add title for current page */}}
 {{- $items := slice -}}
-{{ $items = $items | append (dict "title" .Title "content" "" )}}
+{{ $items = $items | append (dict "title" $page.Title "content" "" )}}
 
 {{/* Identify page sections */}}
 {{- $sections := slice -}}
@@ -48,7 +48,8 @@
 
     {{- $thumbnail := (or (and (reflect.IsMap $sectionPage.Params.Thumbnail) $sectionPage.Params.Thumbnail.url) $sectionPage.Params.Thumbnail) -}}
     {{- $icon := $sectionPage.Params.Icon -}}
-    {{- $content := $sectionPage.Content -}}
+    {{- $content := "" -}}
+    {{ if not $sectionPage.IsSection }}{{ $content = $sectionPage.Content }}{{ end -}}
     {{- $sectionTitle := strings.FirstUpper $sectionPage.Type -}}
     {{- $moreTitle := "" -}}
     {{- with (index site.Params.sections $section) -}}

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/shortcodes/card.html

@@ -23,7 +23,7 @@
 
 {{ $path := or (.Get "path") "" }}
 {{ $page := .Page }}
-{{ with $path }}
+{{ if $path }}
     {{ $page = $.Site.GetPage $path }}
     {{ if not $page }}
         {{ errorf "Invalid or missing value for param 'path': %s" .Position -}}

layouts/shortcodes/image.html

@@ -19,11 +19,22 @@
     "mode":         Optional flag indicating if the image should support color modes.
 -->
 
-{{- if isset .Params "src" -}}
+{{- $url := "" -}}
-    {{ $error := false -}}
+{{- $ratio := "" -}}
-    {{ $url := .Get "src" | default "" -}}
+{{- $wrapper := "" -}}
+{{- $class := "" -}}
+{{- $title := "" -}}
+{{- $caption := "" -}}
+{{- $mode := false -}}
+{{- $portrait := false -}}
+{{- $loading := "" -}}
+{{- $error := false -}}
+
+{{- if .IsNamedParams -}}
+    {{ $url = .Get "src" | default "" -}}
+    
     {{- $validRatios := slice "1x1" "3x2" "4x3" "16x9" "21x9" -}}
-    {{ $ratio := .Get "ratio" | default "" -}}
+    {{ $ratio = .Get "ratio" | default "" -}}
     {{ if $ratio -}}
         {{ if not (in $validRatios $ratio) -}}
             {{ errorf "Invalid value for param 'ratio': %s" .Position -}}
@@ -31,10 +42,10 @@
         {{ end -}}
     {{ end -}}
     
-    {{- $class := .Get "class" | default "" -}}
+    {{- $class = .Get "class" | default "" -}}
-    {{- $wrapper := .Get "wrapper" | default "" -}}
+    {{- $wrapper = .Get "wrapper" | default "" -}}
 
-    {{- $loading := .Get "loading" | default "" -}}
+    {{- $loading = .Get "loading" | default "" -}}
     {{- $validSettings := slice "lazy" "eager" -}}
     {{- if $loading -}}
         {{ if not (in $validSettings $loading) -}}
@@ -42,14 +53,12 @@
             {{ $error = true -}}
         {{ end -}}
     {{- end -}}
-    {{- $lazy := eq $loading "lazy" -}}
     
-    {{ $title := .Get "title" | default "" -}}
+    {{ $title = .Get "title" | default "" -}}
-    {{ $caption := .Get "caption" | default "" -}}
+    {{ $caption = .Get "caption" | default "" -}}
 
     {{ $supportedFlags := slice "true" "false" -}}
     {{ $modeParam := "false" -}}
-    {{ $mode := false -}}
     {{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
     {{ if in $supportedFlags $modeParam -}}
         {{ if eq $modeParam "true" }}{{ $mode = true }}{{ else }}{{ $mode = false }}{{ end -}}
@@ -59,7 +68,6 @@
     {{ end -}}
 
     {{ $portraitParam := "false" -}}
-    {{ $portrait := false -}}
     {{ with .Get "portrait" }}{{ $portraitParam = . }}{{ end -}}
     {{ if in $supportedFlags $portraitParam -}}
         {{ if eq $portraitParam "true" }}{{ $portrait = true }}{{ else }}{{ $portrait = false }}{{ end -}}
@@ -67,21 +75,26 @@
         {{ errorf "Invalid value for param 'portrait': %s" $portraitParam -}}
         {{ $error = true -}}
     {{ end -}}
-    
-    {{- if not $error -}}
-        {{- partial "assets/image.html" (dict 
-            "url" $url
-            "ratio" $ratio
-            "outerClass" $wrapper
-            "innerClass" $class
-            "title" $title
-            "caption" $caption
-            "mode" $mode
-            "portrait" $portrait
-            "loading" $loading
-            "page" .Page)
-        -}} 
-    {{- end -}}
 {{ else -}}
-    {{ errorf "Missing value for param 'src': %s" .Position -}}
+    {{ $url = .Get 0 }}
 {{ end -}}
+
+{{ if not $url }}
+    {{ errorf "Missing value for param 'src': %s" .Position -}}
+    {{- $error = true -}}
+{{ end }}
+
+{{- if not $error -}}
+    {{- partial "assets/image.html" (dict 
+        "url" $url
+        "ratio" $ratio
+        "outerClass" $wrapper
+        "innerClass" $class
+        "title" $title
+        "caption" $caption
+        "mode" $mode
+        "portrait" $portrait
+        "loading" $loading
+        "page" .Page)
+    -}} 
+{{- end -}}

layouts/shortcodes/nav-item.html

@@ -22,6 +22,8 @@
         {{- $fade = true -}}
     {{- end -}}
 
+    {{- $type := .Parent.Get "type" -}}
+
     {{- $header := .Get "header" | default "" -}}
     {{- if not $header -}}
         {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
@@ -58,6 +60,7 @@
         "body" $body
         "show" $show
         "disabled" $disabled
+        "type" $type
         )
     }}
 
@@ -67,4 +70,24 @@
     {{ else }}
         {{ .Parent.Scratch.Set "inner" $output }}
     {{ end }}
+
+    {{ $alternative := partial "assets/nav-item" (dict 
+        "id" $id
+        "parentID" $parent
+        "fade" $fade
+        "header" $header
+        "class" $class
+        "body" $body
+        "show" $show
+        "disabled" $disabled
+        "type" "accordion"
+        )
+    }}
+
+    {{ $current := .Parent.Scratch.Get "alternative" }}
+    {{ if $current }}
+        {{ .Parent.Scratch.Set "alternative" (print $current $alternative) }}
+    {{ else }}
+        {{ .Parent.Scratch.Set "alternative" $alternative }}
+    {{ end }}
 {{ end }}

layouts/shortcodes/nav.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a tab group of multiple items. Add nav-item inner elements for each tab pane. The shortcode supports the
     following arguments:
-    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "type"          Optional type of the tab group, either "tabs", "pills", "underline", or "callout".
     "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
     "fade"          Optional flag to make tab panes fade in.
     "class"         Optional class attribute of the tab group, e.g. “nav-fill”.
@@ -15,7 +15,7 @@
 
 {{- $class := .Get "class" | default "" -}}
 {{ $type := .Get "type" | default "" -}}
-{{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+{{ $supportedNavTypes := slice "tabs" "pills" "underline" "callout" -}}
 {{ if $type }}
     {{ if not (in $supportedNavTypes $type) -}}
         {{ errorf "Invalid value for param 'type': %s" $type -}}
@@ -71,8 +71,18 @@
 
 {{- $hasContent := gt (len (findRE "data-has-content=\"true\"" $inner)) 0 -}}
 
-{{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+{{ $alternative := .Scratch.Get "alternative" }}
+{{ if and (eq $type "callout") $alternative }}
+    <div class="d-lg-none">
+        <div id="accordion-{{ $id }}" class="accordion mb-3{{ with $class }} {{ . }}{{ end }} nav-callout">
+            {{- $alternative | safeHTML -}}
+        </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="{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+    {{ if $vertical }}<div class="row"><div class="col-auto">{{ end }}
     {{- range $index, $item := $items -}}
         {{- $header := partial "utilities/GetVal.html" $item -}}
         {{- $itemDisabled := in $disabled $index -}}
@@ -81,11 +91,13 @@
             {{ $header }}
         </button>
     {{ end -}}
-</div>
+    {{ if $vertical }}</div><div class="col">{{ end }}
-
+        {{- if $hasContent -}}
-{{- if $hasContent -}}
+        <div class="tab-content w-100 {{ if not $vertical }} {{ end }}{{ if eq $type "tabs" }}border border-bottom-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
-    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+            {{- $inner | safeHTML -}}
-        {{- $inner | safeHTML -}}
+        </div>
+    {{- end -}}
+    {{ if $vertical }}</div></div>{{ end }}
     </div>
-{{- end -}}
+
-{{ if $vertical }}</div>{{ end }}
+{{ if and (eq $type "callout") $alternative }}</div>{{ end }}

layouts/shortcodes/timeline.html

@@ -50,7 +50,7 @@
     <div class="col-{{ $col }} d-flex justify-content-{{ $direction }} align-items-center">
         <div class="d-flex">
             <div class="d-flex timeline-semi-circle-{{ $direction }} fa-wrapper align-items-center justify-content-center">
-                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon)) }}
+                {{ partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid" $icon) "spacing" false) }}
             </div>
             <div class="timeline-connector-{{ $direction }} {{ if eq $direction "start" }} order-first{{ end }}"></div>
         </div>

layouts/shortcodes/youtube.html

@@ -4,7 +4,7 @@
 {{- $id := .Get "id" | default (.Get 0) -}}
 {{- $class := .Get "class" | default (.Get 1) -}}
 {{- $title := .Get "title" | default "YouTube Video" }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
+<div class="youtube-embedded {{ $class }}">
-  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}?origin={{ .Site.BaseURL }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
+  <iframe src="https://{{ $ytHost }}/embed/{{ $id }}?origin={{ .Site.BaseURL }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" allowfullscreen title="{{ $title }}"></iframe>
 </div>
 {{ end -}}

layouts/tags/list.html

@@ -1,22 +1,35 @@
 {{ define "main" }}
-    <div class="container-xxl flex-fill px-4 px-xxl-0">
+    {{- $page := . -}}
-        <div class="row row-cols-1 row-cols-sm-3">
+    {{- $layout := $page.Params.layout -}}
-            <div class="col col-md-2 d-none d-md-block"></div>
+    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-            <div class="col col-sm-12 col-md-8">
+
-                <p class="display-4 mt-5">{{ .Name | humanize }}</p>
+    <div class="container-xxl flex-fill p-4 px-xxl-0">
+        <div class="row row-cols-1 row-cols-{{ $breakpoint.prev }}-3">
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
+            <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-8">
+                {{- if ne $layout "featured" -}}
+                    {{ if and (not $page.IsHome) site.Params.navigation.breadcrumb }}
+                        <div>{{ partial "assets/breadcrumb.html" $page }}</div>
+                    {{ end -}}
+                {{- end -}}
+
+                <p class="display-4 mt-5">{{ .Page.Title }}</p>
 
                 {{ if eq .Kind "taxonomy" }}
                     <div class="row mt-5"></div>
                     {{ range $.Site.Taxonomies.tags.ByCount }}
                         <div class="row mt-2">
-                            <div class="d-none d-sm-block col-sm-3 mt-auto text-right">
+                            <div class="col-3 mt-auto text-right">
                                 {{ .Count }} {{ if gt .Count 1 }} {{ T "articles" }} {{ else }} {{ T "article" }} {{ end }}
                             </div>
-                            <div class="col">
+                            <div class="col-9">
-                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Name | .Page.RenderString }}</a>
+                                <a href="{{ (path.Join .Page.RelPermalink) | relLangURL }}">{{ .Page.Title | .Page.RenderString }}</a>
                             </div>
                         </div>
                     {{ end }}
+                    {{ if eq $.Site.Taxonomies.tags 0 }}
+                        <p class="pt-4">{{- T "emptyTags" }}.</p>
+                    {{ end }}
                 {{ else }}
                     {{ $dateFormat := default "Jan 2" (index .Site.Params "date_format") }}
                     {{ $.Scratch.Set "lastYear" ""}}
@@ -24,7 +37,7 @@
                         {{ $year := .Date.Year }}
                         {{ $lastYear := $.Scratch.Get "lastYear"}}
                         <div class="row mt-2">
-                            <div class="d-none d-sm-block col-sm-3 mt-auto text-right">
+                            <div class="d-none d-{{ $breakpoint.prev }}-block col-{{ $breakpoint.prev }}-3 mt-auto text-right">
                                 <time class="post-date" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
                                     {{ (partial "utilities/date.html" (dict "date" .Date "format" "medium")) }}
                                 </time>
@@ -40,7 +53,7 @@
                     {{ end }}
                 {{ end }}
             </div>
-            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-{{ $breakpoint.current }}-2 d-none d-{{ $breakpoint.current }}-block"></div>
         </div>
     </div>
 {{ end }}

netlify.toml

@@ -4,8 +4,8 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.69.0"
+    DART_SASS_VERSION = "1.69.5"
-    HUGO_VERSION = "0.119.0"
+    HUGO_VERSION = "0.120.3"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
     NODE_VERSION = "18.18.2"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.21.0-beta7",
+  "version": "0.21.7",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -73,12 +73,12 @@
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "cssnano-preset-advanced": "^6.0.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.115.0",
+    "hugo-bin": "^0.116.4",
     "markdownlint-cli2": "^0.10.0",
     "netlify-plugin-hugo-cache-resources": "^0.2.1",
     "npm-run-all": "^4.1.5",
@@ -88,10 +88,13 @@
     "rimraf": "^5.0.5",
     "shx": "^0.3.4",
     "stylelint": "^15.11.0",
-    "stylelint-config-standard-scss": "^11.0.0"
+    "stylelint-config-standard-scss": "^11.1.0"
   },
   "optionalDependencies": {
-    "fsevents": "*"
+    "@gethinode/netlify-plugin-dartsass": "^0.2.0",
+    "@netlify/plugin-lighthouse": "*",
+    "fsevents": "*",
+    "netlify-plugin-hugo-cache-resources": "^0.2.1"
   },
   "hugo-bin": {
     "buildTags": "extended"

theme.toml

@@ -6,7 +6,7 @@ homepage = "https://gethinode.com"
 demosite = "https://demo.gethinode.com"
 tags = ["blog", "documentation", "minimal", "modern", "customizable", "search", "bootstrap"]
 features = ["security aware", "fast by default", "seo-ready", "development tools", "bootstrap framework", "netlify-ready", "full text search", "page layouts", "versioned documentation"]
-min_version = "0.118.0" # fixes Hugo issue #11406
+min_version = "0.120.0"
 
 [author]
   name = "Mark Dumay"