Merge pull request #760 from gethinode/develop

Fix sidebar rendering

.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.
+// make tag-link and card-button clickable on top of the stretched-link.
-.card .tag-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/_default/baseof.html

@@ -1,31 +1,3 @@
-{{- define "partials/optional-scripts.html" -}}
-{{ $page_modules := slice }}
-{{ if reflect.IsMap .Params.modules }}
-    {{ $page_modules = .Params.modules }}
-{{ else }}
-    {{ $page_modules = $page_modules | append .Params.modules }}
-{{ end }}
-
-{{- $modules := site.Params.modules.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}}
-                {{- $skipTemplate = true -}}
-            {{- end -}}
-        {{- end -}}
-
-        {{ $state := "" }}
-        {{- with (index site.Params.modules $mod) -}}
-            {{- with index . "state" }}{{ $state = . }}{{ end -}}
-        {{- end -}}
-
-        {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
-    {{- end -}}
-{{- end -}}
-
 {{- /* Set version-aware sidebar menu */ -}}
 {{- $version := partial "utilities/GetVersion.html" (dict "page" . "base" true) -}}
 {{- $.Scratch.Set "version" $version -}}
@@ -99,6 +71,6 @@
 
         {{- partial "footer/toast-container.html" . -}}
         {{- partialCached "footer/scripts.html" (dict "header" false "page" . "core" true) }}
-        {{- partial "partials/optional-scripts.html" . -}}
+        {{- partial "footer/optional-scripts.html" . -}}
     </body>
 </html>

layouts/_default/single.html

@@ -1,29 +1,9 @@
-{{- define "partials/single-main.html" -}}
-    {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-    {{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" (dict "page" .) }}{{ end -}}
-
-    {{ .Render "single/header" }}
-
-    {{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
-        <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" (dict "page" .) }}</div>
-    {{- end -}}
-    {{ .Render "single/body" }}
-
-    {{ .Render "single/footer" }}
-{{ end -}}
-
 {{ define "main" -}}
-    {{- $menu := .Scratch.Get "sidebar" -}}
-    {{- $version := .Scratch.Get "version" -}}
     {{- $breakpoint := $.Scratch.Get "breakpoint" -}}
-
+    {{ $sidebar := .Render "single/sidebar" }}
-    {{ $sidebar := "" }}
-    {{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
-    {{ if and $menu $hasSidebar  }}{{ $sidebar = partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}{{ end }}
-
     {{ $toc := .Render "single/panel-toc" }}
 
-    {{ with $sidebar -}}
+    {{ with $sidebar }}
         <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-inledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
@@ -36,13 +16,13 @@
     {{ end }}
 
     <div class="container-xxl flex-fill p-4 px-xxl-0">
-        {{ if $hasSidebar -}}
+        {{ if $sidebar -}}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2 row-cols-{{ $breakpoint.next }}-3">
                 <div class="col col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.next }}-block sidebar-overflow sticky-top pt-5">
                     {{ $sidebar | safeHTML }}
                 </div>
                 <div class="col-12 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 mb-5 p-4">
-                    {{ partial "partials/single-main.html" . }}
+                    {{ .Render "single/main" }}
                 </div>
                 <div class="col col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 d-none d-{{ $breakpoint.current }}-block pt-5">
                     {{ $toc | safeHTML }}
@@ -51,7 +31,7 @@
         {{ else }}
             <div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
                 <div class="col col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.current }}-9">
-                    {{ partial "partials/single-main.html" . }}
+                    {{ .Render "single/main" }}
                 </div>
                 <div class="col col-{{ $breakpoint.current }}-3 d-none d-{{ $breakpoint.current }}-block">
                     {{ $toc | safeHTML }}

layouts/_default/single/main.html

@@ -0,0 +1,11 @@
+{{- $breakpoint := $.Scratch.Get "breakpoint" -}}
+{{ if .Site.Params.navigation.breadcrumb }}{{ partial "assets/breadcrumb.html" (dict "page" .) }}{{ end -}}
+
+{{ .Render "single/header" }}
+
+{{- if and .Site.Params.navigation.toc .Params.includeToc | default true -}}
+    <div class="d-{{ $breakpoint.current }}-none pb-5">{{ partial "assets/toc-dropdown.html" (dict "page" .) }}</div>
+{{- end -}}
+{{ .Render "single/body" }}
+
+{{ .Render "single/footer" }}

layouts/_default/single/sidebar.html

@@ -0,0 +1,7 @@
+{{- $menu := .Scratch.Get "sidebar" -}}
+{{- $version := .Scratch.Get "version" -}}
+{{ $sidebar := "" }}
+{{- $hasSidebar := .Site.Params.navigation.sidebar | default true -}}
+{{ if and $menu $hasSidebar  }}
+    {{ partial "assets/sidebar.html" (dict "page" . "menu" $menu "version" $version) }}
+{{ end }}

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">
+                    <div class="flex-fill">
-                        {{- partial "card-body.html" (dict "title" $title "href" $href "color" $color "description" $description) -}}
+                        {{- 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/partials/footer/optional-scripts.html

@@ -0,0 +1,25 @@
+{{ $page_modules := slice }}
+{{ if reflect.IsMap .Params.modules }}
+    {{ $page_modules = .Params.modules }}
+{{ else }}
+    {{ $page_modules = $page_modules | append .Params.modules }}
+{{ end }}
+
+{{- $modules := site.Params.modules.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}}
+            {{- $skipTemplate = true -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{ $state := "" }}
+    {{- with (index site.Params.modules $mod) -}}
+        {{- with index . "state" }}{{ $state = . }}{{ end -}}
+    {{- end -}}
+
+    {{- partial "footer/scripts.html" (dict "filename" $filename "match" $match "header" false "skipTemplate" $skipTemplate "state" $state "page" .) }}
+{{- 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-beta3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha8",
+      "version": "0.23.0-beta3",
       "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-beta3",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",