chore(deps): update devdeps non-major (#1053)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.htmlvalidate.json

@@ -3,6 +3,7 @@
   "rules": {
     "element-required-content": "off",
     "element-permitted-content": "off",
-    "no-raw-characters": "off"
+    "no-raw-characters": "off",
+    "attribute-misuse": "warn"
   }
 }

.lighthouserc.yml

@@ -19,7 +19,15 @@ ci:
           "is-crawlable",
           "image-size-responsive",
           "render-blocking-resources",
-          "largest-contentful-paint"
+          "largest-contentful-paint",
+          "unused-css-rules",
+          "network-dependency-tree-insight",
+          "legacy-javascript",
+          "errors-in-console",
+          "max-potential-fid",
+          "interactive",
+          "dom-size",
+          "forced-reflow-insight"
         ]
   assert:
     preset: "lighthouse:no-pwa"
@@ -33,6 +41,14 @@ ci:
       image-size-responsive: off
       render-blocking-resources: off
       largest-contentful-paint: off
+      unused-css-rules: off
+      network-dependency-tree-insight: off
+      legacy-javascript: off
+      errors-in-console: off
+      max-potential-fid: off
+      interactive: off
+      dom-size: off
+      forced-reflow-insight: off
       total-byte-weight: warn
       identical-links-same-purpose: warn
       tap-targets: warn

.woodpecker/docs.yml

@@ -44,7 +44,7 @@ steps:
       - event: [pull_request]
 
   - name: build
-    image: quay.io/thegeeklab/hugo:0.144
+    image: quay.io/thegeeklab/hugo:0.148
     commands:
       - hugo --panicOnWarning -s exampleSite/
 

.woodpecker/test.yml

@@ -24,7 +24,7 @@ steps:
       FORCE_COLOR: "true"
 
   - name: testbuild
-    image: quay.io/thegeeklab/hugo:0.144
+    image: quay.io/thegeeklab/hugo:0.148
     depends_on: [assets]
     commands:
       - mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/${CI_REPO_NAME}
@@ -44,9 +44,12 @@ steps:
     depends_on: [testbuild]
     commands:
       - lychee --no-progress --format detailed exampleSite/content/ README.md
+    environment:
+      GITHUB_TOKEN:
+        from_secret: github_token_ro
 
   - name: page-validation
-    image: quay.io/thegeeklab/lhci:0.14
+    image: quay.io/thegeeklab/lhci:0.15
     depends_on: [testbuild]
     commands:
       - lhci autorun

README.md

@@ -6,7 +6,7 @@
 [![GitHub contributors](https://img.shields.io/github/contributors/thegeeklab/hugo-geekdoc)](https://github.com/thegeeklab/hugo-geekdoc/graphs/contributors)
 [![License: MIT](https://img.shields.io/github/license/thegeeklab/hugo-geekdoc)](https://github.com/thegeeklab/hugo-geekdoc/blob/main/LICENSE)
 
-Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of good alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
+Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of great alternatives out there. You can find a demo and the full documentation at [https://geekdocs.de](https://geekdocs.de).
 
 ![Desktop and mobile preview](https://raw.githubusercontent.com/thegeeklab/hugo-geekdoc/main/images/readme.png)
 

exampleSite/content/en/_index.md

@@ -16,7 +16,7 @@ geekdocAnchor: false
 
 <!-- markdownlint-restore -->
 
-Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there.
+Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of great alternatives out there.
 
 {{< button size="large" relref="usage/getting-started/" >}}Getting Started{{< /button >}}
 

exampleSite/content/en/features/theming/_index.md

@@ -41,7 +41,7 @@ The minimal steps to load a custom Favicon is to overwrite the three default Fav
 
 ### Full replacement
 
-If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/partials/#partial-template-lookup-order) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
+If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/lookup-order/) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
 
 **Example:**
 

exampleSite/content/en/usage/configuration.md

@@ -37,6 +37,9 @@ enableRobotsTXT = true
   tag = "tags"
 
 [params]
+  # (Optional, default none) Set a subtitle used in the page header.
+  geekdocSubtitle = "A Hugo theme for documentation"
+
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
   # You can also specify this parameter per page in front matter.
@@ -167,6 +170,9 @@ taxonomies:
   tag: tags
 
 params:
+  # (Optional, default none) Set a subtitle used in the page header.
+  geekdocSubtitle: "A Hugo theme for documentation"
+
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
   # You can also specify this parameter per page in front matter.

exampleSite/content/en/usage/customization.md

@@ -0,0 +1,16 @@
+---
+title: Customization
+---
+
+{{< toc >}}
+
+## Custom resources
+
+To add custom resources to your site e.g. CSS or JavaScript files, create the `layouts/partials/head/custom.html` in the root directory of your project. Add the source files you want to include in the `static/` folder of your project, for example `static/css/custom.css` and `static/js/custom.js`. To include the files in your site, add the following code to `layouts/partials/head/custom.html`:
+
+```html
+<link rel="stylesheet" type="text/css" href="/css/custom.css" />
+<script type="text/javascript" src="/js/custom.js"></script>
+```
+
+Ensure to use the absolute path to the files.

layouts/partials/foot.html

@@ -1,6 +0,0 @@
-{{ if default true .Site.Params.geekdocSearch }}
-  <script defer src="{{ index (index .Site.Data.assets "search.js") "src" | relURL }}"></script>
-  {{- $searchConfigFile := printf "search/%s.config.json" .Language.Lang -}}
-  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
-  {{- $searchConfig.Publish -}}
-{{ end }}

layouts/partials/head/custom.html

@@ -1 +1,9 @@
-<!-- You can add custom elements to the page header here. -->
+<!--
+You can add custom elements to the page header here.
+
+Example:
+Ensure to use the absolute path to custom files and place the source files in the `static` folder.
+
+<link rel="stylesheet" type="text/css" href="/custom.css">
+<script type="text/javascript" src="/custom.js"></script>
+-->

layouts/partials/page-header.html

@@ -48,6 +48,7 @@
         <svg class="gdoc-icon gdoc_code"><use xlink:href="#gdoc_code"></use></svg>
         <a
           href="{{ $geekdocRepo }}/{{ path.Join $geekdocEditPath ($.Scratch.Get "geekdocFilePath") }}"
+          rel="edit"
         >
           {{ i18n "edit_page" }}
         </a>

layouts/partials/search.html

@@ -1,4 +1,9 @@
 {{ if default true .Site.Params.geekdocSearch }}
+  <script defer src="{{ index (index .Site.Data.assets "search.js") "src" | relURL }}"></script>
+  {{- $searchConfigFile := printf "search/%s.config.json" .Language.Lang -}}
+  {{- $searchConfig := resources.Get "search/config.json" | resources.ExecuteAsTemplate $searchConfigFile . | resources.Minify -}}
+  {{- $searchConfig.Publish -}}
+
   <div class="gdoc-search flex align-center">
     <svg class="gdoc-icon gdoc_search"><use xlink:href="#gdoc_search"></use></svg>
     <input

layouts/partials/site-header.html

@@ -17,15 +17,18 @@
       </label>
     {{ end }}
     <div>
-      <a class="gdoc-brand gdoc-header__link" href="{{ .Root.Site.Home.Permalink }}">
+      <a class="gdoc-brand gdoc-header__link flex gap-16 align-center" href="{{ .Root.Site.Home.Permalink }}">
-        <span class="flex align-center">
+        <img
-          <img
+          class="gdoc-brand__img"
-            class="gdoc-brand__img"
+          src="{{ (default "brand.svg" .Root.Site.Params.geekdocLogo) | relURL }}"
-            src="{{ (default "brand.svg" .Root.Site.Params.geekdocLogo) | relURL }}"
+          alt=""
-            alt=""
+        />
-          />
+        <div>
-          <span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
+          <div class="gdoc-brand__title">{{ .Root.Site.Title }}</div>
-        </span>
+          {{ with .Root.Site.Params.geekdocSubtitle }}
+          <div class="gdoc-brand__subtitle">{{ . }}</div>
+          {{ end }}
+        </div>
       </a>
     </div>
     <div class="gdoc-menu-header flex gap-16">

package.json

@@ -36,37 +36,37 @@
   "dependencies": {
     "@cfworker/json-schema": "4.1.1",
     "clipboard": "2.0.11",
-    "flexsearch": "0.7.43",
+    "flexsearch": "0.8.205",
-    "katex": "0.16.21",
+    "katex": "0.16.22",
     "lodash": "4.17.21",
-    "mermaid": "11.5.0",
+    "mermaid": "11.9.0",
     "store2": "2.14.4",
     "uuid": "11.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.26.10",
+    "@babel/eslint-parser": "7.28.0",
     "autoprefixer": "10.4.21",
     "copy-webpack-plugin": "13.0.0",
     "css-loader": "7.1.2",
-    "eslint": "9.22.0",
+    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.1.1",
+    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-prettier": "5.5.3",
     "favicons": "7.2.0",
     "favicons-webpack-plugin": "6.0.1",
-    "globals": "16.0.0",
+    "globals": "16.3.0",
-    "html-validate": "9.5.2",
+    "html-validate": "9.7.1",
-    "npm-run-all2": "7.0.2",
+    "npm-run-all2": "8.0.4",
     "postcss-loader": "8.1.1",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
-    "sass": "1.85.1",
+    "sass": "1.89.2",
     "sass-loader": "16.0.5",
     "shx": "0.4.0",
     "svg-sprite": "2.0.4",
-    "svgtofont": "6.3.1",
+    "svgtofont": "6.3.2",
-    "webpack": "5.98.0",
+    "webpack": "5.100.2",
     "webpack-cli": "6.0.1",
     "webpack-manifest-plugin": "5.0.1",
-    "webpack-remove-empty-scripts": "1.0.4"
+    "webpack-remove-empty-scripts": "1.1.1"
   },
   "overrides": {
     "colors": "1.4.0"

src/js/search.js

@@ -1,6 +1,6 @@
 import groupBy from "lodash/groupBy.js"
 import truncate from "lodash/truncate.js"
-import Document from "flexsearch/dist/module/document.js"
+import { Document, Charset } from "flexsearch"
 import { Validator } from "@cfworker/json-schema"
 
 document.addEventListener("DOMContentLoaded", function () {
@@ -55,7 +55,8 @@ function init(input, searchConfig) {
   input.removeEventListener("focus", init)
 
   const indexCfgDefaults = {
-    tokenize: "forward"
+    tokenize: "forward",
+    encoder: Charset.LatinBalance
   }
   const indexCfg = searchConfig.indexConfig ? searchConfig.indexConfig : indexCfgDefaults
   const dataUrl = searchConfig.dataFile
@@ -63,7 +64,7 @@ function init(input, searchConfig) {
   indexCfg.document = {
     key: "id",
     index: ["title", "content", "description"],
-    store: ["title", "href", "parent", "description"]
+    store: ["title", "href", "parent", "content", "description"]
   }
 
   const index = new Document(indexCfg)
@@ -79,7 +80,14 @@ function init(input, searchConfig) {
 function search(input, results, searchConfig) {
   const searchCfg = {
     enrich: true,
-    limit: 5
+    limit: 5,
+    highlight: {
+      template: "<b>$1</b>",
+      boundary: {
+        before: 10,
+        after: 20
+      }
+    }
   }
 
   while (results.firstChild) {
@@ -157,10 +165,23 @@ function createLinks(pages, target, showDesc) {
     if (showDesc === true) {
       const desc = a.appendChild(document.createElement("span"))
       desc.classList.add("gdoc-search__entry--description")
-      desc.textContent = truncate(page.description, {
+
-        length: 55,
+      if (page.highlight) {
-        separator: " "
+        const parser = new DOMParser()
-      })
+        const doc = parser.parseFromString(
+          truncate(page.highlight, {
+            length: 55,
+            separator: " "
+          }),
+          "text/html"
+        )
+        desc.innerHTML = doc.body.innerHTML
+      } else {
+        desc.textContent = truncate(page.description, {
+          length: 55,
+          separator: " "
+        })
+      }
     }
 
     if (target) {
@@ -206,6 +227,11 @@ function flattenHits(results) {
     for (const page of field.result) {
       if (!map.has(page.doc.href)) {
         map.set(page.doc.href, true)
+
+        if (page.highlight) {
+          page.doc.highlight = page.highlight
+        }
+
         items.push(page.doc)
       }
     }

src/sass/_base.scss

@@ -226,14 +226,19 @@ svg.gdoc-icon {
 }
 
 .gdoc-brand {
-  font-size: defaults.$font-size-32;
-  line-height: defaults.$font-size-32;
-
   &__img {
-    margin-right: defaults.$padding-16;
     width: defaults.$padding-32;
     height: defaults.$padding-32;
   }
+
+  &__title {
+    font-size: defaults.$font-size-24;
+    line-height: defaults.$font-size-24;
+  }
+
+  &__subtitle {
+    font-size: defaults.$font-size-12;
+  }
 }
 
 .gdoc-menu-header {