Merge pull request #931 from gethinode/develop

Fix button layout of type link in horizontal stack

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

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

data/structures/card-group.yml

@@ -103,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,6 +206,17 @@ 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

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.

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,6 +105,7 @@
       "card-body-link",
       "card-body-margin",
       "card-button",
+      "card-button-link",
       "card-emphasize",
       "card-icon",
       "card-img-bg",

layouts/partials/assets/button.html

@@ -84,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 -}}
@@ -93,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,6 +33,7 @@
 {{- $loading := .loading -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $hook := .hook | default "assets/card.html" }}
 
 <!-- Override arguments -->
@@ -137,6 +138,7 @@
                 "align" $align
                 "button" $button
                 "buttonLabel" $buttonLabel
+                "buttonType" $buttonType
             ) -}}
             {{- $params = merge $params $element }}
 

layouts/partials/assets/card.html

@@ -32,6 +32,7 @@
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
 {{- $buttonLabel := .buttonLabel -}}
+{{- $buttonType := .buttonType -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
     {{ if $subtle }}
@@ -148,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>
@@ -174,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/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/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 -->

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.16",
+  "version": "0.23.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.16",
+      "version": "0.23.19",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
@@ -27,7 +27,7 @@
         "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.5.0",
         "stylelint-config-standard-scss": "^13.1.0"
@@ -8124,9 +8124,9 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
-      "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.7.tgz",
+      "integrity": "sha512-nV6YcJo5wbLW77m+8KjH8aB/7/rxQy9SZ0HY5shnwULfS+9nmTtVXAJET5NdZmCzA4fPI/Hm1wo/Po/4mopOdg==",
       "dev": true,
       "dependencies": {
         "glob": "^10.3.7"
@@ -8135,7 +8135,7 @@
         "rimraf": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=14.18"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.16",
+  "version": "0.23.19",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -85,7 +85,7 @@
     "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.5.0",
     "stylelint-config-standard-scss": "^13.1.0"