Revert back to macos-latest

Server

.eslintignore

@@ -1,3 +1,4 @@
+assets/js/analytics.js
 assets/js/color.js
 assets/js/flexsearch.js
 assets/js/vendor

.github/workflows/auto-approve.yml

@@ -1,21 +0,0 @@
-name: Dependabot auto-approve
-on: pull_request
-
-permissions:
-  pull-requests: write
-
-jobs:
-  dependabot:
-    runs-on: ubuntu-latest
-    if: ${{ github.actor == 'dependabot[bot]' }}
-    steps:
-      - name: Dependabot metadata
-        id: metadata
-        uses: dependabot/fetch-metadata@v1
-        with:
-          github-token: "${{ secrets.GITHUB_TOKEN }}"
-      - name: Approve a PR
-        run: gh pr review --approve "$PR_URL"
-        env:
-          PR_URL: ${{github.event.pull_request.html_url}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/auto-merge.yml

@@ -0,0 +1,43 @@
+# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and-github-actions/
+name: Dependabot auto-merge
+on: pull_request_target
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  review-dependabot-pr:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve patch and minor updates
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve major updates of development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Comment on major updates of non-development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+        run: |
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency used in production**"
+          gh pr edit $PR_URL --add-label "requires-manual-qa"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

assets/js/analytics.js

@@ -0,0 +1,69 @@
+// Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html
+
+{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
+    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+    {{- if not $pc.RespectDoNotTrack -}}
+        var doNotTrack = false;
+    {{- else -}}
+        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+        var doNotTrack = (dnt == "1" || dnt == "yes");
+    {{- end -}}
+{{- end -}}
+
+{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
+{{- if (and (not .Site.IsServer) (not $pc.Disable)) -}}
+    {{ with .Site.GoogleAnalytics -}}
+        {{ if hasPrefix . "G-"}}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                window.dataLayer = window.dataLayer || [];
+
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                
+                gtag('js', new Date());
+                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
+            }
+
+        {{ else if hasPrefix . "UA-" }}
+            {{ template "__ga_js_set_doNotTrack" $ }}
+
+            if (!doNotTrack) {
+                (function(i, s, o, g, r, a, m) {
+                    i['GoogleAnalyticsObject'] = r;
+                    i[r] = i[r] || function() {
+                        (i[r].q = i[r].q || []).push(arguments)
+                    }, i[r].l = 1 * new Date();
+                    a = s.createElement(o),
+                        m = s.getElementsByTagName(o)[0];
+                    a.async = 1;
+                    a.src = g;
+                    m.parentNode.insertBefore(a, m)
+                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+                
+                {{- if $pc.UseSessionStorage }}
+                    if (window.sessionStorage) {
+                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
+                        ga('create', '{{ . }}', {
+                            'storage': 'none',
+                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
+                        });
+                    
+                        ga(function(tracker) {
+                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
+                        });
+                    }
+                {{ else }}
+                    ga('create', '{{ . }}', 'auto');
+                {{ end -}}
+                {{ if $pc.AnonymizeIP }}
+                    ga('set', 'anonymizeIp', true);
+                {{ end }}
+                
+                ga('send', 'pageview');
+            }
+        {{- end }}
+    {{ end -}}
+{{- end }}

assets/js/animation.js

@@ -0,0 +1,18 @@
+function reveal () {
+  const reveals = document.querySelectorAll('.reveal')
+
+  for (let i = 0; i < reveals.length; i++) {
+    const windowHeight = window.innerHeight
+    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementVisible = 150
+
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add('active')
+      reveals[i].classList.remove('reveal')
+    } else {
+      reveals[i].classList.remove('active')
+    }
+  }
+}
+
+window.addEventListener('scroll', reveal)

assets/scss/app.scss

@@ -71,12 +71,14 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/persona.scss";
 @import "components/popover.scss";
 @import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
+@import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";

assets/scss/common/_animation.scss

@@ -0,0 +1,99 @@
+.rotate-5 {
+    transform: rotate(5deg);
+}
+
+.rotate-n5 {
+    transform: rotate(-5deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .reveal {
+        position: relative;
+        opacity: 0;
+        animation-iteration-count: 1;
+    }
+
+    .reveal.active {
+        opacity: 1;
+    }
+
+    .active.fade-bottom {
+        animation: fade-bottom 1s ease-in;
+    }
+
+    .active.fade-bottom-5 {
+        animation: fade-bottom-5 1s ease-in;
+    }
+    
+    .active.fade-bottom-n5 {
+        animation: fade-bottom-n5 1s ease-in;
+    }
+    
+    .active.fade-left {
+        animation: fade-left 1s ease-in;
+    }
+    
+    .active.fade-right {
+        animation: fade-right 1s ease-in;
+    }
+
+    @keyframes fade-bottom {
+        0% {
+            transform: translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-bottom-5 {
+        0% {
+            transform: translateY(50px) rotate(5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(5deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-bottom-n5 {
+        0% {
+            transform: translateY(50px) rotate(-5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(-5deg);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-left {
+        0% {
+            transform: translateX(-100px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-right {
+        0% {
+            transform: translateX(100px);
+            opacity: 0;
+        }
+        
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}

assets/scss/common/_styles.scss

@@ -29,3 +29,121 @@ a:active {
     transition: 0.25s ease-in-out;
     color: $primary;
 }
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        ),
+    )
+);
+
+@media screen and (orientation: portrait) {
+    .min-vh-custom {
+        min-height: 25vh !important
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
+}
+
+:root {
+    --nav-height: 90px;
+}
+
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(md) {
+    .ratio-section {
+        min-height: calc(min(100vh, 768px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(lg) {
+    .ratio-section {
+        min-height: calc(min(100vh, 992px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1200px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xxl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+    }    
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        )
+    )
+);

assets/scss/components/_persona.scss

@@ -0,0 +1,3 @@
+.persona {
+    min-height: 320px !important
+}

assets/scss/components/_sidebar.scss

@@ -13,6 +13,7 @@
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
     padding-left: 0.85rem !important;
+    display: inline-block;
 
     &.active,
     &:hover,

assets/scss/components/_toc.scss

@@ -1,8 +1,8 @@
 //
-// Table of contents sidebar
+// Table of contents sidebar & drop-down panel
 //
 // scss-docs-start toc
-.toc {
+.toc-sidebar {
     grid-area: toc;
     right: 0;
     z-index: 2;
@@ -15,6 +15,7 @@
 
 .toc nav {
     font-size: 0.875rem;
+    margin-bottom: -0.875rem;
 }
 
 .toc nav ul {
@@ -29,12 +30,24 @@
 
 .toc nav li {
     margin-bottom: 0.25rem;
+
+    &:hover {
+        color: var(--bs-primary);
+    }
 }
 
 .toc nav a {
     color: inherit;
 }
 
+.toc-panel nav a {
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+    }
+}
+
 .toc nav a:not(:hover) {
     text-decoration: none;
 }
@@ -42,3 +55,21 @@
 .toc nav a code {
     font: inherit;
 }
+
+.toc-button {
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-bg: var(--bs-body-bg);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-bg: var(--bs-body-bg);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &.active,
+    &:hover,
+    &:focus {
+        color: var(--bs-primary);
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 4px var(--bs-primary-border-subtle);
+        outline: none;
+    }
+}

assets/scss/helpers/_colored-links.scss

@@ -1,25 +1,39 @@
-// stylelint-disable function-name-case, declaration-no-important
-
 // scss-docs-start colored-links
-@each $color, $value in $theme-colors {
-    $contrast-color: color-contrast($value);
-    $color-rgb: to-rgb($value);
+$custom-colors: (
+    "primary": "light", 
+    "secondary": "light", 
+    "success": "light", 
+    "danger": "light", 
+    "dark": "light", 
+    "black": "light",
+    "info": "dark", 
+    "warning": "dark", 
+    "light": "dark", 
+    "white": "dark",
+    "body": "adaptive",
+    "body-tertiary": "adaptive"
+);
+
+@each $color, $value in $custom-colors {
+    $main-color: var(--bs-body-color);
+    $emphasize-color: var(--bs-secondary-color);
+
+    @if $value == "light" {
+        $main-color: $white;
+        $emphasize-color: shade-color($main-color, $link-shade-percentage);
+    } @else if $value == "dark" {
+        $main-color: $black;
+        $emphasize-color: tint-color($main-color, $link-shade-percentage);
+    }
 
     .link-bg-#{$color} {
-        color: $contrast-color if($enable-important-utilities, !important, null); 
-        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+        color: $main-color if($enable-important-utilities, !important, null); 
 
-        @if $link-shade-percentage != 0 {
         &:hover,
         &:focus {
-                color: if($contrast-color == $color-contrast-light, 
-                shade-color($contrast-color, $link-shade-percentage),
-                tint-color($contrast-color, $link-shade-percentage))
-                    if($enable-important-utilities, !important, null);
-            }
+            color: $emphasize-color if($enable-important-utilities, !important, null);
         }
     }
 }
 
 // scss-docs-end colored-links
-// stylelint-enable function-name-case, declaration-no-important

config/_default/.forestry/front_matter/templates/blog-post.yml

@@ -1,25 +0,0 @@
----
-label: Blog post
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: datetime
-  name: date
-  label: date
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/front_matter/templates/project.yml

@@ -1,25 +0,0 @@
----
-label: Project
-hide_body: false
-fields:
-- type: text
-  name: author
-  label: author
-- type: text
-  name: title
-  label: title
-- type: datetime
-  name: date
-  label: date
-- type: text
-  name: description
-  label: description
-- type: list
-  name: tags
-  label: tags
-- type: file
-  name: thumbnail
-  label: thumbnail
-- type: textarea
-  name: credits
-  label: credits

config/_default/.forestry/settings.yml

@@ -1,40 +0,0 @@
----
-new_page_extension: md
-auto_deploy: false
-admin_path: 
-webhook_url: 
-sections:
-- type: directory
-  path: content/en/blog
-  label: Blog
-  create: all
-  match: "**/*"
-  templates:
-  - blog-post
-- type: directory
-  path: content/en/projects
-  label: Projects
-  create: all
-  match: "**/*"
-  templates:
-  - project
-- type: document
-  path: content/en/about.md
-  label: About
-upload_dir: assets/img
-public_path: "/img"
-front_matter_path: ''
-use_front_matter_path: false
-file_template: ":filename:"
-build:
-  preview_env:
-  - HUGO_ENV=staging
-  - HUGO_VERSION=0.92.2
-  - HUGO_ENABLEGITINFO=true
-  preview_output_directory: public
-  install_dependencies_command: npm install
-  preview_docker_image: forestryio/hugo:node16
-  mount_path: "/srv"
-  working_dir: "/srv"
-  instant_preview_command: npm run start
-version: 0.81.0

config/_default/config.toml

@@ -17,7 +17,7 @@ enableInlineShortcodes = true
 ignoreErrors = ["error-remote-getjson"]
 
 # toml-docs-start timeout
-timeout = "60s"
+timeout = "180s"
 # toml-docs-end timeout
 
 # toml-docs-start language

config/_default/params.toml

@@ -3,6 +3,7 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    modes = ["light", "dark"]
 # toml-docs-end main
 
 # toml-docs-start docs
@@ -16,6 +17,7 @@
     sections = ["blog", "projects"]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
     fullCover = false
+    centerHeadline = false
     style = ""
 # toml-docs-end home
 
@@ -32,12 +34,12 @@
     sidebar = true
 # toml-docs-end navigation
 
-# toml-docs-start list
-[list]
-    [blog]
+# toml-docs-start sections
+[sections]
+    [sections.blog]
         title = "Blog"
         sort = "date"
-        reverse = false
+        reverse = true
         cols = 3
         color = ""
         padding = "0"
@@ -47,12 +49,12 @@
         style = "border-0 card-zoom"
         homepage = 3
         separator = true
-    [projects]
+    [sections.projects]
         title = "Projects"
         sort = "title"
         reverse = false
         cols = 1
-        color = ""
+        color = "body-tertiary"
         padding = "3"
         header = "none"
         footer = "tags"
@@ -60,7 +62,7 @@
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false
-# toml-docs-end list
+# toml-docs-end sections
 
 [favicon]
     logo = "img/favicon.png"

config/_default/server.toml

@@ -8,14 +8,15 @@ for = '/**'
     Content-Security-Policy = """\
         default-src 'self'; \
         script-src 'self' \
-            https://utteranc.es/client.js; \
+            https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
         style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
         object-src 'none'; \
         base-uri 'self'; \
-        connect-src 'self'; \
+        connect-src 'self'
+            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
         font-src 'self' https://fonts.gstatic.com; \
         frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+        img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
         manifest-src 'self'; \
         media-src 'self' \
         """

content/en/blog/bootstrap-elements.md

@@ -95,11 +95,11 @@ As an example, the following shortcode displays a group of three buttons.
 
 ## Card
 
-As an example, the following shortcode displays a stacked card with icon that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
+As an example, the following shortcode displays a stacked card that links to the [about]({{< ref "about" >}}) page. It includes a custom header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -257,8 +257,6 @@ As an example, the following shortcode displays a tooltip for a colored hyperlin
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstration
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

content/nl/blog/bootstrap-elements.md

@@ -95,11 +95,11 @@ De volgende shortcode toont een groep van drie knoppen.
 
 ## Card
 
-De volgende shortcode toont een kaart met een icoon dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
+De volgende shortcode toont een kaart dat linkt naar de [over mij]({{< ref "about" >}}) pagina. De kaart bevat een titel.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="body-tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,6 +192,27 @@ De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhoud
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Nav
+
+De volgende shortcode toont een groep met verticale tabbladen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+  {{</* nav type="pills" vertical="true" */>}}
+    {{</* nav-item header="Nav Item #1" show="true" */>}}
+    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
+    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #2" */>}}
+    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #3" */>}}
+    Dit is de inhoud van het derde element.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Navbar
 
 De volgende shortcode toont een navigatiemenu.
@@ -236,8 +257,6 @@ De volgende shortcode toont een uitleg voor een gekleurde link.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}
-    Tooltip demonstration
-{{</* /tooltip */>}}
+{{</* tooltip color="primary" title="Tooltip" href="#!" */>}}Tooltip{{</* /tooltip */>}} demonstratie
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

i18n/de.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Ups! Diese Seite existiert nicht. Versuche es über die"
+  translation: "Diese Seite existiert nicht. Versuche es über die"
 - id: pageNotFoundTitle
   translation: "Nicht gefunden"
 - id: pageNotFoundHome

i18n/en.yaml

@@ -27,8 +27,14 @@
   translation: "Next Post"
 - id: recentProjects
   translation: "Projects"
+- id: moreFeatures
+  translation: "More Features"
+- id: moreGuides
+  translation: "More Guides"
 - id: moreProjects
   translation: "More Projects"
+- id: moreUsers
+  translation: "More Users"
 - id: read
   translation: "read"
 - id: minutesShort
@@ -65,12 +71,14 @@
   translation: "Auto"
 - id: toggleMainNav
   translation: "Toggle main navigation"
+- id: demo
+  translation: "Demo"
 
 # 404 page
 - id: pageNotFound
-  translation: "Oops! This page doesn't exist. Try going back to our"
+  translation: "The page you are looking for does not exist or another error occurred. Try going back to our"
 - id: pageNotFoundTitle
-  translation: "Not found"
+  translation: "Page not found"
 - id: pageNotFoundHome
   translation: "home page"
 

i18n/nl.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Oeps, deze pagina bestaat niet. Ga terug naar het"
+  translation: "Deze pagina bestaat niet of er is een andere fout opgetreden. Ga terug naar het"
 - id: pageNotFoundTitle
   translation: "Niet gevonden"
 - id: pageNotFoundHome

layouts/404.html

@@ -1,8 +1,12 @@
 {{ define "main"}}
-    <main id="main">
-      <div>
-       <h1 id="title">{{ T "pageNotFoundTitle" }}</h1>
+    <div class="container-xxl flex-fill d-flex align-content-center flex-wrap">
+        <div class="w-100 text-center">
+            <span class="text-secondary fw-bold">
+                <i class="fa-regular fa-face-frown fa-10x"></i>
+                <p class="display-1 mt-3 fw-bold">404</p>
+                <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
+            </span>
             <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
         </div>
-    </main>
+    </div>
 {{ end }}

layouts/_default/single.html

@@ -1,11 +1,12 @@
 {{- define "partials/header.html" -}}
-    {{ if site.Params.navigation.breadcrumb }}{{ partial "breadcrumb.html" . }}{{ end -}}
+    {{ if site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
-        <h1>{{ .Title }}</h1>
+        {{ with .Title }}<p class="display-4 mt-5">{{ . }}</p>{{ end }}
+        <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")) -}}
-        <h1>{{ .Title }}</h1>
+        {{ 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;
@@ -14,34 +15,45 @@
         </small>
 
         <div class="mt-3">
+            <div class="d-none-dark">
                 {{ range (.GetTerms "tags") -}}
                     <a class="btn btn-light btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    &nbsp;
                 {{ end -}}
             </div>
+            
+            <div class="d-none-light">
+                {{ range (.GetTerms "tags") -}}
+                    <a class="btn btn-outline-secondary btn-sm" href="{{ (path.Join .Page.RelPermalink) | relURL }}" role="button">{{ .LinkTitle }}</a>
+                    &nbsp;
+                {{ end -}}
+            </div>
+        </div>
+        <p class="lead mb-5 mt-3">{{ .Description }}</p>
     {{ end }}
 {{ end -}}
 
 {{ define "partials/body.html" -}}
-    {{ if eq .Layout "docs"}}
-        <p class="lead mb-5">{{ .Description }}</p>
-        {{ .Content }}
-    {{ else }}
-        <p class="lead mb-5 mt-3">{{ .Description }}</p>
+    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+        <div class="d-md-none pb-5">{{ partial "assets/toc-dropdown.html" . }}</div>
+    {{- end -}}
+
+    {{ if not (in (slice "docs" "minimal") .Layout) }}
         {{ if .Params.thumbnail -}}
             {{- $credits := "" -}}
             {{- if .Params.photoCredits }}{{ if .Params.PhotoSource }}{{ $credits = printf "%s %s %s %s" (T "photoBy") .Params.photoCredits (T "photoOn") .Params.PhotoSource }}{{ end }}{{ end -}}
-            {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
+            {{- partial "assets/image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" $credits) -}}
         {{ end -}}
+    {{ end }}
     {{ .Content }}
-{{ end }}
 {{ end -}}
 
 {{ define "partials/footer.html" -}}
-    {{ if eq .Layout "docs"}}
+    {{ if eq .Layout "docs" }}
         <div class="mt-5 small">
             {{ partial "utilities/git.html" . }}
         </div>
-    {{ else }}
+    {{ else if ne .Layout "minimal" }}
         <div class="row row-cols-2 mt-5 mb-3">
             <div class="col">
                 {{ with .NextInSection -}}
@@ -72,7 +84,7 @@
     {{- $version := .Scratch.Get "version" -}}
     {{- $sidebar := .Site.Params.navigation.sidebar | default true -}}
     {{ if and $menu $sidebar -}}
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
+        <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>
@@ -82,7 +94,7 @@
             </div>
         </div>
     
-        <div class="container-fluid">
+        <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) }}
@@ -100,7 +112,7 @@
             </div>
         </div>
     {{ else }}
-        <div class="container-fluid">
+        <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">

layouts/index.html

@@ -4,11 +4,12 @@
 
 {{- define "main" -}}
     {{- $page := . -}}
+
     {{- range $index, $section := site.Params.home.sections -}}
         {{- $pages := where site.RegularPages "Type" "in" $section -}}
         {{- $sectionURL := "" -}}
-        {{- range $page := first 1 $pages -}}
-            {{- $sectionURL = $page.Parent.RelPermalink -}}
+        {{- range $p := first 1 $pages -}}
+            {{- $sectionURL = $p.Parent.RelPermalink -}}
         {{- end -}}
 
         {{- $moreTitle := (T (printf "more%s" (strings.FirstUpper $section))) -}}

layouts/partials/assets/button.html

@@ -0,0 +1,132 @@
+<!-- 
+    Displays a button. The shortcode supports the following arguments:
+    "title"         Required title of the button.
+    "href"          Optional address for the button or hyperlink.
+    "id"            Optional id of the button, to be used in the DOM.
+    "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
+    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
+    "color"         Optional theme color of the element, either "primary" (default), "secondary", "success",
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
+    "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
+    "badge"         Optional positioned badge to display on top of the button.
+    "aria-label"    Optional assistive label for the badge.
+    "tooltip"       Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
+                    inactive buttons.
+    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
+    "type"          Optional type of the element, either "link" or "button" (default).
+    "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
+    "class"         Optional class attribute of the button element, e.g. “toc-button”.
+    "icon"          Optional Font Awesome icon class attribute, e.g. "fas sort".
+    "order"         Optional order of the icon, either "first" or "last" (default).
+    "justify"       Optional justification of the button title and icon, either "start", "end", "center" (default),
+                    "between", "around", or "evenly".
+-->
+
+{{- $title := trim .title " \r\n" -}}
+{{- if not $title -}}
+    {{- errorf "partial [assets/button.html] - Missing element title" -}}
+{{- end -}}
+
+{{- $id := .id }}
+
+{{- $state := "enabled" -}}
+{{- with .state }}{{ $state = . }}{{ end -}}
+{{- $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
+{{- if not (in $supportedStates $state) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'state': %s" $state -}}
+{{- end -}}
+
+{{- $size := "md" -}}
+{{- with .size }}{{ $size = . }}{{ end -}}
+{{- $supportedSizes := slice "sm" "md" "lg" -}}
+{{- if not (in $supportedSizes $size) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'size': %s" $size -}}
+{{- end -}}
+
+{{- $color := "primary" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'color': %s" $color -}}
+{{- end -}}
+
+{{- $outline := false -}}
+{{- with .outline }}{{ $outline = . }}{{ end -}}
+
+{{- $badge := "" -}}
+{{- with .badge }}{{ $badge = . }}{{ end -}}
+
+{{- $label := "" -}}
+{{- with .label }}{{ $label = . }}{{ end -}}
+
+{{- $tooltip := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .tooltip }}{{ $tooltip = . }}{{ end -}}
+{{- end -}}
+
+{{- $href := .href -}}
+
+{{- $collapse := "" -}}
+{{- if not (strings.HasSuffix $state "active") -}}
+    {{- with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
+{{- end -}}
+
+{{- if $tooltip -}}
+    {{- if $collapse -}}
+        {{- errorf "partial [assets/button.html] - Cannot use tooltip and collapse at the same time" -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $type := "button" -}}
+{{- with .type }}{{ $type = . }}{{ end -}}
+{{- $supportedTypes := slice "button" "link" -}}
+{{- if not (in $supportedTypes $type) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'type': %s" $type -}}
+{{- end -}}
+
+{{- $placement := "top" -}}
+{{- with .placement }}{{ $placement = . }}{{ end -}}
+{{- $supportedPlacements := slice "top" "bottom" "left" "right" -}}
+{{- if not (in $supportedPlacements $placement) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'placement': %s" $placement -}}
+{{- end -}}
+
+{{- $class := .class }}
+{{- $icon := .icon }}
+
+{{- $order := "last" -}}
+{{- with .order }}{{ $order = . }}{{ end -}}
+{{- $supportedOrders := slice "first" "last" -}}
+{{- if not (in $supportedOrders $order) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'order': %s" $order -}}
+{{- end -}}
+
+{{- $justify := "center" -}}
+{{- with .justify }}{{ $justify = . }}{{ end -}}
+{{- $supportedJustify := slice "start" "end" "center" "between" "around" "evenly" -}}
+{{- if not (in $supportedJustify $justify) -}}
+    {{- errorf "partial [assets/button.html] - Invalid value for param 'justify': %s" $justify -}}
+{{- end -}}
+
+<a aria-label="{{ $title }}" {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end -}}
+    {{- with $id }}id="{{ . }}"{{ end -}}
+    {{- if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }} {{ $class }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
+    {{- else }}class="link-{{ $color }} position-relative {{ $class }}"{{ end -}}
+    {{- with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end -}}
+    {{- with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end -}}
+    {{- if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end -}}
+    {{- if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end -}}
+    >
+
+    <div class="d-flex justify-content-{{ $justify }}">
+        <div>{{ $title }}</div>
+        {{- with $icon }}<div class="align-self-center{{ if eq $order "first" }} order-first pe-1{{ else }} ps-1{{ end }}">{{ partial "assets/icon.html" (dict "icon" $icon) }}</div>{{ end }}
+    </div>
+
+    {{- with $badge }}
+        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+            {{ . }}
+            {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
+        </span>
+    {{- end -}}  
+</a>

layouts/partials/assets/card-group.html

@@ -31,24 +31,26 @@
 
 {{- $page := .page -}}
 {{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
-    {{- errorf "Invalid value for param 'page'" -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'page'" -}}
 {{- end -}}
 
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
 {{ $list := .list }}
-{{- if ne (printf "%T" $list) "page.Pages" -}}
-    {{- errorf "Invalid value for param 'items'" -}}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+    {{ warnf "Type: %T" $list }}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'list'" -}}
 {{- end -}}
 
 {{- $count := len $list -}}
 {{- $max := .max -}}
 {{- if ne (printf "%T" $max) "int" -}}
-    {{- errorf "Invalid value for param 'max'" -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'max'" -}}
 {{- end -}}
 {{- $max = math.Min $max $count -}}
 
 {{- $cols := .cols -}}
 {{- if or (lt $cols 1) (gt $cols 5) -}}
-    {{- errorf "Invalid value for param 'cols': %d" $cols -}}
+    {{- errorf "partial [assets/card-group.html] - Invalid value for param 'cols': %d" $cols -}}
 {{- end -}}
 {{- $colGrid := "row-cols-1" -}}
 {{- if eq $cols 2 }}{{ $colGrid = "row-cols-1 row-cols-sm-1 row-cols-md-2" -}}
@@ -61,7 +63,7 @@
 {{- $paginate := false -}}
 {{- with .paginate -}}
     {{- if ne (printf "%T" .) "bool" -}}
-        {{- errorf "Invalid value for param 'paginate'" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'paginate'" -}}
     {{- end -}}
     {{- $paginate = . -}}
 {{- end -}}
@@ -75,7 +77,7 @@
 {{- $separator := false -}}
 {{- with .separator -}}
     {{- if ne (printf "%T" .) "bool" -}}
-        {{- errorf "Invalid value for param 'separator'" -}}
+        {{- errorf "partial [assets/card-group.html] - Invalid value for param 'separator'" -}}
     {{- end -}}
     {{- $separator = . -}}
 {{- end -}}
@@ -87,56 +89,52 @@
 {{- $footer := .footer -}}
 {{- $orientation := .orientation -}}
 
-<div class="container-fluid p-4">
-    {{ with $title }}<h1>{{ . }}</h1>{{ 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 }}
+    {{ $paginator := "" }}
     {{ if $paginate }}
-        <div class="row {{ $colGrid }}">
-            {{ $paginator := $page.Paginate $list }}
-            {{ range $index, $element := first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
-                <div class="col pt-3 pb-3">
-                    {{- partial "assets/card.html" (dict
-                        "path" $element.File.Path
-                        "class" (printf "h-100 %s" $class)
-                        "color" $color
-                        "padding" $padding
-                        "header" $header
-                        "footer" $footer
-                        "orientation" $orientation
-                        )
-                    -}}
-                </div>
-                {{- if and (lt $index (sub $max 1)) $separator -}}
-                    <div class="col d-block d-sm-none">
-                        <hr>
-                    </div>
-                {{- end -}}
+        {{ $paginator = $page.Paginate $list }}
+        {{ $list = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $list) }}
     {{ end }}
-        </div>
-        {{- if gt $paginator.TotalPages 1 -}}
-            {{- partial "assets/pagination.html" $page -}}
-        {{- end -}} 
-    {{ else }}
+
     <div class="row {{ $colGrid }}">
         {{ range $index, $element := $list }}
-                <div class="col pt-3 pb-3">
-                    {{- partial "assets/card.html" (dict
-                        "path" $element.File.Path
+            {{- $params := (dict
                 "class" (printf "h-100 %s" $class)
                 "color" $color
                 "padding" $padding
                 "header" $header
                 "footer" $footer
                 "orientation" $orientation
-                        )
-                    -}}
+            ) -}}
+            {{- if $element.IsPage -}}
+                {{- $params = merge $params (dict "path" $element.File.Path) -}}
+            {{- else -}}
+                {{- $params = merge $params (dict
+                    "title" $element.Title
+                    "href" (or $element.Permalink "#!")
+                    "description" $element.Description
+                    "thumbnail" $element.Params.thumbnail
+                    "icon" $element.Params.icon
+                ) -}}
+            {{- end -}}
+
+            <div class="col pt-3 pb-3">
+                {{- partial "assets/card.html" $params -}}
             </div>
             {{- if and (lt $index (sub $max 1)) $separator -}}
                 <div class="col d-block d-sm-none">
                     <hr>
                 </div>
             {{- end -}}
-            {{ end }}
+        {{- end -}}
     </div>
+
+    {{ if $paginate }}
+        {{- if gt $paginator.TotalPages 1 -}}
+            <div class="pt-3">{{ partial "assets/pagination.html" $page }}</div>
+        {{- end -}} 
+    {{ else }}
         {{ if gt $count $max }}
             <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
         {{ end }}

layouts/partials/assets/card.html

@@ -8,7 +8,8 @@
     "href"          Required address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white", "black", or "body". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -68,7 +69,7 @@
 {{- if .path }}
     {{- $page = site.GetPage .path }}
     {{- if not $page }}
-        {{- errorf "Cannot find page: %s" .path -}}
+        {{- errorf "partial [assets/card.html] - Cannot find page: %s" .path -}}
     {{- end }}
 {{- end }}
 
@@ -81,9 +82,9 @@
 {{- $color := "" -}}
 {{- with .color }}{{ $color = . }}{{ end -}}
 {{- if $color -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
-        {{- errorf "Invalid value for param 'color': %s" $color -}}
+        {{- errorf "partial [assets/card.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
 {{- end -}}
 
@@ -91,13 +92,13 @@
 {{- with .header }}{{ $header = . }}{{ end -}}
 {{- $supportedKeywords := slice "full" "publication" "tags" "none" -}}
 {{- if not (in $supportedKeywords $header) -}}
-    {{- errorf "Invalid value for param 'header': %s" $header -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'header': %s" $header -}}
 {{- end -}}
 
 {{- $footer := "none" -}}
 {{- with .footer }}{{ $footer = . }}{{ end -}}
 {{- if not (in $supportedKeywords $footer) -}}
-    {{- errorf "Invalid value for param 'footer': %s" $footer -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'footer': %s" $footer -}}
 {{- end -}}
 
 {{- with $page -}}
@@ -109,7 +110,7 @@
 {{- end -}}
 
 {{- if not $href -}}
-    {{- errorf "Missing value for param 'href'" -}}
+    {{- errorf "partial [assets/card.html] - Missing value for param 'href'" -}}
 {{- end -}}
 
 {{- $class := .class -}}
@@ -118,14 +119,14 @@
 {{- with .padding }}{{ $padding = . }}{{ end -}}
 {{- $supportedPaddings := slice "0" "1" "2" "3" "4" "5" "auto" -}}
 {{- if not (in $supportedPaddings $padding) -}}
-    {{- errorf "Invalid value for param 'padding': %s" $padding -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'padding': %s" $padding -}}
 {{- end -}}
 
 {{- $orientation := "stacked" -}}
 {{- with .orientation }}{{ $orientation = . }}{{ end -}}
 {{- $supportedOrientations := slice "stacked" "horizontal" "none" -}}
 {{- if not (in $supportedOrientations $orientation) -}}
-    {{- errorf "Invalid value for param 'orientation': %s" $orientation -}}
+    {{- errorf "partial [assets/card.html] - Invalid value for param 'orientation': %s" $orientation -}}
 {{- end -}}
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
@@ -134,7 +135,7 @@
         <div class="row g-0">
             <div class="col-4">
                 {{- if $thumbnail -}}
-                    {{- partial "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" "1x1" "outerClass" "h-100 card-img-wrap" "innerClass" "rounded-start card-img-h100" "title" $title) -}}
                 {{- else if $icon -}}
                     <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                         {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
@@ -143,11 +144,11 @@
                 </div>
             <div class="col-8">
                 <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>
+                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
                         {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
                     </div>
-                    <div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>
+                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
                 </div>
             </div>
         </div>
@@ -155,16 +156,16 @@
 {{- else -}}
     <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
         {{- if $thumbnail -}}
-            {{- partial "image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
+            {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" $title) -}}
         {{- else if $icon -}}
             <div class="pt-{{ $padding }} ps-{{ $padding }} pe-{{ $padding }}">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x text-secondary" $icon)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}} 
+            {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) -}}{{ end }}
             {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
-            {{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}
+            {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
         </div>
     </div>
 {{- end -}}

layouts/partials/assets/icon.html

@@ -1,6 +1,6 @@
 {{- $icon := .icon -}}
 {{- if not $icon -}}
-    {{- errorf "Expected value for param 'icon'" -}}
+    {{- errorf "partial [assets/icon.html] - Expected value for param 'icon'" -}}
 {{- end -}}
 
 {{- $icon_class := split $icon " " -}}
@@ -12,5 +12,5 @@
 {{- else if eq (index $icon_class 0) "fa" -}}
     <i class="fa-regular fa-{{ $attr }}"></i>
 {{- else -}}
-    {{- errorf "Unrecognized icon class: %s" $icon_class -}}
+    {{- errorf "partial [assets/icon.html] - Unrecognized icon class: %s" $icon_class -}}
 {{- end -}}

layouts/partials/assets/image.html

@@ -0,0 +1,187 @@
+<!-- 
+    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
+    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
+    section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
+    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
+    partial supports the following arguments:
+    "url":          Required relative url of the image, e.g. "img/example.jpg"
+    "mode":         Optional flag indicating if the image should support color modes.
+    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
+                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
+    "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.
+    "caption":      Optional figure caption.
+-->
+
+{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+{{- $ratio := .ratio -}}
+{{- $url := .url -}}
+{{- $mode := false -}}
+{{- with .mode -}}
+    {{ $mode = . -}}
+{{- end -}}
+{{- $outerClass := .outerClass -}}
+{{- $innerClass := .innerClass -}}
+{{- $title := .title -}}
+{{- $caption := .caption -}}
+{{- if ne (printf "%T" $mode) "bool" -}}
+    {{- errorf "partial [assets/image.html] - Invalid value for param 'mode'" -}}
+{{- end -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
+
+
+<!-- Generate a fallback image of type jpg -->
+{{- define "partials/image-default.html" -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $width := "1400" -}}
+    {{- $dim := "" -}}
+    {{- $fallback := "" -}}
+
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dim  = "1400x1050" }}
+        {{- 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 $ratio -}}
+            {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
+        {{- else -}}
+            {{- $fallback = ($img.Fit (printf "%s jpg" $dim)) -}}
+        {{- end -}}
+        {{- $clean := path.Ext $img.RelPermalink -}}
+        {{- $ext := path.Ext $img.RelPermalink -}}
+        {{- $fallback = $fallback | resources.Copy (replace $img.RelPermalink $clean (printf "-%s%s" $dim $ext)) -}}
+    {{- end -}}
+
+    {{- return $fallback -}}
+{{- end -}}
+
+
+<!-- Generate a image set of type webp -->
+{{- define "partials/image-scaled.html " -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $imgset := "" -}}
+
+    {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
+    {{- $dims := slice -}}
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+        {{- else if eq $ratio "1x1" -}}
+            {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
+        {{- else if eq $ratio "16x9" -}}
+            {{- $dims = slice "576x324"  "768x432" "992x558" "1200x675"  "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}
+            {{- $dims = slice "576x247"  "768x329" "992x425" "1200x514"  "1400x600" -}}
+        {{- else -}}
+            {{- range $width := $widths -}}
+                {{- $dims = $dims | append (printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
+            {{- end -}}
+        {{- end -}}
+
+        {{- $scaled := "" -}}
+        {{- range $index, $dim := $dims -}}
+            {{- $clean := path.Ext $img.RelPermalink -}}
+            {{- if $ratio -}}
+                {{- $scaled = $img.Fill (printf "%s webp" $dim) -}}
+            {{- else -}}
+                {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
+            {{- end -}}
+            {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
+            {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
+        {{- end -}}
+        {{- $imgset = strings.TrimPrefix ", " $imgset -}}
+    {{- end -}}
+
+    {{- return $imgset -}}
+{{- end -}}
+
+<!-- Define the img with optional caption -->
+{{- define "partials/image-definition.html" -}}
+    {{- $ratio := .ratio -}}
+    {{- $url := .url -}}
+    {{- $outerClass := .outerClass -}}
+    {{- $innerClass := .innerClass -}}
+    {{- $title := .title -}}
+    {{- $caption := .caption -}}
+    {{- $fallbackURL := "" -}}
+    {{- $imgset := "" -}}
+    {{- $mode := .mode -}}
+    {{- $modes := .modes -}}
+
+    {{- if hasSuffix $url "svg" -}}
+        {{- $fallbackURL = $url -}}
+    {{- else -}}
+        {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+        {{- if $img -}}
+            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
+            {{- $fallbackURL = $fallback.RelPermalink -}}
+            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- range $none := $modes -}}
+        {{- if ne $none $mode -}}
+            {{- $outerClass = printf "%s d-none-%s" (or $outerClass "") $none -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if $caption -}}
+        <figure {{ with $outerClass }}class="{{ . }}"{{ end }}>
+    {{ end }}
+        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }}{{ if not $caption }} {{ $outerClass }}{{ end }}">
+            <img class="img-fluid {{ $innerClass }}"
+                {{ with $imgset -}}
+                srcset="{{ . }}"
+                sizes="100vw"
+                {{- end }}
+                src="{{ $fallbackURL }}"
+                alt="{{ $title }}">
+        </div>
+    {{- if $caption -}}
+        <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
+    </figure>
+{{- end -}}
+{{- end -}}
+
+<!-- Initiate the regular or color-mode image -->
+{{- if $mode -}}
+    {{- $ext := path.Ext $url -}}
+    {{- $base := strings.TrimSuffix $ext $url -}}
+    {{- range $suffix := $modes -}}
+        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
+    {{- end -}}
+
+    {{- range $suffix := $modes -}}
+        {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
+        {{- partial "partials/image-definition.html" (dict 
+            "ratio" $ratio
+            "url" $image
+            "outerClass" $outerClass
+            "innerClass" $innerClass
+            "title" $title
+            "caption" $caption
+            "mode" $suffix
+            "modes" $modes)
+        -}}
+    {{- end -}}
+{{- else -}}
+    {{- partial "partials/image-definition.html" (dict 
+        "ratio" $ratio
+        "url" $url
+        "outerClass" $outerClass
+        "innerClass" $innerClass
+        "title" $title
+        "caption" $caption)
+    -}}
+{{- end -}}

layouts/partials/assets/list.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a list items with a thumbnail alternating between left and right alignment. The partial supports the
+    following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "title"         Optional title of the card group.
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+<!-- Inline partial to render the list item's content -->
+{{- define "partials/list-content.html" -}}
+    {{- $title := .title -}}
+    {{- $content := .content -}}
+    
+    <h2>{{ $title }}</h2>
+    <div class="fs-md-5 fs-6">{{ $content }}</div>
+{{- end -}}
+
+<!-- Inline partial to render the list item's thumbnail -->
+{{- define "partials/list-img.html" -}}
+    {{- $thumbnail := .thumbnail -}}
+    {{- $style := .style -}}
+    {{- $mode := .mode -}}
+    {{- partial "assets/image.html" (dict "url" $thumbnail "outerClass" $style "mode" $mode) -}}
+{{- end -}}
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "partial [assets/list.html] - Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
+{{ $list := .list }}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+{{- errorf "partial [assets/list.html] - Invalid value for param 'list'" -}}
+{{- end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $vertical := false }}
+{{ $type := "pills" }}
+
+<div class="d-none d-md-block p-0">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container ratio-section d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+
+            <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
+                <div class="col-6{{ if $odd }} order-last{{ end }}">
+                    {{- $style := "reveal fade-bottom" -}}
+                    {{ if $item.Params.tilted }}
+                        {{- $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" $item.Params.Thumbnail "style" $style "mode" $item.Params.colormode) }}
+                </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)) }}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>
+
+<div class="d-md-none">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+            <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" $item.Params.Thumbnail "mode" $item.Params.colormode) }}
+                </div>
+                <div class="col-12 p-3">
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" (or $item.Description $item.Content)) }}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>

layouts/partials/assets/nav.html

@@ -0,0 +1,113 @@
+<!-- 
+    Displays a tab group of multiple items. Each provided page resource is rendered as a tab pane. The shortcode
+    supports the following arguments:
+    "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".
+    "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).
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "partial [assets/nav.html] - Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{- $id := "0" -}}
+{{- with .id -}}
+    {{ $id = . }}
+{{ end }}
+
+{{- $supportedTypes := slice "page.Pages" "resource.Resources" -}}
+{{ $list := .list }}
+{{- if not (in $supportedTypes (printf "%T" $list)) -}}
+    {{- errorf "partial [assets/nav.html] - Invalid value for param 'list'" -}}
+{{- end -}}
+
+{{ $pane := "none" }}
+{{ with .pane }}
+    {{- $supportedPanes := slice "none" "persona" -}}
+    {{- $pane = . }}
+    {{- if not (in $supportedPanes $pane) -}}
+        {{- errorf "partial [assets/nav.html] - Invalid value for param 'pane'" -}}
+    {{- end -}}
+{{ end }}
+
+{{ $supportedWidths := slice 50 100 -}}
+{{ $widthParam := 100 -}}
+{{ $width := 100 }}
+{{ with .width }}{{ $widthParam = . }}{{ end -}}
+{{ if in $supportedWidths $widthParam -}}
+    {{ $width = int $widthParam }}
+{{ else -}}
+    {{ errorf "partial [assets/nav.html] - Invalid value for param 'width': %s" $widthParam -}}
+{{ end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $verticalParam := "false" -}}
+{{ $vertical := false }}
+{{ with .vertical }}{{ $verticalParam = . }}{{ end -}}
+{{ if in $supportedFlags $verticalParam -}}
+    {{ if eq $verticalParam "true" }}{{ $vertical = true }}{{ else }}{{ $vertical = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "partial [assets/nav.html] - Invalid value for param 'vertical': %s" $verticalParam -}}
+{{ end -}}
+
+{{ $type := "pills" }}
+{{ with .type }}
+    {{ $type = . -}}
+    {{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+    {{ if $type }}
+        {{ if not (in $supportedNavTypes $type) -}}
+            {{ errorf "partial [assets/nav.html] - Invalid value for param 'type': %s" $type -}}
+        {{ end -}}
+    {{ end -}}
+{{ end -}}
+
+{{ with $title }}<p class="display-4 pt-5{{ if and page.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ 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">
+    {{ if $vertical }}<div class="d-flex align-items-start">{{ 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 }}" 
+                    type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+                {{ $item.Title }}
+            </button>
+        {{ end -}}
+    </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}}
+            <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" (or $item.Description $item.Content)
+                    "thumbnail" $item.Params.Thumbnail
+                ) -}}
+                {{- else -}}
+                    {{- (or $item.Description $item.Content) -}}
+                {{- end -}}
+            </div>    
+        {{ end }}
+    </div>
+    {{ if $vertical }}</div>{{ end }}
+</div>

layouts/partials/assets/navbar.html

@@ -5,7 +5,8 @@
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
+                    default color is none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
@@ -54,21 +55,21 @@
 
 {{- $page := .page -}}
 {{- if not $page -}}
-    {{- errorf "Missing value for param 'page'" -}}
+    {{- errorf "partial [assets/navbar.html] - Missing value for param 'page'" -}}
 {{- end -}}
 
 {{- $menuName := "main" }}
 {{- with .menus }}{{ $menuName = .}}{{ end -}}
 {{- $menus := index site.Menus $menuName -}}
 {{- if or (ne (printf "%T" $menus) "navigation.Menu") (ne (index $menus 0).Menu $menuName) -}}
-    {{- errorf "Invalid value for param 'menus': %s" $menuName -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'menus': %s" $menuName -}}
 {{- end -}}
 
 {{- $size := "md" -}}
 {{- with .size }}{{ $size = . }}{{ end -}}
 {{- $supportedSizes := slice "xs" "sm" "md" "lg" "xl" -}}
 {{- if not (in $supportedSizes $size) -}}
-    {{- errorf "Invalid value for param 'size': %s" $size -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'size': %s" $size -}}
 {{- end -}}
 
 {{- $fixedParam := "false" -}}
@@ -77,15 +78,15 @@
 {{- if in $supportedFlags $fixedParam -}}
     {{- if eq $fixedParam "true" }}{{ $fixed = true }}{{ else }}{{ $fixed = false }}{{ end -}}
 {{- else -}}
-    {{- errorf "Invalid value for param 'fixed': %s" $fixedParam -}}
+    {{- errorf "partial [assets/navbar.html] - Invalid value for param 'fixed': %s" $fixedParam -}}
 {{- end -}}
 
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
-        {{- errorf "Invalid value for param 'color': %s" $color -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'color': %s" $color -}}
     {{- end -}}
 {{- end -}}
 
@@ -95,7 +96,7 @@
     {{- if in $supportedFlags $searchParam -}}
         {{- if eq $searchParam "true" }}{{ $search = true }}{{ else }}{{ $search = false }}{{ end -}}
     {{- else -}}
-        {{- errorf "Invalid value for param 'search': %s" $searchParam -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'search': %s" $searchParam -}}
     {{- end -}}
 {{- end -}}
 
@@ -105,7 +106,7 @@
     {{- if in $supportedFlags $darkModeParam -}}
         {{- if eq $darkModeParam "true" }}{{ $enableDarkMode = site.Params.main.enableDarkMode }}{{ else }}{{ $enableDarkMode = false }}{{ end -}}
     {{- else -}}
-        {{- errorf "Invalid value for param 'darkMode': %s" $darkModeParam -}}
+        {{- errorf "partial [assets/navbar.html] - Invalid value for param 'darkMode': %s" $darkModeParam -}}
     {{- end -}}
 {{- end -}}
 
@@ -124,7 +125,7 @@
 {{- $post := .Post -}}
 
 <nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
-	<div class="container-fluid p-0">
+	<div class="container-xxl p-0">
         <!-- Insert sidebar toggler when applicable -->
         <div class="d-flex">
             {{- if $page.Scratch.Get "sidebar" -}}

layouts/partials/assets/persona.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a custom persona card. Either specify a valid path, or set the arguments title, href, content, and
+    thumbnail individually. The latter arguments override any page attributes.
+    
+    The shortcode supports the following arguments:
+    "path"          Optional path of the page, override with other parameters.
+    "title"         Required title of the card.
+    "href"          Optional address for the button or hyperlink.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
+    "content"       Optional content of the card.
+    "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+-->
+
+<!-- Inline partial to render the card's body -->
+{{- define "partials/persona-body.html" -}}
+    {{- $title := .title -}}
+    {{- $href := .href -}}
+    {{- $color := .color -}}
+    {{- $content := .content -}}
+    
+    <h3>{{ $title }}</h3>
+    {{ with $content }}<p>{{ . }}</p>{{ end -}}
+{{- end -}}
+
+{{- $page := "" }}
+{{- if .path }}
+    {{- $page = site.GetPage .path }}
+    {{- if not $page }}
+        {{- errorf "partial [assets/persona.html] - Cannot find page: %s" .path -}}
+    {{- end }}
+{{- end }}
+
+{{- $title := .title -}}
+{{- $href := .href -}}
+{{- $content := .content -}}
+{{- $thumbnail := .thumbnail -}}
+
+{{- $color := "" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "partial [assets/persona.html] - Invalid value for param 'color': %s" $color -}}
+    {{- end -}}
+{{- end -}}
+
+{{- with $page -}}
+    {{- if not $title }}{{ $title = .Title }}{{ end -}}
+    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $content }}{{ $content = .Content }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+{{- end -}}
+
+{{- $class := .class -}}
+
+<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") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-10 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 fs-md-5 fs-6 pe-5 pb-3">
+            <div class="row">
+                <div class="col-3"></div>
+                <div class="col-9">
+                    {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="d-md-none">
+    <div class="persona position-relative row mt-5 align-middle p-3 ptw-5">
+        <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") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-12 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 ptw-lg-5 ptw-3 ptw-sm-4 fs-md-5 fs-6 pb-3">
+            <div class="p-5">
+                {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+            </div>
+        </div>
+    </div>
+</div>

layouts/partials/assets/section-list.html

@@ -1,9 +1,9 @@
 {{- $page := .page }}
 {{- $section := .section }}
-{{- if not $section }}{{ errorf "Missing value for param 'section'" }}{{ end -}}
+{{- if not $section }}{{ errorf "partial [assets/section-list.html] - Missing value for param 'section'" }}{{ end -}}
 {{- $home := .home }}
 {{ if ne (printf "%T" $home) "bool" }}
-    {{ errorf "Invalid value for param 'home'"}}
+    {{ errorf "partial [assets/section-list.html] - Invalid value for param 'home'"}}
 {{ end }}
 {{- $title := .title -}}
 {{- $moreTitle := .moreTitle -}}
@@ -11,7 +11,7 @@
 
 {{- $paginate := true -}}
 {{- $sort := "date" -}}
-{{- $reverse := true -}}
+{{- $order := "desc" -}}
 {{- $separator := false -}}
 {{- $orientation := "stacked" -}}
 {{- $cols := 3 -}}
@@ -22,11 +22,16 @@
 {{- $style := "" -}}
 {{- $homepage := 3 -}}
 {{- $background := "" -}}
+{{- $layout := "card" -}}
+{{- $pane := "none" -}}
+{{- $type := "pills" -}}
+{{- $vertical := "false" -}}
+{{- $width := 100 -}}
 
-{{- with (index site.Params $section) -}}
-    {{- with index . "title" }}{{ $title = . }}{{ end -}}
+{{- with (index site.Params.sections $section) -}}
+    {{- with index . "title" }}{{ $title = or $.title . }}{{ end -}}
     {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
-    {{- if (index . "reverse") }}{{ $reverse = true }}{{ else }}{{ $reverse = false }}{{ end -}}
+    {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
     {{- if (index . "separator") }}{{ $separator = true }}{{ else }}{{ $separator = false }}{{ end -}}
     {{- with index . "orientation" }}{{ $orientation = . }}{{ end -}}
     {{- with index . "cols" }}{{ $cols = . }}{{ end -}}
@@ -37,53 +42,80 @@
     {{- with index . "style" }}{{ $style = . }}{{ end -}}
     {{- with index . "homepage" }}{{ $homepage = . }}{{ end -}}
     {{- with index . "background" }}{{ $background = . }}{{ end -}}
+    {{- with index . "layout" }}{{ $layout = . }}{{ end -}}
+    {{- with index . "pane" }}{{ $pane = . }}{{ end -}}
+    {{- with index . "type" }}{{ $type = . }}{{ end -}}
+    {{- with index . "vertical" }}{{ $vertical = . }}{{ end -}}
+    {{- with index . "width" }}{{ $width = . }}{{ end -}}
 {{- end -}}
 
-{{- $list := where site.RegularPages "Type" "in" $section -}}
-{{- $max := (len $list) -}}
-{{- if $home -}}
+{{ $list := where site.RegularPages "Type" "in" $section }}
+{{ $max := (len $list) -}}
+{{ if eq $max 0 }}
+    {{- $bundle := site.GetPage $section -}}
+    {{- $list = $bundle.Resources.Match "*" -}}
+    {{- $max = len $list -}}
+{{ end }}
+{{- $list = sort $list (printf "Params.%s" $sort) $order -}}
+
+{{- $supportedLayouts := slice "card" "list" "nav" -}}
+{{- if not (in $supportedLayouts $layout) -}}
+    {{- errorf "partial [assets/section-list.html] - Invalid value for param 'layout': %s" $layout -}}
+{{- end -}}
+
+{{ if gt $max 0 }}
+    {{- if $home -}}
         {{- $paginate = false -}}
         {{- $max = int (math.Min $homepage $max) -}}
-{{ end -}}
+    {{ end -}}
+    {{- $cols = int (math.Min $cols $max) -}}
 
-{{- $cols = int (math.Min $cols $max) -}}
-
-{{- if eq $sort "weight" -}}
-    {{- $list = $list.ByWeight -}}
-{{- else if eq $sort "publication" -}}
-    {{- $list = $list.ByPublishDate -}}
-{{- else if eq $sort "expiration" -}}
-    {{- $list = $list.ByExpiryDate -}}
-{{- else if eq $sort "lastmod" -}}
-    {{- $list = $list.ByLastmod -}}
-{{- else if eq $sort "length" -}}
-    {{- $list = $list.ByLength -}}
-{{- else if eq $sort "title" -}}
-    {{- $list = $list.ByTitle -}}
-{{- else if eq $sort "linktitle" -}}
-    {{- $list = $list.ByLinkTitle -}}
-{{- else if ne $sort "date" -}}
-    {{- $list = $list.ByParam $sort -}}        
-{{- end -}}
-{{- if $reverse -}}{{- $list = $list.Reverse -}}{{ end -}}
-
-<div class="container-fluid flex-fill p-0{{ with $background }} bg-{{ . }}{{ end }}">
-    {{- partial "assets/card-group.html" (dict 
+    {{- $params := (dict 
         "page" $page
         "list" $list
+        "title" $title
+        "class" $style
+        "color" $color
+        )
+    -}}
+    {{- $partial := "" -}}
+
+    <div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
+        <div class="container-xxl flex-fill p-0">
+            {{ if eq $layout "card" }}
+                {{- $partial = "assets/card-group.html" -}}
+                {{- $params = merge $params (dict 
                     "max" $max
                     "cols" $cols
-        "title" $title
                     "href" $sectionURL
                     "hrefTitle" $moreTitle
                     "separator" $separator
                     "paginate" $paginate
-        "class" $style
                     "orientation" $orientation
-        "color" $color
                     "padding" $padding
                     "header" $header
                     "footer" $footer
                     ) 
                 -}}
-</div>
+            {{ else if eq $layout "nav" }}
+                {{- $partial = "assets/nav.html" -}}
+                {{- $params = merge $params (dict 
+                    "layout" $layout
+                    "id" $section
+                    "pane" $pane
+                    "type" $type
+                    "vertical" $vertical
+                    "width" $width
+                    ) 
+                -}}
+            {{- else -}}
+                {{- $partial = "assets/list.html" -}}
+                {{- $params = merge $params (dict 
+                    "layout" $layout
+                    ) 
+                -}}
+            {{- end -}}
+            {{- partial $partial $params -}}
+        </div>
+    </div>
+{{- end -}}

layouts/partials/assets/toc-dropdown.html

@@ -0,0 +1,23 @@
+{{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
+{{ if (gt $items 1) -}}
+    <div class="d-grid gap-2 mx-auto">
+        {{ partial "assets/button.html" (dict 
+            "title" (T "toc") 
+            "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 text-body-secondary p-2">
+                <small>{{ .TableOfContents }}</small>
+            </div>
+        </div>
+    </p>
+{{ end -}}

layouts/partials/assets/toc.html

@@ -1,6 +1,6 @@
 {{ $items := len (findRE "<li.*?>(.|\n)*?</li>" .TableOfContents) -}}
 {{ if (gt $items 1) -}}
-    <div class="toc mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+    <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>

layouts/partials/button.html

@@ -1,105 +0,0 @@
-<!-- 
-    Displays a button. The shortcode supports the following arguments:
-    "title"         Required title of the button.
-    "href"          Optional address for the button or hyperlink.
-    "id"            Optional id of the button, to be used in the DOM.
-    "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
-    "size"          Optional size of the button, either "sm", "md" (default), or "lg".
-    "color"         Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
-    "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
-    "badge"         Optional positioned badge to display on top of the button.
-    "aria-label"    Optional assistive label for the badge.
-    "tooltip"       Optional text to display in a tooltip. Cannot be used together with collapse. Ignored for active/
-                    inactive buttons.
-    "collapse"      Optional panel to collapse. Cannot be used together with tooltip. Ignored for active/inactive buttons.
-    "type"          Optional type of the element, either "link" or "button" (default).
-    "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right".
--->
-
-{{ $title := trim .title " \r\n" -}}
-{{ if not $title -}}
-    {{ errorf "Missing element title" -}}
-{{ end -}}
-
-{{ $id := .id }}
-
-{{ $state := "enabled" -}}
-{{ with .state }}{{ $state = . }}{{ end -}}
-{{ $supportedStates := slice "enabled" "disabled" "active" "inactive" -}}
-{{ if not (in $supportedStates $state) -}}
-    {{ errorf "Invalid value for param 'state': %s" $state -}}
-{{ end -}}
-
-{{ $size := "md" -}}
-{{ with .size }}{{ $size = . }}{{ end -}}
-{{ $supportedSizes := slice "sm" "md" "lg" -}}
-{{ if not (in $supportedSizes $size) -}}
-    {{ errorf "Invalid value for param 'size': %s" $size -}}
-{{ end -}}
-
-{{ $color := "primary" -}}
-{{ with .color }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
-{{ if not (in $supportedColors $color) -}}
-    {{ errorf "Invalid value for param 'color': %s" $color -}}
-{{ end -}}
-
-{{ $outline := false -}}
-{{ with .outline }}{{ $outline = . }}{{ end -}}
-
-{{ $badge := "" -}}
-{{ with .badge }}{{ $badge = . }}{{ end -}}
-
-{{ $label := "" -}}
-{{ with .label }}{{ $label = . }}{{ end -}}
-
-{{ $tooltip := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .tooltip }}{{ $tooltip = . }}{{ end -}}
-{{ end -}}
-
-{{ $href := .href -}}
-
-{{ $collapse := "" -}}
-{{ if not (strings.HasSuffix $state "active") -}}
-    {{ with .collapse }}{{ $collapse = . }}{{ $href = printf "#%s" . }}{{ end -}}
-{{ end -}}
-
-{{ if $tooltip -}}
-    {{ if $collapse -}}
-        {{ errorf "Cannot use tooltip and collapse at the same time" -}}
-    {{ end -}}
-{{ end -}}
-
-{{ $type := "button" -}}
-{{ with .type }}{{ $type = . }}{{ end -}}
-{{ $supportedTypes := slice "button" "link" -}}
-{{ if not (in $supportedTypes $type) -}}
-    {{ errorf "Invalid value for param 'type': %s" $type -}}
-{{ end -}}
-
-{{ $placement := "top" -}}
-{{ with .placement }}{{ $placement = . }}{{ end -}}
-{{ $supportedPlacements := slice "top" "bottom" "left" "right" -}}
-{{ if not (in $supportedPlacements $placement) -}}
-    {{ errorf "Invalid value for param 'placement': %s" $placement -}}
-{{ end -}}
-
-<a {{ if ne $state "disabled" }}{{ with $href }}href="{{ . }}"{{ end }}{{ end }}
-    {{ with $id }}id="{{ . }}"{{ end }}
-    {{ if eq $type "button" }}class="btn btn-{{ if $outline }}outline-{{ end }}{{ $color }} {{ if ne $size "md"}}btn-{{ $size }}{{ end }} position-relative {{ if in (slice "disabled" "active") $state }}{{ $state }}{{ end }}" role="button" {{ if eq $state "disabled" }}aria-disabled="true"{{ end }}
-    {{ else }}class="link-{{ $color }} position-relative"{{ end }}
-    {{ with $tooltip }}data-bs-toggle="tooltip" data-bs-title="{{ . }}" data-bs-placement="{{ $placement }}"{{ end }}
-    {{ with $collapse }}data-bs-toggle="collapse" aria-expanded="false" aria-controls="{{ . }}"{{ end }}
-    {{ if eq $state "active" }}data-bs-toggle="button" aria-pressed="true"{{ end }}
-    {{ if eq $state "inactive" }}data-bs-toggle="button" aria-pressed="false"{{ end }}
-    >
-    {{ $title -}}
-    {{ with $badge }}
-        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
-            {{ . }}
-            {{ with $label }}<span class="visually-hidden">{{ . }}</span>{{ end }}
-        </span>
-    {{ end }}  
-</a>

layouts/partials/footer/footer.html

@@ -1,7 +1,9 @@
 <footer class="container-fluid text-center p-3">
+    <div class="container-xxl text-center">
         <small class="text-secondary">
             {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
             {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
             {{ .Site.Params.footer.license | safeHTML }}
         </small>
+    </div>
 </footer>

layouts/partials/footer/scripts.html

@@ -11,6 +11,13 @@
     {{ $bundle := $files | resources.Concat $filename -}}
     {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
 
+    {{- if (not site.IsServer) -}}
+        {{- $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>
+        {{- end }}
+    {{- end -}}
+    
     {{- if not hugo.IsProduction -}}
         <script src="{{ $js.RelPermalink }}"></script>
     {{ else -}}

layouts/partials/home/featured.html

@@ -1,8 +1,9 @@
-<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} p-4">
+<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
+    <div class="container-xxl p-4">
         <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-6 col-md-4 text-center text-sm-start">
-            <p class="fs-1 fw-bold">{{ .Title }}</p>
+                <p class="display-4">{{ .Title }}</p>
                 <p>{{ .Content }}</p>
                 {{ if .Site.Params.feature.link }}
                     <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
@@ -10,9 +11,10 @@
             </div>
             <div class="col col-sm-6 col-md-4">
                 {{ if .Site.Params.home.featurePhoto }}
-                {{- partial "image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
+                    {{- partial "assets/image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
                 {{ end }}
             </div>
             <div class="col col-md-2 d-none d-md-block"></div>
         </div>
+    </div>
 </div>

layouts/partials/image.html

@@ -1,117 +0,0 @@
-<!-- 
-    Render a local or remote image with responsive image sizing. Images are resized using default media breakpoints
-    and are converted to webp format. The image is processed using the quality setting specified in the [imaging]
-    section of the main config file (defaults to 75). A fallback image is provided for older browsers. The image is
-    wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
-    partial supports the following arguments:
-    "url":          Required relative url of the image, e.g. "img/example.jpg"
-    "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
-                    resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
-    "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.
-    "caption":      Optional figure caption.
--->
-
-
-{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" }}
-{{ $ratio := .ratio -}}
-{{ $url := .url -}}
-{{ $outerClass := .outerClass -}}
-{{ $innerClass := .innerClass -}}
-{{ $title := .title -}}
-{{ $caption := .caption -}}
-{{ $inner := .inner -}}
-
-{{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
-{{ with $img -}}
-    {{ $smDim := "" -}}
-    {{ $mdDim := "" -}}
-    {{ $lgDim := "" -}}
-    {{ $xlDim := "" -}}
-    {{ $xxlDim := "" -}}
-    {{ if eq $ratio "4x3" -}}
-        {{ $smDim = "576x432" -}}
-        {{ $mdDim = "768x576" -}}
-        {{ $lgDim = "992x744" -}}
-        {{ $xlDim = "1200x900" -}}
-        {{ $xxlDim = "1400x1050" -}}
-    {{ else if eq $ratio "1x1" -}}
-        {{ $smDim = "576x576" -}}
-        {{ $mdDim = "768x768" -}}
-        {{ $lgDim = "992x992" -}}
-        {{ $xlDim = "1200x1200" -}}
-        {{ $xxlDim = "1400x1400" -}}
-    {{ else if eq $ratio "16x9" -}}
-        {{ $smDim = "576x324" -}}
-        {{ $mdDim = "768x432" -}}
-        {{ $lgDim = "992x558" -}}
-        {{ $xlDim = "1200x675" -}}
-        {{ $xxlDim = "1400x788" -}}
-    {{ else if eq $ratio "21x9" -}}
-        {{ $smDim = "576x247" -}}
-        {{ $mdDim = "768x329" -}}
-        {{ $lgDim = "992x425" -}}
-        {{ $xlDim = "1200x514" -}}
-        {{ $xxlDim = "1400x600" -}}
-    {{ else }}
-        {{ $smDim = printf "576x%d" (int (math.Round (mul (div 576.0 $img.Width) $img.Height))) -}}
-        {{ $mdDim = printf "768x%d" (int (math.Round (mul (div 768.0 $img.Width) $img.Height))) -}}
-        {{ $lgDim = printf "992x%d" (int (math.Round (mul (div 992.0 $img.Width) $img.Height))) -}}
-        {{ $xlDim = printf "1200x%d" (int (math.Round (mul (div 1200.0 $img.Width) $img.Height))) -}}
-        {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
-    {{ end -}}
-
-    {{- $sm := "" -}}
-    {{ $md := "" -}}
-    {{ $lg := "" -}}
-    {{ $xl := "" -}}
-    {{ $xxl := "" -}}
-    {{ $fallback := "" -}}
-    {{ if $ratio }}
-        {{- $sm = ($img.Fill (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fill (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fill (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fill (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fill (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fill (printf "%s jpg" $xxlDim)) -}}
-    {{ else }}
-        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
-    {{ end}}
-
-    {{- with $caption -}}
-        <figure class="figure">
-            <img class="figure-img img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-                sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
-                alt="{{ $title }}">
-            <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
-            {{ $inner }}
-        </figure>
-    {{- else -}}
-        <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }} {{ $outerClass }}">
-            <img class="img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-                sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
-                alt="{{ $title }}">
-            {{ $inner }}
-        </div>
-    {{- end -}}
-{{- end -}}

layouts/shortcodes/breadcrumb.html

@@ -15,5 +15,5 @@
 {{- end -}}
 
 {{- if not $error -}}
-    {{- partial "breadcrumb.html" $page -}} 
+    {{- partial "assets/breadcrumb.html" $page -}} 
 {{- end -}}

layouts/shortcodes/button.html

@@ -6,7 +6,7 @@
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
     "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
     "badge"         Optional positioned badge to display on top of the button.
     "aria-label"    Optional label for the badge.
@@ -78,5 +78,19 @@
 {{ end -}}
 
 {{ if not $error }}
-    {{- partial "button.html" (dict "type" $type "title" $title "size" $size "color" $color "outline" $outline "badge" $badge "label" $label "tooltip" $tooltip "collapse" $collapse "href" $href "id" $id "state" $state "placement" $placement) -}} 
+    {{- partial "assets/button.html" (dict 
+        "type" $type
+        "title" $title
+        "size" $size
+        "color" $color
+        "outline" $outline
+        "badge" $badge
+        "label" $label
+        "tooltip" $tooltip
+        "collapse" $collapse
+        "href" $href
+        "id" $id
+        "state" $state
+        "placement" $placement)
+    -}} 
 {{ end }}

layouts/shortcodes/card.html

@@ -3,7 +3,8 @@
     "path"          Required path of the page.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". By default, no
+                    color is specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -26,7 +27,7 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
 {{ if $color }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" .Position -}}
         {{ $error = true -}}

layouts/shortcodes/example.html

@@ -33,11 +33,6 @@
     {{- end -}}
     <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
-        <!-- <div class="d-flex ms-auto">
-            <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
-                <i class="fa-regular fa-clipboard"></i>
-            </button>
-        </div> -->
     </div>
     <div class="rounded-bottom syntax-highlight">
         {{- if eq $show_markup true -}}

layouts/shortcodes/image.html

@@ -9,6 +9,7 @@
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
+    "mode":         Optional flag indicating if the image should support color modes.
 -->
 
 {{- if isset .Params "src" -}}
@@ -24,8 +25,24 @@
     {{- $class := .Get "class" -}}
     {{ $title := .Get "title" -}}
     {{ $caption := .Get "caption" -}}
+    {{ $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 -}}
+    {{ else -}}
+        {{ errorf "Invalid value for param 'mode': %s" $modeParam -}}
+    {{ end -}}
     
-    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
+    {{- partial "assets/image.html" (dict 
+        "url" $url
+        "ratio" $ratio
+        "innerClass" $class
+        "title" $title
+        "caption" $caption
+        "mode" $mode)
+    -}} 
 {{ else -}}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
 {{ end -}}

layouts/shortcodes/img.html

@@ -18,7 +18,7 @@
 
 {{- if $src -}}
     <div class="carousel-item {{ if eq .Ordinal 0 }}active{{ end }}">
-        {{ partial "image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
+        {{ partial "assets/image.html" (dict "url" $src "ratio" $ratio "innerClass" "d-block w-100") }}
         <div class="carousel-caption gradient"></div>
         {{ with $caption }}
             <div class="carousel-caption d-none d-md-block">

layouts/shortcodes/nav-item.html

@@ -6,37 +6,49 @@
 -->
 
 {{- $id := .Ordinal -}}
-{{ $header := .Get "header" -}}
-{{ if not $header -}}
-    {{ if .Parent }}
-        {{ errorf "Missing value for param 'header': %s" .Parent.Position -}}
-    {{ else }}
-    {{ errorf "Missing value for param 'header': %s" .Position -}}
-    {{ end }}
-{{ end -}}
-
-{{ $class := .Get "class" -}}
-{{ $body := trim .Inner " \r\n" -}}
-{{ if not $body -}}
-    {{ if .Parent }}
-        {{ errorf "Missing inner element text: %s" .Parent.Position -}}
-    {{ else }}
-        {{ errorf "Missing inner element text: %s" .Position -}}
-    {{ end }}
-{{ end -}}
-
-{{ $supportedFlags := slice "true" "false" -}}
-{{ $showParam := "false" -}}
-{{ $show := false -}}
-{{ with .Get "show" }}{{ $showParam = . }}{{ end -}}
-{{ if in $supportedFlags $showParam -}}
-    {{ if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
-{{ else -}}
-    {{ errorf "Invalid value for param 'show': %s" $showParam -}}
-{{ end -}}
-
 {{- $parent := printf "nav-%d" .Parent.Ordinal -}}
+{{- with (.Parent.Get "id") -}}
+    {{- $parent = . -}}
+{{- end -}}
 
-<div class="tab-pane{{ if $show }} active{{ end }}" id="{{ $parent }}-{{ $id }}" role="tabpanel" aria-labelledby="{{ $parent }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }}>
+{{- $fade := false -}}
+{{- if eq (.Parent.Get "fade") "true" -}}
+    {{- $fade = true -}}
+{{- end -}}
+
+{{- $header := .Get "header" -}}
+{{- if not $header -}}
+    {{- if .Parent -}}
+        {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
+    {{- else -}}
+        {{- errorf "Missing value for param 'header': %s" .Position -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+{{- $body := trim .Inner " \r\n" -}}
+
+{{- $supportedFlags := slice "true" "false" -}}
+{{- $showParam := "false" -}}
+{{- $show := false -}}
+{{- with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{- if in $supportedFlags $showParam -}}
+    {{- if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'show': %s" $showParam -}}
+{{- end -}}
+
+{{- $disabledParam := "false" -}}
+{{- $disabled := false -}}
+{{- with .Get "disabled" }}{{ $disabledParam = . }}{{ end -}}
+{{- if in $supportedFlags $disabledParam -}}
+    {{- if eq $disabledParam "true" }}{{ $disabled = true }}{{ else }}{{ $disabled = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'disabled': %s" $disabledParam -}}
+{{- end -}}
+
+<div class="tab-pane{{ if $show }} active {{ if $fade}}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}" id="{{ $parent }}-{{ $id }}" 
+    role="tabpanel" aria-labelledby="{{ $parent }}-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 | markdownify | safeHTML }}
 </div>

layouts/shortcodes/nav.html

@@ -3,12 +3,15 @@
     following arguments:
     "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
     "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”.
 -->
 
-<!-- TODO: add fade support -->
+{{- $id := printf "nav-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
 
-{{- $id := .Ordinal -}}
 {{- $class := .Get "class" -}}
 {{ $type := .Get "type" -}}
 {{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
@@ -28,6 +31,12 @@
     {{ errorf "Invalid value for param 'vertical': %s" $verticalParam -}}
 {{- end -}}
 
+{{ $fadeParam := "false" -}}
+{{ with .Get "fade" }}{{ $fadeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $fadeParam) -}}
+    {{ errorf "Invalid value for param 'fade': %s" $fadeParam -}}
+{{- end -}}
+
 {{- if and (eq $type "tabs") $vertical -}}
     {{- errorf "Tabs do not support vertical layout" -}}
 {{- end -}}
@@ -40,18 +49,29 @@
     {{- $showID = int (partial "utilities/GetVal.html" (index $showVal 0)) -}}
 {{- end -}}
 
+{{ $disabled := slice -}}
+{{- $disabledVal := findRE "data-disabled-id=\"(.+?)\"" $inner -}}
+{{- range $item := $disabledVal -}}
+    {{- $disabled = $disabled | append (int (partial "utilities/GetVal.html" $item)) -}}
+{{- end -}}
+
+{{- $hasContent := gt (len (findRE "data-has-content=\"true\"" $inner)) 0 -}}
+
 {{ if $vertical }}<div class="d-flex align-items-start">{{ 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 }}>
+<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 }}>
     {{- range $index, $item := $items -}}
         {{- $header := partial "utilities/GetVal.html" $item -}}
-        <button class="nav-link text-nowrap{{ if eq $index $showID }} 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 }}">
+        {{- $itemDisabled := in $disabled $index -}}
+        <button class="nav-link text-nowrap{{ if eq $index $showID }} active{{ end }} {{ if $itemDisabled}} disabled {{end }}" id="{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}-{{ $index }}" 
+                type="button" role="tab" aria-controls="{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
             {{ $header }}
         </button>
     {{ end -}}
 </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 $hasContent -}}
+    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
         {{- $inner -}}
-</div>
+    </div>
+{{- end -}}
 {{ if $vertical }}</div>{{ end }}

layouts/shortcodes/navbar.html

@@ -7,7 +7,8 @@
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "body-tertiary". The
+                    default color is none.
     "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
@@ -15,7 +16,7 @@
 -->
 
 {{ $error := false }}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body" "body-tertiary" -}}
 {{ $supportedFlags := slice "true" "false" -}}
 
 {{ $id := add .Ordinal 1 }}

layouts/shortcodes/persona.html

@@ -0,0 +1,33 @@
+<!-- 
+    Displays a custom persona card. The shortcode supports the following arguments:
+    "path"          Required path of the page.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white",  "black", "body", or "body-tertiary". By default, no
+                    color is specified.
+-->
+
+{{- $error := false -}}
+
+{{- $path := .Get "path" -}}
+{{- $page := .Site.GetPage $path -}}
+{{- if not $page -}}
+    {{- errorf "Invalid or missing value for param 'path': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+
+{{- $color := "" -}}
+{{- with .Get "color" }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body-tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" .Position -}}
+        {{- $error = true -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not $error -}}
+    {{- partial "assets/persona.html" (dict "path" $path "class" $class "color" $color) -}}
+{{- end -}}

layouts/shortcodes/spinner.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a spinner. The shortcode supports the following arguments:
     "color":        Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black".
+                    "warning", "info", "light", "dark", "white", or "black".
     "grow"          Optional flag to indicate the spinner is growing instead of rotating, defaults to false.
     "class":        Optional class attribute of the spinner wrapping element, e.g. “text-center”.
 -->

layouts/shortcodes/tooltip.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a tooltip for a link. The shortcode supports the following arguments:
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
@@ -41,5 +41,5 @@
 {{ end -}}
 
 {{ if not $error }}
-    {{- partial "button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}} 
+    <div class="d-inline-flex">{{- partial "assets/button.html" (dict "type" $type "title" $title "color" $color "tooltip" $tooltip "href" $href "placement" $placement) -}}</div>
 {{ end }}

layouts/tags/list.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
-    <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
+    <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">
-                <h1>{{ .Name | humanize }}</h1>
+                <p class="display-4 mt-5">{{ .Name | humanize }}</p>
 
                 {{ if eq .Kind "taxonomy" }}
                     <div class="row mt-5"></div>

netlify.toml

@@ -25,14 +25,15 @@
         Content-Security-Policy = """\
             default-src 'self'; \
             script-src 'self' \
-                https://utteranc.es/client.js; \
+                https://utteranc.es/client.js https://*.google-analytics.com https://*.googletagmanager.com; \
             style-src 'self' https://utteranc.es https://fonts.googleapis.com https://www.youtube.com; \
             object-src 'none'; \
             base-uri 'self'; \
-            connect-src 'self'; \
+            connect-src 'self'
+                https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
             font-src 'self' https://fonts.gstatic.com; \
             frame-src 'self' https://utteranc.es https://www.youtube-nocookie.com https://www.youtube.com; \
-            img-src 'self' https://i.vimeocdn.com https://i.ytimg.com; \
+            img-src 'self' https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com; \
             manifest-src 'self'; \
             media-src 'self' \
             """

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.8",
+  "version": "0.12.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.11.8",
+      "version": "0.12.4",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -15,20 +15,20 @@
         "bootstrap": "^5.3.0-alpha3",
         "cssnano": "^6.0.0",
         "cssnano-preset-advanced": "^6.0.0",
-        "eslint": "^8.37.0",
+        "eslint": "^8.39.0",
         "eslint-config-standard": "^17.0.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-n": "^15.7.0",
         "eslint-plugin-promise": "^6.1.1",
         "flexsearch": "^0.7.31",
         "hugo-bin": "^0.102.0",
-        "markdownlint-cli2": "^0.6.0",
+        "markdownlint-cli2": "^0.7.0",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
         "rimraf": "^5.0.0",
         "shx": "^0.3.4",
-        "stylelint": "^15.4.0",
-        "stylelint-config-standard-scss": "^8.0.0"
+        "stylelint": "^15.6.0",
+        "stylelint-config-standard-scss": "^9.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -138,9 +138,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz",
-      "integrity": "sha512-KP8TicdXpUyeB1NMlbHud/1l39xvLGvqNFWMpG4qC6H1zs9SadGUHe5SO92n/659sDW9aGDvm9AMru0DZkN1Bw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz",
+      "integrity": "sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -150,13 +150,13 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.0.0"
+        "@csstools/css-tokenizer": "^2.1.1"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
-      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -167,9 +167,9 @@
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
-      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.4.tgz",
+      "integrity": "sha512-GyYot6jHgcSDZZ+tLSnrzkR7aJhF2ZW6d+CXH66mjy5WpAQhZD4HDke2OQ36SivGRWlZJpAz7TzbW6OKlEpxAA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -179,8 +179,8 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.4",
-        "postcss-selector-parser": "^6.0.10"
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1"
       }
     },
     "node_modules/@csstools/selector-specificity": {
@@ -247,9 +247,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2100,15 +2100,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2118,7 +2118,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -2368,9 +2368,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -2378,6 +2378,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-utils": {
@@ -3235,9 +3238,9 @@
       }
     },
     "node_modules/globby": {
-      "version": "13.1.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+      "version": "13.1.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
       "dev": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
@@ -3377,9 +3380,9 @@
       }
     },
     "node_modules/html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -4068,26 +4071,27 @@
       }
     },
     "node_modules/markdownlint": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.27.0.tgz",
-      "integrity": "sha512-HtfVr/hzJJmE0C198F99JLaeada+646B5SaG2pVoEakLFI6iRGsvMqrnnrflq8hm1zQgwskEgqSnhDW11JBp0w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.1.tgz",
+      "integrity": "sha512-8At2DbgGKT/RVBinkqIPqLETopPXyQFGWSiTCJSr9Y6wVVyY70cDJ9dw3FXePn4AkytIUclgrsgI6KVeqeHFoA==",
       "dev": true,
       "dependencies": {
-        "markdown-it": "13.0.1"
+        "markdown-it": "13.0.1",
+        "markdownlint-micromark": "0.1.2"
       },
       "engines": {
         "node": ">=14.18.0"
       }
     },
     "node_modules/markdownlint-cli2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.6.0.tgz",
-      "integrity": "sha512-Bv20r6WGdcHMWi8QvAFZ3CBunf4i4aYmVdTfpAvXODI/1k3f09DZZ0i0LcX9ZMhlVxjoOzbVDz1NWyKc5hwTqg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.7.0.tgz",
+      "integrity": "sha512-67r1t9ep+z0fa6g9TgL3tiPQeWo297ip165Et2u54UquJAkXWnq6e+dXFBjSPft/iLaGJfU0fUHXhXueqNUkGQ==",
       "dev": true,
       "dependencies": {
-        "globby": "13.1.3",
-        "markdownlint": "0.27.0",
-        "markdownlint-cli2-formatter-default": "0.0.3",
+        "globby": "13.1.4",
+        "markdownlint": "0.28.1",
+        "markdownlint-cli2-formatter-default": "0.0.4",
         "micromatch": "4.0.5",
         "strip-json-comments": "5.0.0",
         "yaml": "2.2.1"
@@ -4102,9 +4106,9 @@
       }
     },
     "node_modules/markdownlint-cli2-formatter-default": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz",
-      "integrity": "sha512-QEAJitT5eqX1SNboOD+SO/LNBpu4P4je8JlR02ug2cLQAqmIhh8IJnSK7AcaHBHhNADqdGydnPpQOpsNcEEqCw==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz",
+      "integrity": "sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==",
       "dev": true,
       "peerDependencies": {
         "markdownlint-cli2": ">=0.0.4"
@@ -4122,6 +4126,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdownlint-micromark": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz",
+      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -4297,10 +4310,16 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -4838,9 +4857,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
       "dev": true,
       "funding": [
         {
@@ -4850,10 +4869,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -6435,14 +6458,14 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz",
-      "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==",
+      "version": "15.6.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.6.0.tgz",
+      "integrity": "sha512-Cqzpc8tvJm77KaM8qUbhpJ/UYK55Ia0whQXj4b9IId9dlPICO7J8Lyo15SZWiHxKjlvy3p5FQor/3n6i8ignXg==",
       "dev": true,
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.1.0",
-        "@csstools/css-tokenizer": "^2.1.0",
-        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/media-query-list-parser": "^2.0.4",
         "@csstools/selector-specificity": "^2.2.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -6456,7 +6479,7 @@
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
-        "html-tags": "^3.2.0",
+        "html-tags": "^3.3.1",
         "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
@@ -6467,7 +6490,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.21",
+        "postcss": "^8.4.22",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -6495,27 +6518,27 @@
       }
     },
     "node_modules/stylelint-config-recommended": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-11.0.0.tgz",
-      "integrity": "sha512-SoGIHNI748OCZn6BxFYT83ytWoYETCINVHV3LKScVAWQQauWdvmdDqJC5YXWjpBbxg2E761Tg5aUGKLFOVhEkA==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz",
+      "integrity": "sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==",
       "dev": true,
       "peerDependencies": {
-        "stylelint": "^15.3.0"
+        "stylelint": "^15.5.0"
       }
     },
     "node_modules/stylelint-config-recommended-scss": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-10.0.0.tgz",
-      "integrity": "sha512-+YvPgUHi0W5mCJCKdupBCIsWPYNbWuJcRmFtSYujwNg+41ljFknhO9bpY6C+oahv659zW7W1AT7i6DQvJYYr1A==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-11.0.0.tgz",
+      "integrity": "sha512-EDghTDU7aOv2LTsRZvcT1w8mcjUaMhuy+t38iV5I/0Qiu6ixdkRwhLEMul3K/fnB2v9Nwqvb3xpvJfPH+HduDw==",
       "dev": true,
       "dependencies": {
         "postcss-scss": "^4.0.6",
-        "stylelint-config-recommended": "^11.0.0",
+        "stylelint-config-recommended": "^12.0.0",
         "stylelint-scss": "^4.6.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^15.3.0"
+        "stylelint": "^15.5.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -6524,29 +6547,29 @@
       }
     },
     "node_modules/stylelint-config-standard": {
-      "version": "32.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz",
-      "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==",
+      "version": "33.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-33.0.0.tgz",
+      "integrity": "sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended": "^11.0.0"
+        "stylelint-config-recommended": "^12.0.0"
       },
       "peerDependencies": {
-        "stylelint": "^15.4.0"
+        "stylelint": "^15.5.0"
       }
     },
     "node_modules/stylelint-config-standard-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-8.0.0.tgz",
-      "integrity": "sha512-TDT/gJD/0LUDoUgkjF1uoI/4DfczXHxg7gJVcWT4/JbE6k5hszVuI14reNX+tEwSyMNhcK2BA7izrK+uVAz7XA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-9.0.0.tgz",
+      "integrity": "sha512-yPKpJsrZn4ybuQZx/DkEHuCjw7pJginErE/47dFhCnrvD48IJ4UYec8tSiCuJWMA3HRjbIa3nh5ZeSauDGuVAg==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended-scss": "^10.0.0",
-        "stylelint-config-standard": "^32.0.0"
+        "stylelint-config-recommended-scss": "^11.0.0",
+        "stylelint-config-standard": "^33.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^15.4.0"
+        "stylelint": "^15.5.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -7208,22 +7231,22 @@
       }
     },
     "@csstools/css-parser-algorithms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz",
-      "integrity": "sha512-KP8TicdXpUyeB1NMlbHud/1l39xvLGvqNFWMpG4qC6H1zs9SadGUHe5SO92n/659sDW9aGDvm9AMru0DZkN1Bw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz",
+      "integrity": "sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==",
       "dev": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
-      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
       "dev": true
     },
     "@csstools/media-query-list-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
-      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.4.tgz",
+      "integrity": "sha512-GyYot6jHgcSDZZ+tLSnrzkR7aJhF2ZW6d+CXH66mjy5WpAQhZD4HDke2OQ36SivGRWlZJpAz7TzbW6OKlEpxAA==",
       "dev": true,
       "requires": {}
     },
@@ -7267,9 +7290,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "dev": true
     },
     "@fortawesome/fontawesome-free": {
@@ -8592,15 +8615,15 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -8610,7 +8633,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -8788,9 +8811,9 @@
       "requires": {}
     },
     "eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
@@ -9442,9 +9465,9 @@
       }
     },
     "globby": {
-      "version": "13.1.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+      "version": "13.1.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
       "dev": true,
       "requires": {
         "dir-glob": "^3.0.1",
@@ -9542,9 +9565,9 @@
       }
     },
     "html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
     "http-cache-semantics": {
@@ -10041,23 +10064,24 @@
       }
     },
     "markdownlint": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.27.0.tgz",
-      "integrity": "sha512-HtfVr/hzJJmE0C198F99JLaeada+646B5SaG2pVoEakLFI6iRGsvMqrnnrflq8hm1zQgwskEgqSnhDW11JBp0w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.1.tgz",
+      "integrity": "sha512-8At2DbgGKT/RVBinkqIPqLETopPXyQFGWSiTCJSr9Y6wVVyY70cDJ9dw3FXePn4AkytIUclgrsgI6KVeqeHFoA==",
       "dev": true,
       "requires": {
-        "markdown-it": "13.0.1"
+        "markdown-it": "13.0.1",
+        "markdownlint-micromark": "0.1.2"
       }
     },
     "markdownlint-cli2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.6.0.tgz",
-      "integrity": "sha512-Bv20r6WGdcHMWi8QvAFZ3CBunf4i4aYmVdTfpAvXODI/1k3f09DZZ0i0LcX9ZMhlVxjoOzbVDz1NWyKc5hwTqg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.7.0.tgz",
+      "integrity": "sha512-67r1t9ep+z0fa6g9TgL3tiPQeWo297ip165Et2u54UquJAkXWnq6e+dXFBjSPft/iLaGJfU0fUHXhXueqNUkGQ==",
       "dev": true,
       "requires": {
-        "globby": "13.1.3",
-        "markdownlint": "0.27.0",
-        "markdownlint-cli2-formatter-default": "0.0.3",
+        "globby": "13.1.4",
+        "markdownlint": "0.28.1",
+        "markdownlint-cli2-formatter-default": "0.0.4",
         "micromatch": "4.0.5",
         "strip-json-comments": "5.0.0",
         "yaml": "2.2.1"
@@ -10072,12 +10096,18 @@
       }
     },
     "markdownlint-cli2-formatter-default": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz",
-      "integrity": "sha512-QEAJitT5eqX1SNboOD+SO/LNBpu4P4je8JlR02ug2cLQAqmIhh8IJnSK7AcaHBHhNADqdGydnPpQOpsNcEEqCw==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz",
+      "integrity": "sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==",
       "dev": true,
       "requires": {}
     },
+    "markdownlint-micromark": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz",
+      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ==",
+      "dev": true
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -10209,9 +10239,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true
     },
     "natural-compare": {
@@ -10579,12 +10609,12 @@
       }
     },
     "postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -11660,14 +11690,14 @@
       }
     },
     "stylelint": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz",
-      "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==",
+      "version": "15.6.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.6.0.tgz",
+      "integrity": "sha512-Cqzpc8tvJm77KaM8qUbhpJ/UYK55Ia0whQXj4b9IId9dlPICO7J8Lyo15SZWiHxKjlvy3p5FQor/3n6i8ignXg==",
       "dev": true,
       "requires": {
-        "@csstools/css-parser-algorithms": "^2.1.0",
-        "@csstools/css-tokenizer": "^2.1.0",
-        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1",
+        "@csstools/media-query-list-parser": "^2.0.4",
         "@csstools/selector-specificity": "^2.2.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -11681,7 +11711,7 @@
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
-        "html-tags": "^3.2.0",
+        "html-tags": "^3.3.1",
         "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
@@ -11692,7 +11722,7 @@
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.21",
+        "postcss": "^8.4.22",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
@@ -11744,40 +11774,40 @@
       }
     },
     "stylelint-config-recommended": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-11.0.0.tgz",
-      "integrity": "sha512-SoGIHNI748OCZn6BxFYT83ytWoYETCINVHV3LKScVAWQQauWdvmdDqJC5YXWjpBbxg2E761Tg5aUGKLFOVhEkA==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz",
+      "integrity": "sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==",
       "dev": true,
       "requires": {}
     },
     "stylelint-config-recommended-scss": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-10.0.0.tgz",
-      "integrity": "sha512-+YvPgUHi0W5mCJCKdupBCIsWPYNbWuJcRmFtSYujwNg+41ljFknhO9bpY6C+oahv659zW7W1AT7i6DQvJYYr1A==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-11.0.0.tgz",
+      "integrity": "sha512-EDghTDU7aOv2LTsRZvcT1w8mcjUaMhuy+t38iV5I/0Qiu6ixdkRwhLEMul3K/fnB2v9Nwqvb3xpvJfPH+HduDw==",
       "dev": true,
       "requires": {
         "postcss-scss": "^4.0.6",
-        "stylelint-config-recommended": "^11.0.0",
+        "stylelint-config-recommended": "^12.0.0",
         "stylelint-scss": "^4.6.0"
       }
     },
     "stylelint-config-standard": {
-      "version": "32.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz",
-      "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==",
+      "version": "33.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-33.0.0.tgz",
+      "integrity": "sha512-eyxnLWoXImUn77+ODIuW9qXBDNM+ALN68L3wT1lN2oNspZ7D9NVGlNHb2QCUn4xDug6VZLsh0tF8NyoYzkgTzg==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended": "^11.0.0"
+        "stylelint-config-recommended": "^12.0.0"
       }
     },
     "stylelint-config-standard-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-8.0.0.tgz",
-      "integrity": "sha512-TDT/gJD/0LUDoUgkjF1uoI/4DfczXHxg7gJVcWT4/JbE6k5hszVuI14reNX+tEwSyMNhcK2BA7izrK+uVAz7XA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-9.0.0.tgz",
+      "integrity": "sha512-yPKpJsrZn4ybuQZx/DkEHuCjw7pJginErE/47dFhCnrvD48IJ4UYec8tSiCuJWMA3HRjbIa3nh5ZeSauDGuVAg==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended-scss": "^10.0.0",
-        "stylelint-config-standard": "^32.0.0"
+        "stylelint-config-recommended-scss": "^11.0.0",
+        "stylelint-config-standard": "^33.0.0"
       }
     },
     "stylelint-scss": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.8",
+  "version": "0.12.4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -57,20 +57,20 @@
     "bootstrap": "^5.3.0-alpha3",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.39.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
     "hugo-bin": "^0.102.0",
-    "markdownlint-cli2": "^0.6.0",
+    "markdownlint-cli2": "^0.7.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
     "rimraf": "^5.0.0",
     "shx": "^0.3.4",
-    "stylelint": "^15.4.0",
-    "stylelint-config-standard-scss": "^8.0.0"
+    "stylelint": "^15.6.0",
+    "stylelint-config-standard-scss": "^9.0.0"
   },
   "hugo-bin": {
     "buildTags": "extended"