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

@@ -13,8 +13,6 @@
 
 
     <div class="wrapper">
-      <input type="checkbox" class="hidden" id="menu-header-control" />
-
       {{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
 
 

layouts/_default/baseof.html

@@ -32,8 +32,6 @@
     <div
       class="wrapper {{ if default false .Site.Params.geekdocDarkModeDim }}dark-mode-dim{{ end }}"
     >
-      <input type="checkbox" class="hidden" id="menu-control" />
-      <input type="checkbox" class="hidden" id="menu-header-control" />
       {{ $navEnabled := default true .Page.Params.geekdocNav }}
       {{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}
 

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

@@ -1,6 +1,6 @@
 {{ if hugo.IsMultilingual }}
   <span class="gdoc-language">
-    <ul class="gdoc-language__selector" role="button" aria-pressed="false" tabindex="0">
+    <ul class="gdoc-language__selector" tabindex="0" role="button" aria-pressed="false">
       <li>
         {{ range .Site.Languages }}
           {{ if eq . $.Site.Language }}

layouts/partials/microformats/schema.html

@@ -60,7 +60,7 @@
           "url": {{ .Site.Home.Permalink }},
           "logo": {
               "@type": "ImageObject",
-              "url": {{ (default "brand.svg" .Site.Params.logo) | absURL }},
+              "url": {{ (default "brand.svg" .Site.Params.geekdocLogo) | absURL }},
               "width":"32",
               "height":"32"
           }

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

@@ -1,37 +1,44 @@
 <header class="gdoc-header">
   <div class="container flex align-center justify-between">
     {{ if .MenuEnabled }}
-      <label for="menu-control" class="gdoc-nav__control" tabindex="0">
+      <label for="menu-control" class="gdoc-nav__control">
-        <svg class="gdoc-icon gdoc_menu">
+        <div tabindex="0" role="button" aria-pressed="false">
-          <title>{{ i18n "button_nav_open" }}</title>
+          <input type="checkbox" class="hidden" id="menu-control" />
-          <use xlink:href="#gdoc_menu"></use>
+
-        </svg>
+          <svg class="gdoc-icon gdoc_menu">
-        <svg class="gdoc-icon gdoc_arrow_back">
+            <title>{{ i18n "button_nav_open" }}</title>
-          <title>{{ i18n "button_nav_close" }}</title>
+            <use xlink:href="#gdoc_menu"></use>
-          <use xlink:href="#gdoc_arrow_back"></use>
+          </svg>
-        </svg>
+          <svg class="gdoc-icon gdoc_arrow_back">
+            <title>{{ i18n "button_nav_close" }}</title>
+            <use xlink:href="#gdoc_arrow_back"></use>
+          </svg>
+        </div>
       </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">
+    <div class="gdoc-menu-header flex gap-16">
       <span class="gdoc-menu-header__items">
         {{ if .Root.Site.Data.menu.extra.header }}
           {{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
         {{ end }}
 
 
-        <span id="gdoc-color-theme">
+        <span id="gdoc-color-theme" tabindex="0" role="button" aria-pressed="false">
           <svg class="gdoc-icon gdoc_brightness_dark">
             <title>{{ i18n "button_toggle_dark" }}</title>
             <use xlink:href="#gdoc_brightness_dark"></use>
@@ -56,23 +63,24 @@
         </span>
 
         {{ partial "language" .Root }}
+      </span>
+      <span class="gdoc-menu-header__control">
+        <label for="menu-header-control">
+          <div tabindex="0" role="button" aria-pressed="false">
+            <input type="checkbox" class="hidden" id="menu-header-control" />
 
-
-        <span class="gdoc-menu-header__control">
-          <label for="menu-header-control">
             <svg class="gdoc-icon gdoc_keyboard_arrow_right">
               <use xlink:href="#gdoc_keyboard_arrow_right"></use>
               <title>{{ i18n "button_menu_close" }}</title>
             </svg>
-          </label>
+
-        </span>
+            <svg class="gdoc-icon gdoc_keyboard_arrow_left">
+              <use xlink:href="#gdoc_keyboard_arrow_left"></use>
+              <title>{{ i18n "button_menu_open" }}</title>
+            </svg>
+          </div>
+        </label>
       </span>
-      <label for="menu-header-control" class="gdoc-menu-header__control">
-        <svg class="gdoc-icon gdoc_keyboard_arrow_left">
-          <use xlink:href="#gdoc_keyboard_arrow_left"></use>
-          <title>{{ i18n "button_menu_open" }}</title>
-        </svg>
-      </label>
     </div>
   </div>
 </header>

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.4.1",
+    "mermaid": "11.9.0",
     "store2": "2.14.4",
     "uuid": "11.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.26.8",
+    "@babel/eslint-parser": "7.28.0",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "copy-webpack-plugin": "13.0.0",
     "css-loader": "7.1.2",
-    "eslint": "9.21.0",
+    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.0.2",
+    "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.4.0",
+    "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.2",
+    "prettier": "3.6.2",
-    "sass": "1.85.1",
+    "sass": "1.89.2",
     "sass-loader": "16.0.5",
-    "shx": "0.3.4",
+    "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.0",
+    "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/accessibility.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const gdocNav = document.querySelector(".gdoc-nav")
+  const gdocPage = document.querySelector(".gdoc-page")
+  const menuControl = document.getElementById("menu-control")
+
+  // Helper function for menu navigation accessibility
+  function updateMenuAccessibility() {
+    if (!gdocNav || !gdocPage || !menuControl) return
+
+    const isMenuOpen = menuControl.checked
+    const isDesktop = window.matchMedia("(min-width: 41rem)").matches
+
+    // Set nav accessibility attributes
+    gdocNav.toggleAttribute("inert", !isDesktop && !isMenuOpen)
+    gdocNav.setAttribute("aria-hidden", (!isDesktop && !isMenuOpen).toString())
+
+    // Set page accessibility attributes
+    gdocPage.toggleAttribute("inert", !isDesktop && isMenuOpen)
+    gdocPage.setAttribute("aria-hidden", (!isDesktop && isMenuOpen).toString())
+  }
+
+  // Process all button role elements
+  document.querySelectorAll('[role="button"]').forEach((buttonElement) => {
+    const controlId = buttonElement.parentElement?.getAttribute("for")
+    if (!controlId) return
+
+    const controlElement = document.getElementById(controlId)
+    if (!controlElement || controlElement.type !== "checkbox") return
+
+    // Set initial accessibility state
+    buttonElement.setAttribute("aria-pressed", controlElement.checked)
+
+    // Handle accessibility updates
+    const updateButton = () => {
+      buttonElement.setAttribute("aria-pressed", controlElement.checked)
+      if (controlId === "menu-control") updateMenuAccessibility()
+    }
+
+    // Event listeners
+    buttonElement.addEventListener("click", updateButton)
+    buttonElement.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        controlElement.checked = !controlElement.checked
+        updateButton()
+        event.preventDefault()
+      }
+    })
+  })
+
+  // Initial call and resize handler
+  updateMenuAccessibility()
+  window.addEventListener("resize", updateMenuAccessibility)
+})

src/js/colorTheme.js

@@ -7,7 +7,7 @@ import { TOGGLE_COLOR_THEMES, THEME, COLOR_THEME_AUTO } from "./config.js"
 document.addEventListener("DOMContentLoaded", () => {
   const colorThemeToggle = document.getElementById("gdoc-color-theme")
 
-  colorThemeToggle.onclick = function () {
+  function toggleColorTheme() {
     let lstore = Storage.namespace(THEME)
     let currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
     let nextColorTheme = toggle(TOGGLE_COLOR_THEMES, currentColorTheme)
@@ -15,6 +15,17 @@ document.addEventListener("DOMContentLoaded", () => {
     lstore.set("color-theme", TOGGLE_COLOR_THEMES[nextColorTheme])
     applyTheme(false)
   }
+
+  colorThemeToggle.onclick = function () {
+    toggleColorTheme()
+  }
+
+  colorThemeToggle.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+      toggleColorTheme()
+      event.preventDefault()
+    }
+  })
 })
 
 function applyTheme(init = true) {

src/js/index.js

@@ -1,4 +1,5 @@
 import Clipboard from "clipboard"
+import "./accessibility.js"
 
 document.addEventListener("DOMContentLoaded", function () {
   let clipboard = new Clipboard(".clip")

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 {

src/sass/_mobile.scss

@@ -31,6 +31,12 @@
       display: none;
     }
 
+    &__control {
+      svg.gdoc-icon.gdoc_keyboard_arrow_right {
+        display: none;
+      }
+    }
+
     &__control,
     &__home {
       display: flex;
@@ -76,7 +82,7 @@
     }
   }
 
-  #menu-control:checked ~ main {
+  .wrapper:has(#menu-control:checked) {
     .gdoc-nav nav,
     .gdoc-page {
       transform: translateX(defaults.$menu-width);
@@ -85,9 +91,7 @@
     .gdoc-page {
       opacity: 0.25;
     }
-  }
 
-  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
     svg.gdoc-icon.gdoc_menu {
       display: none;
     }
@@ -97,7 +101,7 @@
     }
   }
 
-  #menu-header-control:checked ~ .gdoc-header {
+  .wrapper:has(#menu-header-control:checked) {
     .gdoc-brand {
       display: none;
     }
@@ -111,6 +115,9 @@
         svg.gdoc-icon.gdoc_keyboard_arrow_left {
           display: none;
         }
+        svg.gdoc-icon.gdoc_keyboard_arrow_right {
+          display: inline-block;
+        }
       }
     }
   }

webpack.config.js

@@ -87,7 +87,7 @@ var config = {
       generate(seed, files) {
         let manifest = {}
 
-        files.forEach(function (element, index) {
+        files.forEach(function (element) {
           if (element.name.endsWith("VERSION")) return
           if (element.name.endsWith(".svg")) return
           if (element.name.startsWith("fonts/")) return