Merge pull request #765 from gethinode/develop

Refactor navbar to use color themes in overlay mode

.github/workflows/lint-build.yml

@@ -82,7 +82,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 }}

README.md

@@ -75,6 +75,14 @@ The installation instructions in this readme install Hinode as a regular Hugo th
 
 ## Installation
 
+<!-- markdownlint-disable MD033 -->
+<details>
+<summary>Installation notes for Windows</summary>
+
+The installation for Windows requires PowerShell v7. Download it from the Microsoft Store as needed. Check your current version with the command `$PSVersionTable`.
+</details>
+<!-- markdownlint-enable MD033 -->
+
 Start a new Hinode project in three steps:
 
 1. **Create a new site**
@@ -83,14 +91,15 @@ Start a new Hinode project in three steps:
     hugo new site my-hinode-site && cd my-hinode-site
     ```
 
-1. **Initialize the module system**
+2. **Initialize the module system**
 
     ```bash
     hugo mod init example.com/my-hinode-site
-    echo "[[module.imports]]\npath = 'github.com/gethinode/hinode'" >> hugo.toml
+    echo "[[module.imports]]" >> hugo.toml
+    echo "path = 'github.com/gethinode/hinode'" >> hugo.toml
     ```
 
-1. **Start a development server**
+3. **Start a development server**
 
     ```bash
     hugo server

assets/js/navbar.js

@@ -13,8 +13,12 @@ if (navbar !== null && togglers !== null) {
   window.onscroll = () => {
     if (window.scrollY > 75) {
       navbar.classList.add('nav-active')
+      const storedTheme = localStorage.getItem('theme')
+      navbar.setAttribute('data-bs-theme', storedTheme)
     } else {
       navbar.classList.remove('nav-active')
+      const defaultTheme = navbar.getAttribute('data-bs-overlay')
+      navbar.setAttribute('data-bs-theme', defaultTheme)
     }
   }
 

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

assets/scss/components/_navbar.scss

@@ -5,6 +5,7 @@
 
 .navbar {
     --bs-navbar-expanded-color: var(--bs-body-bg);
+    --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
 
     transition: 0.5s ease-in-out;
     background-color: transparent;
@@ -16,6 +17,7 @@
 
 .nav-active, .navbar-expanded {
     background-color: var(--bs-navbar-expanded-color);
+    border-bottom: 1px solid var(--bs-secondary-bg);
 }
 
 .nav-link {
@@ -32,32 +34,13 @@
     --bs-navbar-hover-color: white !important;
     --bs-navbar-disabled-color: white !important;
     --bs-navbar-active-color: white !important;
+    --bs-navbar-toggler-color: white;
 }
 
 .navbar-expanded {
     box-shadow: $box-shadow-sm;
 }
 
-.navbar-overlay-dark {
-    --bs-navbar-color: #{$navbar-dark-color};
-    --bs-navbar-hover-color: #{$navbar-dark-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-dark-disabled-color};
-    --bs-navbar-active-color: #{$navbar-dark-active-color};
-    --bs-navbar-brand-color: #{$navbar-dark-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-}
-
-.navbar-overlay-light, .navbar-overlay-dark.nav-active, .navbar-overlay-dark.navbar-expanded {
-    --bs-navbar-color: #{$navbar-light-color};
-    --bs-navbar-hover-color: #{$navbar-light-hover-color};
-    --bs-navbar-disabled-color: #{$navbar-light-disabled-color};
-    --bs-navbar-active-color: #{$navbar-light-active-color};
-    --bs-navbar-brand-color: #{$navbar-light-brand-color};
-    --bs-navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-    --bs-navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-}
-
 .nav-item .vr {
     color: var(--bs-navbar-color);
 }
@@ -128,19 +111,11 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
 }
 
-.emphasis-light {
+.emphasis, .emphasis-dark, .emphasis-light {
-    background-color: $black if($enable-important-utilities, !important, null);
+    background-color: var(--bs-navbar-toggler-color);
-}
-
-.emphasis-dark {
-    background-color: $white if($enable-important-utilities, !important, null);
-}
-
-.emphasis {
-    background-color: $black if($enable-important-utilities, !important, null);
 }
 
 @include color-mode(dark) {

config/_default/hugo.toml

@@ -135,5 +135,5 @@ home = ["HTML", "RSS", "REDIR"]
   [[module.imports]]
     path = "github.com/gethinode/mod-lottie"
   [[module.imports]]
-    path = "github.com/gethinode/mod-utils"
+    path = "github.com/gethinode/mod-utils/v2"
 # toml-docs-end modules

config/_default/params.toml

@@ -24,6 +24,9 @@
     disableTemplate = ["katex"]
     [modules.katex]
         state = "defer"
+    [modules.flexsearch]
+        frontmatter = false
+        filter = ""
     [modules.fontawesome]
         inline = true
         debug = true

data/structures/card-group.yml

@@ -43,6 +43,8 @@ arguments:
     optional: true
     comment: Maximum number of cards to display.
     group: partial
+    options:
+      min: 1
   cols:
     type: select
     optional: true

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/config/_default/params.toml

@@ -20,6 +20,9 @@
     disableTemplate = ["katex"]
     [modules.katex]
         state = "defer"
+    [modules.flexsearch]
+        frontmatter = false
+        filter = ""
     [modules.fontawesome]
         inline = true
         debug = true
@@ -129,7 +132,7 @@
         padding = "3"
         header = "none"
         footer = "tags"
-        orientation = "horizontal-sm"
+        orientation = "horizontal"
         style = "border-1 card-emphasize"
         homepage = 3
         separator = false

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

@@ -15,6 +15,7 @@
       "form",
       "h2",
       "h3",
+      "h5",
       "head",
       "hr",
       "html",
@@ -102,6 +103,7 @@
       "card-body",
       "card-body-link",
       "card-body-margin",
+      "card-button",
       "card-emphasize",
       "card-icon",
       "card-img-top",
@@ -126,11 +128,13 @@
       "col-3",
       "col-4",
       "col-6",
+      "col-8",
       "col-9",
       "col-auto",
       "col-lg-2",
       "col-lg-4",
       "col-lg-8",
+      "col-md-10",
       "col-md-2",
       "col-md-3",
       "col-md-4",
@@ -275,6 +279,7 @@
       "ms-md-3",
       "mt-2",
       "mt-3",
+      "mt-4",
       "mt-5",
       "mt-auto",
       "multi-docs-collapse-15",
@@ -303,6 +308,11 @@
       "navbar-toggler",
       "next",
       "no-js",
+      "offcanvas",
+      "offcanvas-body",
+      "offcanvas-header",
+      "offcanvas-start",
+      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -329,12 +339,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",
@@ -514,6 +526,8 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "offcanvas-label",
+      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",

go.mod

@@ -5,12 +5,12 @@ go 1.19
 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
 	github.com/gethinode/mod-bootstrap v1.2.2 // indirect
-	github.com/gethinode/mod-flexsearch v1.8.1 // indirect
+	github.com/gethinode/mod-flexsearch v1.9.0 // indirect
-	github.com/gethinode/mod-fontawesome v1.8.0 // indirect
+	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
 	github.com/gethinode/mod-katex v1.0.5 // indirect
-	github.com/gethinode/mod-leaflet v0.4.0 // indirect
+	github.com/gethinode/mod-leaflet v1.0.0 // indirect
-	github.com/gethinode/mod-lottie v1.4.1 // indirect
+	github.com/gethinode/mod-lottie v1.4.2 // indirect
-	github.com/gethinode/mod-utils v1.0.3 // indirect
+	github.com/gethinode/mod-utils/v2 v2.0.3 // indirect
-	github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22 // indirect
+	github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 // indirect
 	github.com/twbs/bootstrap v5.3.2+incompatible // indirect
 )

go.sum

@@ -44,6 +44,8 @@ github.com/gethinode/mod-flexsearch v1.8.0 h1:rKu9ackmbGAD/CRJYUDUhy/3nDCEj0IgYD
 github.com/gethinode/mod-flexsearch v1.8.0/go.mod h1:TXbGbWsvmhBdsTzRt887mcpFfr4ORpzG3+h/l4W3YM4=
 github.com/gethinode/mod-flexsearch v1.8.1 h1:xwPvmmxd8Tdyxp8/rnd9KRGqIDtZs/YwAQJ1i9oQMiM=
 github.com/gethinode/mod-flexsearch v1.8.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.9.0 h1:AE+w7QeZTxh36JNTG+CASDLxaqlCZKn+EUD6ulnPGak=
+github.com/gethinode/mod-flexsearch v1.9.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=
@@ -78,6 +80,8 @@ github.com/gethinode/mod-fontawesome v1.7.3 h1:YzRCYSasVRIcImVmTJYjqNJ+KmyNWfm/b
 github.com/gethinode/mod-fontawesome v1.7.3/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.8.0 h1:YEuCmvCdzcemF1eFK35Wnp1asKKO3/xbxGArnjq6PRY=
 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-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 +106,8 @@ github.com/gethinode/mod-leaflet v0.3.5 h1:69Bv/6zRXhbcTzo7TMr58h3ry47srHRpM1k81
 github.com/gethinode/mod-leaflet v0.3.5/go.mod h1:uGggt87x4Fw7wBoJpSiUvNkYg+s/Ujne7klAX2rxMRk=
 github.com/gethinode/mod-leaflet v0.4.0 h1:Xc6c1UTf4m1saQLFfFWT5sEpwj25xVGuS8csGC82UUI=
 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-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=
@@ -118,6 +124,8 @@ github.com/gethinode/mod-lottie v1.4.0 h1:0Ls1Q/8p0gQpuX9+dtfNGKcjBNeymjE7gERdnN
 github.com/gethinode/mod-lottie v1.4.0/go.mod h1:57eu6glS5oxkew2dB1P2zsbhw444aRX0XfuyDe7k/dk=
 github.com/gethinode/mod-lottie v1.4.1 h1:RzCjYsxFPqyBsYAcdPeUP0rvF+hD9eEl7NrxuaRiKQQ=
 github.com/gethinode/mod-lottie v1.4.1/go.mod h1:QjKlEmYbekrNGwa9EdFlPcXxwWWcraJUQ6xIL+syA60=
+github.com/gethinode/mod-lottie v1.4.2 h1:rHBhbMVRlkVMxVY+3g1u2kolDv695uL8Zur4mDeoIO8=
+github.com/gethinode/mod-lottie v1.4.2/go.mod h1:H6y1e3/2bBR1ujuM5N1iY39kpyN3RtcSRahX90+tlQI=
 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=
@@ -126,9 +134,21 @@ github.com/gethinode/mod-utils v1.0.2 h1:0b3i+/bBHY1Td9N6khDbL1nf3d5HGc4QzI4BbEW
 github.com/gethinode/mod-utils v1.0.2/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
 github.com/gethinode/mod-utils v1.0.3 h1:FF6lnam0Bcdj7G1E5P+qi5ByPrl1npL+3uS5YoPx1C0=
 github.com/gethinode/mod-utils v1.0.3/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils v1.0.4 h1:Lr7hAVaWHv0O5TJXhRHGhvlOvWwIATJm9mpLQhCsopM=
+github.com/gethinode/mod-utils v1.0.4/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils v1.1.0 h1:a82h/DQTKc5hxf/ExDoZqJCJmVLT0dtyU8tf78yOPFw=
+github.com/gethinode/mod-utils v1.1.0/go.mod h1:ONJm3pHCq7nvaPNjusLZNCeCbhOhSBH4HVKHwK1FdYE=
+github.com/gethinode/mod-utils/v2 v2.0.1 h1:yy8Qaytrk55YNMzyldYKDWJr6mpQs7s7TWBkSYRMBng=
+github.com/gethinode/mod-utils/v2 v2.0.1/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.0.2 h1:pocFT/mWPcfmABltZwe76D1IB3TZIrD1k1kH9zCDO1M=
+github.com/gethinode/mod-utils/v2 v2.0.2/go.mod h1:GTYeknoLujNjfDxI+V9Dcug26CYJSTJ0B/U2dagw9oY=
+github.com/gethinode/mod-utils/v2 v2.0.3 h1:4BsRNGi+0a3Mq021Gq/TwDNiyuIfZ8xnpYU0DkNbUYI=
+github.com/gethinode/mod-utils/v2 v2.0.3/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=
 github.com/nextapps-de/flexsearch v0.0.0-20240108021025-afd75f742f22/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
+github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85 h1:H6xa5YyCHr78M+qqCApM4Kvz/eMA7pfGskYmfkEBRCA=
+github.com/nextapps-de/flexsearch v0.0.0-20240110101704-4c3966709f85/go.mod h1:5GdMfPAXzbA2gXBqTjC6l27kioSYzHlqDMh0+wyx7sU=
 github.com/twbs/bootstrap v5.3.2+incompatible h1:tuiO5acc6xnZUR77Sbi5aKWXxjYxbmsSbJwYrhAKoQQ=
 github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

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/breadcrumb.html

@@ -16,18 +16,20 @@
 {{ $page := .page }}
 
 <!-- Main code -->
-<nav aria-label="breadcrumb">
+{{ if not $error }}
-    <ol class="breadcrumb">
+    <nav aria-label="breadcrumb">
-        {{- range $index, $item := $page.Ancestors.Reverse -}}
+        <ol class="breadcrumb">
-            {{- $title := .LinkTitle -}}
+            {{- range $index, $item := $page.Ancestors.Reverse -}}
-            {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
+                {{- $title := .LinkTitle -}}
-            {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
+                {{- if .IsHome }}{{ $title = T "home" }}{{ end -}} 
-            {{ if $address }}
+                {{- $address := or .RelPermalink (.Params.Redirect | relLangURL) -}}
-                <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
+                {{ if $address }}
-            {{ else }}
+                    <li class="breadcrumb-item"><a href="{{ $address }}">{{ $title }}</a></li>
-                <li class="breadcrumb-item">{{ $title }}</li>
+                {{ else }}
-            {{ end }}
+                    <li class="breadcrumb-item">{{ $title }}</li>
-        {{- end -}}
+                {{ end }}
-        <li class="breadcrumb-item active" aria-current="page">{{ $page.LinkTitle }}</li>
+            {{- end -}}
-    </ol>
+            <li class="breadcrumb-item active" aria-current="page">{{ $page.LinkTitle }}</li>
-</nav>
+        </ol>
+    </nav>
+{{ end }}

layouts/partials/assets/button.html

@@ -16,8 +16,8 @@
 {{- $title := trim .title " \r\n" -}}
 {{- $icon := .icon }}
 {{- if not (or $title $icon) -}}
-    {{- errorf "partial [assets/button.html] - Missing element title or icon" -}}
+    {{- warnf "partial [assets/button.html] - Missing element title or icon" -}}
-    {{ $error = true }}
+    {{ $title = T "linkPlaceholder" }}
 {{- end -}}
 
 {{- $id := .id }}

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) }}
@@ -53,7 +54,7 @@
             {{- $params = merge $params (dict
                 "title" $element.Title
                 "href" $element.RelPermalink
-                "description" (partial "utilities/GetDescription.html" $element)
+                "description" (partial "utilities/GetDescription.html" (dict "page" $element "raw" true))
                 "thumbnail" $thumbnail
                 "icon" $element.Params.icon
             ) -}}
@@ -101,6 +102,7 @@
                 "subtle" $subtle
                 "style" $style
                 "align" $align
+                "button" $button
             ) -}}
             {{- $params = merge $params $element }}
 
@@ -122,7 +124,7 @@
         {{- end -}} 
     {{ else }}
         {{ if and (gt $count $max) $moreTitle }}
-            <a class="btn btn-outline-primary" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
+            <a class="btn btn-outline-primary mt-4" href="{{ $moreURL| safeURL }}" role="button">{{ $moreTitle }}</a>
         {{ end }}
     {{ end }}
 </div>

layouts/partials/assets/card.html

@@ -24,11 +24,12 @@
 {{- $style := .style | default "" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
-{{- $padding := .padding | default "auto" -}}
+{{- $padding := (string .padding) | default "auto" -}}
 {{- $ratio := .ratio -}}
 {{- $thumbnail := .thumbnail -}}
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
+{{- $button := .button -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
     {{ if $subtle }}
@@ -49,7 +50,7 @@
 {{- with $page -}}
     {{- if not $title }}{{ $title = .Title }}{{ end -}}
     {{- if not $href }}{{ $href = .RelPermalink  }}{{ end -}}
-    {{- if not $description }}{{ $description = partial "utilities/GetDescription.html" . }}{{ end -}}
+    {{- if not $description }}{{ $description = partial "utilities/GetDescription.html" (dict "page" .) }}{{ end -}}
     {{- if not $thumbnail }}{{ $thumbnail = (or (and (reflect.IsMap .Params.Thumbnail) .Params.Thumbnail.url) .Params.Thumbnail) }}{{ end -}}
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
@@ -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,8 +122,8 @@
 {{- 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-2{{ else }}col-4{{ 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) -}}
                 {{- else if $icon -}}
@@ -130,13 +132,16 @@
                     </div>
                 {{- end -}}
             </div>
-            <div class="{{ if eq $orientation "horizontal-sm" }}col-10{{ else }}col-8{{ end }}">
+            <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/assets/nav.html

@@ -73,7 +73,7 @@
                             "title" $item.Title
                             "class" $class
                             "color" $color
-                            "content" (partial "utilities/GetDescription.html" $item)
+                            "content" (partial "utilities/GetDescription.html" (dict "page" $item))
                             "thumbnail" $thumbnail
                         ) -}}
                     {{- else -}}

layouts/partials/assets/navbar.html

@@ -173,10 +173,13 @@
 <div class="container-fluid {{ if $fixed }}fixed-top{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
     {{- partial "assets/page-alert.html" (dict "page" $page) -}}
     <nav class="navbar p-4
-        {{ if $overlay }}navbar-overlay-{{ $overlayMode }}{{ else }}{{ with $color }}bg-{{ . }}{{ end }}{{ end }}
+        {{- if not $overlay }}{{ with $color }} bg-{{ . }}{{ end }}{{ end -}}
-        {{ if $fixed }}navbar-fixed-top{{ end }} navbar-expand-{{ $size }}
+        {{ if $fixed }} navbar-fixed-top{{ end }} navbar-expand-{{ $size -}}
-        {{ if $contrast }}navbar-contrast{{ end }}"
+        {{ if $contrast }} navbar-contrast{{ end }}"
-        {{ with $theme }}data-bs-theme="{{ . }}"{{ end }}
+        {{ if $overlay }}
+        data-bs-theme="{{ $overlayMode }}"
+        data-bs-overlay="{{ $overlayMode }}"
+        {{ else }}{{ with $theme }}data-bs-theme="{{ . }}"{{ end }}{{ end }}
         {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
         >
         <div class="container-xxl p-0">

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/partials/head/seo.html

@@ -7,7 +7,7 @@
     {{ $.Scratch.Set "title" .Site.Title -}}
 {{ end -}}
 
-{{ $description := or (partial "utilities/GetDescription.html" .) .Site.Params.main.description }}
+{{ $description := or (partial "utilities/GetDescription.html" (dict "page" .)) .Site.Params.main.description }}
 {{ if gt (strings.RuneCount $description) 150 }}
     {{ $description = print (substr $description 0 150) "..." }}
 {{ 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 -->

netlify.toml

@@ -4,8 +4,8 @@
     command = "npm run build:example"
 
 [build.environment]
-    DART_SASS_VERSION = "1.69.7"
+    DART_SASS_VERSION = "1.70.0"
-    HUGO_VERSION = "0.121.1"
+    HUGO_VERSION = "0.122.0"
     HUGO_ENV = "production"
     HUGO_ENABLEGITINFO = "true"
     NODE_VERSION = "18.19.0"

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha3",
+  "version": "0.23.0-beta4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha3",
+      "version": "0.23.0-beta4",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "@gethinode/netlify-plugin-dartsass": "^0.2.0",
-        "@netlify/plugin-lighthouse": "^5.0.0",
+        "@netlify/plugin-lighthouse": "^6.0.0",
         "autoprefixer": "^10.4.17",
         "cssnano": "^6.0.3",
         "cssnano-preset-advanced": "^6.0.3",
@@ -20,7 +20,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-n": "^16.6.2",
         "eslint-plugin-promise": "^6.1.1",
-        "hugo-bin": "^0.118.1",
+        "hugo-bin": "^0.119.0",
         "markdownlint-cli2": "^0.12.1",
         "netlify-plugin-hugo-cache-resources": "^0.2.1",
         "npm-run-all": "^4.1.5",
@@ -562,9 +562,9 @@
       }
     },
     "node_modules/@netlify/plugin-lighthouse": {
-      "version": "5.0.0",
+      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@netlify/plugin-lighthouse/-/plugin-lighthouse-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@netlify/plugin-lighthouse/-/plugin-lighthouse-6.0.0.tgz",
-      "integrity": "sha512-tCaoVYxCU3OB592vChtFkANzUL4kDUNaIk9VCGp3qBecBnH+yFrILUlcqy2d08Is4ecstjTacyHqV+ixKbNYGQ==",
+      "integrity": "sha512-Uqqy9A7huuDT+1RIBWDoWhp+ntlLE1ibp1jXFpiizWy8QProWkLm8E7PFLu0Bf+aAwgjV2eJPj6ocIbk+jBANQ==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
@@ -577,7 +577,7 @@
         "puppeteer": "^18.0.0"
       },
       "engines": {
-        "node": ">=14.15 <20"
+        "node": ">=18.14.0"
       }
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -4365,9 +4365,9 @@
       "dev": true
     },
     "node_modules/hugo-bin": {
-      "version": "0.118.1",
+      "version": "0.119.0",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.118.1.tgz",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.119.0.tgz",
-      "integrity": "sha512-WIS4kLNySb5u2+iwk//N7ClLUCksmyjvqdkGQTFc5v7Bqjpn1yLcIIBWwxU3R4SBc2Lr772/auxlzzsRffGbVA==",
+      "integrity": "sha512-RnjlxHKdOjo7i7yRX/001t53142tC9NTa5JVrnPCTpX2kNQQCz5XdI/WWX7emf0dNkxipj55Z58EsA2ft9W16g==",
       "dev": true,
       "funding": [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha3",
+  "version": "0.23.0-beta4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -69,7 +69,7 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "@gethinode/netlify-plugin-dartsass": "^0.2.0",
-    "@netlify/plugin-lighthouse": "^5.0.0",
+    "@netlify/plugin-lighthouse": "^6.0.0",
     "autoprefixer": "^10.4.17",
     "cssnano": "^6.0.3",
     "cssnano-preset-advanced": "^6.0.3",
@@ -78,7 +78,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.118.1",
+    "hugo-bin": "^0.119.0",
     "markdownlint-cli2": "^0.12.1",
     "netlify-plugin-hugo-cache-resources": "^0.2.1",
     "npm-run-all": "^4.1.5",