Merge pull request #757 from gethinode/develop

Add optional button to card

.github/workflows/lint-build.yml

@@ -41,7 +41,10 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest, windows-latest, ubuntu-latest]
+        os: [windows-latest, ubuntu-latest]
+        # 2024-02-07: temp disabled macOS due to Dart Sass installation error
+        # see https://github.com/sass/homebrew-sass/issues/57 
+        # 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]
 
@@ -82,7 +85,7 @@ jobs:
     # Cache Hugo cachedir and resourcedir (configured in config/ci/hugo.toml) for each OS
     # No additional cache invalidation is needed, Hugo uses checksums itself
     - name: Use Hugo cache
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: ${{ runner.os == 'Windows' && env.CACHE_PATH_WIN || runner.os == 'macOS' && env.CACHE_PATH_MAC || env.CACHE_PATH_DEBIAN }}
         key: ${{ runner.os }}-${{ env.CACHE_KEY }}

assets/scss/components/_card.scss

@@ -86,8 +86,8 @@
 
 // stylelint-enable annotation-no-unknown
 
-// make tag-link clickable on top of the stretched-link.
-.card .tag-link {
+// make tag-link and card-button clickable on top of the stretched-link.
+.card .tag-link, .card .card-button {
     z-index: 2;
     position: relative;
 }

data/structures/card.yml

@@ -193,6 +193,13 @@ arguments:
     optional: true
     release: v0.23.0-alpha2
     comment: Apply subtle background colors.
+  button:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.23.0-beta
+    comment: >-
+      Flag indicating the cards should include a button that links to the provided address.
 body:
   optional: true
   comment: >-

exampleSite/content/en/blog/bootstrap-elements.md

@@ -125,7 +125,8 @@ As an example, the following shortcode displays a stacked card that links to the
 
 <!-- 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 -->
 

exampleSite/hugo_stats.json

@@ -102,6 +102,7 @@
       "card-body",
       "card-body-link",
       "card-body-margin",
+      "card-button",
       "card-emphasize",
       "card-icon",
       "card-img-top",
@@ -332,12 +333,14 @@
       "ps-1",
       "ps-3",
       "ps-xl-3",
+      "pt-1",
       "pt-5",
       "pt-md-3",
       "ptw-3",
       "ptw-5",
       "ptw-lg-5",
       "ptw-sm-4",
+      "px-2",
       "px-4",
       "px-xxl-0",
       "py-1",

i18n/en.yaml

@@ -29,6 +29,8 @@
   translation: "No articles found"
 - id: emptyTags
   translation: "No tags found"
+- id: readMore
+  translation: "Read more"
 
 # Languages
 - id: lang_de

i18n/nl.yaml

@@ -27,6 +27,8 @@
   translation: "Geen artikelen gevonden"
 - id: emptyTags
   translation: "Geen tags gevonden"
+- id: readMore
+  translation: "Lees meer"
 
 # Languages
 - id: lang_de

layouts/partials/assets/card-group.html

@@ -31,6 +31,7 @@
 {{- $align := .align -}}
 {{- $subtle := .subtle }}
 {{- $loading := .loading -}}
+{{- $button := .button -}}
 
 <!-- Override arguments -->
 {{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
@@ -101,6 +102,7 @@
                 "subtle" $subtle
                 "style" $style
                 "align" $align
+                "button" $button
             ) -}}
             {{- $params = merge $params $element }}
 

layouts/partials/assets/card.html

@@ -29,6 +29,7 @@
 {{- $thumbnail := .thumbnail -}}
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
+{{- $button := .button -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
     {{ if $subtle }}
@@ -69,6 +70,7 @@
     {{- $href := .href -}}
     {{- $color := .color -}}
     {{- $description := .description -}}
+    {{- $button := .button -}}
     
     {{- if $href -}}
         <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
@@ -120,7 +122,7 @@
 {{- if hasPrefix $orientation "horizontal" -}}
     <!-- Render horizontal card -->
     <div class="card {{ $colorStyle }} {{ $class }}">
-        <div class="row g-0 row-cols-1 h-100">
+        <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 "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "1x1") "wrapper" "h-100 card-img-wrap" "class" "rounded-start card-img-h100" "title" $title "loading" $loading) -}}
@@ -131,12 +133,15 @@
                 {{- end -}}
             </div>
             <div class="{{ if eq $orientation "horizontal-sm" }}col-8 col-md-10{{ else }}col-8{{ end }}">
-                <div class="card-body d-flex p-{{ $padding }} flex-column h-100">
+                <div class="card-body d-flex p-{{ $padding }} flex-column h-100 flex-fill">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
-                    <div class="h-100">
-                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                    <div class="flex-fill">
+                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description "button" $button) -}}
                     </div>
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
+                    {{ if $button }}
+                        <div>{{ partial "assets/button.html" (dict "title" (T "readMore") "href" $href "outline" true "size" "sm" "class" "card-button mb-n4") }}</div>
+                    {{ end }}
                 </div>
             </div>
         </div>
@@ -156,6 +161,14 @@
             {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
             {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
         </div>
+        {{ if $button }}
+            <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" (T "readMore") "href" $href "outline" true "size" "sm" "class" "card-button") }}
+                </div>
+            </div>
+        {{ end }}
     </div>
 {{- end -}}
 

layouts/shortcodes/card-group.html

@@ -27,6 +27,7 @@
 {{- $align := .Get "align" | default "start" -}}
 {{- $style := .Get  "style" | default "" -}}
 {{- $subtle := .Get "subtle" | default false -}}
+{{- $button := .Get "button" | default false -}}
 
 {{ $inner := .Scratch.Get "inner" }}
 {{ $input := trim .Inner " \r\n" }}
@@ -51,5 +52,9 @@
     "header" $header
     "footer" $footer
     "orientation" $orientation
+    "align" $align
+    "style" $style
+    "subtle" $subtle
+    "button" $button
     ) 
 -}}

layouts/shortcodes/card.html

@@ -32,6 +32,7 @@
 {{- $path := .Get "path" -}}
 {{- $thumbnail := .Get "thumbnail" -}}
 {{- $title := .Get "title" -}}
+{{- $button := partial "utilities/GetArgParent" (dict "page" . "arg" "button") | default false -}}
 
 <!-- Override arguments -->
 {{ if $path }}
@@ -68,6 +69,7 @@
         "thumbnail" $thumbnail
         "loading" $loading
         "alt" $alt
+        "button" $button
     ) -}}
 
     <!-- Pass output to parent or current stream -->

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha8",
+  "version": "0.23.0-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha8",
+      "version": "0.23.0-beta",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha8",
+  "version": "0.23.0-beta",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",