Merge pull request #774 from gethinode/develop

Refactor download button

.github/dependabot.yml

@@ -3,6 +3,11 @@
 
 version: 2
 updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
   - package-ecosystem: "npm"
     directory: "/"
     schedule:

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

assets/js/navbar.js

@@ -3,7 +3,36 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
+function updateNavbar () {
+  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)
+  }
+}
+
+if ((navbar !== null) && (window.performance.getEntriesByType)) {
+  if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
+    updateNavbar()
+  }
+}
+
 if (navbar !== null && togglers !== null) {
+  // observe state changes to the site's color mode
+  const html = document.querySelector('html')
+  const config = {
+    attributes: true,
+    attributeFilter: ['data-bs-theme']
+  }
+  const Observer = new MutationObserver((mutationrecords) => {
+    updateNavbar()
+  })
+  Observer.observe(html, config)
+
   // initialize background color
   const color = (navbar.getAttribute('data-navbar-color') || 'body')
   const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
@@ -11,11 +40,7 @@ if (navbar !== null && togglers !== null) {
 
   // set the navbar background color to opaque when scrolling past a breakpoint
   window.onscroll = () => {
-    if (window.scrollY > 75) {
+    updateNavbar()
-      navbar.classList.add('nav-active')
-    } else {
-      navbar.classList.remove('nav-active')
-    }
   }
 
   // set the navbar background color to opaque when expanded

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

@@ -41,28 +41,6 @@
     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};
-    --bs-navbar-toggler-color: white;
-}
-
-.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};
-    --bs-navbar-toggler-color: black;
-}
-
 .nav-item .vr {
     color: var(--bs-navbar-color);
 }

assets/scss/components/_toc.scss

@@ -50,6 +50,9 @@
 
 #toc-collapse {
     border-color: var(--bs-secondary-color) !important;
+    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
+    margin-top: -1.5rem;
+    padding-top: 1.5rem !important;
 }
 
 .toc-button {
@@ -60,6 +63,8 @@
     --bs-btn-active-bg: var(--bs-body-bg);
     --bs-btn-active-border-color: var(--bs-primary);
 
+    background-color: var(--#{$prefix}body-bg) !important;
+
     &.active,
     &:hover,
     &:focus {

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

@@ -162,6 +162,7 @@
     themeFont = "Inter"
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
+    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
     fontSizeBase = "1rem" # assumes the browser default, typically '16px'
 # toml-docs-end font
 # toml-docs-start build

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

@@ -157,6 +157,7 @@
     themeFont = "Inter"
     # themeFontPath = "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" # external path
     themeFontPath = "/fonts" # local path
+    themeFontPreload = "/fonts/inter-v12-latin-regular.woff2"
     purge = true
 # toml-docs-end theme-colors
 

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",
@@ -306,6 +308,11 @@
       "navbar-toggler",
       "next",
       "no-js",
+      "offcanvas",
+      "offcanvas-body",
+      "offcanvas-header",
+      "offcanvas-start",
+      "offcanvas-title",
       "order-0",
       "order-1",
       "order-first",
@@ -332,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",
@@ -517,6 +526,8 @@
       "navbar-sample-collapse",
       "navigation",
       "notification",
+      "offcanvas-label",
+      "offcanvass-sidebar",
       "persona",
       "projecten",
       "projects",

go.mod

@@ -6,11 +6,11 @@ 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.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.1.0 // indirect
+	github.com/gethinode/mod-utils/v2 v2.1.0 // 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

@@ -80,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=
@@ -104,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=
@@ -120,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=
@@ -132,9 +138,19 @@ github.com/gethinode/mod-utils v1.0.4 h1:Lr7hAVaWHv0O5TJXhRHGhvlOvWwIATJm9mpLQhC
 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/gethinode/mod-utils/v2 v2.1.0 h1:5I0IN/AX5qPFYx7tjWXk59GBevTJzixxZUGj9MJ0b8M=
+github.com/gethinode/mod-utils/v2 v2.1.0/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/panel-toc.html

@@ -1,17 +1,15 @@
 {{- $download := .Params.download -}}
-{{- if and $download (not (fileExists (path.Join "static" $download))) -}}
-    {{- errorf "Cannot find download file for page '%s': %s" .File.Path $download -}}
-{{- end -}}
 
-{{- $toc := .Site.Params.navigation.toc -}}
+{{- $includeToc := false -}}
-{{ if $toc }}
+{{- if .Site.Params.navigation.toc -}}
+    {{ $includeToc = true }}
     {{ if isset .Params "includeToc" }}
-        {{ $toc = .Params.includeToc }}
+        {{ $includeToc = .Params.includeToc }}
     {{ else }}
         {{- with (index site.Params.pages .Type) -}}
             {{ if isset . "includetoc" }}
-                {{ $toc = index . "includetoc" }}
+                {{ $includeToc = index . "includetoc" }}
-                {{ if ne (printf "%T" $toc) "bool" }}
+                {{ if ne (printf "%T" $includeToc) "bool" }}
                     {{ errorf "Expected bool value in site parameters: pages.%s.includeToc" $.Type }}
                 {{ end }}
             {{ end }}
@@ -19,24 +17,20 @@
     {{ end }}
 {{ end }}
 
-<div class="toc toc-sidebar mb-5 my-md-0 ps-xl-3 mb-lg-5 p-3 text-body-secondary sticky-top">
+<div class="toc toc-sidebar mb-5 my-md-0 mb-lg-5 p-3 text-body-secondary sticky-top">
-    {{ with $download }}
+    {{ if $download }}
-        {{ $title := (T "download" ) }}
+        <div class="mb-5 p-0">
-        {{ $lang := strings.TrimPrefix "." (path.Ext (path.BaseName .)) }}
+            {{ partial "assets/download.html" (dict 
-        {{ if and $lang (ne (string site.LanguageCode) $lang) }}
+                "download" $download
-            {{ range site.Languages }}
+                "outline" true
-                {{ if eq .LanguageCode $lang }}
+                "size" "sm"
-                    {{ $title = printf "%s (%s)" (T "download") (T (printf "lang_%s" .LanguageCode)) }}
+                "order" "last"
-                {{ end }}
+            ) }}
-            {{ end }}
-        {{ end }}
-        <div class="mb-5 text-center">
-            {{ $attr := dict "download" (path.Base .) }}
-            {{ partial "assets/button.html" (dict "href" . "title" $title "color" "primary" "outline" "true" "icon" "fas download" "size" "sm" "attributes" $attr) }}
         </div>
     {{ end }}
 
-    {{ if $toc }}
+    {{ if $includeToc }}
-        {{ partial "assets/toc.html" (dict "page" .) }}
+        {{ $index := partial "assets/toc.html" (dict "page" .) }}
+        {{ $index | safeHTML }}
     {{ end -}}
 </div>

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

layouts/partials/assets/card.html

@@ -29,6 +29,7 @@
 {{- $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,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/assets/download.html

@@ -0,0 +1,38 @@
+{{- $download := partial "utilities/GetTargetPath.html" (dict "path" .download "page" page) -}}
+{{- $color := .color | default "primary" -}}
+{{- $outline := .outline | default true -}}
+{{- $icon := .icon | default "fas download" -}}
+{{- $size := .size | default "sm" -}}
+{{- $justify := .justify -}}
+{{- $class := .class -}}
+{{- $minimal := .minimal | default false -}}
+
+{{- if and $download (not (fileExists (path.Join "static" $download))) -}}
+    {{- errorf "Cannot find download file for page '%s': %s" page.File.Path $download -}}
+{{- end -}}
+
+{{ with $download }}
+    {{ $title := "" }}
+    {{ if not $minimal }}{{ $title = (T "download" ) }}{{ end }}
+    {{ $lang := strings.TrimPrefix "." (path.Ext (path.BaseName .)) }}
+    {{ if and $lang (ne (string site.LanguageCode) $lang) }}
+        {{ range site.Languages }}
+            {{ if eq .LanguageCode $lang }}
+                {{ $title = printf "%s (%s)" (T "download") (T (printf "lang_%s" .LanguageCode)) }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+    {{ $attr := dict "download" (path.Base .) }}
+    {{ partial "assets/button.html" (dict 
+        "href" .
+        "title" $title
+        "color" $color
+        "outline" $outline
+        "icon" $icon
+        "size" $size
+        "justify" $justify
+        "class" $class
+        "attributes" $attr
+    ) }}
+{{ 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/assets/sharing.html

@@ -35,7 +35,7 @@
         {{- $sort := $page.Site.Params.sharing.sort | default "weight" -}}
         {{- $list = sort $list $sort $order -}}
 
-        {{- $download := $page.Params.download -}}
+        {{- $download := partial "utilities/GetTargetPath.html" (dict "path" $page.Params.download  "page" $page) -}}
         {{- if and $download (not (fileExists (path.Join "static" $download))) -}}
             {{- errorf "Cannot find download file for page '%s': %s" $page.File.Path $download -}}
         {{- end -}}

layouts/partials/assets/toc-dropdown.html

@@ -26,15 +26,14 @@
             "icon" "fas sort"
             "justify" "between"
             "collapse" "toc-collapse"
-            "order" "last") 
+            "order" "last"
-        -}}
+            "spacing" false
+        ) -}}
     </div>
 
-    <p>
+    <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" id="toc-collapse">
+        <div class="toc toc-panel text-body p-2">
-            <div class="toc toc-panel text-body p-2">
+            <small>{{ $page.TableOfContents }}</small>
-                <small>{{ $page.TableOfContents }}</small>
-            </div>
         </div>
-    </p>
+    </div>
 {{ end -}}

layouts/partials/assets/toc.html

@@ -18,6 +18,6 @@
 
 <!-- Main code -->
 {{ if and (not $error) (gt $items 1) -}}
-    <strong class="d-block h6 my-2 pb-2 border-bottom">{{ T "toc" }}</strong>
+    <strong class="d-block h6 my-2 pb-2">{{ T "toc" }}:</strong>
     {{ $page.TableOfContents }}
 {{ 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/partials/head/head.html

@@ -1,8 +1,10 @@
 {{ define "head" }}
+    {{- $version := strings.TrimPrefix "v" (partialCached "assets/version.html" .) -}}
     {{ $desc := .Page.Description | default (.Page.Content | safeHTML | truncate 150) -}}
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    {{ hugo.Generator}}
+    {{ hugo.Generator }}
+    <meta name="theme" content="{{ printf "Hinode %s" $version }}">
     {{ partialCached "head/stylesheet-core.html" . -}}
 
     {{ $page_modules := slice | append .Page.Params.modules }}
@@ -16,6 +18,9 @@
         <link rel="preconnect" href="https://fonts.googleapis.com"> 
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
         <link rel="stylesheet" href="{{ .Site.Params.style.themeFontPath | default "https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap" }}">
+    {{ else if .Site.Params.style.themeFontPreload }}
+        {{ $font := .Site.Params.style.themeFontPreload }}
+        <link rel="preload" href="{{ $font }}" as="font" type="font/{{ strings.TrimPrefix "." (path.Ext $font) }}" crossorigin>
     {{- end -}}
     {{ partial "head/seo.html" . }}
     {{ partialCached "head/favicon.html" . -}}

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,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha7",
+  "version": "0.23.0-beta5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha7",
+      "version": "0.23.0-beta5",
       "license": "MIT",
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",

package.json

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