Merge pull request #746 from gethinode/develop

Improve flex search index

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/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;
@@ -32,6 +33,7 @@
     --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 {
@@ -46,6 +48,7 @@
     --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 {
@@ -56,6 +59,7 @@
     --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 {
@@ -128,19 +132,11 @@
 
 /* Color of Toggler when collapsed */
 .navbar-toggler.collapsed .toggler-icon {
-    background-color: #777;
+    background-color: var(--bs-navbar-toggler-color);
 }
 
-.emphasis-light {
-    background-color: $black if($enable-important-utilities, !important, null);
-}
-
-.emphasis-dark {
-    background-color: $white if($enable-important-utilities, !important, null);
-}
-
-.emphasis {
-    background-color: $black if($enable-important-utilities, !important, null);
+.emphasis, .emphasis-dark, .emphasis-light {
+    background-color: var(--bs-navbar-toggler-color);
 }
 
 @include color-mode(dark) {

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

@@ -27,10 +27,11 @@ arguments:
     release: v0.19.0
   list:
     type:
-      - page.Pages
-      - resource.Resources
+      - 'page.Pages'
+      - 'resource.Resources'
+      - '[]map[string]interface {}'
     optional: true
-    comment: Array of pages to be rendered as cards.
+    comment: Array of pages or structured content to be rendered as cards.
     group: partial
   cards:
     type: string

data/structures/card.yml

@@ -157,19 +157,42 @@ arguments:
     optional: true
     comment: >-
       Font Awesome icon, displayed on top or the left of the card.
+  align:
+    type: select
+    parent: cascade
+    optional: true
+    default: start
+    release: v0.23.0-alpha2
+    comment: Icon alignment.
+    options:
+      values:
+        - start
+        - end
+        - center
+  style:
+    type: string
+    parent: cascade
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Icon style.
   orientation:
     type: select
     optional: true
     default: stacked
     parent: cascade
-    comment: >-
-      Placement of the thumbnail or icon.
+    comment: Placement of the thumbnail or icon.
     options:
       values:
         - stacked
         - horizontal
         - horizontal-sm
         - none
+  subtle:
+    type: bool
+    parent: cascade
+    optional: true
+    release: v0.23.0-alpha2
+    comment: Apply subtle background colors.
 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/about.md

@@ -8,7 +8,7 @@ showComments: false
 
 {{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-{{< card-group class="text-center border-0" padding="3" >}}
+{{< card-group align="center" class="border-0" padding="3" >}}
     {{< card title="Bootstrap framework" icon="fab bootstrap" >}}
         Build fast, responsive sites with Bootstrap 5. Easily customize your site with the source Sass files.
     {{< /card >}}

exampleSite/content/fr/about.md

@@ -9,7 +9,7 @@ showComments: false
 
 {{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-{{< card-group class="text-center border-0" padding="3" >}}
+{{< card-group align="center" class="border-0" padding="3" >}}
     {{< card title="Framework Bootstrap" icon="fab bootstrap" >}}
         Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site avec les fichiers source Sass.
     {{< /card >}}

exampleSite/content/nl/about.md

@@ -10,7 +10,7 @@ showComments: false
 
 {{< image src="/img/logo_var.svg#logo" class="img-fluid w-50" wrapper="text-center" >}}
 
-{{< card-group class="text-center border-0" padding="3" >}}
+{{< card-group align="center" class="border-0" padding="3" >}}
     {{< card title="Bootstrap raamwerk" icon="fab bootstrap" >}}
         Bouw snelle websites geschikt voor mobiele en desktop schermen met Bootstrap 5. Pas de site eenvoudig aan met bronbestanden in Sass.
     {{< /card >}}

exampleSite/hugo_stats.json

@@ -26,7 +26,6 @@
       "mark",
       "meta",
       "nav",
-      "nil",
       "noscript",
       "ol",
       "p",
@@ -63,6 +62,7 @@
       "alert-dismissible",
       "align-items-center",
       "align-items-end",
+      "align-items-start",
       "align-middle",
       "align-self-center",
       "align-self-end",

go.mod

@@ -5,7 +5,7 @@ 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-katex v1.0.5 // indirect
 	github.com/gethinode/mod-leaflet v0.4.0 // 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=

layouts/partials/assets/card-group.html

@@ -27,34 +27,42 @@
 {{- $orientation := .orientation -}}
 {{- $ratio := .ratio -}}
 {{- $wrapper := .wrapper | default "p-0" -}}
+{{- $style := .style -}}
+{{- $align := .align -}}
+{{- $subtle := .subtle }}
 {{- $loading := .loading -}}
 
 <!-- Override arguments -->
+{{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
 {{ $paginator := "" }}
-{{ if $paginate }}
+{{ if and $isPages $paginate }}
     {{ $paginator = $page.Paginate $pages }}
     {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
 {{ end }}
 
 {{ $list := slice }}
-{{ range $index, $element := $pages }}
-    {{ $params := dict }}
-    <!-- regular page -->
-    {{- if and $element.RelPermalink $element.File -}}
-        {{- $params = merge $params (dict "path" $element.File.Path) -}}
-    <!-- headless page -->
-    {{- else -}}
-        {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
-        {{- $params = merge $params (dict
-            "title" $element.Title
-            "href" $element.RelPermalink
-            "description" (partial "utilities/GetDescription.html" $element)
-            "thumbnail" $thumbnail
-            "icon" $element.Params.icon
-        ) -}}
-    {{- end -}}
+{{ if $isPages }}
+    {{ range $index, $element := $pages }}
+        {{ $params := dict }}
+        <!-- regular page -->
+        {{- if and $element.RelPermalink $element.File -}}
+            {{- $params = merge $params (dict "path" $element.File.Path) -}}
+        <!-- headless page -->
+        {{- else -}}
+            {{- $thumbnail := (or (and (reflect.IsMap $element.Params.Thumbnail) $element.Params.Thumbnail.url) $element.Params.Thumbnail) -}}
+            {{- $params = merge $params (dict
+                "title" $element.Title
+                "href" $element.RelPermalink
+                "description" (partial "utilities/GetDescription.html" $element)
+                "thumbnail" $thumbnail
+                "icon" $element.Params.icon
+            ) -}}
+        {{- end -}}
 
-    {{- $list = $list | append $params }}
+        {{- $list = $list | append $params }}
+    {{ end }}
+{{ else if $pages }}
+    {{ $list = $list | append $pages }}
 {{ end }}
 
 {{- $count := len $list -}}
@@ -90,6 +98,9 @@
                 "orientation" $orientation
                 "padding" $padding
                 "ratio" $ratio
+                "subtle" $subtle
+                "style" $style
+                "align" $align
             ) -}}
             {{- $params = merge $params $element }}
 
@@ -102,7 +113,7 @@
                 </div>
             {{- end -}}
         {{- end -}}
-        {{- print $cards | safeHTML }}
+        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
     </div>
 
     {{ if $paginate }}

layouts/partials/assets/card.html

@@ -19,12 +19,24 @@
 {{- $header := .header | default "full" -}}
 {{- $href := .href -}}
 {{- $icon := .icon -}}
+{{- $iconStyle := "" -}}
+{{- $align := .align | default "start" -}}
+{{- $style := .style | default "" -}}
 {{- $loading := .loading -}}
 {{- $orientation := .orientation | default "stacked" -}}
 {{- $padding := .padding | default "auto" -}}
 {{- $ratio := .ratio -}}
 {{- $thumbnail := .thumbnail -}}
 {{- $title := .title -}}
+{{- $subtle := .subtle -}}
+{{- $colorStyle := "" -}}
+{{ if $color }}
+    {{ if $subtle }}
+        {{- $colorStyle = printf "bg-%s-subtle text-%s-emphasis" $color $color -}}
+    {{ else }}
+        {{- $colorStyle = printf "bg-%s text-bg-%s" $color $color -}}
+    {{ end }}
+{{ end }}
 
 <!-- Override arguments -->
 {{- $page := "" }}
@@ -42,6 +54,13 @@
     {{- if not $icon }}{{ $icon = .Params.icon }}{{ end -}}
 {{- end -}}
 
+{{ if (hasPrefix $orientation "horizontal") }}
+    {{ if not $style }}{{ $style = "fa-fluid fa-fw" }}{{ end }}
+{{ else }}
+    {{ if not $style }}{{ $style = "fa-4x" }}{{ end }}
+    {{- $iconStyle = "pb-3" -}}
+{{ end }}
+
 {{- if eq $orientation "none" }}{{ $thumbnail = "" }}{{ $icon = "" }}{{ end -}}
 
 <!-- Inline partial to render the card's body -->
@@ -100,18 +119,18 @@
 
 {{- if hasPrefix $orientation "horizontal" -}}
     <!-- Render horizontal card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }}">
         <div class="row g-0 row-cols-1 h-100">
-            <div class="col-4{{ if eq  $orientation "horizontal-sm" }} col-md-2{{ 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 -}}
-                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-center justify-content-center">
-                        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fluid fa-fw" $icon)) -}}
+                    <div class="card-icon p-{{ $padding }} h-100 fa-wrapper d-flex align-items-{{ $align}} justify-content-center {{ $iconStyle }}">
+                        {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
                     </div>
                 {{- end -}}
             </div>
-            <div class="col-8{{ if eq  $orientation "horizontal-sm" }} col-md-10{{ 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">
                     {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $header "color" $color) }}</div>{{ end }}
                     <div class="h-100">
@@ -124,12 +143,12 @@
     </div>
 {{- else -}}
     <!-- Render stacked / default card -->
-    <div class="card {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} {{ $class }}">
+    <div class="card {{ $colorStyle }} {{ $class }} text-{{ $align }}">
         {{- if $thumbnail -}}
             {{- partial "assets/image.html" (dict "url" $thumbnail "ratio" (or $ratio "16x9") "wrapper" "card-img-wrap" "class" "card-img-top" "title" (or $alt $title) "loading" $loading) -}}
         {{- else if $icon -}}
-            <div class="card-icon  p-{{ $padding }}">
-                {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-4x" $icon)) -}}
+            <div class="card-icon p-{{ $padding }} {{ $iconStyle }} text-{{ $align }}">
+                {{- partial "assets/icon.html" (dict "icon" (printf "%s %s" $icon $style)) -}}
             </div>
         {{- end -}}
         <div class="card-body d-flex flex-column p-{{ $padding }}">

layouts/shortcodes/card-group.html

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

layouts/shortcodes/card.html

@@ -21,6 +21,9 @@
 {{- $gutter := partial "utilities/GetArgParent" (dict "page" . "arg" "gutter") | default "0" -}}
 {{- $header := partial "utilities/GetArgParent" (dict "page" . "arg" "header") | default "full" -}}
 {{- $icon := .Get "icon" -}}
+{{- $align := partial "utilities/GetArgParent" (dict "page" . "arg" "align") | default "start" -}}
+{{- $style := partial "utilities/GetArgParent" (dict "page" . "arg" "style") | default "" -}}
+{{- $subtle := partial "utilities/GetArgParent" (dict "page" . "arg" "subtle") | default false -}}
 {{- $loading := .Get "loading" -}}
 {{- $orientation := partial "utilities/GetArgParent" (dict "page" . "arg" "orientation") | default "stacked" -}}
 {{- $padding := partial "utilities/GetArgParent" (dict "page" . "arg" "padding") | default "auto" -}}
@@ -59,6 +62,9 @@
         "description" $description
         "ratio" $ratio
         "icon" $icon
+        "align" $align
+        "style" $style
+        "subtle" $subtle
         "thumbnail" $thumbnail
         "loading" $loading
         "alt" $alt

package-lock.json

@@ -1,17 +1,17 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha",
+  "version": "0.23.0-alpha5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.23.0-alpha",
+      "version": "0.23.0-alpha5",
       "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",
-      "resolved": "https://registry.npmjs.org/@netlify/plugin-lighthouse/-/plugin-lighthouse-5.0.0.tgz",
-      "integrity": "sha512-tCaoVYxCU3OB592vChtFkANzUL4kDUNaIk9VCGp3qBecBnH+yFrILUlcqy2d08Is4ecstjTacyHqV+ixKbNYGQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@netlify/plugin-lighthouse/-/plugin-lighthouse-6.0.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.118.1.tgz",
-      "integrity": "sha512-WIS4kLNySb5u2+iwk//N7ClLUCksmyjvqdkGQTFc5v7Bqjpn1yLcIIBWwxU3R4SBc2Lr772/auxlzzsRffGbVA==",
+      "version": "0.119.0",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.119.0.tgz",
+      "integrity": "sha512-RnjlxHKdOjo7i7yRX/001t53142tC9NTa5JVrnPCTpX2kNQQCz5XdI/WWX7emf0dNkxipj55Z58EsA2ft9W16g==",
       "dev": true,
       "funding": [
         {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.23.0-alpha",
+  "version": "0.23.0-alpha5",
   "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",