Merge pull request #955 from gethinode/develop

Fix image color mode
Bump package release
2025-10-07 01:54:23 +00:00 · 2024-05-26 19:29:27 +02:00 · 2024-05-26 19:22:10 +02:00 · 2024-05-26 19:15:44 +02:00 · 2024-05-26 19:14:59 +02:00 · 2024-05-26 13:18:46 +02:00
72 changed files with 1874 additions and 1082 deletions
--- a/.github/workflows/auto-merge.yml
+++ b/.github/workflows/auto-merge.yml
@@ -13,7 +13,7 @@ jobs:
    steps:
      - name: Dependabot metadata
        id: metadata
-        uses: dependabot/fetch-metadata@v1
+        uses: dependabot/fetch-metadata@v2
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"

--- a/.github/workflows/lint-build.yml
+++ b/.github/workflows/lint-build.yml
@@ -51,6 +51,11 @@ jobs:
    - name: Check out repository
      uses: actions/checkout@v4

+    - name: Install Go
+      uses: actions/setup-go@v5
+      with:
+        go-version: ">1.0.0"
+      
    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
@@ -89,6 +94,9 @@ jobs:
        restore-keys: |
          ${{ runner.os }}-${{ env.CACHE_KEY }}

+    - name: Display environment
+      run: npm run env
+
    - name: Build main site
      run: npm run build:cache

--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ Hinode is a [Hugo theme that uses modules][hugo_modules] to install and maintain
 The installation instructions in this readme install Hinode as a regular Hugo theme. Hinode requires the following software to be installed on your local machine.

 - [Go binary][golang_download]
- [Hugo][nodejs] (extended version)
+- [Hugo][hugo_download] (extended version)

 [Git][git_download] is recommended, but is not a strict requirement.

--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -1,69 +1,21 @@
 // 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 -}}
+{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
+  {{ with site.Config.Services.GoogleAnalytics.ID }}
+    {{ if strings.HasPrefix (lower .) "ua-" }}
+      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
+    {{ else }}
        var doNotTrack = false;
-    {{- 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 hugo.IsServer) (not $pc.Disable)) -}}
-    {{ with .Site.Config.Services.GoogleAnalytics.ID -}}
-        {{ 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 }}
+        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
+          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+          var doNotTrack = (dnt == "1" || dnt == "yes");
+        }
+        if (!doNotTrack) {
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '{{ . }}');
+        }
+    {{ end }}
+  {{ end }}
+{{ end }}
--- a/assets/scss/app-dart.scss
+++ b/assets/scss/app-dart.scss
@@ -51,8 +51,9 @@
    @include meta.load-css(theme/fonts);
 }

-// Import theme placeholder
+// Import theme placeholders
+@import "theme/base.scss";
@import "theme/theme.scss";

-// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -44,17 +44,13 @@
@import "helpers/colored-links.scss";
@import "helpers/display.scss";

-// TODO: include fonts with following statement in Dart Sass
-// @if $import-fonts {
-//     @include meta.load-css(theme/fonts);
-// }
-
 {{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
    @import "theme/fonts.scss";
 {{ end }}

-// Import theme placeholder
+// Import theme placeholders
+@import "theme/base.scss";
@import "theme/theme.scss";

-// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -28,7 +28,7 @@ a:active {
 }

 .main-content {
-    margin-top: $overlay-offset;
+    margin-top: var(--navbar-offset);
 }

 $utilities: map-merge(
--- a/assets/scss/common/_variables-dart.scss
+++ b/assets/scss/common/_variables-dart.scss
@@ -20,6 +20,8 @@ strong {

 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
+$navbar-offset-xs:              h.$navbar-offset-xs;
+$navbar-size:                   h.$navbar-size;
 $overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;
--- a/assets/scss/components/_breadcrumb.scss
+++ b/assets/scss/components/_breadcrumb.scss
@@ -1,6 +1,6 @@
 // scss-docs-start breadcrumb
 .breadcrumb {
-    padding-top: 0.3 * $navbar-offset;
+    padding-top: calc(0.3 * var(--navbar-offset));
 }

 // scss-docs-end breadcrumb
--- a/assets/scss/components/_button.scss
+++ b/assets/scss/components/_button.scss
@@ -41,3 +41,7 @@ a.btn {
    background-repeat: no-repeat if($enable-important-utilities, !important, null);
    background-size: $btn-close-width if($enable-important-utilities, !important, null);
 }
+
+.btn-link {
+    --bs-btn-padding-x: 0;
+}
--- a/assets/scss/components/_card.scss
+++ b/assets/scss/components/_card.scss
@@ -1,6 +1,10 @@
 // add zoom animation with opacity change on card img hover
 // source: https://stackoverflow.com/a/43816376

+.card-img-bg {
+    background-color: var(--#{$prefix}secondary-bg);
+}
+
 .card-img-wrap {
    overflow: hidden;
    position: relative;
@@ -64,8 +68,7 @@
    }
 }

-.card-zoom card-body-link,
-.card-body-link {
+.card-zoom .card-body-link {
    &:hover,
    &:focus {
        color: shade-color($primary, $link-shade-percentage) if($enable-important-utilities, !important, null);
@@ -74,8 +77,7 @@

@if $enable-dark-mode {
    @include color-mode(dark) {
-        .card-zoom card-body-link,
-        .card-body-link {
+        .card-zoom .card-body-link {
            &:hover,
            &:focus {
                color: $primary-bg-subtle-dark if($enable-important-utilities, !important, null);
@@ -91,3 +93,7 @@
    z-index: 2;
    position: relative;
 }
+
+.card-button-link {
+    text-decoration: underline if($enable-important-utilities, !important, null);
+}
--- a/assets/scss/components/_feature.scss
+++ b/assets/scss/components/_feature.scss
@@ -1,3 +1,3 @@
 .feature {
-    margin-top: 0.3 * $navbar-offset;
+    margin-top: calc(0.3 * var(--navbar-offset));
 }
--- a/assets/scss/components/_nav.scss
+++ b/assets/scss/components/_nav.scss
@@ -23,7 +23,7 @@
    text-align: start;
    vertical-align: text-top;
    border-radius: 0;
-    padding: 0 0 (4 * $spacer) 0;
+    padding: 0 0 (4 * $spacer);
    border-bottom: none;
 }

--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -126,8 +126,49 @@

 // stylelint-enable annotation-no-unknown

+.navbar .dropdown-divider-bg {
+    color: var(--#{$prefix}navbar-color);
+}
+
 :root {
    --dropdown-horizontal-bg: var(--#{$prefix}light);
+    --navbar-offset: #{$navbar-offset-xs};
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer;
+    width: 100% !important;
+}
+
+.navbar-container {
+    width: 100% !important;
+}
+
+.navbar-brand {
+    margin-right: 0;
+}
+
+@include media-breakpoint-up(#{$navbar-size}) {
+    :root {
+        --navbar-offset: #{$navbar-offset};
+    }
+
+    .navbar-container {
+        width: auto !important;
+    }
+
+    .navbar-title {
+        text-align: initial !important;
+        padding: 0;
+    }
+
+    .navbar-brand {
+        margin-right: var(--bs-navbar-brand-margin-end);
+    }
 }

@if $enable-dark-mode {
--- a/assets/scss/components/_sidebar.scss
+++ b/assets/scss/components/_sidebar.scss
@@ -1,10 +1,10 @@
 // scss-docs-start sidebar
 .sidebar {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
 }

 .sidebar-overflow {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
    max-height: 90vh;
    overflow-y: auto;
 }
--- a/assets/scss/helpers/_display.scss
+++ b/assets/scss/helpers/_display.scss
@@ -5,7 +5,7 @@
 // stylelint-disable annotation-no-unknown

 // scss-docs-start display-color
-.d-none-light {
+.d-none-light, .d-none-inline-light {
    display: none if($enable-important-utilities, !important, null); 
 }

@@ -13,13 +13,21 @@
    display: block if($enable-important-utilities, !important, null);
 }

+.d-none-inline-dark {
+    display: inline if($enable-important-utilities, !important, null);
+}
+
@if $enable-dark-mode {
    @include color-mode(dark) {
        .d-none-light {
            display: block if($enable-important-utilities, !important, null);
        }

-        .d-none-dark {
+        .d-none-inline-light {
+            display: inline if($enable-important-utilities, !important, null);
+        }
+
+        .d-none-dark, .d-none-inline-dark {
            display: none if($enable-important-utilities, !important, null);
        }
    }
--- a/assets/scss/layouts/_type.scss
+++ b/assets/scss/layouts/_type.scss
@@ -3,34 +3,34 @@
 //
 h1 {
    margin-top: $spacer * 2.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h2 {
    margin-top: $spacer * 2;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h3 {
    margin-top: $spacer * 1.75;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h4 {
    margin-top: $spacer * 1.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h5 {
    margin-top: $spacer * 1.25;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h6 {
    margin-top: $spacer;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
--- a/assets/scss/theme/base.scss
+++ b/assets/scss/theme/base.scss
@@ -0,0 +1,2 @@
+// Placeholder for themes extending the core Hinode theme
+// The file is included last in the build pipeline, but prior to theme.scss
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -16,25 +16,15 @@
        transpiler = "libsass"
 # toml-docs-end main

-# toml-docs-start modules
-[modules]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex", "lottie"]
-    excludeSCSS = ["bootstrap"]
-    disableTemplate = ["katex"]
-    [modules.katex]
-        state = "defer"
-    [modules.flexsearch]
-        frontmatter = false
-        filter = ""
-    [modules.fontawesome]
-        inline = true
-        debug = true
-        skipMissing = false
-    [modules.utils]
-        filter = "[^0-9A-Za-zŽžÀ-ÿ ;.,\\/'’\"]-"
-        raw = false        
-# toml-docs-end modules
+# toml-docs-start images
+[images]
+    [images.cloudinary]
+        host = "cloudinary"
+    [images.imagekit]
+        host = "imagekit"
+    [images.imgix]
+        host = "imgix"
+# toml-docs-end images

 # toml-docs-start debugging
 [debugging]
--- a/config/_default/server.toml
+++ b/config/_default/server.toml
@@ -15,7 +15,7 @@ for = '/**'
            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
        font-src 'self' https://fonts.gstatic.com; \
        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
        manifest-src 'self'; \
        media-src 'self' \
        """
--- a/data/dimensions.yml
+++ b/data/dimensions.yml
@@ -0,0 +1,48 @@
+- ratio: 4x3
+  dimensions:
+    - 576x432
+    - 768x576
+    - 992x744
+    - 1200x900
+    - 1400x1050
+    - 2800x2100
+- ratio: 3x2
+  dimensions:
+    - 576x384
+    - 768x512
+    - 992x661
+    - 1200x800
+    - 1400x933
+    - 2800x1867
+- ratio: 1x1
+  dimensions:
+    - 576x576
+    - 768x768
+    - 992x992
+    - 1200x1200
+    - 1400x1400
+    - 2800x2800
+- ratio: 16x9
+  dimensions:
+    - 576x324
+    - 768x432
+    - 992x558
+    - 1200x675
+    - 1400x788
+    - 2800x1575
+- ratio: 21x9
+  dimensions:
+    - 576x247
+    - 768x329
+    - 992x425
+    - 1200x514
+    - 1400x600
+    - 2800x1200
+- ratio: auto
+  dimensions:
+    - 576
+    - 768
+    - 992
+    - 1200
+    - 1400
+    - 2800
--- a/data/structures/card-group.yml
+++ b/data/structures/card-group.yml
@@ -66,6 +66,15 @@ arguments:
      Flag indicating if pagination should be added to the card group, if the
      list exceeds the maximum number of cards to display. 
    group: partial
+  pagination:
+    type: int
+    optional: true
+    comment: >-
+      Number of elements per page in pagination, overrides site settings.
+    group: partial
+    options:
+      min: 1
+    release: v0.23.12
  href:
    type: string
    optional: true
@@ -94,6 +103,16 @@ arguments:
    optional: true
    comment: >-
      Flag indicating if the number of columns should be responsive, defaults to `true`.
+  buttonType:
+    type: select
+    optional: true
+    default: button
+    release: v0.23.18
+    comment: Type of the button elements.
+    options:
+      values:
+        - link
+        - button
  hook:
    type: string
    optional: true
--- a/data/structures/card.yml
+++ b/data/structures/card.yml
@@ -206,11 +206,30 @@ arguments:
    release: v0.23.2
    comment: >-
      Label of the link button, defaults to the card title.
+  buttonType:
+    type: select
+    parent: cascade
+    optional: true
+    default: button
+    comment: Type of the button element.
+    release: v0.23.18
+    options:
+      values:
+        - link
+        - button
  hook:
    type: string
    optional: true
    comment: Render hook for the image partial.
    group: partial
+  sizes:
+    type: string
+    default: 100vw
+    optional: true
+    comment: >-
+      One or more strings separated by commas, indicating the source sizes of an
+      image set.
+    group: partial
 body:
  optional: true
  comment: >-
--- a/data/structures/image-adapter.yml
+++ b/data/structures/image-adapter.yml
@@ -0,0 +1,62 @@
+comment: >-
+  Defines the interface to be implemented by a CDN image adapter.
+arguments:
+  host:
+    type: string
+    optional: true
+    comment: >-
+      Host of an URL. For example, the host of the URL
+      'https://example.com/first/second/third.webp' equals 'example.com'.
+  dir:
+    type: string
+    optional: true
+    comment: >-
+      All but the last element of an URL extension. For example, the dir of the
+      URL 'https://example.com/first/second/third.webp' equals '/first/second/'.
+  file:
+    type: string
+    optional: false
+    comment: >-
+      The last element of an URL extension. For example, the file of the
+      URL 'https://example.com/first/second/third.webp' equals 'third.webp'.
+  absoluteURL:
+    type: string
+    optional: true
+    default: false
+    comment: >-
+      Defines if a local image should use absolute instead of relative paths.
+  img:
+    type: "*resources.resourceAdapter"
+    optional: true
+    comment: >-
+      Image resource to process. Must be set when handling local images.
+  format:
+    type: select
+    optional: true
+    comment: >-
+      Image format; leave empty for an auto format (if supported) or default
+      format (usually jpg).
+    options:
+      values:
+        - png
+        - jpg
+        - gif
+        - tiff
+        - bmp
+        - webp
+  transform:
+    type: select
+    optional: false
+    comment: Image transformation.
+    options:
+      values:
+        - fill
+        - fit
+  height:
+    type: int
+    optional: false
+    comment: Height of the image in pixels.
+  width:
+    type: int
+    optional: false
+    comment: Width of the image in pixels.
--- a/data/structures/image.yml
+++ b/data/structures/image.yml
@@ -98,6 +98,14 @@ arguments:
        - low
        - auto
    group: partial
+  sizes:
+    type: string
+    default: 100vw
+    optional: true
+    comment: >-
+      One or more strings separated by commas, indicating the source sizes of an
+      image set.
+    group: partial
  title:
    type: string
    optional: true
--- a/data/structures/link.yml
+++ b/data/structures/link.yml
@@ -56,6 +56,12 @@ arguments:
      Flag to indicate if the retrieved title (e.g. no inner text is provided)
      of an internal link should use its original case. If false, the title is
      set to lower case.
+  external:
+    type: bool
+    optional: true
+    default: false
+    comment: >-
+      Flag to indicate if a link that contains baseURL host should be forced as external.
  class:
    type: string
    optional: true
--- a/data/structures/nav.yml
+++ b/data/structures/nav.yml
@@ -18,6 +18,7 @@ arguments:
    type:
      - page.Pages
      - resource.Resources
+      - '[]map[string]interface {}'
    optional: true
    comment: Array of pages to be rendered as nav items.
    group: partial
--- a/data/structures/navbar.yml
+++ b/data/structures/navbar.yml
@@ -118,6 +118,7 @@ arguments:
      values:
        - light
        - dark
+        - none
    group: partial
    release: v0.23.0
  logo:
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -13,21 +13,6 @@
    [main.build]
        transpiler = "dartsass"

-[modules]
-    core = ["bootstrap", "flexsearch", "fontawesome"]
-    optional = ["leaflet", "katex", "lottie"]
-    excludeSCSS = ["bootstrap"]
-    disableTemplate = ["katex"]
-    [modules.katex]
-        state = "defer"
-    [modules.flexsearch]
-        frontmatter = false
-        filter = ""
-    [modules.fontawesome]
-        inline = true
-        debug = true
-        skipMissing = false
-
 [debugging]
    showJS = false
    showSCSS = false
@@ -59,6 +44,7 @@
    overlayMode = "dark"
    horizontal = false
    offset = "5.5rem"
+    offsetXS = "5.5rem"
    search = true
    searchModal = false
    breadcrumb = true
@@ -69,6 +55,14 @@
 [messages]
    placement = "bottom-right"

+[dam]
+    dimensions = "dimensions.yml"
+
+[[dam.providers]]
+    name = "Cloudinary"
+    pattern = "cloudinary"
+    adapter = "assets/adapters/cloudinary.html"
+
 [sharing]
    enabled = true
    sort = "weight"
--- a/exampleSite/config/_default/server.toml
+++ b/exampleSite/config/_default/server.toml
@@ -15,7 +15,7 @@ for = '/**'
            https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; \
        font-src 'self' https://fonts.gstatic.com; \
        frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com; \
-        img-src 'self' data: https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+        img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
        manifest-src 'self'; \
        media-src 'self' \
        """
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -136,7 +136,7 @@ As an example, the following shortcode displays a card group of three elements.

 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card-group padding="3" gutter="3" */>}}
+{{</* card-group padding="3" gutter="3" button=true buttonType="link" */>}}
    {{</* card title="Bootstrap framework" icon="fab bootstrap" */>}}
        Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source
        Sass files.
@@ -291,6 +291,7 @@ As an example, the following shortcodes render links in different formats.
 - {{</* link name=hinode cue=true tab=true >}}Named link opening in new tab with icon{{< /link */>}}
 - {{</* link hinode /*/>}}
 - {{</* link href="https://developer.mozilla.org" >}}External link{{< /link */>}}
+- {{</* link href="https://demo.gethinode.com/en/about/" >}}Surrogate external link{{< /link */>}}
 - {{</* link "./projects/another-project" >}}Internal link with title{{< /link */>}}
 - {{</* link url="projects/another-project" /*/>}}
 - {{</* link url="/projects/another-project" /*/>}}
--- a/exampleSite/content/en/blog/image.md
+++ b/exampleSite/content/en/blog/image.md
@@ -0,0 +1,42 @@
+---
+author: Mark Dumay
+title: Local and remote images
+date: 2024-05-19
+description: Include responsive images from local sources and selected CDN image providers.
+tags: ["blog"]
+thumbnail:
+  url: https://assets.imgix.net/examples/bluehat.jpg
+---
+
+## Cloudinary
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://res.cloudinary.com/demo/image/upload/dog.webp"
+    ratio="21x9" caption="Cloudinary image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## ImageKit.io
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://ik.imagekit.io/demo/default-image.jpg"
+    ratio="21x9" caption="ImageKit.io image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+## Imgix
+
+As an example, the following shortcode displays an image with rounded corners and a 21x9 aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="https://assets.imgix.net/examples/bluehat.jpg"
+    ratio="21x9" caption="imgix image" class="rounded" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
--- a/exampleSite/content/fr/blog/bootstrap-elements.md
+++ b/exampleSite/content/fr/blog/bootstrap-elements.md
@@ -125,7 +125,8 @@ En-tête 6 {{</* badge title="Nouveau" */>}}

 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary"
+  header="publication" footer="none" button=true /*/>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -93,6 +93,7 @@
      "btn-close",
      "btn-group",
      "btn-light",
+      "btn-link",
      "btn-outline-primary",
      "btn-outline-secondary",
      "btn-primary",
@@ -104,8 +105,10 @@
      "card-body-link",
      "card-body-margin",
      "card-button",
+      "card-button-link",
      "card-emphasize",
      "card-icon",
+      "card-img-bg",
      "card-img-top",
      "card-img-wrap",
      "card-text",
@@ -219,6 +222,7 @@
      "flex-column",
      "flex-fill",
      "flex-grow-1",
+      "flex-md-grow-0",
      "font-monospace",
      "footer",
      "form-control",
@@ -226,6 +230,7 @@
      "fs-5",
      "fs-6",
      "fs-md-5",
+      "fw-30",
      "fw-bold",
      "fw-semibold",
      "g-0",
@@ -300,11 +305,13 @@
      "navbar",
      "navbar-brand",
      "navbar-collapse",
+      "navbar-container",
      "navbar-contrast",
      "navbar-expand-md",
      "navbar-fixed-top",
      "navbar-nav",
      "navbar-nav-scroll",
+      "navbar-title",
      "navbar-toggler",
      "next",
      "no-js",
@@ -485,6 +492,7 @@
      "carrousel",
      "carte",
      "chronologie",
+      "cloudinary",
      "collapse",
      "collapse-1",
      "command-prompt",
@@ -503,6 +511,8 @@
      "groupe-de-cartes",
      "icon",
      "image",
+      "imagekitio",
+      "imgix",
      "indicateur-de-chargement",
      "infobulle",
      "invite-de-commandes",
--- a/go.mod
+++ b/go.mod
@@ -4,13 +4,13 @@ go 1.19

 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
-	github.com/gethinode/mod-bootstrap v1.2.5 // indirect
-	github.com/gethinode/mod-flexsearch v1.10.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
-	github.com/gethinode/mod-katex v1.0.7 // indirect
-	github.com/gethinode/mod-leaflet v1.0.0 // indirect
-	github.com/gethinode/mod-lottie v1.4.4 // indirect
-	github.com/gethinode/mod-utils/v2 v2.1.1 // indirect
+	github.com/gethinode/mod-bootstrap v1.3.0 // indirect
+	github.com/gethinode/mod-flexsearch v1.12.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.9.0 // indirect
+	github.com/gethinode/mod-katex v1.1.0 // indirect
+	github.com/gethinode/mod-leaflet v1.1.0 // indirect
+	github.com/gethinode/mod-lottie v1.5.0 // indirect
+	github.com/gethinode/mod-utils/v2 v2.3.1 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -16,6 +16,12 @@ github.com/gethinode/mod-bootstrap v1.2.4 h1:4CFNpwpRKiZlMVWg9u5+ijSb924j4yM3G1p
 github.com/gethinode/mod-bootstrap v1.2.4/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-bootstrap v1.2.5 h1:h6yAlkMZA34wJU3pLFpLxp1ynEBte/YTY4kGEQtMGPE=
 github.com/gethinode/mod-bootstrap v1.2.5/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.2.6 h1:joKKVqWzPgitPbUFlU4oIRj72YXsEHkVun3TPf4ZZ2Q=
+github.com/gethinode/mod-bootstrap v1.2.6/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.2.8 h1:kIKSO6qqE8xA0KQC5s6kkEv5UDc8oT17HalGIwB+dSc=
+github.com/gethinode/mod-bootstrap v1.2.8/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
+github.com/gethinode/mod-bootstrap v1.3.0 h1:UxNmXgXo7gA8C8z1ar47+tSccmKYpaYBBN+txB0pwBk=
+github.com/gethinode/mod-bootstrap v1.3.0/go.mod h1:CL9IDot6nbXIWJYE/KxfsTdYYEJIGL17BXbAYPn+wVQ=
 github.com/gethinode/mod-flexsearch v1.0.1 h1:FJkRsUzSnQTXl3MWCigT4E6vfff870UWTnkGqaDGIhA=
 github.com/gethinode/mod-flexsearch v1.0.1/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.1.0 h1:7BCMyQDlYlskNXuazt8Jg/jg9WREexu2xVkYqThkAX4=
@@ -52,6 +58,16 @@ github.com/gethinode/mod-flexsearch v1.9.0 h1:AE+w7QeZTxh36JNTG+CASDLxaqlCZKn+EU
 github.com/gethinode/mod-flexsearch v1.9.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch v1.10.0 h1:ymlHu5G2635D/h2axG4jgpGS+Vvtzxg07SZX8pJOJSo=
 github.com/gethinode/mod-flexsearch v1.10.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.10.1 h1:aZ4WjUxfiCV1eiGjIUdP+lRTlOI/flPc6ABUQ99C+Es=
+github.com/gethinode/mod-flexsearch v1.10.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.0 h1:CQArPhjQRtIZqAK4ysOiBzAB1hi//L4RTelH+ScjbXU=
+github.com/gethinode/mod-flexsearch v1.11.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.1 h1:TtaE6Dv0lH4x73SHDaZpQJLjk52lRu/VoLf6+CXFOLs=
+github.com/gethinode/mod-flexsearch v1.11.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.3 h1:ykxpUg8M4vr1C4QzxJOPGt+1ZmPAD/gOCZoFcZxWoWw=
+github.com/gethinode/mod-flexsearch v1.11.3/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.12.0 h1:zg1IHvc8VO9WEtQuQnuG6HeWFNByvyqC9JYWDtpsP6s=
+github.com/gethinode/mod-flexsearch v1.12.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
@@ -88,6 +104,10 @@ github.com/gethinode/mod-fontawesome v1.8.0 h1:YEuCmvCdzcemF1eFK35Wnp1asKKO3/xbx
 github.com/gethinode/mod-fontawesome v1.8.0/go.mod h1:uvuC2YL8mdXNp6NRzFOu4TWsHvtY9AZ8YxJkF23/M/8=
 github.com/gethinode/mod-fontawesome v1.8.1 h1:iyvULrpaGizQoI5Vl9WjFYcMGWefdyG90NGK2UKax+k=
 github.com/gethinode/mod-fontawesome v1.8.1/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.8.2 h1:LAzLytyh9c9gLzBWMju6Gtp3uEojhBQEYw0o38EUKZY=
+github.com/gethinode/mod-fontawesome v1.8.2/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
+github.com/gethinode/mod-fontawesome v1.9.0 h1:xqUB8AnezMHAt8lye4ksqvmHSVPCOkiHsHGUbqNoeP0=
+github.com/gethinode/mod-fontawesome v1.9.0/go.mod h1:xBKsZH3WJtMOItZVlp9SbO51uaBy6IbvUZSKpNu3b6Y=
 github.com/gethinode/mod-katex v1.0.0 h1:me/3dIIZBkfk1mRIFt8QiAGYwYDoSG5bc2hHRtIutFc=
 github.com/gethinode/mod-katex v1.0.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.1 h1:809QUztxmKgMNchU+v03iMO7Ma+ISc3ZzhXYauc21rs=
@@ -102,6 +122,12 @@ github.com/gethinode/mod-katex v1.0.5 h1:AVhcTINYory0ygChQERf8PcyJkbT1oqhmLRF6ES
 github.com/gethinode/mod-katex v1.0.5/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-katex v1.0.7 h1:FTEhvi3r+O5lPeOxB7OsanFZuAB14yC5fIk3DqhkNyY=
 github.com/gethinode/mod-katex v1.0.7/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.8 h1:tFGFz/JIEogCz4wvUsUncrOsOupPxsjP+TwU/3NxIjY=
+github.com/gethinode/mod-katex v1.0.8/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.0.9 h1:cCJoR28tZwkDvXps17o9Jwfe3aQQAZ3Rxk0jCNRQdbU=
+github.com/gethinode/mod-katex v1.0.9/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
+github.com/gethinode/mod-katex v1.1.0 h1:PxST3HPUt6F2X/xKakTVeTkwWqCtEr53K1vYEOyQu3I=
+github.com/gethinode/mod-katex v1.1.0/go.mod h1:byAfpI3wuqNJIooTGVEGc1cjBhhCy4+CcK1H6495MYg=
 github.com/gethinode/mod-leaflet v0.2.3 h1:QQI4h+IH0jZ7fx4q0um2YIEiYBoW3OAfW8qHzbRCDPk=
 github.com/gethinode/mod-leaflet v0.2.3/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.3.1 h1:H5MaOa+BB1KuVw7abTqfIn/SNzzRsAyx/WQoSe+2Ykc=
@@ -116,6 +142,10 @@ github.com/gethinode/mod-leaflet v0.4.0 h1:Xc6c1UTf4m1saQLFfFWT5sEpwj25xVGuS8csG
 github.com/gethinode/mod-leaflet v0.4.0/go.mod h1:yr+bUKAstifdB16mbYh69OayAmgPOlNUubAmVn5eL2M=
 github.com/gethinode/mod-leaflet v1.0.0 h1:HdnWafOGkkK1hYGfqLYF3pp9dAFS/caxlzML9sO1rCc=
 github.com/gethinode/mod-leaflet v1.0.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.0.1 h1:L4Coe6HTD9O0Txs1S8AtVg+6/TEneSF9i6fJK8jdWUw=
+github.com/gethinode/mod-leaflet v1.0.1/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
+github.com/gethinode/mod-leaflet v1.1.0 h1:FXzPCic5XmUluxQ6e7LYUhhLnxuQOBwry8qjG9k30UY=
+github.com/gethinode/mod-leaflet v1.1.0/go.mod h1:Ei0x9WiL7Dbi4JeG6yI1CE63bT1QJ8sKi67Jea1wFSE=
 github.com/gethinode/mod-lottie v1.0.0 h1:1CUZMcgN5FAyjjyuP3qkaOQ6M5sv6HUAbosW4sIT5VE=
 github.com/gethinode/mod-lottie v1.0.0/go.mod h1:erRCgSL2FCfKHI0jQbSpM+g0jXl7SjKVJrh7kWGteKs=
 github.com/gethinode/mod-lottie v1.0.1 h1:+IE7xtnSVQpJS56oBJq9RWKZeFEfxrOZAqE3BSrS/u0=
@@ -138,6 +168,12 @@ github.com/gethinode/mod-lottie v1.4.3 h1:IKZO8a4yQyPKUwZ6POsZRIH/B++yEzXDe5HxrF
 github.com/gethinode/mod-lottie v1.4.3/go.mod h1:nt4wLnDFIhjBGRMuQJJ2bH80VREpbcsBUsdO6uWXjLs=
 github.com/gethinode/mod-lottie v1.4.4 h1:Lv7J+lAMx++aK9h0L7vAgsjyOZgrjux4xPz4Tpza8n4=
 github.com/gethinode/mod-lottie v1.4.4/go.mod h1:7tsZjlFgMlj2iWBIS9uOtHHsCrfx9W7S8OsBrZeSVGU=
+github.com/gethinode/mod-lottie v1.4.6 h1:L6zvfbq+FQUWTG3X/wWFCvb91WOxJuIkJUlZOd+QJ1Q=
+github.com/gethinode/mod-lottie v1.4.6/go.mod h1:1/+7U/Q5IuaqkzTrvXK1CnPE7ANnTRsG5k+KaXQUQwE=
+github.com/gethinode/mod-lottie v1.4.7 h1:5Hes0xY/l8ygzJ8YQIzdqCmvGrDQs8D8qZ/vR1fQh/Q=
+github.com/gethinode/mod-lottie v1.4.7/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
+github.com/gethinode/mod-lottie v1.5.0 h1:LwEEY+p+sPrN01yz7GyVOsF5lZ4qMln69+gAxJs1DDA=
+github.com/gethinode/mod-lottie v1.5.0/go.mod h1:FvcG3NjXOBOnwou0QvXYNPHpybxwT6yxmSh4N+nBD9s=
 github.com/gethinode/mod-utils v1.0.0 h1:cqHm2xS5uDiJzRm1KfHaNbq6uMVDKLhQa8/BuTZ1nhY=
 github.com/gethinode/mod-utils v1.0.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.1 h1:jhZGlGFHHL1f5HXbBMXfiZ2gCz4TVafAzjnRPTIBSEE=
@@ -160,6 +196,12 @@ github.com/gethinode/mod-utils/v2 v2.1.0 h1:5I0IN/AX5qPFYx7tjWXk59GBevTJzixxZUGj
 github.com/gethinode/mod-utils/v2 v2.1.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/gethinode/mod-utils/v2 v2.1.1 h1:aLBcS9Zbx+dqnu5oBsTM01AkkN5nwwifgbV4D0qiHnM=
 github.com/gethinode/mod-utils/v2 v2.1.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.2.2 h1:ZRxWIJKmZIDYsoMS3WhxxC+BWJrkd1dcZ8rz/cLZExc=
+github.com/gethinode/mod-utils/v2 v2.2.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.0 h1:e3uhlAGasvXe+cgvcmzRe05Zo4UEx86uk0TbnxtyB6U=
+github.com/gethinode/mod-utils/v2 v2.3.0/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.3.1 h1:blqynoRJ+H2SPfSU28iYheYWPH39MKNtK5HKJPghL3M=
+github.com/gethinode/mod-utils/v2 v2.3.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3 h1:H/qVR5O4BXjRjD+5PZB+r4ug2BSJ2Of4RtwOntd+OKo=
 github.com/nextapps-de/flexsearch v0.0.0-20230711092928-1243fd883ec3/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 h1:re7L8FxbXQpnX8BgzkdUnDpsUmloGNyLmiy2ZCln8pg=
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -86,11 +86,11 @@
      "fixed-top",
      "flex-column",
      "flex-fill",
-      "flex-grow-1",
      "footer",
      "form-control",
      "fs-3",
      "fs-5",
+      "fw-30",
      "fw-bold",
      "hstack",
      "img-fluid",
@@ -120,6 +120,7 @@
      "navbar",
      "navbar-brand",
      "navbar-collapse",
+      "navbar-container",
      "navbar-expand-md",
      "navbar-fixed-top",
      "navbar-nav",
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -29,6 +29,8 @@
  translation: "Aucun articles trouvé"
 - id: emptyTags
  translation: "Aucun tags trouvé"
+- id: readMore
+  translation: "Lire plus"

 # Languages
 - id: lang_de
--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@@ -0,0 +1,149 @@
+# Single pages
+- id: postedOnDate
+  translation: "Opublikowano {{ . }}"
+- id: lastModified
+  translation: "Ostatnia modyfikacja {{ . }}"
+- id: read
+  translation: "czytania"
+- id: minutesShort
+  translation: "min"
+- id: words
+  translation: "słów"
+- id: photoFull
+  translation: "Zdjęcie autorstwa %s z %s"
+- id: photoShort
+  translation: "Zdjęcie autorstwa {{ . }}"
+- id: photoOn
+  translation: "z"
+- id: draft
+  translation: "Wersja robocza"
+
+# List pages
+- id: article
+  translation: "Artykuł"
+- id: articles
+  translation: "Artykuły"
+- id: more
+  translation: "Więcej {{ . }}"
+- id: emptyList
+  translation: "Brak artykułów"
+- id: emptyTags
+  translation: "Brak tagów"
+
+# Languages
+- id: lang_de
+  translation: "Niemiecki"
+- id: lang_en
+  translation: "Angielski"
+- id: lang_nl
+  translation: "Niderlandzki"
+- id: lang_fr
+  translation: "Francuski"
+
+# Sharing
+- id: shareLink
+  translation: "Udostępnij przez {{ . }}"
+- id: shareSystem
+  translation: "system"
+- id: copyToClipboard
+  translation: "skopiuj do schowka"
+- id: copiedToClipboard
+  translation: "skopiowany do schowka"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Kod"
+- id: download
+  translation: "Pobierz artykuł"
+
+# Pagination
+- id: paginationNav
+  translation: "Nawigacja strony"
+- id: paginationPrevious
+  translation: "Poprzednia strona"
+- id: paginationNext
+  translation: "Następna strona"
+- id: paginationFirst
+  translation: "Pierwsza strona"
+- id: paginationLast
+  translation: "Ostatnia strona"
+
+# Navigation
+- id: colorMode
+  translation: "Tryb koloru"
+- id: colorLight
+  translation: "Jasny"
+- id: colorDark
+  translation: "Ciemny"
+- id: colorAuto
+  translation: "Automatyczny"
+- id: toggleMainNav
+  translation: "Przełącz główną nawigację"
+- id: home
+  translation: "Strona główna"
+- id: languageSwitcherLabel
+  translation: "Język"
+- id: close
+  translation: "Zamknij"
+
+# Table of contents
+- id: toc
+  translation: "Na tej stronie"
+- id: seeAlso
+  translation: "Zobacz również"
+- id: sectionMenu
+  translation: "Wybierz temat"
+
+# Sidebar
+- id: toggleSidebar
+  translation: "Przełącz nawigację na pasku bocznym"
+
+# Feature
+- id: addedFeature
+  translation: "Dodano w {{ . }}"
+- id: deprecatedFeature
+  translation: "Stała się przestarzała w {{ . }}"
+
+# Versioning
+- id: latest
+  translation: "najnowsza"
+- id: allVersions
+  translation: "Wszystkie wersje"
+- id: newerVersionAlert
+  translation: "Jest dostępna nowsza wersja {{ . }}!"
+
+# 404 page
+- id: pageNotFound
+  translation: "Strona, której szukasz nie istnieje albo wystąpił inny błąd. Spróbuj wrócić do naszej {{ . }}."
+- id: pageNotFoundTitle
+  translation: "Nie znaleziono strony"
+- id: pageNotFoundHome
+  translation: "strony głównej"
+
+# Footer
+- id: copyright
+  translation: "Copyright"
+- id: rights
+  translation: "Wszelkie prawa zastrzeżone"
+- id: poweredBy
+  translation: "Strona oparta o {{ . }}."
+
+# Comments
+- id: show
+  translation: "Pokaż"
+- id: comments
+  translation: "Komentarze" 
+
+# Arguments
+- id: name
+  translation: "Nazwa"
+- id: type
+  translation: "Typ"
+- id: required 
+  translation: "Wymagany"
+- id: default
+  translation: "Domyślny"
+- id: comment
+  translation: Komentarz
+- id: supportedValues
+  translation: "Obsługiwane wartości"
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -13,10 +13,9 @@
    {{- end -}}
 {{- end -}}

-{{- /* Validate module configuration */ -}}
-{{- if and .IsPage (not (in .Site.Params.modules.core "bootstrap")) -}}
-    {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
-{{- end -}}
+{{- /* Initialize module configuration */ -}}
+{{- $modules := partial "utilities/InitModules.html" (dict "page" .) -}}
+{{- $.Scratch.Set "modules" $modules -}}

 {{- $fullCover := or (or (and .IsHome .Site.Params.home.fullCover) .Page.Params.fullCover) .Site.Params.main.footerBelowFold }}
 {{- $.Scratch.Set "fullCover" $fullCover -}}
--- a/layouts/partials/assets/adapters/cloudinary.html
+++ b/layouts/partials/assets/adapters/cloudinary.html
@@ -0,0 +1,43 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/cloudinary.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "c_fill" }}{{ else }}{{ $transform = "c_fit" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Split path between upload dir and sub dir -->
+{{ $newdir := urls.JoinPath (index (split $dir "upload") 0) "upload" }}
+{{ $file = urls.JoinPath (index (split $dir "upload") 1) $file }}
+{{ $dir = $newdir }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "%s,h_%d,w_%d" $transform $height $width }}
+        {{ $file = printf "%s.%s" (strings.TrimSuffix (path.Ext $file) $file) $format }}
+    {{ else }}
+        {{ $operation = printf "f_auto,%s,h_%d,w_%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/hugo.html
+++ b/layouts/partials/assets/adapters/hugo.html
@@ -0,0 +1,64 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/hugo.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $img := .img }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ $element := "" }}
+{{ $absoluteURL := .absoluteURL }}
+{{ $url := urls.JoinPath $dir $file }}
+{{ if $host }}
+    {{ $url = urls.JoinPath "https://" $host $url }}
+{{ end }}
+
+<!-- Initialize image if needed -->
+{{ $format := .format | default "webp" }}
+{{ if and (not $img) (ne $format "svg") }}
+    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" page) -}}
+    {{ if $res }}
+        {{ $img = $res.resource }}
+        <!-- TODO: $res.mirror  -->
+    {{ end }}
+
+    {{ if not $img }}
+        {{ errorf "partial [assets/adapter/hugo.html] - Expected 'img' argument" -}}
+        {{ $error = true }}
+    {{ end }}
+{{ end }}
+
+
+<!-- Process image and generate image URL -->
+{{ if not $error }}
+    {{ $scaled := "" }}
+    {{ if eq $transform "fill" }}
+        {{- $scaled = $img.Fill (printf "%dx%d %s" $width $height $format) -}}
+    {{ else }}
+        {{- $scaled = $img.Fit (printf "%dx%d %s" $width $height $format) -}}
+    {{ end }}
+
+    {{- $clean := path.Ext $img.RelPermalink -}}
+    {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%dx%d.%s" $width $height $format)) -}}
+    {{- if $absoluteURL -}}
+        {{- $element = $scaled.Permalink -}}
+    {{- else -}}
+        {{- $element = $scaled.RelPermalink -}}
+    {{- end -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/imagekit.html
+++ b/layouts/partials/assets/adapters/imagekit.html
@@ -0,0 +1,48 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/imagekit.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "c-maintain_ratio" }}{{ else }}{{ $transform = "c-at_max" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Validate image format is supported -->
+{{ if and $format (not (in (slice "jpg" "jpeg" "webp" "avif" "png") $format)) }}
+    {{ warnf "Image format not supported by ImageKit.io: %s.%s" (path.BaseName $file) $format }}
+    {{ $format = "jpg" }}
+{{ end }}
+
+<!-- Split path between end point and image path -->
+{{ $newdir := printf "/%s" (index (split $dir "/") 1) }}
+{{ $file = urls.JoinPath (strings.TrimPrefix $newdir $dir) $file }}
+{{ $dir = $newdir }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "tr:f-%s,%s,h-%d,w-%d" $format $transform $height $width }}
+    {{ else }}
+        {{ $operation = printf "tr:f-auto,%s,h-%d,w-%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = urls.JoinPath (slice "https://" $host $dir $operation $file) -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/adapters/imgix.html
+++ b/layouts/partials/assets/adapters/imgix.html
@@ -0,0 +1,43 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
+{{ $error := false }}
+
+<!-- Validate arguments -->
+{{ if partial "utilities/IsInvalidArgs.html" (dict "structure" "image-adapter" "args" . "group" "partial") }}
+    {{ errorf "partial [assets/adapter/imgix.html] - Invalid arguments" -}}
+    {{ $error = true }}
+{{ end }}
+
+<!-- Initialize arguments -->
+{{ $host := .host }}
+{{ $dir := .dir }}
+{{ $file := .file }}
+{{ $format := .format }}
+{{ $transform := .transform }}
+{{ $height := .height }}
+{{ $width := .width }}
+{{ if eq $transform "fill" }}{{ $transform = "crop" }}{{ else }}{{ $transform = "max" }}{{ end }}
+{{ $element := "" }}
+
+<!-- Validate image format is supported -->
+{{ if and $format (not (in (slice "avif" "gif" "jp2" "jpg" "json" "jxr" "pjpg" "mp4" "png" "png8" "png32" "webm" "webp" "blurhash") $format)) }}
+    {{ warnf "Image format not supported by imgix: %s.%s" (path.BaseName $file) $format }}
+    {{ $format = "jpg" }}
+{{ end }}
+
+<!-- Generate image URL -->
+{{ if not $error }}
+    {{ $operation := "" }}
+    {{ if $format }}
+        {{ $operation = printf "fm=%s&fit=%s&h=%d&w=%d" $format $transform $height $width }}
+    {{ else }}
+        {{ $operation = printf "f_auto&fit=%s&h=%d&w=%d" $transform $height $width }}
+    {{ end }}
+    {{- $element = printf "%s?%s" (urls.JoinPath (slice "https://" $host $dir $file)) $operation -}}
+{{ end }}
+
+{{ return $element }}
--- a/layouts/partials/assets/button.html
+++ b/layouts/partials/assets/button.html
@@ -53,7 +53,10 @@
 {{- $clipboard := .clipboard -}}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
-{{- $isExternal := ne (urls.Parse (absURL $href)).Host (urls.Parse site.BaseURL).Host -}}
+{{- $isExternal := false }}
+{{ if in (slice "http" "https") ((urls.Parse (absURL $href)).Scheme) }}
+    {{ $isExternal = ne (urls.Parse (absURL $href)).Host (urls.Parse site.BaseURL).Host -}}
+{{ end }}
 {{- $target := "" -}}
 {{- $rel := "" -}}
 {{- $spacing := .spacing | default true -}}
@@ -81,8 +84,8 @@
        {{- with $toast }} data-toast-target="{{ $toast }}"{{ end -}}
        {{- with $clipboard }} data-clipboard="{{ $clipboard }}"{{ 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 -}}
+        {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
+        {{- else }} class="btn btn-link 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 -}}
@@ -90,6 +93,7 @@
        {{- range $key, $val := $attributes -}}
            {{ printf " %s=\"%s\"" $key $val | safeHTMLAttr }}
        {{- end -}}
+        role="button"
        >
        <div class="d-flex justify-content-{{ $justify }}">
            <div class="my-auto">{{ $title | safeHTML }}</div>
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -33,13 +33,18 @@
 {{- $loading := .loading -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $hook := .hook | default "assets/card.html" }}

 <!-- Override arguments -->
 {{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
 {{ $paginator := "" }}
 {{ if and $isPages $paginate }}
-    {{ $paginator = $page.Paginate $pages }}
+    {{ with .pagination }}
+        {{ $paginator = $page.Paginate $pages . }}
+    {{ else }}
+        {{ $paginator = $page.Paginate $pages }}
+    {{ end }}
    {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
 {{ end }}

@@ -74,12 +79,38 @@
 {{- $responsive := .responsive | default true -}}
 {{- $cols := string .cols | default "3" -}}

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

 {{- if not $paginate -}}
@@ -98,6 +129,7 @@
                "footer" $footer
                "header" $header
                "loading" $loading
+                "sizes" $sizes
                "orientation" $orientation
                "padding" $padding
                "ratio" $ratio
@@ -106,6 +138,7 @@
                "align" $align
                "button" $button
                "buttonLabel" $buttonLabel
+                "buttonType" $buttonType
            ) -}}
            {{- $params = merge $params $element }}

@@ -121,7 +154,7 @@
        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
    </div>

-    {{ if $paginate }}
+    {{ if $paginator }}
        {{- if gt $paginator.TotalPages 1 -}}
            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
        {{- end -}} 
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -22,6 +22,7 @@
 {{- $iconStyle := "" -}}
 {{- $align := .align | default "start" -}}
 {{- $style := .style | default "" -}}
+{{- $sizes := .sizes | default "100vw" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := (string .padding) | default "auto" -}}
@@ -31,6 +32,7 @@
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
    {{ if $subtle }}
@@ -131,7 +133,7 @@
        <div class="row g-0 row-cols-1 h-100{{ if $button }} pb-5{{ end }}">
            <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else }}col-4{{ end }}">
                {{- if $thumbnail -}}
-                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
+                    {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "1x1") "sizes" $sizes "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100 card-img-bg" "title" $title "loading" $loading) -}}
                {{- else if $icon -}}
                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
@@ -147,7 +149,19 @@
                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
                    {{ if $button }}
                        {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
-                        <div>{{ partial "assets/button.html" (dict "title" $label "icon" "fas chevron-right" "href" $href "outline" true "size" "sm" "class" "card-button mb-n4") }}</div>
+                        {{ $buttonClass := "card-button mb-n4" }}
+                        {{ if eq $buttonType "link" }}{{ $buttonClass = "card-button card-button-link mb-n4" }}{{ end }}
+                        <div class="d-flex align-items-end">
+                            {{ partial "assets/button.html" (dict 
+                                "title" $label
+                                "icon" "fas chevron-right"
+                                "href" $href
+                                "outline" true
+                                "size" "sm"
+                                "class" $buttonClass
+                                "type" $buttonType
+                            )}}
+                        </div>
                    {{ end }}
                </div>
            </div>
@@ -157,7 +171,7 @@
    <!-- Render stacked / default card -->
    <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
        {{- if $thumbnail -}}
-            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
+            {{- partial $hook (dict "url" $thumbnail "ratio" (or $ratio "16x9") "sizes" $sizes "wrapper" "card-img-wrap" "class" "card-img-top card-img-bg" "title" (or $alt $title) "loading" $loading) -}}
        {{- else if $icon -}}
            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
@@ -172,8 +186,18 @@
            {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
            <div class="row p-{{ $padding }}" >
                <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else if eq $orientation "horizontal" }}col-4{{ end }}"></div>
-                <div class="col {{ if eq $orientation "horizontal-sm" }}px-2{{ else if eq $orientation "horizontal"}}px-1 {{ else }}px-2 pt-1{{ end }}">
-                    {{ partial "assets/button.html" (dict "title" $label "href" $href "outline" true "size" "sm" "class" "card-button") }}
+                <div class="col d-flex align-items-end {{ if eq $orientation "horizontal-sm" }}px-2{{ else if eq $orientation "horizontal"}}px-1 {{ else }}px-2 pt-1{{ end }}">
+                    {{ $buttonClass := "card-button" }}
+                    {{ if eq $buttonType "link" }}{{ $buttonClass = "card-button card-button-link" }}{{ end }}
+                    {{ partial "assets/button.html" (dict 
+                        "title" $label
+                        "href" $href
+                        "outline" true
+                        "size" "sm"
+                        "class" "card-button"
+                        "class" $buttonClass
+                        "type" $buttonType
+                    )}}
                </div>
            </div>
        {{ end }}
--- a/layouts/partials/assets/download.html
+++ b/layouts/partials/assets/download.html
@@ -1,3 +1,9 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
 {{- $download := partial "utilities/GetTargetPath.html" (dict "path" .download "page" page) -}}
 {{- $title := .title }}
 {{- $color := .color | default "primary" -}}
--- a/layouts/partials/assets/helpers/GetDimension.html
+++ b/layouts/partials/assets/helpers/GetDimension.html
@@ -0,0 +1,25 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+-->
+
+{{ $ratio := .ratio }}
+{{ $dim := "" }}
+{{ $default := dict "4x3" "1400x1050" "3x2" "1400x933" "1x1" "1400x1400" "16x9" "1400x788" "21x9" "1400x600" "auto" "1400" }}
+
+<!-- Initialize dimensions data - stripping unsupported file extension -->
+{{ $config := "dimensions" }}
+{{ with index site.Params "dam" }}{{ with index . "dimensions" }}{{ $config = . }}{{ end }}{{ end }}
+{{ $config = path.Join (path.Dir $config) (path.BaseName $config) }}
+
+{{ with index site.Data $config }}
+    {{ $matches := first 1 (where . "ratio" $ratio) }}
+    {{ if eq ($matches | len) 1 }}
+        {{ $dim = (index $matches 0).dimensions }}
+    {{ end }}
+{{ end }}
+
+{{ if not $dim }}
+    {{ $dim = slice (index $default $ratio)  }}
+{{ end }}
+
+{{ return $dim }}
--- a/layouts/partials/assets/helpers/SetPortrait.html
+++ b/layouts/partials/assets/helpers/SetPortrait.html
@@ -0,0 +1,23 @@
+{{- $dim := .dim -}}
+
+{{- $dimensions := slice }}
+{{- $dimensions = $dimensions | append $dim -}}
+{{- $portraits := slice }}
+{{- range $d := $dimensions -}}
+    {{- $p := split $d "x" }}
+    {{ if ne (len $p) 2 }}
+        {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
+        {{- $portraits = $portraits | append $d -}}
+    {{- else -}}
+        {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $ret := "" }}
+{{- if reflect.IsSlice $dim -}}
+    {{ $ret = $portraits -}}
+{{- else if gt (len $portraits) 0 -}}
+    {{- $ret = index $portraits 0 -}}
+{{- end -}}
+
+{{- return $ret -}}
--- a/layouts/partials/assets/helpers/image-definition.html
+++ b/layouts/partials/assets/helpers/image-definition.html
@@ -0,0 +1,127 @@
+<!-- Initialize arguments -->
+{{- $page := .page -}}
+{{- $ratio := .ratio -}}
+{{- $portrait := .portrait -}}
+{{- $wrapper := .wrapper -}}
+{{- $class := .class -}}
+{{- $title := .title -}}
+{{- $caption := .caption -}}
+{{- $figclass := .figclass -}}
+{{- $lazy := .lazy -}}
+{{- $priority := .priority -}}
+{{- $sizes := .sizes -}}
+{{- $absoluteURL := .absoluteURL -}}
+{{- $url := .url -}}
+{{- $mode := .mode -}}
+{{- $modes := .modes -}}
+
+{{- $fallbackURL := "" -}}
+{{- $anchor := "" -}}
+{{- $imgset := "" -}}
+{{- $isVector := false -}}
+
+
+<!-- Split url into base and anchor when applicable (only relevant for vector images) -->
+{{- $segments := split $url "#" -}}
+{{- if gt (len $segments) 2 -}}
+    {{- errorf "Invalid path or url: %q" $url -}}
+{{- else if eq (len $segments) 2 }}
+    {{- $url = index $segments 0 -}}
+    {{- $anchor = index $segments 1 -}}
+{{- end -}}
+
+<!-- Identify image provider -->
+{{ $hook := "" }}
+{{ range $provider, $val := site.Params.images }}
+    {{ if not $hook }}    
+        {{ with index $val "host" }}
+            {{ if (findRE . (urls.Parse $url).Hostname) }}
+                {{ $hook = $provider }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+{{ end }}
+{{ if not $hook }}{{ $hook = "hugo" }}{{ end }}
+
+<!-- Define image dimensions -->
+{{ $dims := slice }}
+{{- $res := "" -}}
+{{- $img := "" -}}
+{{ $transform := "" }}
+{{- if hasSuffix $url "svg" -}}
+    {{- $res = partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
+    {{ if not $res }}
+        {{- if not (fileExists (path.Join "/static" $url)) -}}
+            {{ warnf "Cannot find vector image resource: %q" $url -}}
+        {{ else }}
+            {{ $width := string (partial "utilities/GetWidth.html" (dict "path" $url "height" 500)) }}
+            {{ $dims = $dims | append (printf "%sx500" $width) }}
+        {{ end }}
+    {{ end }}
+{{ else if $ratio }}
+    {{ $transform = "fill" }}
+    {{ $dims = partial "assets/helpers/GetDimension.html" (dict "ratio" $ratio) }}
+    {{ if not $dims }}{{ errorf "partial [assets/image.html] - Cannot find dimension data: %s" $ratio }}{{ end }}
+{{ else }}
+    {{ $transform = "fit" }}
+    {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
+    {{ with $res }}
+        {{ $img = $res.resource }}
+        {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
+    {{ end }}
+
+    {{ $widths := partial "assets/helpers/GetDimension.html" (dict "ratio" "auto") }}
+    {{ range $width := $widths -}}
+        {{- $dims = $dims | append (printf "%dx%d" (int $width) (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
+    {{- end -}}
+{{ end }}
+
+<!-- Derive image width and height -->
+{{ $width := "" }}
+{{ $height := "" }}
+{{ with $dims }}
+    {{ range $dim := (. | last 1) }}
+        {{ $width = (int (index (split $dim "x") 0)) }}
+        {{ $height = (int (index (split $dim "x") 1)) }}
+    {{ end }}
+{{ end }}
+
+<!-- Generate image urls -->
+{{ if hasSuffix $url "svg" }}
+    {{- $fallbackURL = $url -}}
+{{ else }}
+    {{- $fallbackURL = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" ($dims | last 1) "transform" $transform "hook" $hook "format" "jpg" "includeWidth" false) -}}
+    {{- $imgset = partial "assets/helpers/image-set.html" (dict "url" $url "img" $img "dims" $dims "transform" $transform "hook" $hook) -}}
+{{ end }}
+
+<!-- Add color modes -->
+{{- range $none := $modes -}}
+    {{- if ne $none $mode -}}
+        {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
+    {{- end -}}
+{{- end -}}
+
+<!-- Generate image definition -->
+{{- if $caption -}}
+    <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
+{{ end }}
+<div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
+    {{- if not $anchor -}}
+        <img class="img-fluid {{ $class }}"
+            src="{{ $fallbackURL }}"
+            {{ if $lazy }}loading="lazy"{{ end }}
+            {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
+            {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
+            {{ with $height }}height="{{ . }}"{{ end }}
+            {{ with $width }}width="{{ . }}"{{ end }}
+            {{ with (or $title $caption) }}alt="{{ . }}"{{ end }}>
+    {{- else }}
+        <svg class="{{ $class }}">
+            <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
+        </svg>
+    {{ end }}
+</div>
+{{- if $caption -}}
+        <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
+    </figure>
+{{- end -}}
--- a/layouts/partials/assets/helpers/image-set.html
+++ b/layouts/partials/assets/helpers/image-set.html
@@ -0,0 +1,46 @@
+{{- $url := .url -}}
+{{ $img := .img }}
+{{ $absoluteURL := .absoluteURL }}
+{{ $dims := .dims }}
+{{- $ratio := .ratio -}}
+{{ $hook := .hook }}
+{{ $transform := .transform }}
+{{ $format := .format }}
+{{ $includeWidth := .includeWidth | default true }}
+
+{{ $host := (urls.Parse $url).Hostname }}
+{{ $dir := (urls.Parse $url).Path }}
+{{ $file := index ((split $dir "/") | collections.Reverse) 0 }}
+{{ $dir = strings.TrimSuffix $file $dir }}
+
+{{ $adapter := (printf "assets/adapters/%s.html" $hook) }}
+{{ if not (fileExists (path.Join "/layouts/partials" $adapter)) }}
+    {{ warnf "Cannot find adapter: %s" (path.Join "/layouts/partials" $adapter) }}
+    {{ $hook = "hugo" }}
+    {{ $adapter = "assets/adapters/hugo.html" }}
+{{ end }}
+
+{{ $imgset := slice }}
+{{- range $index, $dim := $dims -}}
+    {{ $width := (int (index (split $dim "x") 0)) }}
+    {{ $height := (int (index (split $dim "x") 1)) }}
+
+    {{- $element := partial $adapter (dict 
+        "host" $host
+        "dir" $dir
+        "file" $file
+        "img" $img
+        "absoluteURL" $absoluteURL
+        "transform" $transform
+        "width" $width
+        "height" $height
+        "format" $format
+    )}}
+    {{ if $includeWidth }}
+        {{ $imgset = $imgset | append (printf "%s %dw" $element $width) }}
+    {{ else }}
+        {{ $imgset = $imgset | append $element }}
+    {{ end }}
+{{- end -}}
+
+{{ return (delimit $imgset ", ") }}
--- a/layouts/partials/assets/image.html
+++ b/layouts/partials/assets/image.html
@@ -13,247 +13,29 @@
 {{ end }}

 <!-- Initialize arguments -->
-{{ $destination := .destination }}
-
-<!-- Initialize arguments -->
-{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $page := .page -}}
 {{- $ratio := .ratio -}}
 {{- $portrait := .portrait -}}
-{{- $url := .url -}}
-
-{{- $mode := .mode -}}
-{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
 {{- $wrapper := .wrapper -}}
 {{- $class := .class -}}
 {{- $title := .title -}}
 {{- $caption := .caption -}}
 {{- $figclass := .figclass -}}
-
-{{- $page := .page -}}
-
 {{- $loading := .loading -}}
 {{- $lazy := eq $loading "lazy" -}}
 {{- $priority := .priority -}}
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
+{{- $sizes := .sizes | default "100vw" -}}

-{{- define "partials/image-portrait.html" -}}
-    {{- $dimensions := slice }}
-    {{- $dim := .dim -}}
-    {{- $dimensions = $dimensions | append $dim -}}
-    {{- $portraits := slice }}
-    {{- range $d := $dimensions -}}
-        {{- $p := split $d "x" }}
-        {{ if ne (len $p) 2 }}
-            {{- warnf "partial [assets/image.html] - Invalid dimension: %s" $d -}}
-            {{- $portraits = $portraits | append $d -}}
-        {{- else -}}
-            {{- $portraits = $portraits | append (printf "%sx%s" (index $p 1) (index $p 0)) -}}
-        {{- end -}}
-    {{- end -}}
+{{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
+{{- $url := .url -}}
+{{- $mode := .mode -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}

-    {{- $ret := "" }}
-    {{- if reflect.IsSlice $dim -}}
-        {{ $ret = $portraits -}}
-    {{- else if gt (len $portraits) 0 -}}
-        {{- $ret = index $portraits 0 -}}
-    {{- end -}}
-
-    {{- return $ret -}}
-{{- end -}}
-
-<!-- Generate a fallback image of type jpg -->
-{{- define "partials/image-default.html" -}}
-    {{- $img := .img -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := and .portrait .ratio -}}
-    {{- $width := "1400" -}}
-    {{- $dim := "" -}}
-    {{- $fallback := "" -}}
-
-    {{- with $img -}}
-        {{- if eq $ratio "4x3" -}}{{- $dim  = "1400x1050" }}
-        {{- else if eq $ratio "3x2" -}}{{- $dim  = "1400x933" }}
-        {{- else if eq $ratio "1x1" -}}{{- $dim  = "1400x1400" }}
-        {{- else if eq $ratio "16x9" -}}{{- $dim = "1400x788" -}}
-        {{- else if eq $ratio "21x9" -}}{{- $dim = "1400x600" -}}
-        {{- else -}}
-            {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
-        {{- end -}}
-
-        {{- if $portrait -}}{{- $dim = partial "partials/image-portrait.html" (dict "dim" $dim) -}}{{- end -}}
-
-        {{- if $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 " -}}
-    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-    {{- $img := .img -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := and .portrait .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 "3x2" -}}
-            {{- $dims = slice "576x384"  "768x512" "992x661" "1200x800"  "1400x933" -}}
-        {{- 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 -}}
-
-        {{- if $portrait -}}
-            {{- $dims = partial "partials/image-portrait.html" (dict "dim" $dims) -}}
-        {{- 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)) -}}
-            {{- if $absoluteURL -}}
-                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.Permalink (index $widths $index) -}}
-            {{- else -}}
-                {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
-            {{- end -}}
-        {{- end -}}
-        
-        {{- $imgset = strings.TrimPrefix ", " $imgset -}}
-    {{- end -}}
-
-    {{- return $imgset -}}
-{{- end -}}
-
-<!-- Define the img with optional caption -->
-{{- define "partials/image-definition.html" -}}
-    {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
-    {{- $ratio := .ratio -}}
-    {{- $portrait := .portrait -}}
-    {{- $url := .url -}}
-    {{- $wrapper := .wrapper -}}
-    {{- $class := .class -}}
-    {{- $title := .title -}}
-    {{- $caption := .caption -}}
-    {{- $figclass := .figclass -}}
-    {{- $fallbackURL := "" -}}
-    {{- $anchor := "" -}}
-    {{- $imgset := "" -}}
-    {{- $mode := .mode -}}
-    {{- $modes := .modes -}}
-    {{- $lazy := .lazy -}}
-    {{- $page := .page -}}
-    {{- $priority := .priority -}}
-    {{- $isVector := false -}}
-
-    {{- $segments := split $url "#" -}}
-    {{- if gt (len $segments) 2 -}}
-        {{- errorf "Invalid path or url: %q" $url -}}
-    {{- else if eq (len $segments) 2 }}
-        {{- $url = index $segments 0 -}}
-        {{- $anchor = index $segments 1 -}}
-    {{- end -}}
-
-    {{- if hasSuffix $url "svg" -}}
-        {{- $fallbackURL = $url -}}
-        {{- $isVector = true -}}
-        {{- $res := partial "utilities/GetResource.html" (dict "url" $url "page" $page) -}}
-        {{ if not $res }}
-            {{- if not (fileExists (path.Join "/static" $url)) -}}
-                {{ warnf "Cannot find vector image resource: %q" $url -}}
-            {{ end }}
-        {{ end }}
-    {{- else -}}
-        {{- $res := partial "utilities/GetImage.html" (dict "url" $url "page" $page) -}}
-        {{- $img := "" -}}
-        {{ with $res }}
-            {{ $img = $res.resource }}
-            {{ if $res.mirror }}{{ $class = printf "%s mirrorred" $class }}{{ end }}
-        {{ end }}
-        {{- if $img -}}
-            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
-            {{- if $absoluteURL -}}
-                {{- $fallbackURL = $fallback.Permalink -}}
-            {{- else -}}
-                {{- $fallbackURL = $fallback.RelPermalink -}}
-            {{- end -}}
-            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio "portrait" $portrait) -}}
-        {{- end -}}
-    {{- end -}}
-
-    {{- range $none := $modes -}}
-        {{- if ne $none $mode -}}
-            {{- $wrapper = printf "%s d-none-%s" (or $wrapper "") $none -}}
-        {{- end -}}
-    {{- end -}}
-
-    {{- $width := "" -}}
-    {{- $height := "" -}}
-    {{- $input := (split (path.BaseName $fallbackURL) "-") | collections.Reverse -}}
-    {{ if $isVector }}
-        {{- $height = "500" -}}
-        {{ $width = string (partial "utilities/GetWidth.html" (dict "path" $fallbackURL "height" 500)) }}
-    {{- else if gt ($input | len) 1 -}}
-        {{- $dim := (split (index $input 0) "x") -}}
-        {{- if eq ($dim | len) 2 -}}
-            {{- $width = index $dim 0 -}}
-            {{- $height = index $dim 1 -}}
-        {{- end -}}
-    {{- end }}
-
-    {{- if $caption -}}
-        <figure {{ with $wrapper }}class="{{ . }}"{{ end }}>
-    {{ end }}
-    <div class="{{ if not $caption }}{{ $wrapper }}{{ end }}">        
-        {{- if not $anchor -}}
-            <img class="img-fluid {{ $class }}"
-                src="{{ $fallbackURL }}"
-                {{ if $lazy }}loading="lazy"{{ end }}
-                {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
-                {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
-                {{ with $height }}height="{{ . }}"{{ end }}
-                {{ with $width }}width="{{ . }}"{{ end }}
-                {{ with $title }}alt="{{ . }}"{{ end }}>
-        {{- else }}
-            <svg class="{{ $class }}">
-                <use href="{{ $fallbackURL }}#{{ $anchor }}"></use>
-            </svg>
-        {{ end }}
-    </div>
-    {{- if $caption -}}
-            <figcaption class="figure-caption{{ with $figclass }} {{ . }}{{ end }}">{{ $caption | safeHTML }}</figcaption>
-        </figure>
-    {{- end -}}
-{{- end -}}
-
-<!-- Initiate the regular or color-mode image -->
+<!-- Main code -->
 {{ $params := dict }}
 {{- $params = merge $params (dict
+    "page" $page
    "ratio" $ratio
    "portrait" $portrait
    "wrapper" $wrapper
@@ -263,26 +45,30 @@
    "figclass" $figclass
    "lazy" $lazy
    "priority" $priority
-    "page" $page)
+    "sizes" $sizes
+    "absoluteURL" $absoluteURL
+    )
 -}}

-{{- if $mode -}}
-    {{- $ext := path.Ext $url -}}
-    {{- $base := strings.TrimSuffix $ext $url -}}
-    {{- range $suffix := $modes -}}
-        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
-    {{- end -}}
+{{ if not $error }}
+    {{- 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 -}}
-        {{- $params = merge $params (dict
-            "url" $image
-            "mode" $suffix
-            "modes" $modes)
-        -}}
-        {{- partial "partials/image-definition.html" $params -}}
+        {{- range $suffix := $modes -}}
+            {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
+            {{- $params = merge $params (dict
+                "url" $image
+                "mode" $suffix
+                "modes" $modes)
+            -}}
+            {{- partial "assets/helpers/image-definition.html" $params -}}
+        {{- end -}}
+    {{ else }}
+        {{- $params = merge $params (dict "url" $url) -}}
+        {{- partial "assets/helpers/image-definition.html" $params -}}
    {{- end -}}
-{{ else }}
-    {{- $params = merge $params (dict "url" $url) -}}
-    {{- partial "partials/image-definition.html" $params -}}
-{{- end -}}
+{{ end }}
--- a/layouts/partials/assets/link.html
+++ b/layouts/partials/assets/link.html
@@ -13,14 +13,15 @@
 {{ end }}

 <!-- Initialize arguments -->
-{{ $destination := .destination }}
+{{ $destination := strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) .destination }}

 {{- $target := "" -}}
 {{- $rel := "" -}}
 {{- $case := .case | default true }}
+{{- $external := .external | default false }}
 {{- $cue := .cue | default site.Params.main.externalLinks.cue -}}
 {{- $tab := .tab | default site.Params.main.externalLinks.tab -}}
-{{- $isExternal := ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host -}}
+{{- $isExternal := or (ne (urls.Parse (absURL $destination)).Host (urls.Parse site.BaseURL).Host) $external -}}
 {{- $page := .page -}}
 {{- $anchor := "" -}}
 {{- $text := .text -}}
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -112,6 +112,7 @@
 {{- $fixed := .fixed | default false -}}
 {{- $overlay := .overlay | default false -}}
 {{- $overlayMode := .overlayMode | default "dark" -}}
+{{- if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
 {{- $color := .color | default "" -}}
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
@@ -183,42 +184,46 @@
        {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
        >
        <div class="container-xxl p-0">
-            <!-- Insert sidebar toggler when applicable -->
-            <div class="d-flex align-items-center">
-                {{- if $page.Scratch.Get "sidebar" -}}
-                    <button class="navbar-toggler collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
+            <div class="d-flex navbar-container justify-content-center">
+                <!-- Insert sidebar toggler when applicable -->
+                <div class="d-flex align-items-center">
+                    {{- if $page.Scratch.Get "sidebar" -}}
+                        <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- else -}}
+                        <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                        <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- end -}}
+                </div>
+        
+                <!-- Insert the brand logo or name -->
+                <div class="{{ if (or $logoLight $logo) }}mx-auto{{ else }}flex-grow-1 flex-{{ $size }}-grow-0{{ end }}">
+                    <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
+                        {{- if (and $logoLight $logoDark) -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-inline-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-inline-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else if $logo -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else -}}
+                            <div class="navbar-title fw-bold h-100">{{ $title }}</div>
+                        {{- end -}}
+                    </a>
+                </div>
+        
+                <!-- Insert main navigation toggler -->
+                <div class="d-flex align-items-center">
+                    <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
+                        aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                        <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
                    </button>
-                {{- else -}}
-                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                    <button class="navbar-toggler collapsed p-0 mx-auto invisible" type="button">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
-                    </button>
-                {{- end -}}
-            </div>
-    
-            <!-- Insert the brand logo or name -->
-            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
-                {{- if (and $logoLight $logoDark) -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else if $logo -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else -}}
-                    <span class="fw-bold">{{ $title }}</span>
-                {{- end -}}
-            </a>
-    
-            <!-- Insert main navigation toggler -->
-            <div class="d-flex">
-                <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
-                    aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-                    <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                </button>
+                </div>
            </div>
    
            <div class="navbar-collapse collapse" id="{{ $id }}-collapse">
--- a/layouts/partials/assets/section-list.html
+++ b/layouts/partials/assets/section-list.html
@@ -1,3 +1,9 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
 {{- $page := .page }}
 {{- $section := .section }}
 {{- if not $section }}{{ errorf "partial [assets/section-list.html] - Missing value for param 'section'" }}{{ end -}}
--- a/layouts/partials/assets/section-menu.html
+++ b/layouts/partials/assets/section-menu.html
@@ -14,6 +14,7 @@

 <!-- Initialize arguments -->
 {{- $page := .page -}}
+{{- $breakpoint := .page.Scratch.Get "breakpoint" -}}
 {{ $items := $page.Parent.Sections }}
 {{ if not $page.Parent.Section }}
    {{ $items = $page.Sections }}
@@ -21,7 +22,7 @@

 <!-- Main code -->
 {{- if and (not $error) (gt (len $items) 0) }}
-    <div class="d-grid gap-2 mx-auto d-md-none">
+    <div class="d-grid gap-2 mx-auto d-{{ $breakpoint.prev }}-none">
        {{ partial "assets/button.html" (dict 
            "title" (T "sectionMenu") 
            "color" "secondary" 
@@ -30,22 +31,24 @@
            "icon" "fas sort"
            "justify" "between"
            "collapse" "toc-collapse"
-            "order" "last") 
+            "order" "last"
+            "spacing" false
+            ) 
        -}}
    </div>

-    <p>
-        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
-            <div class="toc toc-panel section-menu text-body p-2 fs-6">
-                    {{- range $items }}
-                        {{ $active := eq $page.RelPermalink .RelPermalink }}
-                        <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
-                    {{- end }}
-            </div>
+    <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll d-{{ $breakpoint.prev }}-none" id="toc-collapse">
+        <div class="toc toc-panel section-menu text-body p-2 fs-6">
+            {{- range $items }}
+                {{ $active := eq $page.RelPermalink .RelPermalink }}
+                <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
+            {{- end }}
        </div>
-    </p>
+    </div>

-    <nav class="navbar navbar-expand navbar-services p-0 fs-5 d-none d-md-block">
+    <div class="d-{{ $breakpoint.prev }}-none mb-5"></div>
+
+    <nav class="navbar navbar-expand navbar-services p-0 fs-5 d-none d-{{ $breakpoint.prev }}-block mb-5">
        <div class="container-fluid p-0 pb-3">
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
--- a/layouts/partials/assets/table.html
+++ b/layouts/partials/assets/table.html
@@ -1,3 +1,9 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
 {{ $page := .page }}
 {{ $input := .input }}
 {{ $args := .args }}
--- a/layouts/partials/assets/toc-main.html
+++ b/layouts/partials/assets/toc-main.html
@@ -1,3 +1,9 @@
+<!-- 
+    Copyright © 2024 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+-->
+
 {{ $headings := .headings | default slice }}
 {{- range .Fragments.Headings }}
    {{- range .Headings }}
--- a/layouts/partials/footer/optional-scripts.html
+++ b/layouts/partials/footer/optional-scripts.html
@@ -5,19 +5,24 @@
    {{ $page_modules = $page_modules | append .Params.modules }}
 {{ end }}

-{{- $modules := site.Params.modules.optional | intersect $page_modules  -}}
+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [footer/optional-scripts.html] - Cannot initialize module configuration" }}
+{{ end }}
+
+{{- $modules := $config.optional | intersect $page_modules  -}}
 {{- range $index, $mod := $modules -}}
    {{- $filename := printf "js/%s.bundle.js" $mod -}}
    {{- $match := printf "js/modules/%s/**.js" $mod -}}
    {{- $skipTemplate := false -}}
-    {{- if reflect.IsSlice site.Params.modules.disableTemplate -}}
-        {{- if in site.Params.modules.disableTemplate $mod}}
+    {{- if reflect.IsSlice $config.disableTemplate -}}
+        {{- if in $config.disableTemplate $mod}}
            {{- $skipTemplate = true -}}
        {{- end -}}
    {{- end -}}

    {{ $state := "" }}
-    {{- with (index site.Params.modules $mod) -}}
+    {{- with (index $config.modules $mod) -}}
        {{- with index . "state" }}{{ $state = . }}{{ end -}}
    {{- end -}}

--- a/layouts/partials/footer/scripts.html
+++ b/layouts/partials/footer/scripts.html
@@ -14,9 +14,14 @@
    {{- errorf "partial [footer/script.html] - Invalid value for param 'processing': %s" $state -}}
 {{- end -}}

+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [footer/scripts.html] - Cannot initialize module configuration" }}
+{{ end }}
+
 {{- $modules := "" -}}
 {{ if $core }}
-    {{- $modules = site.Params.modules.core -}}
+    {{- $modules = $config.core -}}
 {{- end -}}

 {{- $bundle := partial "utilities/bundle" (dict "match" $match "filename" $filename "modules" $modules "basepath" "js/modules" "all" true "debugging" site.Params.debugging.showJS) -}}
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -7,8 +7,14 @@
    <meta name="theme" content="{{ printf "Hinode %s" $version }}">
    {{ partialCached "head/stylesheet-core.html" . -}}

+
+    {{ $config := page.Scratch.Get "modules" }}
+    {{ if not $config }}
+        {{ errorf "partial [head/head.html] - Cannot initialize module configuration" }}
+    {{ end }}
+        
    {{ $page_modules := slice | append .Page.Params.modules }}
-    {{- $modules := site.Params.modules.optional | intersect $page_modules -}}
+    {{- $modules := $config.optional | intersect $page_modules -}}
    {{- range $index, $mod := $modules -}}
        {{- $source := printf "scss/%s.scss" $mod -}}
        {{- $target := printf "css/%s.css" $mod -}}
--- a/layouts/partials/head/stylesheet.html
+++ b/layouts/partials/head/stylesheet.html
@@ -14,11 +14,16 @@
 {{- $core := .core | default true -}}

 {{- $modules := "" -}}
+{{ $config := page.Scratch.Get "modules" }}
+{{ if not $config }}
+    {{ errorf "partial [head/stylesheet.html] - Cannot initialize module configuration" }}
+{{ end }}
+
 {{ if $core }}
-    {{- if reflect.IsSlice site.Params.modules.excludeSCSS -}}
-        {{- $modules = complement site.Params.modules.excludeSCSS (or site.Params.modules.core slice) -}}
+    {{- if reflect.IsSlice $config.excludeSCSS -}}
+        {{- $modules = complement $config.excludeSCSS (or $config.core slice) -}}
    {{ else }}
-        {{- $modules = site.Params.modules.core -}}
+        {{- $modules = $config.core -}}
    {{ end }}
 {{- end -}}

@@ -27,7 +32,11 @@
 {{ end}}

 {{- $navbarOffset := "0rem" -}}
-{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
+{{- $navbarOffsetXS := "0rem" -}}
+{{- if site.Params.navigation.fixed }}
+    {{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}
+    {{ $navbarOffsetXS = site.Params.navigation.offsetXS | default $navbarOffset }}
+{{ end }}
 {{- $overlayOffset := $navbarOffset -}}
 {{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
@@ -43,6 +52,8 @@
    "dark"                    (default "#212529" site.Params.style.dark)
    "navbar-height"           (site.Params.navigation.offset | default "4rem")
    "navbar-offset"           $navbarOffset
+    "navbar-offset-xs"        $navbarOffsetXS
+    "navbar-size"             (site.Params.navigation.size | default "md")
    "overlay-offset"          $overlayOffset
    "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
    "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
--- a/layouts/partials/list/featured.html
+++ b/layouts/partials/list/featured.html
@@ -3,6 +3,7 @@
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $actions := .actions -}}
 {{- $width := .width | default 6 }}
+{{ $sizes := "100vw" }}
 {{- if or (lt $width 1) (gt $width 12) -}}
    {{- $width = 6 -}}
    {{- warnf "partial [list/featured.html] - Invalid column width: %d" $width -}}
@@ -19,6 +20,11 @@
 {{- end -}}
 {{- $breadcrumb := and (not $page.IsHome) site.Params.navigation.breadcrumb -}}

+{{- define "partials/list/featured-sizes.html" }}
+    {{ $sizes := printf "(min-width: 768px) %dvw, 50vw" (int (math.Round (div (mul .width 100) 12))) }}
+    {{ return $sizes }}
+{{ end }}
+
 {{- define "partials/list/featured-body.html" }}
    {{- $page := .page -}}
    {{- $headings := .headings -}}
@@ -44,6 +50,7 @@
 {{- define "partials/list/featured-illustration.html" }}
    {{- $page := .page -}}
    {{- $style := printf "img-wrap mx-auto mx-md-0 %s" .style -}}
+    {{ $sizes := .sizes }}

    {{ if $page.Params.icon }}
        {{- $icon := (or (and (reflect.IsMap $page.Params.Icon) $page.Params.Icon.url) $page.Params.Icon) -}}
@@ -56,7 +63,7 @@
    {{ else }}
        {{- $thumbnail := (or (and (reflect.IsMap $page.Params.Thumbnail) $page.Params.Thumbnail.url) $page.Params.Thumbnail) -}}
        {{- if $thumbnail }}
-            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }}
+            {{ partial "assets/image.html" (dict "url" $thumbnail "ratio" "16x9" "sizes" $sizes "wrapper" $style "class" "rounded" "title" $page.Site.Title "priority" "high") }}
        {{ end }}
    {{ end }}
 {{- end -}}
@@ -70,7 +77,8 @@
        {{ if eq $orientation "stacked" }}
            <div class="row justify-content-center flex-fill">
                <div class="col-12 col-md-{{ $width }} m-auto text-center">
-                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4") }}
+                    {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $width) }}
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4") }}
                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions) }}
                </div>
            </div>
@@ -79,8 +87,11 @@
                <div class="col col-12 col-md-{{ $width }} order-1 order-md-0 my-md-auto">
                    {{ partial "partials/list/featured-body.html" (dict "page" $page "headings" $headings "orientation" $orientation "actions" $actions "align" $align) }}
                </div>
-                <div class="col col-12 col-md-{{ if gt $width 6 }}{{ sub 12 $width }}{{ else }}{{ $width }}{{ end }} order-0 order-md-1 text-center my-md-auto align-self-end">
-                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
+                {{ $newWidth := $width }}
+                {{ if gt $width 6 }}{{ $newWidth = sub 12 $width }}{{ end }}
+                {{ $sizes = partial "partials/list/featured-sizes.html" (dict "width" $newWidth) }}
+                <div class="col col-12 col-md-{{ $newWidth }} order-0 order-md-1 text-center my-md-auto align-self-end">
+                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "sizes" $sizes "style" "pb-4 pb-md-0") }}
                </div>
            </div>
        {{ end }}
--- a/layouts/partials/utilities/InitModules.html
+++ b/layouts/partials/utilities/InitModules.html
@@ -0,0 +1,52 @@
+{{ $page := .page }}
+
+{{ $core := slice }}
+{{ $optional := slice }}
+{{ $excludeSCSS := slice }}
+{{ $disableTemplate := slice }}
+{{ $modules := dict }}
+
+{{ range $key, $mod := $page.Site.Params.modules }}
+    {{ if eq $key "core" }}
+        {{ warnf "DEPRECATED: module parameter `core` has been deprecated in release v0.24.0" }}
+        {{ $core = $core | append $mod }}
+    {{ else if eq $key "optional" }}
+        {{ warnf "DEPRECATED: module parameter `optional` has been deprecated in release v0.24.0" }}
+        {{ $optional = $optional | append $mod }}
+    {{ else if eq $key "excludescss" }}
+        {{ warnf "DEPRECATED: module parameter `excludeSCSS` has been deprecated in release v0.24.0" }}
+        {{ $excludeSCSS = $excludeSCSS | append $mod }}
+    {{ else if eq $key "disabletemplate" }}
+        {{ warnf "DEPRECATED: module parameter `disableTemplate` has been deprecated in release v0.24.0" }}
+        {{ $disableTemplate = $disableTemplate | append $mod }}
+    {{ else if reflect.IsMap $mod }}
+        {{ $integration := index $mod "integration" }}
+        {{ if eq $integration "core" }}
+            {{ $core = $core | append $key }}
+        {{ else if eq $integration "optional" }}
+            {{ $optional = $optional | append $key }}
+        {{ else if $integration }}
+            {{ warnf "Unrecognized module integration setting: %s" $integration }}
+        {{ end }}
+        
+        {{ if eq (index $mod "excludeSCSS") true }}
+            {{ $excludeSCSS = $excludeSCSS | append $key }}
+        {{ end }}
+
+        {{ if eq (index $mod "disableTemplate") true }}
+            {{ $disableTemplate = $disableTemplate | append $key }}
+        {{ end }}
+
+        {{ $modules = merge $modules (dict $key $mod) }}
+    {{ else }}
+        {{ warnf "Unsupported module parameter: %s" $key }}
+    {{ end }}
+{{ end }}
+
+{{ $modules := dict "modules" $modules "core" $core "optional" $optional "excludeSCSS" $excludeSCSS "disableTemplate" $disableTemplate }}
+
+{{- if and $page.IsPage (not (in $core "bootstrap")) -}}
+    {{- errorf "Bootstrap is a required module, please add it to 'modules.core' in your site parameters" -}}
+{{- end -}}
+
+{{ return $modules }}
--- a/layouts/shortcodes/card-group.html
+++ b/layouts/shortcodes/card-group.html
@@ -28,6 +28,7 @@
 {{- $style := .Get  "style" | default "" -}}
 {{- $subtle := .Get "subtle" | default false -}}
 {{- $button := .Get "button" | default false -}}
+{{- $buttonType := .Get "buttonType" | default "" -}}

 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -56,5 +57,6 @@
    "style" $style
    "subtle" $subtle
    "button" $button
+    "buttonType" $buttonType
    ) 
 -}}
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -33,6 +33,7 @@
 {{- $thumbnail := .Get "thumbnail" -}}
 {{- $title := .Get "title" -}}
 {{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
+{{- $buttonType := partial "utilities/GetArgParent" (dict "page" . "arg" "buttonType") | default "" -}}

 <!-- Override arguments -->
 {{ if $path }}
@@ -70,6 +71,7 @@
        "loading" $loading
        "alt" $alt
        "button" $button
+        "buttonType" $buttonType
    ) -}}

    <!-- Pass output to parent or current stream -->
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -19,6 +19,7 @@
 {{- $class := "" -}}
 {{- $title := "" -}}
 {{- $caption := "" -}}
+{{- $figclass := "" -}}
 {{- $mode := false -}}
 {{- $portrait := false -}}
 {{- $loading := "" -}}
@@ -33,6 +34,7 @@
    {{- $loading = .Get "loading" | default "" -}}
    {{ $title = .Get "title" | default "" -}}
    {{ $caption = .Get "caption" | default "" -}}
+    {{ $figclass = .Get "figclass" | default "" -}}
    {{ with .Get "mode" }}{{ $mode = partial "utilities/CastBool.html" . }}{{ end -}}
    {{ with .Get "portrait" }}{{ $portrait = partial "utilities/CastBool.html" . }}{{ end -}}
 {{ else -}}
@@ -53,6 +55,7 @@
        "class" $class
        "title" $title
        "caption" $caption
+        "figclass" $figclass
        "mode" $mode
        "portrait" $portrait
        "loading" $loading
--- a/layouts/shortcodes/link.html
+++ b/layouts/shortcodes/link.html
@@ -18,6 +18,7 @@
 {{ $url := "" }}
 {{ $class := "" }}
 {{ $case := true }}
+{{ $external := false }}
 {{ $cue := site.Params.main.externalLinks.cue }}
 {{ $tab := site.Params.main.externalLinks.tab }}
 {{ $text := trim .Inner " \r\n" | .Page.RenderString | safeHTML }}
@@ -30,6 +31,7 @@
    {{- $cue = .Get "cue" | default site.Params.main.externalLinks.cue -}}
    {{- $tab = .Get "tab" | default site.Params.main.externalLinks.tab -}}
    {{- $case = .Get "case" | default true -}}
+    {{- $external = .Get "external" | default false -}}
    {{- $class = .Get "class" | default "" -}}
 {{ else }}
    {{ $href = .Get 0 }}
@@ -42,7 +44,11 @@
 {{ end }}

 {{- if hasPrefix $href "http" -}}
-    {{ $url = $href }}
+    {{- if $external -}}
+        {{ $url = $href }}
+    {{- else -}}
+    {{ $url = strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) $href }}
+    {{- end -}}
 {{- else if not (strings.Contains $href "/") -}}
    {{ $url = index site.Params.links $href }}
 {{- end -}}
@@ -65,7 +71,12 @@
    {{ end }}
 {{ end }}

-{{- $isExternal := ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host -}}
+{{ if and $external (not (hasPrefix $url "http")) }}
+    {{ errorf "External link must start with 'http': %s" .Position -}}
+    {{ $error = true -}}
+{{ end }}
+
+{{- $isExternal := or (ne (urls.Parse (absURL $url)).Host (urls.Parse site.BaseURL).Host) $external -}}
 {{- if not $isExternal -}}
    {{ $ref := partial "utilities/GetPage.html" (dict "url" $url "page" .Page) }}
    {{- if not $ref -}}
@@ -80,5 +91,5 @@

 <!-- Main code -->
 {{- if not $error -}}
-    {{ partial "assets/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "class" $class "page" .Page) }}
+    {{ partial "assets/link.html" (dict "destination" $url "text" $text "cue" $cue "tab" $tab "case" $case "external" $external "class" $class "page" .Page) }}
 {{- end -}}
--- a/netlify.toml
+++ b/netlify.toml
@@ -4,12 +4,12 @@
    command = "npm run build:example"

 [build.environment]
-    DART_SASS_VERSION = "1.72.0"
-    HUGO_VERSION = "0.124.0"
+    DART_SASS_VERSION = "1.77.0"
+    HUGO_VERSION = "0.125.7"
    HUGO_ENV = "production"
    HUGO_ENABLEGITINFO = "true"
-    NODE_VERSION = "18.19.1"
-    NPM_VERSION = "10.2.4"
+    NODE_VERSION = "18.20.2"
+    NPM_VERSION = "10.5.0"
 # toml-docs-end netlify

 [[headers]]
@@ -33,7 +33,7 @@
            font-src 'self' https://*.netlify.app https://fonts.gstatic.com; \
            frame-src 'self' https://www.youtube-nocookie.com https://www.youtube.com \
                app.netlify.com; \
-            img-src 'self' data: https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
+            img-src 'self' data: https://*.imgix.net https://*.imagekit.io https://*.cloudinary.com https://*.netlify.app https://i.vimeocdn.com https://i.ytimg.com https://*.google-analytics.com https://*.googletagmanager.com https://tile.openstreetmap.org; \
            manifest-src 'self'; \
            media-src 'self' \
            """
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.23.2",
+  "version": "0.24.0-beta3",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -67,28 +67,28 @@
  },
  "homepage": "https://gethinode.com",
  "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "@netlify/plugin-lighthouse": "^6.0.0",
-    "autoprefixer": "^10.4.18",
-    "cssnano": "^6.1.0",
-    "cssnano-preset-advanced": "^6.1.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.1",
+    "cssnano-preset-advanced": "^7.0.1",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.121.0",
-    "markdownlint-cli2": "^0.12.1",
+    "hugo-bin": "0.123.1",
+    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^11.0.0",
    "purgecss-whitelister": "^2.4.0",
    "replace-in-files-cli": "^2.2.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.7",
    "shx": "^0.3.4",
-    "stylelint": "^16.2.1",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "stylelint": "^16.6.0",
+    "stylelint-config-standard-scss": "^13.1.0"
  },
  "optionalDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",