Merge pull request #935 from gethinode/develop

Improve handling of links that include the site's base URL

.github/workflows/lint-build.yml

@@ -41,7 +41,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-12, windows-latest, ubuntu-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
         node-version: [18.x, 20.x]
 
@@ -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:

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

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;
@@ -91,3 +95,7 @@
     z-index: 2;
     position: relative;
 }
+
+.card-button-link {
+    text-decoration: underline if($enable-important-utilities, !important, null);
+}

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

assets/scss/components/_navbar.scss

@@ -140,7 +140,7 @@
     white-space: normal;
     text-align: center !important;
     vertical-align: middle;
-    padding: 0 $spacer 0 $spacer;
+    padding: 0 $spacer;
     width: 100% !important;
 }
 

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

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

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: >-

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

data/structures/navbar.yml

@@ -118,6 +118,7 @@ arguments:
       values:
         - light
         - dark
+        - none
     group: partial
     release: v0.23.0
   logo:

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" /*/>}}

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",
@@ -301,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",

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-bootstrap v1.2.8 // indirect
-	github.com/gethinode/mod-flexsearch v1.11.1 // indirect
+	github.com/gethinode/mod-flexsearch v1.11.3 // indirect
-	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
+	github.com/gethinode/mod-fontawesome v1.8.2 // indirect
-	github.com/gethinode/mod-katex v1.0.7 // indirect
+	github.com/gethinode/mod-katex v1.0.9 // indirect
-	github.com/gethinode/mod-leaflet v1.0.0 // indirect
+	github.com/gethinode/mod-leaflet v1.0.1 // indirect
-	github.com/gethinode/mod-lottie v1.4.4 // indirect
+	github.com/gethinode/mod-lottie v1.4.6 // indirect
-	github.com/gethinode/mod-utils/v2 v2.1.1 // indirect
+	github.com/gethinode/mod-utils/v2 v2.2.2 // indirect
 	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.3+incompatible // indirect
 )

go.sum

@@ -16,6 +16,10 @@ 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-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=
@@ -58,6 +62,8 @@ github.com/gethinode/mod-flexsearch v1.11.0 h1:CQArPhjQRtIZqAK4ysOiBzAB1hi//L4RT
 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-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=
@@ -94,6 +100,8 @@ 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-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=
@@ -108,6 +116,10 @@ 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-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=
@@ -122,6 +134,8 @@ 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-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=
@@ -144,6 +158,8 @@ 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-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=
@@ -166,6 +182,8 @@ 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/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=

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

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 -}}
+        {{ if eq $state "disabled" }}aria-disabled="true"{{ end -}}
-        {{- else }} class="link-{{ $color }} position-relative {{ $class }}"{{ 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>

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 .max }}
+    {{ 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" -}}
+{{- if eq $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 -}}
+    {{ $colGrid = "row-cols-1" -}}
-{{- 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 "2" }}
-{{- 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 -}}
+    {{ if $responsive }}
-{{- 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 -}}
+        {{ $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 }}
 

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 class="d-flex align-items-end">{{ 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)) -}}
@@ -173,7 +187,17 @@
             <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 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 }}">
-                    {{ partial "assets/button.html" (dict "title" $label "href" $href "outline" true "size" "sm" "class" "card-button") }}
+                    {{ $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 }}

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

layouts/partials/assets/image.html

@@ -35,6 +35,8 @@
 {{- $lazy := eq $loading "lazy" -}}
 {{- $priority := .priority -}}
 {{- if eq $priority "auto" }}{{ $priority = "" }}{{ end -}}
+{{- $sizes := .sizes | default "100vw" -}}
+
 
 {{- define "partials/image-portrait.html" -}}
     {{- $dimensions := slice }}
@@ -168,6 +170,7 @@
     {{- $modes := .modes -}}
     {{- $lazy := .lazy -}}
     {{- $page := .page -}}
+    {{- $sizes := .sizes -}}
     {{- $priority := .priority -}}
     {{- $isVector := false -}}
 
@@ -235,7 +238,7 @@
                 src="{{ $fallbackURL }}"
                 {{ if $lazy }}loading="lazy"{{ end }}
                 {{ with $priority }}fetchpriority="{{ . }}"{{ end }}
-                {{ with $imgset -}}srcset="{{ . }}" sizes="100vw"{{- end }}
+                {{ with $imgset -}}srcset="{{ . }}" sizes="{{ $sizes }}"{{- end }}
                 {{ with $height }}height="{{ . }}"{{ end }}
                 {{ with $width }}width="{{ . }}"{{ end }}
                 {{ with $title }}alt="{{ . }}"{{ end }}>
@@ -263,6 +266,7 @@
     "figclass" $figclass
     "lazy" $lazy
     "priority" $priority
+    "sizes" $sizes
     "page" $page)
 -}}
 

layouts/partials/assets/link.html

@@ -13,7 +13,7 @@
 {{ end }}
 
 <!-- Initialize arguments -->
-{{ $destination := .destination }}
+{{ $destination := strings.TrimPrefix (strings.TrimSuffix "/" site.BaseURL) .destination }}
 
 {{- $target := "" -}}
 {{- $rel := "" -}}

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 -}}
@@ -203,8 +204,8 @@
                     <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-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <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-light" 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 }}>

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

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" 
@@ -36,7 +37,7 @@
         -}}
     </div>
 
-    <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+    <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 }}
@@ -45,7 +46,9 @@
         </div>
     </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">

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

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

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">
+                {{ $newWidth := $width }}
-                    {{ partial "partials/list/featured-illustration.html" (dict "page" $page "style" "pb-4 pb-md-0") }}
+                {{ 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 }}

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
     ) 
 -}}

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

layouts/shortcodes/link.html

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

netlify.toml

@@ -4,12 +4,12 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.72.0"
+    DART_SASS_VERSION = "1.77.0"
-    HUGO_VERSION = "0.124.0"
+    HUGO_VERSION = "0.125.7"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
-    NODE_VERSION = "18.19.1"
+    NODE_VERSION = "18.20.2"
-    NPM_VERSION = "10.2.4"
+    NPM_VERSION = "10.5.0"
 # toml-docs-end netlify
 
 [[headers]]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.8",
+  "version": "0.23.20",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -71,23 +71,23 @@
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",
     "@netlify/plugin-lighthouse": "^6.0.0",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^6.1.2",
+    "cssnano": "^7.0.1",
-    "cssnano-preset-advanced": "^6.1.2",
+    "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.122.3",
+    "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.4.0",
+    "stylelint": "^16.5.0",
     "stylelint-config-standard-scss": "^13.1.0"
   },
   "optionalDependencies": {