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.143
+    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.143
+    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/shortcodes/audio/_index.md

@@ -1,11 +1,11 @@
 ---
 title: Audio
 resources:
-  - name: risen
+  - name: diamonds-trap
-    src: "risen.mp3"
+    src: "diamonds-trap.mp3"
-    title: Risen
+    title: Diamonds Trap
     params:
-      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+      credits: "[Jakob Eglmeier on openmusic.academy CC0-1.0](https://openmusic.academy/media-library/b9do2E2ZwVCfppyBf2yuej)"
 ---
 
 The audio shortcode allows you to embed audio files.
@@ -19,14 +19,14 @@ Define your resources in the page front matter, custom parameter `params.credits
 ```md
 ---
 resources:
-  - name: risen
+  - name: diamonds-trap
-    src: "risen.mp3"
+    src: "diamonds-trap.mp3"
-    title: Risen
+    title: Diamonds Trap
     params:
-      credits: "[Sascha Ende on filmmusic.io](https://filmmusic.io/en/song/12856-risen)"
+      credits: "[Jakob Eglmeier on openmusic.academy CC0-1.0](https://openmusic.academy/media-library/b9do2E2ZwVCfppyBf2yuej)"
 ---
 
-{{</* audio name="risen" */>}}
+{{</* audio name="diamonds-trap" */>}}
 ```
 
 ### Attributes
@@ -43,6 +43,6 @@ resources:
 
 <!-- spellchecker-disable -->
 
-{{< audio name="risen" >}}
+{{< audio name="diamonds-trap" >}}
 
 <!-- spellchecker-enable -->

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

@@ -22,14 +22,16 @@
   </head>
 
   <body itemscope itemtype="https://schema.org/WebPage">
+    <div class="w-full flex justify-center">
+      <a href="#main-content" id="gdoc-to-main" class="gdoc-markdown__link">Skip to main content</a>
+    </div>
+
     {{ partial "svg-icon-symbols" . }}
 
 
     <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/_default/list.html

@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "utils/content" . }}

layouts/_default/single.html

@@ -4,6 +4,7 @@
 
   <article
     class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
+    id="main-content" tabindex="-1"
   >
     <h1>{{ partial "utils/title" . }}</h1>
     {{ partial "page-metadata" . }}

layouts/_default/taxonomy.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -31,6 +32,7 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 

layouts/_default/terms.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages.ByTitle }}
     <article class="gdoc-post">
       <header class="gdoc-post__header">
@@ -28,5 +29,6 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}

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>

layouts/posts/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+  <div id="main-content" tabindex="-1">
   {{ range .Paginator.Pages }}
     <article class="gdoc-markdown gdoc-post">
       <header class="gdoc-post__header">
@@ -29,6 +30,7 @@
       </footer>
     </article>
   {{ end }}
+  </div>
   {{ partial "pagination.html" . }}
 {{ end }}
 

layouts/posts/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="gdoc-post">
+  <article class="gdoc-post" id="main-content" tabindex="-1">
     <header class="gdoc-post__header">
       <h1 class="gdoc-post__title">{{ partial "utils/title" . }}</h1>
       <div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">

layouts/shortcodes/columns.html

@@ -5,7 +5,7 @@
 {{- end }}
 
 
-<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
+<div class="gdoc-columns gdoc-columns--{{ $size }} flex gap-16 flex-mobile-column">
   {{- range split .Inner "<--->" }}
     <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
       {{ . | $.Page.RenderString -}}

layouts/shortcodes/hint.html

@@ -4,12 +4,13 @@
 
 
 <blockquote class="gdoc-hint {{ $type | lower }}">
-  <div class="gdoc-hint__title flex align-center">
+  <div class="gdoc-hint__title flex gap-8 align-center">
     {{- with $icon -}}
       <svg class="gdoc-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
       <span>{{ $title }}</span>
     {{- else -}}
-      <i class="fa {{ $type | lower }}" title="{{ $title }}"></i>
+      <i class="fa {{ $type | lower }}"></i>
+      <span>{{ $title }}</span>
     {{- end -}}
   </div>
   <div class="gdoc-hint__text">{{ .Inner | $.Page.RenderString }}</div>

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.0.5"
+    "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": "12.0.2",
+    "copy-webpack-plugin": "13.0.0",
     "css-loader": "7.1.2",
-    "eslint": "9.20.0",
+    "eslint": "9.31.0",
-    "eslint-config-prettier": "10.0.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": "15.14.0",
+    "globals": "16.3.0",
-    "html-validate": "9.2.1",
+    "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.0",
+    "prettier": "3.6.2",
-    "sass": "1.84.0",
+    "sass": "1.89.2",
-    "sass-loader": "16.0.4",
+    "sass-loader": "16.0.5",
-    "shx": "0.3.4",
+    "shx": "0.4.0",
     "svg-sprite": "2.0.4",
-    "svgtofont": "6.2.0",
+    "svgtofont": "6.3.2",
-    "webpack": "5.97.1",
+    "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/_asciidoc.scss

@@ -2,20 +2,33 @@
 @use "defaults";
 
 .admonitionblock {
+  $root: &;
+
+  margin: defaults.$padding-16 0;
+  padding: 0;
+
+  border: defaults.$border-1 solid var(--accent-color);
+  border-left: defaults.$border-4 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
+
   @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
       color: defaults.$body-font-color;
+
+      td.icon {
+        background-color: color.adjust($color, $alpha: -0.9);
+        border-start-start-radius: inherit;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
+      }
     }
   }
 
-  & {
+  .table-wrap {
-    margin: defaults.$padding-16 0;
+    margin: 0;
-    padding: 0;
-
-    border-left: defaults.$border-4 solid var(--accent-color);
-    border-radius: defaults.$border-radius;
   }
 
   table {
@@ -35,28 +48,34 @@
         font-weight: bold;
 
         &.icon {
-          .title {
+          margin-left: -5px;
-            display: flex;
-            align-items: center;
-          }
-
-          i.fa::after {
-            content: attr(title);
-            font-style: normal;
-            padding-left: defaults.$padding-24;
-          }
-
-          i.fa {
-            color: defaults.$black;
-            background-size: auto 90%;
-            background-repeat: no-repeat;
-            filter: invert(30%);
-            margin-left: -5px;
-          }
 
           @each $name, $icon in defaults.$hint-icons {
             i.fa.icon-#{$name} {
-              background-image: url(img/geekdoc-stack.svg##{$icon});
+              width: defaults.$font-size-24;
+              height: defaults.$font-size-24;
+              position: relative;
+
+              &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                width: defaults.$font-size-24;
+                height: defaults.$font-size-24;
+                mask-image: url(img/geekdoc-stack.svg##{$icon});
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                background-color: var(--body-font-color);
+              }
+
+              &::after {
+                color: var(--body-font-color);
+                content: attr(title);
+                font-style: normal;
+                padding-left: defaults.$padding-32;
+              }
             }
           }
         }

src/sass/_base.scss

@@ -105,6 +105,24 @@ body {
   * {
     box-sizing: inherit;
   }
+
+  #gdoc-to-main {
+    position: absolute;
+    margin: defaults.$padding-8 0;
+    padding: defaults.$padding-8;
+
+    display: inline-block;
+    background-color: var(--accent-color-lite);
+    border-radius: defaults.$border-radius;
+    border: defaults.$border-1 solid var(--accent-color);
+
+    transform: translateY(0);
+    transition: transform 250ms ease-in;
+
+    &:not(:focus) {
+      transform: translateY(-#{defaults.$padding-64});
+    }
+  }
 }
 
 h1,
@@ -208,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 {
@@ -354,8 +377,8 @@ svg.gdoc-icon {
   background: var(--body-background);
   border-radius: defaults.$border-radius;
   box-shadow:
-    0 1px 3px 0 var(--accent-color-dark),
+    0 1px 3px 0 var(--accent-color),
-    0 1px 2px 0 var(--accent-color);
+    0 1px 2px 0 var(--accent-color-lite);
   position: absolute;
   margin: 0;
   padding: defaults.$padding-8 defaults.$padding-4 !important;
@@ -420,6 +443,7 @@ svg.gdoc-icon {
       width: 1.85em;
       height: 1.85em;
       color: transparent;
+      transition: color 0.2s ease-in-out;
     }
 
     &:focus {
@@ -513,12 +537,20 @@ svg.gdoc-icon {
     position: relative;
 
     &:hover > .gdoc-post__codecopy {
+      opacity: 1;
       visibility: visible;
+      pointer-events: auto;
     }
   }
 
   &__codecopy {
+    opacity: 0;
     visibility: hidden;
+    transition:
+      opacity 0.2s ease,
+      visibility 0.2s ease;
+    pointer-events: none;
+
     position: absolute;
     top: defaults.$padding-8;
     right: defaults.$padding-8;
@@ -578,6 +610,10 @@ svg.gdoc-icon {
     text-decoration: underline;
     color: var(--footer-link-color);
 
+    &:hover {
+      text-decoration: none;
+    }
+
     &:visited {
       color: var(--footer-link-color-visited);
     }

src/sass/_chroma_base.scss

@@ -20,7 +20,6 @@
 
   /* LineTable */
   .chroma .lntable {
-    border: defaults.$border-1 solid var(--code-accent-color);
     border-radius: defaults.$border-radius;
     border-spacing: 0;
     padding: 0;
@@ -39,7 +38,7 @@
   .chroma .lntable td:first-child {
     code {
       background-color: var(--code-accent-color-lite);
-      border-right: defaults.$border-1 solid var(--code-accent-color);
+      font-size: defaults.$font-size-12;
       padding-left: 0;
       padding-right: 0;
       border-radius: 0;

src/sass/_color_mode.scss

@@ -19,10 +19,6 @@
   --link-color: #{defaults.$link-color};
   --link-color-visited: #{defaults.$link-color-visited};
 
-  --hint-link-color: #{defaults.$link-color};
-  --hint-link-color-visited: #{defaults.$link-color-visited};
-
-  --accent-color-dark: #{defaults.$gray-400};
   --accent-color: #{defaults.$gray-200};
   --accent-color-lite: #{defaults.$gray-100};
 
@@ -40,16 +36,10 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: none;
     }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale(defaults.$gray-600, $alpha: -95%);
-    }
   }
 }
 
@@ -68,10 +58,6 @@
   --link-color: #{defaults.$link-color-dark};
   --link-color-visited: #{defaults.$link-color-visited-dark};
 
-  --hint-link-color: #{defaults.$link-color};
-  --hint-link-color-visited: #{defaults.$link-color-visited};
-
-  --accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
   --accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
   --accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
 
@@ -89,7 +75,6 @@
   }
 
   .gdoc-markdown {
-    .gdoc-hint,
     .gdoc-props__tag,
     .admonitionblock {
       filter: saturate(2.5) brightness(0.85);
@@ -98,22 +83,6 @@
     .gdoc-progress__bar {
       filter: saturate(0.85) brightness(0.85);
     }
-
-    .gdoc-hint,
-    .admonitionblock {
-      a {
-        color: var(--hint-link-color);
-
-        &:visited {
-          color: var(--hint-link-color-visited);
-        }
-      }
-    }
-
-    .gdoc-hint__title,
-    .admonitionblock table td:first-child {
-      background-color: color.scale(defaults.$gray-600, $alpha: -85%);
-    }
   }
 }
 
@@ -124,7 +93,7 @@
     --code-background: #{defaults.$code-background-dark};
     --code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
     --code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
-    --code-font-color: #{defaults.$code-font-color-dark};
+    --code-font-color: #{defaults.$gray-300};
 
     --code-copy-background: #{defaults.$code-background-dark};
     --code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
@@ -140,11 +109,11 @@
     --code-background: #{defaults.$code-background};
     --code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
     --code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
-    --code-font-color: #{defaults.$code-font-color};
+    --code-font-color: #{defaults.$gray-700};
 
     --code-copy-background: #{defaults.$code-background};
-    --code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
+    --code-copy-font-color: #{defaults.$gray-500};
-    --code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
+    --code-copy-border-color: #{defaults.$gray-400};
     --code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
   }
 }

src/sass/_defaults.scss

@@ -28,19 +28,18 @@ $border-1: 1px !default;
 $border-2: 1.5px !default;
 $border-4: 3px !default;
 
-$border-radius: 0.15rem !default;
+$border-radius: 0.3rem !default;
 
 // Grayscale
 $white: rgba(255, 255, 255, 1) !default;
-$gray-100: rgba(248, 249, 250, 1) !default;
+$gray-100: rgba(244, 246, 247, 1) !default;
-$gray-200: rgba(233, 236, 239, 1) !default;
+$gray-200: rgba(217, 219, 221, 1) !default;
-$gray-300: rgba(222, 226, 230, 1) !default;
+$gray-300: rgba(189, 192, 195, 1) !default;
-$gray-400: rgba(206, 212, 218, 1) !default;
+$gray-400: rgba(162, 165, 169, 1) !default;
-$gray-500: rgba(173, 181, 189, 1) !default;
+$gray-500: rgba(134, 137, 142, 1) !default;
-$gray-600: rgba(134, 142, 150, 1) !default;
+$gray-600: rgba(107, 110, 116, 1) !default;
-$gray-700: rgba(73, 80, 87, 1) !default;
+$gray-700: rgba(79, 83, 90, 1) !default;
-$gray-800: rgba(52, 58, 64, 1) !default;
+$gray-800: rgba(52, 56, 64, 1) !default;
-$gray-900: rgba(33, 37, 41, 1) !default;
 $black: rgba(0, 0, 0, 1) !default;
 
 $link-color: rgba(10, 83, 154, 1) !default;

src/sass/_markdown.scss

@@ -38,7 +38,7 @@
     line-height: normal;
 
     &:hover {
-      text-decoration: underline;
+      text-decoration: none;
     }
   }
 
@@ -56,7 +56,7 @@
   }
 
   &__link--code {
-    text-decoration: none;
+    text-decoration: underline;
     code {
       color: inherit !important;
     }
@@ -64,7 +64,7 @@
     &:hover {
       background: none;
       color: var(--link-color) !important;
-      text-decoration: underline;
+      text-decoration: none;
     }
 
     &:visited,
@@ -120,6 +120,7 @@
     padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
       (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
+    border: defaults.$border-1 solid var(--accent-color);
     border-left: defaults.$border-4 solid var(--accent-color);
     border-radius: defaults.$border-radius;
   }
@@ -174,7 +175,7 @@
   }
 
   code {
-    padding: defaults.$padding-4 defaults.$padding-8;
+    padding: defaults.$padding-2 defaults.$padding-4;
   }
 
   pre,
@@ -183,7 +184,7 @@
     border-radius: defaults.$border-radius;
     color: var(--code-font-color);
     font-size: defaults.$font-size-14;
-    line-height: defaults.$padding-16;
+    line-height: defaults.$padding-20;
   }
 
   pre code {

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

src/sass/_shortcodes.scss

@@ -140,51 +140,44 @@
 
 // {{< hint >}}
 .gdoc-hint {
+  $root: &;
   @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
-      border-left-color: $color;
+      border-color: $color;
-      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
-      color: defaults.$body-font-color;
       padding: 0;
 
-      code,
+      #{$root}__title {
-      pre {
+        background-color: color.adjust($color, $alpha: -0.9);
-        background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
+        border-start-start-radius: inherit;
-        color: defaults.$code-font-color;
+        border-start-end-radius: inherit;
+        position: relative;
+        z-index: -10;
+        outline: color.adjust($color, $alpha: -0.9);
       }
     }
   }
 
   &__title {
     padding: defaults.$padding-4 defaults.$padding-16;
-    background-color: color.scale(defaults.$gray-600, $alpha: -95%);
     font-weight: bold;
-    color: color.scale(defaults.$body-font-color, $alpha: -15%);
+    color: var(--body-font-color);
-
+    margin-left: -5px;
-    i.fa::after {
-      content: attr(title);
-      font-style: normal;
-      padding-left: defaults.$padding-24;
-    }
-
-    i.fa {
-      color: defaults.$black;
-      background-size: auto 90%;
-      background-repeat: no-repeat;
-      filter: invert(30%);
-      margin-left: -5px;
-    }
 
     @each $name, $icon in defaults.$hint-icons {
       i.fa.#{$name} {
-        background-image: url(img/geekdoc-stack.svg##{$icon});
+        width: defaults.$font-size-24;
+        height: defaults.$font-size-24;
+
+        mask-image: url(img/geekdoc-stack.svg##{$icon});
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        background-color: var(--body-font-color);
       }
     }
 
     .gdoc-icon {
       width: defaults.$font-size-24;
       height: defaults.$font-size-24;
-      margin-left: -5px;
     }
   }
 

src/sass/_utils.scss

@@ -31,7 +31,12 @@
   background: var(--accent-color-lite);
 }
 
-.flex-gap {
+.gap-8 {
+  flex-wrap: wrap;
+  gap: defaults.$padding-8;
+}
+
+.gap-16 {
   flex-wrap: wrap;
   gap: defaults.$padding-16;
 }
@@ -96,3 +101,7 @@
   display: inline-block;
   min-width: 4rem;
 }
+
+.w-full {
+  width: 100%;
+}

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