Merge branch 'main' of https://github.com/imfing/hextra

2026-03-23 12:15:33 +01:00
parent 8d62eaf0d5 339a2cebbe
commit cf25c397a9
182 changed files with 5637 additions and 1004 deletions
--- a/layouts/_partials/banner.html
+++ b/layouts/_partials/banner.html
@@ -10,6 +10,7 @@
    {{- end -}}
    <button
      class="hextra-banner-close-button hx:cursor-pointer hx:absolute hx:right-0 hx:text-white hx:font-bold hx:leading-none hx:hover:opacity-75 hx:transition hx:w-10 hx:h-10 hx:-mr-2 hx:md:mr-0 hx:flex hx:items-center hx:justify-center"
+      aria-label="{{ (T "closeBanner") | default "Close banner" }}"
    >
      {{- partial "utils/icon.html" (dict "name" "x" "attributes" "height=16") -}}
    </button>
--- a/layouts/_partials/breadcrumb.html
+++ b/layouts/_partials/breadcrumb.html
@@ -5,7 +5,7 @@
    {{- range $page.Ancestors.Reverse }}
      {{- if not .IsHome }}
        <div class="hx:whitespace-nowrap hx:transition-colors hx:min-w-[24px] hx:overflow-hidden hx:text-ellipsis hx:hover:text-gray-900 hx:dark:hover:text-gray-100">
-          <a href="{{ .RelPermalink }}">{{- partial "utils/title" . -}}</a>
+          <a href="{{ .RelPermalink }}" class="hx:inline-block hx:rounded-sm hx:hextra-focus-visible-inset">{{- partial "utils/title" . -}}</a>
        </div>
        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"hx:w-3.5 hx:shrink-0 hx:rtl:-rotate-180\"") -}}
      {{ end -}}
--- a/layouts/_partials/components/codeblock-copy-button.html
+++ b/layouts/_partials/components/codeblock-copy-button.html
@@ -8,6 +8,8 @@
  <button
    class="hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50"
    title="{{ $copyCode }}"
+    aria-label="{{ $copyCode }}"
+    data-copied-label="{{ (T "copied") | default "Copied!" }}"
  >
    <div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div>
 <div class="hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
--- a/layouts/_partials/components/giscus.html
+++ b/layouts/_partials/components/giscus.html
@@ -71,10 +71,14 @@
    // Listen for system theme changes
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setGiscusTheme);

-    // Update giscus theme when theme switcher is clicked
-    const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p");
+    // Update giscus theme when theme switcher is clicked.
+    const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options [data-item]");
    if (themeToggleOptions) {
-      themeToggleOptions.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
+      themeToggleOptions.forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          setTimeout(setGiscusTheme, 0);
+        });
+      });
    }
  });
 </script>
--- a/layouts/_partials/components/last-updated.html
+++ b/layouts/_partials/components/last-updated.html
@@ -1,9 +1,17 @@
 {{- $lastUpdated := (T "lastUpdated") | default "Last updated on" -}}
+{{- $page := . -}}

 {{- if site.Params.displayUpdatedDate -}}
  {{- with .Lastmod -}}
    {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .) }}
-    <div class="hx:mt-12 hx:mb-8 hx:block hx:text-xs hx:text-gray-500 hx:ltr:text-right hx:rtl:text-left hx:dark:text-gray-400">{{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time></div>
+    <div class="hx:mt-12 hx:mb-8 hx:block hx:text-xs hx:text-gray-500 hx:ltr:text-right hx:rtl:text-left hx:dark:text-gray-400">
+      {{ $lastUpdated }} <time datetime="{{ $datetime }}">{{ partial "utils/format-date" . }}</time>
+      {{- if site.Params.displayUpdatedAuthor -}}
+        {{- with $page.GitInfo -}}
+          {{ print " • " .AuthorName | safeHTML }}
+        {{- end -}}
+      {{- end -}}
+    </div>
  {{- else -}}
    <div class="hx:mt-16"></div>
  {{- end -}}
--- a/layouts/_partials/components/page-context-menu.html
+++ b/layouts/_partials/components/page-context-menu.html
@@ -0,0 +1,90 @@
+{{- $enableGlobal := site.Params.page.contextMenu.enable | default false -}}
+{{- $enablePage := .Params.contextMenu -}}
+{{- $enable := cond (ne $enablePage nil) $enablePage $enableGlobal -}}
+{{- $customLinks := site.Params.page.contextMenu.links | default slice -}}
+
+{{- if $enable -}}
+  {{- with .OutputFormats.Get "markdown" -}}
+    {{- $markdownURL := .Permalink -}}
+    {{- $pageURL := $.Permalink -}}
+    {{- $pageTitle := $.Title -}}
+    <div class="hextra-page-context-menu hx:relative hx:inline-flex hx:shrink-0">
+      <div class="hx:inline-flex hx:rounded-lg hx:border hx:border-gray-200 hx:transition-colors hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700">
+        <button
+          class="hextra-page-context-menu-copy hx:group/copybtn hx:inline-flex hx:cursor-pointer hx:items-center hx:gap-1.5 hx:bg-transparent hx:px-2.5 hx:py-1 hx:text-sm hx:font-medium hx:text-gray-700 hx:transition-colors hx:hover:bg-slate-50 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-900 hx:ltr:rounded-l-lg hx:rtl:rounded-r-lg hx:hextra-focus-visible-inset"
+          data-url="{{ $markdownURL }}"
+          title="{{ i18n "copyAsMarkdown" }}"
+          aria-label="{{ i18n "copyAsMarkdown" }}"
+        >
+          <div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:size-4">
+            {{- partial "utils/icon.html" (dict "name" "copy" "attributes" "height=16 width=16") -}}
+          </div>
+          <div class="hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:size-4">
+            {{- partial "utils/icon.html" (dict "name" "check" "attributes" "height=16 width=16") -}}
+          </div>
+          <span>{{ i18n "copyPage" }}</span>
+        </button>
+        <button
+          class="hextra-page-context-menu-toggle hx:inline-flex hx:cursor-pointer hx:items-center hx:justify-center hx:bg-transparent hx:px-1.5 hx:py-1 hx:text-gray-500 hx:transition-colors hx:hover:bg-slate-50 hx:hover:text-gray-700 hx:dark:text-gray-400 hx:dark:hover:bg-neutral-900 hx:dark:hover:text-gray-300 hx:ltr:rounded-r-lg hx:rtl:rounded-l-lg hx:hextra-focus-visible-inset"
+          data-state="closed"
+          aria-label="{{ (T "togglePageContextMenu") | default "Toggle page context menu" }}"
+          aria-expanded="false"
+          aria-haspopup="menu"
+        >
+          <div class="hx:size-4 hx:transition-transform hx:duration-200" data-chevron>
+            {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=16 width=16") -}}
+          </div>
+        </button>
+      </div>
+      <ul class="hextra-page-context-menu-dropdown not-prose hx:hidden hx:absolute hx:top-full hx:left-0 hx:sm:left-auto hx:sm:right-0 hx:mt-1 hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900" role="menu">
+        <li role="none">
+          <button
+            data-action="copy"
+            role="menuitem"
+            class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+          >
+            <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+              {{- partial "utils/icon.html" (dict "name" "copy" "attributes" "height=16 width=16") -}}
+            </div>
+            {{ i18n "copyAsMarkdown" }}
+          </button>
+        </li>
+        <li role="none">
+          <button
+            data-action="view"
+            data-url="{{ $markdownURL }}"
+            role="menuitem"
+            class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+          >
+            <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+              {{- partial "utils/icon.html" (dict "name" "markdown" "attributes" "height=16 width=16") -}}
+            </div>
+            {{ i18n "viewAsMarkdown" }}
+          </button>
+        </li>
+        {{- if $customLinks -}}
+        <li class="hx:my-1 hx:h-px hx:bg-gray-200 hx:dark:bg-neutral-700" role="separator"></li>
+        {{- range $customLinks -}}
+          {{- $linkURL := partial "utils/template-url.html" (dict "template" .url "values" (dict "url" $pageURL "title" $pageTitle "markdown_url" $markdownURL)) -}}
+          <li role="none">
+            <a
+              href="{{ $linkURL }}"
+              target="_blank"
+              rel="noopener noreferrer"
+              role="menuitem"
+              class="hx:flex hx:w-full hx:cursor-pointer hx:select-none hx:items-center hx:gap-2 hx:whitespace-nowrap hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:text-gray-700 hx:outline-none hx:transition-colors hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:text-gray-300 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100"
+            >
+              {{- with .icon -}}
+              <div class="hx:size-4 hx:shrink-0 hx:text-gray-500 hx:dark:text-gray-400">
+                {{- partial "utils/icon.html" (dict "name" . "attributes" "height=16 width=16") -}}
+              </div>
+              {{- end -}}
+              {{ .name }}
+            </a>
+          </li>
+        {{- end -}}
+        {{- end -}}
+      </ul>
+    </div>
+  {{- end -}}
+{{- end -}}
--- a/layouts/_partials/language-switch.html
+++ b/layouts/_partials/language-switch.html
@@ -19,6 +19,8 @@
      class="hextra-language-switcher hx:cursor-pointer hx:rounded-md hx:text-left hx:font-medium {{ $class }} hx:grow"
      type="button"
      aria-label="{{ $changeLanguage }}"
+      aria-expanded="false"
+      aria-haspopup="menu"
    >
      <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
        {{- partial "utils/icon" (dict "name" $iconName "attributes" (printf "height=%d" $iconHeight)) -}}
@@ -26,15 +28,17 @@
      </div>
    </button>
    <ul
-      class="hextra-language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+      class="hextra-language-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
      style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
+      role="menu"
    >
      {{ range site.Languages }}
        {{ $link := partial "utils/lang-link" (dict "lang" .Lang "context" $page) }}
-        <li class="hx:flex hx:flex-col">
+        <li role="none" class="hx:flex hx:flex-col">
          <a
            href="{{ $link }}"
-            class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+            role="menuitem"
+            class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
          >
            {{- .LanguageName -}}
            {{- if eq .LanguageName site.Language.LanguageName -}}
--- a/layouts/_partials/navbar-link.html
+++ b/layouts/_partials/navbar-link.html
@@ -5,6 +5,14 @@
 {{- $external := .external -}}

 {{- $active := or ($currentPage.HasMenuCurrent "main" $item) ($currentPage.IsMenuCurrent "main" $item) -}}
+{{- /* Additional check for section landing pages in multilingual sites (normalize trailing slashes) */ -}}
+{{- if and (not $active) $link -}}
+  {{- $currentPath := strings.TrimSuffix "/" $currentPage.RelPermalink -}}
+  {{- $linkPath := strings.TrimSuffix "/" $link -}}
+  {{- if eq $currentPath $linkPath -}}
+    {{- $active = true -}}
+  {{- end -}}
+{{- end -}}
 {{- $activeClass := cond $active "hx:font-medium" "hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200" -}}

 {{- if $item.HasChildren -}}
@@ -16,6 +24,8 @@
    class="hextra-nav-menu-toggle hx:cursor-pointer hx:text-sm hx:contrast-more:text-gray-700 hx:contrast-more:dark:text-gray-100 hx:relative hx:-ml-2 hx:whitespace-nowrap hx:p-2 hx:flex hx:items-center hx:gap-1 {{ $activeClass }}"
    type="button"
    aria-label="{{ or (T $item.Identifier) $item.Name | safeHTML }}"
+    aria-expanded="false"
+    aria-haspopup="menu"
  >
    {{- if $icon -}}
    <span class="hx:inline-flex hx:items-center">
@@ -28,8 +38,9 @@
    {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=12 class=\"hx:transition-transform hx:duration-200 hx:ease-in-out\"") -}}
  </button>
  <ul
-    class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
    style="min-width: 100px;"
+    role="menu"
  >
    {{ range $item.Children }}
    {{- $link := .URL -}}
@@ -39,11 +50,12 @@
    {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
    {{- end -}}
    {{- end -}}
-    <li class="hextra-nav-menu-item hx:flex hx:flex-col">
+    <li role="none" class="hextra-nav-menu-item hx:flex hx:flex-col">
      <a
        href="{{ $link }}"
        {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
-        class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:flex hx:items-center hx:gap-1"
+        role="menuitem"
+        class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:flex hx:items-center hx:gap-1 hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800"
      >
        {{- if and (eq .Params.type "link") .Params.icon -}}
        <span class="hx:inline-flex hx:items-center">
--- a/layouts/_partials/navbar-title.html
+++ b/layouts/_partials/navbar-title.html
@@ -11,6 +11,6 @@
    <img class="hx:mr-2 hx:hidden hx:dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ cond $displayTitle `Dark Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
  {{- end }}
  {{- if $displayTitle }}
-    <span class="hx:mr-2 hx:font-extrabold hx:inline hx:select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
+    <span class="hx:mr-2 hx:font-extrabold hx:inline hx:select-none">{{- .Site.Title -}}</span>
  {{- end }}
 </a>
--- a/layouts/_partials/navbar.html
+++ b/layouts/_partials/navbar.html
@@ -21,7 +21,7 @@
    {{- $currentPage := . -}}
    {{- range .Site.Menus.main -}}
      {{- if eq .Params.type "search" -}}
-        {{- partial "search.html" (dict "params" .Params) -}}
+        {{- partial "search.html" (dict "params" .Params "location" "navbar") -}}
      {{- else -}}
        {{- $link := .URL -}}
        {{- $external := strings.HasPrefix $link "http" -}}
@@ -52,7 +52,7 @@
    {{- end -}}


-    <button type="button" aria-label="Menu" class="hextra-hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden">
+    <button type="button" aria-label="{{ (T "menu") | default "Menu" }}" aria-expanded="false" class="hextra-hamburger-menu hx:cursor-pointer hx:-mr-2 hx:rounded-sm hx:p-2 hx:active:bg-gray-400/20 hx:md:hidden hx:hextra-focus-visible-inset">
      {{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" (printf "height=%d" $iconHeight)) -}}
    </button>
  </nav>
--- a/layouts/_partials/opengraph.html
+++ b/layouts/_partials/opengraph.html
@@ -22,20 +22,30 @@
 <meta property="og:url" content="{{ .Permalink }}">

 {{- with $.Params.images -}}
-{{- range first 6 . }}
-<meta property="og:image" content="{{ . | absURL }}">
-{{ end -}}
+  {{- range first 6 . }}
+    {{- with $.Resources.GetMatch . }}
+      <!-- If the string matches a page resource, use that -->
+      <meta property="og:image" content="{{ .Permalink }}">
+    {{- else }}
+      <!-- Otherwise treat it as a site/global path -->
+      {{- $image := . -}}
+      {{- if hasPrefix $image "/" -}}
+        {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+      {{- end -}}
+      <meta property="og:image" content="{{ $image | absURL }}">
+    {{- end }}
+  {{- end }}
 {{- else -}}
-{{- $featured := "" }}
-{{- with $featured -}}
-<meta property="og:image" content="{{ $featured.Permalink }}">
-{{- else -}}
-{{- with $.Site.Params.images }}
-<meta property="og:image" content="{{ index . 0 | absURL }}">
-{{ end -}}
-{{- end -}}
+  {{- with $.Site.Params.images }}
+    {{- $image := index . 0 -}}
+    {{- if hasPrefix $image "/" -}}
+      {{- $image = relURL (strings.TrimPrefix "/" $image) -}}
+    {{- end -}}
+    <meta property="og:image" content="{{ $image | absURL }}">
+  {{- end }}
 {{- end -}}

+
 {{- if .IsPage }}
 {{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
 <meta property="article:section" content="{{ .Section }}">
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -13,3 +13,8 @@
 {{- if (.Store.Get "hasAsciinema") -}}
  {{- partial "scripts/asciinema.html" . -}}
 {{- end -}}
+
+{{/* Medium Zoom */}}
+{{- if (.Store.Get "hasImageZoom") -}}
+  {{- partial "scripts/medium-zoom.html" . -}}
+{{- end -}}
--- a/layouts/_partials/scripts/asciinema.html
+++ b/layouts/_partials/scripts/asciinema.html
@@ -33,7 +33,7 @@
 {{- /* CSS retrieval: get raw CSS from either local asset or remote, then process */ -}}
 {{- if $isRemoteBase -}}
  {{- $cssPath := cond (ne $asciinemaCssAsset "") $asciinemaCssAsset "asciinema-player.css" -}}
-  {{- $asciinemaCssUrl := printf "%s/%s" $asciinemaBase $cssPath -}}
+  {{- $asciinemaCssUrl := urls.JoinPath $asciinemaBase $cssPath -}}
  {{- with try (resources.GetRemote $asciinemaCssUrl) -}}
    {{- with .Err -}}
      {{- errorf "Could not retrieve Asciinema css file from %s. Reason: %s." $asciinemaCssUrl . -}}
@@ -56,7 +56,7 @@
 {{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
 {{- if $isRemoteBase -}}
  {{- $jsPath := cond (ne $asciinemaJsAsset "") $asciinemaJsAsset (printf "asciinema-player%s.js" $minSuffix) -}}
-  {{- $asciinemaJsUrl := printf "%s/%s" $asciinemaBase $jsPath -}}
+  {{- $asciinemaJsUrl := urls.JoinPath $asciinemaBase $jsPath -}}
  {{- with try (resources.GetRemote $asciinemaJsUrl) -}}
    {{- with .Err -}}
      {{- errorf "Could not retrieve Asciinema js file from %s. Reason: %s." $asciinemaJsUrl . -}}
@@ -76,8 +76,21 @@
  {{- end -}}
 {{- end -}}

-<script>
+<script data-playback-time="{{ (T "playbackTime") | default "Playback time" }}">
+  const playbackTimeLabel =
+    document.currentScript?.getAttribute("data-playback-time") || "Playback time";
+
  document.addEventListener("DOMContentLoaded", () => {
+    const observers = [];
+
+    const applyTimerA11y = (container) => {
+      container.querySelectorAll(".ap-timer[role='textbox']").forEach((timer) => {
+        if (!timer.getAttribute("aria-label")) {
+          timer.setAttribute("aria-label", playbackTimeLabel);
+        }
+      });
+    };
+
    // Fix play button position issue
    const style = document.createElement("style");
    style.textContent = `
@@ -108,7 +121,20 @@
          controls: true,  // Always show user controls (bottom control bar)
          idleTimeLimit: 2,  // Limit terminal inactivity to 2 seconds (compress pauses longer than 2s)
        });
+        applyTimerA11y(el);
+        const observer = new MutationObserver(() => applyTimerA11y(el));
+        observer.observe(el, { childList: true, subtree: true });
+        observers.push(observer);
      }
    });
+
+    // Prevent lingering observers when navigating away.
+    window.addEventListener(
+      "pagehide",
+      () => {
+        observers.forEach((observer) => observer.disconnect());
+      },
+      { once: true },
+    );
  });
 </script>
--- a/layouts/_partials/scripts/katex.html
+++ b/layouts/_partials/scripts/katex.html
@@ -39,7 +39,7 @@
 {{- $minSuffix := cond hugo.IsProduction ".min" "" -}}
 {{- if $isRemoteBase -}}
  {{- $cssPath := cond (ne $katexCssAsset "") $katexCssAsset (printf "katex%s.css" $minSuffix) -}}
-  {{- $katexCssUrl := printf "%s/%s" $katexBase $cssPath -}}
+  {{- $katexCssUrl := urls.JoinPath $katexBase $cssPath -}}
  {{- with try (resources.GetRemote $katexCssUrl) -}}
    {{- with .Err -}}
      {{- errorf "Could not retrieve KaTeX css file from %s. Reason: %s." $katexCssUrl . -}}
@@ -59,7 +59,7 @@
  {{- $cssContent := . -}}
  {{- if $isRemoteBase -}}
    {{- $fontPattern := "url(fonts/" -}}
-    {{- $fontSub := printf "url(%s/fonts/" $katexBase -}}
+    {{- $fontSub := printf "url(%s/" (urls.JoinPath $katexBase "fonts") -}}
    {{- $cssContent = strings.Replace $cssContent $fontPattern $fontSub -}}
  {{- end -}}
  {{- with resources.FromString (printf "css/katex%s.css" $minSuffix) $cssContent -}}
@@ -69,7 +69,7 @@
 {{- else -}}
  {{- if not $isRemoteBase -}}
    {{- $cssPath := cond (ne $katexCssAsset "") $katexCssAsset (printf "katex%s.css" $minSuffix) -}}
-    <link rel="stylesheet" href="{{ printf "%s/%s" $katexBase $cssPath }}" />
+    <link rel="stylesheet" href="{{ urls.JoinPath $katexBase $cssPath }}" />
  {{- end -}}
 {{- end -}}

--- a/layouts/_partials/scripts/medium-zoom.html
+++ b/layouts/_partials/scripts/medium-zoom.html
@@ -0,0 +1,85 @@
+{{- /* Medium Zoom */ -}}
+
+{{- $zoomBase := "" -}}
+{{- $useDefaultCdn := true -}}
+{{- with site.Params.imageZoom.base -}}
+  {{- $zoomBase = . -}}
+  {{- $useDefaultCdn = false -}}
+{{- end -}}
+
+{{- $zoomJsAsset := "" -}}
+{{- with site.Params.imageZoom.js -}}
+  {{- $zoomJsAsset = . -}}
+{{- end -}}
+
+{{- /* If only js is set without base, use local asset loading */ -}}
+{{- if and $useDefaultCdn (ne $zoomJsAsset "") -}}
+  {{- $useDefaultCdn = false -}}
+{{- end -}}
+
+{{- /* Set default CDN base if needed */ -}}
+{{- if $useDefaultCdn -}}
+  {{- $zoomBase = "https://cdn.jsdelivr.net/npm/medium-zoom@latest/dist" -}}
+{{- end -}}
+
+{{- $isRemoteBase := or (strings.HasPrefix $zoomBase "http://") (strings.HasPrefix $zoomBase "https://") -}}
+{{- $minSuffix := cond hugo.IsProduction ".min" "" -}}
+
+{{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
+{{- if $isRemoteBase -}}
+  {{- $jsPath := cond (ne $zoomJsAsset "") $zoomJsAsset (printf "medium-zoom%s.js" $minSuffix) -}}
+  {{- $zoomJsUrl := urls.JoinPath $zoomBase $jsPath -}}
+  {{- with try (resources.GetRemote $zoomJsUrl) -}}
+    {{- with .Err -}}
+      {{- errorf "Could not retrieve Medium Zoom js file from %s. Reason: %s." $zoomJsUrl . -}}
+    {{- else with .Value -}}
+      {{- with resources.Copy (printf "js/medium-zoom%s.js" $minSuffix) . -}}
+        {{- $zoomJs := . | fingerprint -}}
+        <script defer src="{{ $zoomJs.RelPermalink }}" integrity="{{ $zoomJs.Data.Integrity }}" crossorigin="anonymous"></script>
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+{{- else if $zoomJsAsset -}}
+  {{- with resources.Get $zoomJsAsset -}}
+    {{- $zoomJs := . | fingerprint -}}
+    <script defer src="{{ $zoomJs.RelPermalink }}" integrity="{{ $zoomJs.Data.Integrity }}" crossorigin="anonymous"></script>
+  {{- else -}}
+    {{- errorf "Medium Zoom js asset not found at %q" $zoomJsAsset -}}
+  {{- end -}}
+{{- end -}}
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    if (!window.mediumZoom) {
+      return;
+    }
+
+    const getOverlay = () => {
+      return document.documentElement.classList.contains("dark")
+        ? "rgba(17, 17, 17, 0.98)"
+        : "rgba(255, 255, 255, 0.98)";
+    };
+
+    const zoom = window.mediumZoom("[data-zoomable]", {
+      background: getOverlay(),
+    });
+
+    const style = document.createElement("style");
+    style.textContent = `
+      .medium-zoom-overlay {
+        z-index: 1000;
+      }
+      .medium-zoom-image--opened {
+        z-index: 1001;
+      }
+    `;
+    document.head.appendChild(style);
+
+    new MutationObserver(() => {
+      zoom.update({ background: getOverlay() });
+    }).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+  });
+</script>
--- a/layouts/_partials/scripts/mermaid.html
+++ b/layouts/_partials/scripts/mermaid.html
@@ -28,7 +28,7 @@
 {{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
 {{- if $isRemoteBase -}}
  {{- $jsPath := cond (ne $mermaidJsAsset "") $mermaidJsAsset (printf "mermaid%s.js" $minSuffix) -}}
-  {{- $mermaidJsUrl := printf "%s/%s" $mermaidBase $jsPath -}}
+  {{- $mermaidJsUrl := urls.JoinPath $mermaidBase $jsPath -}}
  {{- with try (resources.GetRemote $mermaidJsUrl) -}}
    {{- with .Err -}}
      {{- errorf "Could not retrieve Mermaid js file from %s. Reason: %s." $mermaidJsUrl . -}}
--- a/layouts/_partials/scripts/search.html
+++ b/layouts/_partials/scripts/search.html
@@ -7,18 +7,55 @@
    {{- if hugo.IsProduction -}}
      {{- $jsSearch = $jsSearch | minify | fingerprint -}}
    {{- end -}}
-    {{- $flexSearchVersion := site.Params.search.flexsearch.version | default "0.8.143" -}}
-    {{- $flexSearchJsUrl := printf "https://cdn.jsdelivr.net/npm/flexsearch@%s/dist/flexsearch.bundle%s.js" $flexSearchVersion (cond hugo.IsProduction ".min" ".debug") -}}
-    {{ with try (resources.GetRemote $flexSearchJsUrl) -}}
-      {{ with .Err -}}
-        {{ errorf "Could not retrieve FlexSearch js file from %s. Reason: %s." $flexSearchJsUrl . -}}
-      {{ else with.Value -}}
-        {{ with resources.Copy (printf "js/flexsearch.js") . -}}
-          {{ $flexSearchJs := . | fingerprint -}}
-          <script defer src="{{ $flexSearchJs.RelPermalink }}" integrity="{{ $flexSearchJs.Data.Integrity }}" crossorigin="anonymous"></script>
-        {{ end -}}
-      {{ end -}}
-    {{ end -}}
+
+    {{- $flexSearchBase := "" -}}
+    {{- $useDefaultCdn := true -}}
+    {{- with site.Params.search.flexsearch.base -}}
+      {{- $flexSearchBase = . -}}
+      {{- $useDefaultCdn = false -}}
+    {{- end -}}
+
+    {{- $flexSearchJsAsset := "" -}}
+    {{- with site.Params.search.flexsearch.js -}}
+      {{- $flexSearchJsAsset = . -}}
+    {{- end -}}
+
+    {{- /* If only js is set without base, use local asset loading. */ -}}
+    {{- if and $useDefaultCdn (ne $flexSearchJsAsset "") -}}
+      {{- $useDefaultCdn = false -}}
+    {{- end -}}
+
+    {{- $bundleSuffix := cond hugo.IsProduction ".min" ".debug" -}}
+    {{- if $useDefaultCdn -}}
+      {{- $flexSearchVersion := site.Params.search.flexsearch.version | default "0.8.143" -}}
+      {{- $flexSearchBase = printf "https://cdn.jsdelivr.net/npm/flexsearch@%s/dist" $flexSearchVersion -}}
+    {{- end -}}
+
+    {{- $isRemoteBase := or (strings.HasPrefix $flexSearchBase "http://") (strings.HasPrefix $flexSearchBase "https://") -}}
+    {{- if $isRemoteBase -}}
+      {{- $jsPath := cond (ne $flexSearchJsAsset "") $flexSearchJsAsset (printf "flexsearch.bundle%s.js" $bundleSuffix) -}}
+      {{- $flexSearchJsUrl := urls.JoinPath $flexSearchBase $jsPath -}}
+      {{- with try (resources.GetRemote $flexSearchJsUrl) -}}
+        {{- with .Err -}}
+          {{- errorf "Could not retrieve FlexSearch js file from %s. Reason: %s." $flexSearchJsUrl . -}}
+        {{- else with .Value -}}
+          {{- with resources.Copy "js/flexsearch.js" . -}}
+            {{- $flexSearchJs := . | fingerprint -}}
+            <script defer src="{{ $flexSearchJs.RelPermalink }}" integrity="{{ $flexSearchJs.Data.Integrity }}" crossorigin="anonymous"></script>
+          {{- end -}}
+        {{- end -}}
+      {{- end -}}
+    {{- else if $flexSearchJsAsset -}}
+      {{- with resources.Get $flexSearchJsAsset -}}
+        {{- $flexSearchJs := . | fingerprint -}}
+        <script defer src="{{ $flexSearchJs.RelPermalink }}" integrity="{{ $flexSearchJs.Data.Integrity }}" crossorigin="anonymous"></script>
+      {{- else -}}
+        {{- errorf "FlexSearch js asset not found at %q" $flexSearchJsAsset -}}
+      {{- end -}}
+    {{- else if not $useDefaultCdn -}}
+      {{- errorf "FlexSearch local loading requires params.search.flexsearch.js when using non-remote base %q" $flexSearchBase -}}
+    {{- end -}}
+
    <script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
  {{- else -}}
    {{- warnf `search type "%s" is not supported` $searchType -}}
--- a/layouts/_partials/search.html
+++ b/layouts/_partials/search.html
@@ -5,8 +5,10 @@
  <div class="hx:relative hx:flex hx:items-center hx:text-gray-900 hx:contrast-more:text-gray-800 hx:dark:text-gray-300 hx:contrast-more:dark:text-gray-300">
    <input
      placeholder="{{ $placeholder }}"
-      class="hextra-search-input hx:focus:hextra-focus hx:block hx:w-full hx:appearance-none hx:rounded-lg hx:px-3 hx:py-2 hx:transition-colors hx:text-base hx:leading-tight hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus:bg-white hx:dark:focus:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
+      aria-label="{{ $placeholder }}"
+      class="hextra-search-input hx:hextra-focus-visible hx:block hx:w-full hx:appearance-none hx:rounded-lg hx:px-3 hx:py-2 hx:transition-colors hx:text-base hx:leading-tight hx:md:text-sm hx:bg-black/[.05] hx:dark:bg-gray-50/10 hx:focus-visible:bg-white hx:dark:focus-visible:bg-dark hx:placeholder:text-gray-500 hx:dark:placeholder:text-gray-400 hx:contrast-more:border hx:contrast-more:border-current"
      type="search"
+      autocomplete="off"
      value=""
      spellcheck="false"
    />
@@ -20,7 +22,9 @@
  <div>
    <ul
      class="hextra-search-results hextra-scrollbar hx:hidden hx:border hx:border-gray-200 hx:bg-white hx:text-gray-100 hx:dark:border-neutral-800 hx:dark:bg-neutral-900 hx:absolute hx:top-full hx:z-20 hx:mt-2 hx:overflow-auto hx:overscroll-contain hx:rounded-xl hx:py-2.5 hx:shadow-xl hx:max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)] hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)] hx:inset-x-0 hx:ltr:md:left-auto hx:rtl:md:right-auto hx:contrast-more:border hx:contrast-more:border-gray-900 hx:contrast-more:dark:border-gray-50 hx:w-screen hx:min-h-[100px] hx:max-w-[min(calc(100vw-2rem),calc(100%+20rem))]"
+      aria-label="{{ (T "searchResults") | default "Search results" }}"
      style="transition: max-height 0.2s ease 0s;"
    ></ul>
+    <div class="hextra-search-status hx:sr-only" aria-live="polite" role="status"></div>
  </div>
 </div>
--- a/layouts/_partials/shortcodes/card.html
+++ b/layouts/_partials/shortcodes/card.html
@@ -3,6 +3,7 @@
 {{- $icon := .icon -}}
 {{- $subtitle := .subtitle -}}
 {{- $image := .image -}}
+{{- $alt := .alt | default $title -}}
 {{- $width := .width -}}
 {{- $height := .height -}}
 {{- $imageStyle := .imageStyle -}}
@@ -29,7 +30,7 @@
 >
  {{- with $image -}}
    <img
-      alt="{{ $title }}"
+      alt="{{ $alt }}"
      class="hextra-card-image"
      loading="lazy"
      decoding="async"
@@ -45,14 +46,15 @@
    {{- $padding = "hx:pt-4 hx:px-4" -}}
  {{- end -}}

-
-  <span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 {{ $padding }} hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50">
-    {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
-    {{- $title -}}
-  </span>
-  {{- with $subtitle -}}
-    <div class="hextra-card-subtitle hx:line-clamp-3 hx:text-sm hx:font-normal hx:text-gray-500 hx:dark:text-gray-400 hx:px-4 hx:mb-4 hx:mt-2">{{- $subtitle | markdownify -}}</div>
-  {{- end -}}
+  <div class="hx:mt-auto">
+    <span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 {{ $padding }} hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50">
+      {{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
+      {{- $title -}}
+    </span>
+    {{- with $subtitle -}}
+      <div class="hextra-card-subtitle hx:line-clamp-3 hx:text-sm hx:font-normal hx:text-gray-500 hx:dark:text-gray-400 hx:px-4 hx:mb-4 hx:mt-2">{{- $subtitle | markdownify -}}</div>
+    {{- end -}}
+  </div>

  {{- if $tag }}
    {{- partial "shortcodes/badge.html" (dict
--- a/layouts/_partials/shortcodes/tabs.html
+++ b/layouts/_partials/shortcodes/tabs.html
@@ -4,6 +4,7 @@
 The `tabs` parameter is a list of dict with the following keys:
  - `id`: (int) the ID of the tab (the Ordinal of the tab shortcode).
  - `name`: (string) the name of the tab (the title).
+  - `icon`: (string) the icon of the tab.
  - `content`: (string) the content of the tab.
  - `selected`: (bool) whether the tab is selected.
 */ -}}
@@ -30,40 +31,18 @@ The `tabs` parameter is a list of dict with the following keys:
 {{- /* Generate a unique ID for each tab group. */ -}}
 {{- $globalID := printf "tabs-%02v" $tabsID -}}

+{{- /* Keep HTML on single lines to avoid `>` being parsed as blockquote when nested in steps (#876) */ -}}
 <div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
-  <div
-    class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800"
-    {{ if $enableSync }} data-tab-group="{{ delimit $dataTabGroup `,` }}"{{ end }}
-  >
+  <div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800" role="tablist"{{- if $enableSync }} data-tab-group="{{ delimit $dataTabGroup `,` }}"{{- end }}>
    {{- range $i, $item := $tabs -}}
-      <button
-        class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"
-        role="tab"
-        type="button"
-        aria-controls="tabs-panel-{{ $globalID }}-{{ $item.id }}"
-        {{- if eq $i $selectedIndex -}}
-        aria-selected="true"
-        tabindex="0"
-        data-state="selected"
-        {{- end }}
-      >
-        {{- $item.name -}}
-      </button>
+      <button class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white hx:hextra-focus-visible-inset" id="tabs-tab-{{ $globalID }}-{{ $item.id }}" role="tab" type="button" aria-controls="tabs-panel-{{ $globalID }}-{{ $item.id }}" aria-selected="{{ if eq $i $selectedIndex }}true{{ else }}false{{ end }}" tabindex="{{ if eq $i $selectedIndex }}0{{ else }}-1{{ end }}"{{- if eq $i $selectedIndex }} data-state="selected"{{- end }}><span class="hx:inline-flex hx:items-center hx:gap-1.5">{{- with $item.icon -}}{{- partial "utils/icon.html" (dict "name" . "attributes" `height=1em class="hx:inline-block hx:shrink-0" aria-hidden="true"`) -}}{{- end -}}<span>{{- $item.name -}}</span></span></button>
    {{- end -}}
  </div>
 </div>
 <div>
-    {{- range $i, $item := $tabs -}}
-      <div
-        class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block"
-        id="tabs-panel-{{ $globalID }}-{{ $item.id }}"
-        role="tabpanel"
-        {{- if eq $i $selectedIndex -}}
-        tabindex="0"
-        data-state="selected"
-        {{ end -}}
-      >
-        {{- $item.content  | markdownify -}}
-      </div>
-    {{- end -}}
+  {{- range $i, $item := $tabs -}}
+    <div class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block" id="tabs-panel-{{ $globalID }}-{{ $item.id }}" role="tabpanel" aria-labelledby="tabs-tab-{{ $globalID }}-{{ $item.id }}" aria-hidden="{{ if eq $i $selectedIndex }}false{{ else }}true{{ end }}"{{- if eq $i $selectedIndex }} tabindex="0" data-state="selected"{{- end }}>
+      {{- $item.content | markdownify -}}
+    </div>
+  {{- end -}}
 </div>
--- a/layouts/_partials/sidebar.html
+++ b/layouts/_partials/sidebar.html
@@ -21,10 +21,12 @@
 {{- end -}}

 <aside class="hextra-sidebar-container hx:flex hx:flex-col hx:print:hidden hx:md:top-16 hx:md:shrink-0 hx:md:w-64 hx:md:self-start hx:max-md:[transform:translate3d(0,-100%,0)] {{ $sidebarClass }}">
-  <!-- Search bar on small screen -->
-  <div class="hx:px-4 hx:pt-4 hx:md:hidden">
-    {{ partial "search.html" }}
-  </div>
+  {{- if (site.Params.search.enable | default true) -}}
+    <!-- Search bar on small screen -->
+    <div class="hx:px-4 hx:pt-4 hx:md:hidden">
+      {{ partial "search.html" (dict "location" "sidebar") }}
+    </div>
+  {{- end -}}
  <div class="hextra-scrollbar hx:overflow-y-auto hx:overflow-x-hidden hx:p-4 hx:grow hx:md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]">
    <ul class="hx:flex hx:flex-col hx:gap-1 hx:md:hidden">
      <!-- Nav -->
@@ -75,38 +77,159 @@
  {{- $pageURL := .page.RelPermalink -}}
  {{- $level := .level -}}
  {{- $toc := .toc | default false -}}
+  {{- $useMainMenu := and (eq $level 0) $toc -}}
+  {{- $mainMenuEntries := slice -}}

-  {{- with $items := union .context.RegularPages .context.Sections -}}
-    {{- $items = where $items "Params.sidebar.exclude" "!=" true -}}
-    {{- if eq $level 0 -}}
-      {{- range $items.ByWeight }}
-        {{- if .Params.sidebar.separator -}}
-          <li class="[word-break:break-word] hx:mt-5 hx:mb-2 hx:px-2 hx:py-1.5 hx:text-sm hx:font-semibold hx:text-gray-900 hx:first:mt-0 hx:dark:text-gray-100">
-            <span class="hx:cursor-default">{{ partial "utils/title" . }}</span>
-          </li>
-        {{- else -}}
-          {{- $active := eq $pageURL .RelPermalink -}}
-          {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
-          <li class="{{ if $shouldOpen }}open{{ end }}">
-            {{- $linkTitle := partial "utils/title" . -}}
-            {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
-            {{- if and $toc $active -}}
-              {{- template "sidebar-toc" dict "page" . -}}
+  {{- $items := slice -}}
+  {{- if $useMainMenu -}}
+    {{- range $menuItem := site.Menus.main -}}
+      {{- $menuType := $menuItem.Params.type | default "" -}}
+      {{- $isIconOnly := and $menuItem.Params.icon (ne $menuType "link") -}}
+      {{- /* Keep only navigation links in the mobile sidebar. */ -}}
+      {{- if or (eq $menuType "search") (eq $menuType "theme-toggle") (eq $menuType "language-switch") $isIconOnly -}}
+        {{- continue -}}
+      {{- end -}}
+
+      {{- $menuTitle := or (T $menuItem.Identifier) $menuItem.Name -}}
+      {{- /* Dropdown parents mirror navbar behavior: render a labeled group of child links. */ -}}
+      {{- if $menuItem.HasChildren -}}
+        {{- $childEntries := slice -}}
+        {{- range $childItem := $menuItem.Children -}}
+          {{- $childType := $childItem.Params.type | default "" -}}
+          {{- $childIsIconOnly := and $childItem.Params.icon (ne $childType "link") -}}
+          {{- if or (eq $childType "search") (eq $childType "theme-toggle") (eq $childType "language-switch") $childIsIconOnly -}}
+            {{- continue -}}
+          {{- end -}}
+
+          {{- $childTitle := or (T $childItem.Identifier) $childItem.Name -}}
+          {{- with $childItem.Page -}}
+            {{- if ne .Params.sidebar.exclude true -}}
+              {{- $childEntries = $childEntries | append (dict "title" $childTitle "link" .RelPermalink) -}}
            {{- end -}}
-            {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
-          </li>
+            {{- continue -}}
+          {{- end -}}
+
+          {{- $childLink := $childItem.URL -}}
+          {{- with $childItem.PageRef -}}
+            {{- if hasPrefix . "/" -}}
+              {{- $childLink = relLangURL (strings.TrimPrefix "/" .) -}}
+            {{- end -}}
+          {{- end -}}
+          {{- if $childLink -}}
+            {{- $childEntries = $childEntries | append (dict "title" $childTitle "link" $childLink) -}}
+          {{- end -}}
+        {{- end -}}
+
+        {{- if gt (len $childEntries) 0 -}}
+          {{- $mainMenuEntries = $mainMenuEntries | append (dict "type" "group" "title" $menuTitle "children" $childEntries) -}}
+        {{- end -}}
+        {{- continue -}}
+      {{- end -}}
+
+      {{- /* Normalize page-backed entries so we keep nested tree behavior. */ -}}
+      {{- with $menuItem.Page -}}
+        {{- if ne .Params.sidebar.exclude true -}}
+          {{- $mainMenuEntries = $mainMenuEntries | append (dict "type" "page" "item" . "title" $menuTitle) -}}
+        {{- end -}}
+        {{- continue -}}
+      {{- end -}}
+
+      {{- $link := $menuItem.URL -}}
+      {{- with $menuItem.PageRef -}}
+        {{- if hasPrefix . "/" -}}
+          {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+        {{- end -}}
+      {{- end -}}
+      {{- if $link -}}
+        {{- $mainMenuEntries = $mainMenuEntries | append (dict "type" "url" "link" $link "title" $menuTitle) -}}
+      {{- end -}}
+    {{- end -}}
+  {{- else -}}
+    {{- $items = where (union .context.RegularPages .context.Sections) "Params.sidebar.exclude" "!=" true -}}
+  {{- end -}}
+
+  {{- $hasItems := gt (len $items) 0 -}}
+  {{- if $useMainMenu -}}
+    {{- $hasItems = gt (len $mainMenuEntries) 0 -}}
+  {{- end -}}
+
+  {{- if $hasItems -}}
+    {{- if eq $level 0 -}}
+      {{- if $useMainMenu -}}
+        {{- /* Mixed list: page entries render trees; url entries render leaf links. */ -}}
+        {{- range $entry := $mainMenuEntries -}}
+          {{- if eq (index $entry "type") "page" -}}
+            {{- $item := index $entry "item" -}}
+            {{- if $item.Params.sidebar.separator -}}
+              <li class="[word-break:break-word] hx:mt-5 hx:mb-2 hx:px-2 hx:py-1.5 hx:text-sm hx:font-semibold hx:text-gray-900 hx:first:mt-0 hx:dark:text-gray-100">
+                <span class="hx:cursor-default">{{ index $entry "title" }}</span>
+              </li>
+            {{- else -}}
+              {{- $active := eq (strings.TrimSuffix "/" $pageURL) (strings.TrimSuffix "/" $item.RelPermalink) -}}
+              {{- $shouldOpen := or ($item.Params.sidebar.open) ($item.IsAncestor $page) $active | default true }}
+              <li class="{{ if $shouldOpen }}open{{ end }}">
+                {{- template "sidebar-item-link" dict "context" $item "active" $active "open" $shouldOpen "title" (index $entry "title") "link" $item.RelPermalink -}}
+                {{- if and $toc $active (ne $item.Params.toc false) -}}
+                  {{- template "sidebar-toc" dict "page" $item -}}
+                {{- end -}}
+                {{- template "sidebar-tree" dict "context" $item "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
+              </li>
+            {{- end -}}
+          {{- else if eq (index $entry "type") "group" -}}
+            <li class="open">
+              <div class="hextra-sidebar-item hx:group hx:relative hx:flex hx:items-center">
+                <span class="hx:flex hx:grow hx:cursor-default hx:px-2 hx:py-1.5 hx:text-sm hx:font-semibold hx:text-gray-900 hx:dark:text-gray-100">
+                  {{- index $entry "title" -}}
+                </span>
+              </div>
+              <div class="hextra-sidebar-children hx:ltr:pr-0 hx:rtl:pl-0 hx:overflow-hidden">
+                <ul class='hx:relative hx:flex hx:flex-col hx:gap-1 hx:before:absolute hx:before:inset-y-1 hx:before:w-px hx:before:bg-gray-200 hx:before:content-[""] hx:ltr:ml-3 hx:ltr:pl-3 hx:ltr:before:left-0 hx:rtl:mr-3 hx:rtl:pr-3 hx:rtl:before:right-0 hx:dark:before:bg-neutral-800'>
+                  {{- range $child := index $entry "children" -}}
+                    {{- $link := index $child "link" -}}
+                    {{- $active := eq (strings.TrimSuffix "/" $pageURL) (strings.TrimSuffix "/" $link) -}}
+                    <li class="hx:flex hx:flex-col">
+                      {{- template "sidebar-item-link" dict "active" $active "open" false "title" (index $child "title") "link" $link -}}
+                    </li>
+                  {{- end -}}
+                </ul>
+              </div>
+            </li>
+          {{- else -}}
+            {{- $link := index $entry "link" -}}
+            {{- $active := eq (strings.TrimSuffix "/" $pageURL) (strings.TrimSuffix "/" $link) -}}
+            <li>{{ template "sidebar-item-link" dict "active" $active "open" false "title" (index $entry "title") "link" $link }}</li>
+          {{- end -}}
+        {{- end -}}
+      {{- else -}}
+        {{- range $items.ByWeight }}
+          {{- if .Params.sidebar.separator -}}
+            <li class="[word-break:break-word] hx:mt-5 hx:mb-2 hx:px-2 hx:py-1.5 hx:text-sm hx:font-semibold hx:text-gray-900 hx:first:mt-0 hx:dark:text-gray-100">
+              <span class="hx:cursor-default">{{ partial "utils/title" . }}</span>
+            </li>
+          {{- else -}}
+            {{- $active := eq $pageURL .RelPermalink -}}
+            {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
+            <li class="{{ if $shouldOpen }}open{{ end }}">
+              {{- $linkTitle := partial "utils/title" . -}}
+              {{- template "sidebar-item-link" dict "context" . "active" $active "open" $shouldOpen "title" $linkTitle "link" .RelPermalink -}}
+              {{- if and $toc $active (ne .Params.toc false) -}}
+                {{- template "sidebar-toc" dict "page" . -}}
+              {{- end -}}
+              {{- template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc -}}
+            </li>
+          {{- end -}}
        {{- end -}}
      {{- end -}}
    {{- else -}}
-      <div class="hx:ltr:pr-0 hx:overflow-hidden">
+      <div class="hextra-sidebar-children hx:ltr:pr-0 hx:rtl:pl-0 hx:overflow-hidden">
        <ul class='hx:relative hx:flex hx:flex-col hx:gap-1 hx:before:absolute hx:before:inset-y-1 hx:before:w-px hx:before:bg-gray-200 hx:before:content-[""] hx:ltr:ml-3 hx:ltr:pl-3 hx:ltr:before:left-0 hx:rtl:mr-3 hx:rtl:pr-3 hx:rtl:before:right-0 hx:dark:before:bg-neutral-800'>
          {{- range $items.ByWeight }}
            {{- $active := eq $pageURL .RelPermalink -}}
            {{- $shouldOpen := or (.Params.sidebar.open) (.IsAncestor $page) $active | default true }}
            {{- $linkTitle := partial "utils/title" . -}}
            <li class="hx:flex hx:flex-col {{ if $shouldOpen }}open{{ end }}">
-              {{- template "sidebar-item-link" dict "context" . "active" $active "title" $linkTitle "link" .RelPermalink -}}
-              {{- if and $toc $active -}}
+              {{- template "sidebar-item-link" dict "context" . "active" $active "open" $shouldOpen "title" $linkTitle "link" .RelPermalink -}}
+              {{- if and $toc $active (ne .Params.toc false) -}}
                {{ template "sidebar-toc" dict "page" . }}
              {{- end }}
              {{ template "sidebar-tree" dict "context" . "page" $page "pageURL" $pageURL "level" (add $level 1) "toc" $toc }}
@@ -115,7 +238,7 @@
        </ul>
      </div>
    {{- end -}}
-  {{- end }}
+  {{- end -}}
 {{- end -}}

 {{- define "sidebar-toc" -}}
@@ -154,7 +277,7 @@
          {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
        {{- end -}}
      {{- end -}}
-      <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" $link }}</li>
+      <li>{{ template "sidebar-item-link" dict "active" false "open" false "title" $name "link" $link }}</li>
    {{ end }}
  {{- end -}}
 {{- end -}}
@@ -162,27 +285,31 @@
 {{- define "sidebar-item-link" -}}
  {{- $external := strings.HasPrefix .link "http" -}}
  {{- $open := .open | default true -}}
-  <a
-    class="hx:flex hx:items-center hx:justify-between hx:gap-2 hx:cursor-pointer hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]
-    {{- if .active }}
-      hextra-sidebar-active-item hx:bg-primary-100 hx:font-semibold hx:text-primary-800 hx:contrast-more:border hx:contrast-more:border-primary-500 hx:dark:bg-primary-400/10 hx:dark:text-primary-600 hx:contrast-more:dark:border-primary-500
-    {{- else }}
-      hx:text-gray-500 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:contrast-more:border hx:contrast-more:border-transparent hx:contrast-more:text-gray-900 hx:contrast-more:hover:border-gray-900 hx:dark:text-neutral-400 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:contrast-more:dark:text-gray-50 hx:contrast-more:dark:hover:border-gray-50
-    {{- end -}}"
-    href="{{ .link }}"
-    {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
-  >
-    {{- .title -}}
-    {{- with .context }}
-      {{- if or .RegularPages .Sections }}
-        <span class="hextra-sidebar-collapsible-button">
-          {{- template "sidebar-collapsible-button" -}}
-        </span>
-      {{- end }}
-    {{ end -}}
-  </a>
+  {{- $hasChildren := false -}}
+  {{- with .context }}{{ if or .RegularPages .Sections }}{{ $hasChildren = true }}{{ end }}{{ end -}}
+  <div class="hextra-sidebar-item hx:group hx:relative hx:flex hx:items-center" data-active="{{ if .active }}true{{ else }}false{{ end }}">
+    <a
+      class="hx:flex hx:items-center hx:justify-between hx:gap-2 hx:grow hx:cursor-pointer hx:rounded-sm hx:px-2 hx:py-1.5 hx:text-sm hx:transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none]
+      {{- if $hasChildren }} hx:ltr:pr-8 hx:rtl:pl-8{{- end }}
+      hx:hextra-focus-visible-inset
+      {{- if .active }}
+        hextra-sidebar-active-item hx:bg-primary-100 hx:font-semibold hx:text-primary-800 hx:contrast-more:border hx:contrast-more:border-primary-500 hx:dark:bg-primary-400/10 hx:dark:text-primary-600 hx:contrast-more:dark:border-primary-500
+      {{- else }}
+        hx:text-gray-500 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:contrast-more:border hx:contrast-more:border-transparent hx:contrast-more:text-gray-900 hx:contrast-more:hover:border-gray-900 hx:dark:text-neutral-400 hx:dark:hover:bg-primary-100/5 hx:dark:hover:text-gray-50 hx:contrast-more:dark:text-gray-50 hx:contrast-more:dark:hover:border-gray-50
+      {{- end -}}"
+      href="{{ .link }}"
+      {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
+    >
+      <span class="hx:min-w-0 [word-break:break-word]">{{- .title -}}</span>
+    </a>
+    {{- if $hasChildren }}
+      <button type="button" class="hextra-sidebar-collapsible-button hx:absolute hx:top-1/2 hx:-translate-y-1/2 hx:ltr:right-2 hx:rtl:left-2 hx:shrink-0 hx:cursor-pointer hx:p-0 hx:text-gray-500 hx:dark:text-neutral-400 hx:group-hover:text-gray-900 hx:dark:group-hover:text-gray-50 hx:group-data-[active=true]:text-primary-800 hx:group-data-[active=true]:dark:text-primary-600 hx:hextra-focus-visible-inset" aria-label="{{ (T "toggleSection") | default "Toggle section" }}" aria-expanded="{{ if $open }}true{{ else }}false{{ end }}">
+        {{- template "sidebar-collapsible-button" -}}
+      </button>
+    {{- end }}
+  </div>
 {{- end -}}

 {{- define "sidebar-collapsible-button" -}}
-  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx:h-[18px] hx:min-w-[18px] hx:rounded-xs hx:p-0.5 hx:hover:bg-gray-800/5 hx:dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx:origin-center hx:transition-transform hx:rtl:-rotate-180"></path></svg>
+  <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" focusable="false" class="hx:h-[18px] hx:min-w-[18px] hx:rounded-xs hx:p-0.5 hx:hover:bg-gray-800/5 hx:dark:hover:bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx:origin-center hx:transition-transform hx:rtl:-rotate-180"></path></svg>
 {{- end -}}
--- a/layouts/_partials/theme-toggle.html
+++ b/layouts/_partials/theme-toggle.html
@@ -16,6 +16,8 @@
    class="hextra-theme-toggle hx:cursor-pointer hx:rounded-md hx:text-left hx:font-medium {{ $class }} hx:grow"
    type="button"
    aria-label="{{ $changeTheme }}"
+    aria-expanded="false"
+    aria-haspopup="menu"
  >
    <div class="hx:flex hx:items-center hx:gap-2 hx:capitalize">
      {{- partial "utils/icon.html" (dict "name" "sun" "attributes" (printf `height=%d class="hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden"` $iconHeight)) -}}
@@ -27,42 +29,55 @@
    </div>
  </button>
  <ul
-    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    class="hextra-theme-toggle-options hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-lg hx:border hx:border-gray-200 hx:bg-white hx:p-1 hx:text-sm hx:shadow-lg hx:dark:border-neutral-700 hx:dark:bg-neutral-900"
    style="position: fixed; inset: auto auto 0px 0px; margin: 0px; min-width: 100px;"
    data-theme="light"
+    role="menu"
  >
-    <li class="hx:flex hx:flex-col">
-      <p
+    <li role="none" class="hx:flex hx:flex-col">
+      <button
+        type="button"
+        role="menuitemradio"
+        aria-checked="true"
+        tabindex="-1"
        data-item="light"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:text-left hx:w-full hx:bg-transparent hx:border-0"
      >
        {{ $light }}
         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=system]:hidden">
          {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
         </span>
-      </p>
+      </button>
    </li>
-    <li class="hx:flex hx:flex-col">
-      <p
+    <li role="none" class="hx:flex hx:flex-col">
+      <button
+        type="button"
+        role="menuitemradio"
+        aria-checked="false"
+        tabindex="-1"
        data-item="dark"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:text-left hx:w-full hx:bg-transparent hx:border-0"
      >
        {{ $dark }}
         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=light]:hidden hx:group-data-[theme=system]:hidden">
          {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
         </span>
-      </p>
+      </button>
    </li>
-    <li class="hx:flex hx:flex-col">
-      <p
+    <li role="none" class="hx:flex hx:flex-col">
+      <button
+        type="button"
+        role="menuitemradio"
+        aria-checked="false"
+        tabindex="-1"
        data-item="system"
-        class="hx:text-gray-800 hx:dark:text-gray-100 hx:hover:bg-primary-50 hx:hover:text-primary-600 hx:hover:dark:bg-primary-500/10 hx:hover:dark:text-primary-600 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
+        class="hx:text-gray-700 hx:dark:text-gray-300 hx:hover:bg-gray-100 hx:hover:text-gray-900 hx:dark:hover:bg-neutral-800 hx:dark:hover:text-gray-100 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:rounded-sm hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:text-left hx:w-full hx:bg-transparent hx:border-0"
      >
        {{ $system }}
         <span class="hx:absolute hx:inset-y-0 hx:flex hx:items-center hx:ltr:right-3 hx:rtl:left-3 hx:group-data-[theme=dark]:hidden hx:group-data-[theme=light]:hidden">
         {{- partial "utils/icon" (dict "name" "check" "attributes" "height=1em width=1em") -}}
         </span>
-      </p>
+      </button>
    </li>
  </ul>
-</div>
+</div>
--- a/layouts/_partials/toc.html
+++ b/layouts/_partials/toc.html
@@ -6,7 +6,7 @@
 {{- $editThisPage := (T "editThisPage") | default "Edit this page"}}
 {{- $backToTop := (T "backToTop") | default "Scroll to top" -}}

-<nav class="hextra-toc hx:order-last hx:hidden hx:w-64 hx:shrink-0 hx:xl:block hx:print:hidden hx:px-4" aria-label="table of contents">
+<nav class="hextra-toc hx:order-last hx:hidden hx:w-64 hx:shrink-0 hx:xl:block hx:print:hidden hx:px-4" aria-label="{{ (T "tableOfContents") | default "Table of contents" }}">
  {{- if $toc }}
    <div class="hextra-scrollbar hx:sticky hx:top-16 hx:overflow-y-auto hx:pr-4 hx:pt-6 hx:text-sm [hyphens:auto] hx:max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))] hx:ltr:-mr-4 hx:rtl:-ml-4">
      {{- with .Fragments.Headings -}}
@@ -48,14 +48,14 @@
              {{- $editURL = urls.JoinPath $editURL $sourceDir $path -}}
            {{- end -}}
          {{- end -}}
-          <a class="hx:text-xs hx:font-medium hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:contrast-more:text-gray-800 hx:contrast-more:dark:text-gray-50" href="{{ $editURL }}" target="_blank" rel="noreferrer">{{ $editThisPage }}</a>
+          <a class="hx:inline-block hx:rounded-sm hx:text-xs hx:font-medium hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:contrast-more:text-gray-800 hx:contrast-more:dark:text-gray-50 hx:hextra-focus-visible-inset" href="{{ $editURL }}" target="_blank" rel="noreferrer">{{ $editThisPage }}</a>
        {{- end -}}
        {{/* Scroll To Top */}}
-        <button aria-hidden="true" id="backToTop" onClick="scrollUp();" class="hx:cursor-pointer hx:transition-all hx:duration-75 hx:opacity-0 hx:text-xs hx:font-medium hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:contrast-more:text-gray-800 hx:contrast-more:dark:text-gray-50">
+        <button id="backToTop" tabindex="-1" onClick="scrollUp();" class="hx:cursor-pointer hx:transition-all hx:duration-75 hx:opacity-0 hx:text-xs hx:font-medium hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-100 hx:contrast-more:text-gray-800 hx:contrast-more:dark:text-gray-50">
          <span>
            {{- $backToTop -}}
          </span>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hx:inline hx:ltr:ml-1 hx:rtl:mr-1 hx:h-3.5 hx:w-3.5 hx:rounded-full hx:border hx:border-gray-500 hx:hover:border-gray-900 hx:dark:border-gray-400 hx:dark:hover:border-gray-100 hx:contrast-more:border-gray-800 hx:contrast-more:dark:border-gray-50">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" focusable="false" class="hx:inline hx:ltr:ml-1 hx:rtl:mr-1 hx:h-3.5 hx:w-3.5 hx:rounded-full hx:border hx:border-gray-500 hx:hover:border-gray-900 hx:dark:border-gray-400 hx:dark:hover:border-gray-100 hx:contrast-more:border-gray-800 hx:contrast-more:dark:border-gray-50">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
          </svg>
        </button>
@@ -78,7 +78,7 @@
  {{- range $headings }}
    {{- if .Title }}
      <li class="hx:my-2 hx:scroll-my-6 hx:scroll-py-6">
-        <a class="{{ $class }} hx:inline-block hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-300 hx:contrast-more:text-gray-900 hx:contrast-more:underline hx:contrast-more:dark:text-gray-50 hx:w-full hx:break-words" href="#{{ anchorize .ID }}">
+        <a class="{{ $class }} hx:inline-block hx:rounded-sm hx:text-gray-500 hx:hover:text-gray-900 hx:dark:text-gray-400 hx:dark:hover:text-gray-300 hx:contrast-more:text-gray-900 hx:contrast-more:underline hx:contrast-more:dark:text-gray-50 hx:w-full hx:wrap-break-word hx:hextra-focus-visible-inset" href="#{{ anchorize .ID }}">
          {{- .Title | safeHTML | plainify | htmlUnescape }}
        </a>
      </li>
--- a/layouts/_partials/utils/page-width-override.html
+++ b/layouts/_partials/utils/page-width-override.html
@@ -1,7 +1,10 @@
 {{- with .Params.width -}}
+  {{- $pageWidthValues := dict "normal" "80rem" "wide" "90rem" "full" "100%" -}}
+  {{- $pageWidth := . -}}
+  {{- $maxPageWidth := (index $pageWidthValues $pageWidth) | default (index $pageWidthValues "normal") -}}
 <style>
 :root {
-  --hextra-max-page-width: {{ cond (eq . "wide") "90rem" (cond (eq . "full") "100%" "80rem") }};
+  --hextra-max-page-width: {{ $maxPageWidth }};
 }
 </style>
 {{- end -}}
--- a/layouts/_partials/utils/template-url.html
+++ b/layouts/_partials/utils/template-url.html
@@ -0,0 +1,18 @@
+{{/*
+  This utility replaces placeholders in a URL template string.
+
+  Usage:
+    {{ partial "utils/template-url.html" (dict "template" .url "values" (dict "url" $pageURL "title" $pageTitle "markdown_url" $markdownURL)) }}
+
+  Placeholders use the format {key} and values are URL-encoded automatically.
+*/}}
+{{- $template := .template -}}
+{{- $values := .values | default dict -}}
+
+{{- range $key, $value := $values -}}
+  {{- $placeholder := printf "{%s}" $key -}}
+  {{- $encoded := $value | urlquery -}}
+  {{- $template = replace $template $placeholder $encoded -}}
+{{- end -}}
+
+{{- return $template -}}