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/404.html
+++ b/layouts/404.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ .Site.Language.Lang | default "en" }}" dir="{{ .Site.Language.LanguageDirection | default "ltr" }}">
  <body
    style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'
  >
-    <div>
+    <main id="content">
      <style>
        body {
          color: #000;
@@ -35,6 +35,6 @@
      <div style="display: inline-block; text-align: left">
        <h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
      </div>
-    </div>
+    </main>
  </body>
 </html>
--- a/layouts/_markup/render-codeblock-mermaid.html
+++ b/layouts/_markup/render-codeblock-mermaid.html
@@ -1,4 +1,6 @@
-<pre class="mermaid hx:mt-6">
-  {{ .Inner | htmlEscape | safeHTML }}
-</pre>
+<div role="img" aria-label="{{ (T "mermaidDiagram") | default "Diagram" }}">
+  <pre class="mermaid hx:mt-6">
+    {{ .Inner | htmlEscape | safeHTML }}
+  </pre>
+</div>
 {{- .Page.Store.Set "hasMermaid" true -}}
--- a/layouts/_markup/render-heading.html
+++ b/layouts/_markup/render-heading.html
@@ -2,7 +2,7 @@
  {{- .Text | safeHTML -}}
  {{- if gt .Level 1 -}}
    <span class="hx:absolute hx:-mt-20" id="{{ .Anchor | safeURL }}"></span>
-    <a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="Permalink for this section"></a>
+    <a href="#{{ .Anchor | safeURL }}" class="subheading-anchor" aria-label="{{ (T "permalinkLabel") | default "Permalink for this section" }}"></a>
  {{- end -}}
 </h{{ .Level }}>
 {{- /* Drop trailing newlines */ -}}
--- a/layouts/_markup/render-image.html
+++ b/layouts/_markup/render-image.html
@@ -1,5 +1,9 @@
 {{- $alt := .PlainText | safeHTML -}}
 {{- $lazyLoading := .Page.Site.Params.enableImageLazyLoading | default true -}}
+{{- $enableImageZoom := .Page.Site.Params.imageZoom.enable | default false -}}
+{{- if not (eq .Page.Params.imageZoom nil) -}}
+  {{- $enableImageZoom = .Page.Params.imageZoom -}}
+{{- end -}}
 {{- $dest := .Destination -}}
 {{- $url := urls.Parse $dest -}}

@@ -19,9 +23,17 @@
      {{/* Images under static directory */}}
      {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
    {{- end -}}
-  {{- else if and $isPage (not $startsWithRelative) -}}
-    {{/* Images that are sibling to the individual page file */}}
-    {{ $dest = (printf "../%s" $dest) }}
+  {{- else -}}
+    {{/* Resolve page bundle resource for multilingual permalink */}}
+    {{- with .PageInner.Resources.Get (strings.TrimPrefix "./" $url.Path) -}}
+      {{- $query := cond $url.RawQuery (printf "?%s" $url.RawQuery) "" -}}
+      {{- $fragment := cond $url.Fragment (printf "#%s" $url.Fragment) "" -}}
+      {{- $dest = printf "%s%s%s" .RelPermalink $query $fragment -}}
+    {{- else -}}
+      {{- if and $isPage (not $startsWithRelative) -}}
+        {{ $dest = (printf "../%s" $dest) }}
+      {{- end -}}
+    {{- end -}}
  {{- end -}}
 {{- end -}}

@@ -33,11 +45,15 @@
  {{- end -}}
 {{- end -}}

+{{- if $enableImageZoom -}}
+  {{- .Page.Store.Set "hasImageZoom" true -}}
+{{- end -}}
+
 {{- with .Title -}}
  <figure>
-    <img src="{{ $dest | safeURL }}" title="{{ . }}" alt="{{ $alt }}" {{ $attributes | safeHTMLAttr }} {{ if $lazyLoading }}loading="lazy"{{ end }} />
+    <img src="{{ $dest | safeURL }}" title="{{ . }}" alt="{{ $alt }}" {{ $attributes | safeHTMLAttr }}{{ if $enableImageZoom }} data-zoomable{{ end }}{{ if $lazyLoading }} loading="lazy"{{ end }} />
    <figcaption>{{ . }}</figcaption>
  </figure>
 {{- else -}}
-  <img src="{{ $dest | safeURL }}" alt="{{ $alt }}" {{ $attributes | safeHTMLAttr }} {{ if $lazyLoading }}loading="lazy"{{ end }} />
+  <img src="{{ $dest | safeURL }}" alt="{{ $alt }}" {{ $attributes | safeHTMLAttr }}{{ if $enableImageZoom }} data-zoomable{{ end }}{{ if $lazyLoading }} loading="lazy"{{ end }} />
 {{- end -}}
--- a/layouts/_markup/render-link.html
+++ b/layouts/_markup/render-link.html
@@ -7,7 +7,10 @@
    {{- $fragment := cond $url.Fragment (printf "#%s" $url.Fragment) "" -}}
    {{- $dest = printf "%s%s%s" .RelPermalink $query $fragment -}}
  {{- else -}}
-    {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
+    {{- $hasBasePrefix := and (ne site.Home.RelPermalink "/") (hasPrefix $dest site.Home.RelPermalink) -}}
+    {{- if not $hasBasePrefix -}}
+      {{- $dest = (relURL (strings.TrimPrefix "/" $dest)) -}}
+    {{- end -}}
  {{- end -}}
 {{- end -}}

@@ -19,7 +22,7 @@
 >
  {{- .Text | safeHTML -}}
  {{- if and .Page.Site.Params.externalLinkDecoration $isExternal -}}
-    {{- partial "utils/icon.html" (dict "name" "arrow-up-right" "attributes" `class="hx:inline hx:rtl:rotate-270 hx:align-baseline" height="1em"`) -}}
+    {{- partial "utils/icon.html" (dict "name" "arrow-up-right" "attributes" `class="hx:inline hx:rtl:rotate-270 hx:align-baseline" height="1em" aria-hidden="true"`) -}}
  {{- end -}}
 </a>
 {{- end -}}
--- 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 -}}
--- a/layouts/_shortcodes/asciinema.html
+++ b/layouts/_shortcodes/asciinema.html
@@ -75,7 +75,9 @@
 {{- /* Mark page as using asciinema */ -}}
 {{- .Page.Store.Set "hasAsciinema" true -}}

-<div class="asciinema-player" 
+<div class="asciinema-player"
+     role="region"
+     aria-label="{{ (T "terminalRecording") | default "Terminal recording" }}"
     data-cast-file="{{ $castFile }}"
     data-theme="{{ $theme }}"
     data-speed="{{ $speed }}"
--- a/layouts/_shortcodes/badge.html
+++ b/layouts/_shortcodes/badge.html
@@ -24,7 +24,7 @@ or
  {{- $border := not (eq (.Get "border") false) | default true }}

  {{- if $link -}}
-    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
+    <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank" class="not-prose hx:inline-flex hx:align-middle hx:no-underline hover:hx:no-underline">
      {{- partial "shortcodes/badge.html" (dict
        "content" $content 
        "color" $color
@@ -51,4 +51,4 @@ or
    "border" true
    )
  -}}
-{{- end -}}
+{{- end -}}
--- a/layouts/_shortcodes/card.html
+++ b/layouts/_shortcodes/card.html
@@ -1,25 +1,27 @@
 {{- /*
-A shortcode to create a card.
+  A shortcode to create a card.

-@param {string} link The link to the card.
-@param {string} title The title of the card.
-@param {string} icon The icon of the card.
-@param {string} subtitle The subtitle of the card.
-@param {string} tag The tag of the card.
-@param {string} tagColor The color of the tag.
-@param {string} image The image of the card.
-@param {string} method The method to process the image.
-@param {string} options The options to process the image.
-@param {string} imageStyle The style of the image.
+  @param {string} link The link to the card.
+  @param {string} title The title of the card.
+  @param {string} icon The icon of the card.
+  @param {string} subtitle The subtitle of the card.
+  @param {string} tag The tag of the card.
+  @param {string} tagColor The color of the tag.
+  @param {string} image The image of the card.
+  @param {string} alt The alt text for the image (defaults to title if not provided).
+  @param {string} method The method to process the image.
+  @param {string} options The options to process the image.
+  @param {string} imageStyle The style of the image.

-@example {{< card link="/" title="Image Card" }}
+  @example {{< card link="/" title="Image Card"
+}}
 */ -}}
-
 {{- $link := .Get "link" -}}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 {{- $subtitle := .Get "subtitle" -}}
 {{- $image := .Get "image" -}}
+{{- $alt := .Get "alt" | default $title -}}
 {{- $width := 0 -}}
 {{- $height := 0 -}}
 {{- $imageStyle := .Get "imageStyle" -}}
@@ -58,6 +60,7 @@ A shortcode to create a card.
  "icon"        $icon
  "subtitle"    $subtitle
  "image"       $image
+  "alt"         $alt
  "width"       $width
  "height"      $height
  "imageStyle"  $imageStyle
--- a/layouts/_shortcodes/filetree/container.html
+++ b/layouts/_shortcodes/filetree/container.html
@@ -6,6 +6,8 @@ A file tree container.

 <div class="hextra-filetree hx:mt-6 hx:select-none hx:text-sm hx:text-gray-800 hx:dark:text-gray-300 not-prose">
  <div class="hx:inline-block hx:rounded-lg hx:px-4 hx:py-2 hx:border hx:border-gray-200 hx:dark:border-neutral-800">
-    {{- .InnerDeindent -}}
+    <ul class="hx:flex hx:flex-col">
+      {{- .InnerDeindent -}}
+    </ul>
  </div>
 </div>
--- a/layouts/_shortcodes/filetree/folder.html
+++ b/layouts/_shortcodes/filetree/folder.html
@@ -11,7 +11,7 @@ A folder in a file tree.
 {{- $state := .Get "state" | default "open" }}

 <li class="hx:group hx:flex hx:list-none hx:flex-col">
-  <button class="hextra-filetree-folder hx:inline-flex hx:cursor-pointer hx:items-center hx:py-1 hx:hover:opacity-60">
+  <button class="hextra-filetree-folder hx:inline-flex hx:cursor-pointer hx:items-center hx:py-1 hx:hover:opacity-60" aria-expanded="{{ if eq $state "open" }}true{{ else }}false{{ end }}">
    <span data-state="{{ $state }}" class="hx:data-[state=open]:hidden">
      {{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
    </span>
--- a/layouts/_shortcodes/hextra/hero-button.html
+++ b/layouts/_shortcodes/hextra/hero-button.html
@@ -17,7 +17,7 @@ A shortcode for rendering a button with a link.

 <a
  href="{{ $href }}"
-  class="not-prose hx:font-medium hx:cursor-pointer hx:px-6 hx:py-3 hx:rounded-full hx:text-center hx:text-white hx:inline-block hx:bg-primary-600 hx:hover:bg-primary-700 hx:focus:outline-hidden hx:focus:ring-4 hx:focus:ring-primary-300 hx:dark:bg-primary-600 hx:dark:hover:bg-primary-700 hx:dark:focus:ring-primary-800 hx:transition-all hx:ease-in hx:duration-200"
+  class="not-prose hx:font-medium hx:cursor-pointer hx:px-6 hx:py-3 hx:rounded-full hx:text-center hx:text-white hx:inline-block hx:bg-primary-600 hx:hover:bg-primary-700 hx:hextra-focus-visible hx:dark:bg-primary-600 hx:dark:hover:bg-primary-700 hx:transition-all hx:ease-in hx:duration-200"
  {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
  {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >
--- a/layouts/_shortcodes/jupyter.html
+++ b/layouts/_shortcodes/jupyter.html
@@ -49,7 +49,7 @@ Render Jupyter Notebook
        {{- $outputs := index $cell "outputs" -}}
        {{- with $outputs -}}
          <div class="hextra-jupyter-code-cell-outputs-container">
-            <div class="hextra-jupyter-code-cell-outputs">
+            <div class="hextra-jupyter-code-cell-outputs" tabindex="0">
              {{- range $output := . -}}
                {{- if eq (index $output "output_type") "display_data" -}}
                  {{- $data := index $output "data" -}}
--- a/layouts/_shortcodes/pdf.html
+++ b/layouts/_shortcodes/pdf.html
@@ -11,5 +11,5 @@ Shortcode to include a PDF file in a page.


 <div class="hextra-pdf">
-  <iframe src="{{ $url | safeURL }}" width="100%" style="min-height: 32rem;" frameborder="0"></iframe>
+  <iframe src="{{ $url | safeURL }}" width="100%" style="min-height: 32rem;" frameborder="0" title="{{ (T "pdfViewer") | default "PDF viewer" }}"></iframe>
 </div>
--- a/layouts/_shortcodes/tab.html
+++ b/layouts/_shortcodes/tab.html
@@ -2,13 +2,16 @@
 Create a tab.

@param {string} name The name of the tab.
+@param {string} icon The icon of the tab.
@param {string} selected Whether the tab is selected.

-@example {{< tab name="Foo" selected=true >}}content{{< /tab >}}
+@example {{< tab name="Foo" icon="document-text" selected=true >}}content{{< /tab >}}
 */ -}}

 {{- $name := .Get "name" | default (printf "Tab %d" .Ordinal) -}}

+{{- $icon := .Get "icon" -}}
+
 {{- $selected := .Get "selected" -}}
 {{- if .Parent.Get "defaultIndex" -}}
  {{- $selected = eq .Ordinal (int (.Parent.Get "defaultIndex")) -}}
@@ -18,6 +21,7 @@ Create a tab.
 {{ .Parent.Store.Set "tabs" ($tabs | append (dict
    "id" .Ordinal
    "name" $name
+    "icon" $icon
    "content" .InnerDeindent
    "selected" $selected
  ))
--- a/layouts/_shortcodes/term.html
+++ b/layouts/_shortcodes/term.html
@@ -0,0 +1,32 @@
+{{- /*
+Highlight a glossary term
+
+@param {string} entry Either the glossary abbreviation or the term.
+
+or
+
+@param {string} 0 Either the glossary abbreviation or the term.
+
+@example {{< term entry="MAC" >}}
+@example {{< term "MAC" >}}
+*/ -}}
+
+{{- $entry := .Get "entry" | default (.Get 0) -}}
+{{- $entryLower := lower $entry -}}
+{{- $match := dict -}}
+
+<!-- Go over the term data file - data/<lang>/termbase.yaml -->
+{{- range (index .Site.Data .Site.Language.Lang "termbase") -}}
+  {{- if or (eq (lower .abbr) $entryLower) (eq (lower .term) $entryLower) -}}
+    {{- $match = . -}}
+    {{- break -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $match }}
+  <abbr title="{{ .definition | plainify }}">
+    {{- $entry -}}
+  </abbr>
+{{- else }}
+  {{- $entry -}}
+{{- end }}
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -0,0 +1,38 @@
+{{ define "main" }}
+  {{- $section := site.Params.archives.section | default "blog" -}}
+  {{- $dateFormat := site.Params.archives.dateFormat | default "Jan 02" -}}
+  {{- $pages := where site.RegularPages "Section" $section -}}
+  {{- $groups := $pages.GroupByDate "2006" "desc" -}}
+  <div class="hx:mx-auto hx:flex hextra-max-page-width">
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
+    {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
+    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
+        <br class="hx:mt-1.5 hx:text-sm" />
+        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
+        <div class="hx:mb-16"></div>
+        {{- if $groups }}
+          {{- range $groups }}
+            <h2 class="hx:mt-4 hx:mb-4 hx:text-2xl hx:font-bold hx:text-slate-900 hx:dark:text-slate-100">{{ .Key }}</h2>
+            <div class="hextra-archive-timeline hx:ml-2 hx:pl-6 hx:mb-6">
+              {{- range .Pages }}
+                {{- $page := . -}}
+                <div class="hx:flex hx:items-baseline hx:gap-4 hx:py-2">
+                  <time class="hx:shrink-0 hx:text-sm hx:tabular-nums hx:text-gray-500 hx:dark:text-gray-400" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format $dateFormat }}</time>
+                  <div>
+                    <a href="{{ .RelPermalink }}" class="hx:font-medium hx:text-gray-700 hx:dark:text-gray-300 hx:transition-colors hx:duration-150 hx:hover:text-primary-600 hx:dark:hover:text-primary-400">{{ .Title }}</a>
+                    {{- with .Params.tags }}
+                      <span class="hx:text-xs hx:leading-7">{{ partial "tags.html" (dict "context" $page) }}</span>
+                    {{- end }}
+                  </div>
+                </div>
+              {{- end }}
+            </div>
+          {{- end }}
+        {{- else }}
+          <p class="hx:text-center hx:text-gray-500 hx:dark:text-gray-400">{{ (T "noResultsFound") | default "No posts found." }}</p>
+        {{- end }}
+      </main>
+    </article>
+  </div>
+{{- end -}}
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -2,6 +2,9 @@
 <html lang="{{ .Site.Language.Lang }}" dir="{{ .Site.Language.LanguageDirection | default `ltr` }}">
  {{- partial "head.html" . -}}
  <body>
+    <a href="#content" class="hx:sr-only hx:focus-visible:not-sr-only hx:focus-visible:fixed hx:focus-visible:z-50 hx:focus-visible:top-2 hx:focus-visible:left-2 hx:focus-visible:bg-primary-500 hx:focus-visible:text-white hx:focus-visible:px-4 hx:focus-visible:py-2 hx:focus-visible:rounded-md hx:focus-visible:text-sm hx:focus-visible:font-medium">
+      {{- (T "skipToContent") | default "Skip to content" -}}
+    </a>
    {{- partial "banner.html" . -}}
    {{- partial "navbar.html" . -}}
    {{- block "main" . }}{{ end -}}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -3,7 +3,7 @@
  <div class="hx:mx-auto hx:flex hextra-max-page-width">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
        <br class="hx:mt-1.5 hx:text-sm" />
        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
@@ -21,14 +21,14 @@
            {{ end }}
            <p class="hx:opacity-80 hx:mt-4 hx:leading-7">{{- partial "utils/page-description" . -}}</p>
            <p class="hx:opacity-80 hx:mt-1 hx:leading-7">
-              <a class="hx:text-[color:hsl(var(--primary-hue),100%,50%)] hx:underline hx:underline-offset-2 hx:decoration-from-font" href="{{ .RelPermalink }}">
+              <a class="hx:text-[color:hsl(var(--primary-hue),100%,50%)] hx:underline hx:underline-offset-2 hx:decoration-from-font" href="{{ .RelPermalink }}" aria-label="{{ printf "%s %s" $readMore .Title }}">
                {{- $readMore -}}
              </a>
            </p>
            <p class="hx:opacity-50 hx:text-sm hx:mt-4 hx:leading-7">{{ partial "utils/format-date" .Date }}</p>
          </div>
        {{ end -}}
-        
+
        {{- if gt $paginator.TotalPages 1 -}}
          {{ partial "components/blog-pager.html" $paginator }}
        {{- end -}}
@@ -36,4 +36,4 @@
    </article>
    <div class="hx:max-xl:hidden hx:h-0 hx:w-64 hx:shrink-0"></div>
  </div>
-{{- end -}}
+{{- end -}}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -3,9 +3,14 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
-        {{ if .Title }}<h1 class="hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
+        {{ if .Title }}
+        <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mt-2">
+          <h1 class="hx:mb-0 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>
+          {{ partial "components/page-context-menu" . }}
+        </div>
+        {{ end }}
        <div class="hx:mt-4 hx:mb-16 hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:flex hx:items-center hx:flex-wrap hx:gap-y-2">
          {{- with $date := .Date }}<span class="hx:mr-1">{{ partial "utils/format-date" $date }}</span>{{ end -}}
          {{- $lazyLoading := site.Params.enableImageLazyLoading | default true -}}
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -3,16 +3,23 @@
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
        <div class="content">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          {{ if .Title }}
+          <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mb-4">
+            <h1 class="hx:mb-0">{{ .Title }}</h1>
+            {{ partial "components/page-context-menu" . }}
+          </div>
+          {{ end }}
          {{ .Content }}
        </div>
        {{ partial "components/last-updated.html" . }}
-        {{ partial "components/pager.html" . }}
+        {{- if (site.Params.page.displayPagination | default true) -}}
+          {{- partial "components/pager.html" . -}}
+        {{- end -}}
        {{ partial "components/comments.html" . }}
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -3,14 +3,21 @@
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" true) }}
        <div class="content">
-          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
+          {{ if .Title }}
+          <div class="hx:flex hx:flex-col hx:sm:flex-row hx:items-start hx:sm:items-center hx:sm:justify-between hx:gap-4 hx:mb-4">
+            <h1 class="hx:mb-0">{{ .Title }}</h1>
+            {{ partial "components/page-context-menu" . }}
+          </div>
+          {{ end }}
          {{ .Content }}
        </div>
        {{ partial "components/last-updated.html" . }}
-        {{ partial "components/pager.html" . }}
+        {{- if (site.Params.page.displayPagination | default true) -}}
+          {{- partial "components/pager.html" . -}}
+        {{- end -}}
        {{ partial "components/comments.html" . }}
      </main>
    </article>
--- a/layouts/glossary.html
+++ b/layouts/glossary.html
@@ -0,0 +1,25 @@
+{{ define "main" }}
+  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
+    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
+    {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
+    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
+        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
+        <div class="content">
+          {{- with (index .Site.Data .Site.Language.Lang "termbase") -}}
+          <dl>
+            {{- range sort . "term" -}}
+            <dt>
+              {{- .term }}{{ with .abbr }} ({{ . -}}){{ end -}}
+            </dt>
+            <dd>
+              {{- .definition -}}
+            </dd>
+            {{- end -}}
+          </dl>
+          {{- end -}}
+        </div>
+      </main>
+    </article>
+  </div>
+{{ end }}
--- a/layouts/glossary.markdown.md
+++ b/layouts/glossary.markdown.md
@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}
--- a/layouts/hextra-home.html
+++ b/layouts/hextra-home.html
@@ -1,10 +1,10 @@
 {{ define "main" }}
  <div class='hx:mx-auto hx:flex hextra-max-page-width'>
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
-    <div class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:pt-8 hx:md:pt-12 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-left),1.5rem)]">
+    <main id="content" class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pb-8 hx:pt-8 hx:md:pt-12 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-left),1.5rem)]">
      <div class="hx:flex hx:flex-col hx:items-start">
        {{ .Content }}
      </div>
-    </div>
+    </main>
  </div>
 {{ end }}
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -3,7 +3,7 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="content">
          {{ .Content }}
@@ -11,4 +11,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/list.html
+++ b/layouts/list.html
@@ -3,7 +3,7 @@
    {{ partial "sidebar.html" (dict "context" .) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
        <div class="content">
          {{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
--- a/layouts/list.rss.xml
+++ b/layouts/list.rss.xml
@@ -4,9 +4,9 @@
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
-    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
-    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
-    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+    <language>{{.}}</language>{{end}}{{ with .Site.Params.Author.email }}
+    <managingEditor>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Params.Author.email }}
+    <webMaster>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{ with .OutputFormats.Get "RSS" }}
@@ -27,7 +27,7 @@
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      {{ with .Site.Params.Author.email }}<author>{{.}}{{ with $.Site.Params.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>
        {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
--- a/layouts/llms.txt
+++ b/layouts/llms.txt
@@ -1,14 +1,13 @@
 # {{ .Site.Title }}

-> {{ .Site.Params.description }}
+> {{ .Site.Params.description | default "" }}

-{{ range $section := site.Sections }}
+{{ range where site.Sections "Params.llms" "ne" false }}
 {{- template "llms-section-tree" dict "context" . "level" 2 }}
 {{ end }}

-{{- $rootPages := where site.RegularPages "Section" "" }}
+{{- $rootPages := where (where site.RegularPages "Section" "") "Params.llms" "ne" false }}
 {{- if $rootPages }}
-
 ## Root Pages
 {{- range $rootPages }}
 - [{{ .Title }}]({{ .Permalink }}): {{ .Summary | plainify | truncate 100 | strings.TrimSpace }}{{ if .Date }} - Published {{ .Date.Format "2006-01-02" }}{{ end }}
@@ -26,11 +25,11 @@ Site: {{ .Site.BaseURL }}
 {{- "\n" -}}
 {{ $headerHashes }} {{ $context.Title }}

-{{- range $context.RegularPages }}
+{{- range where $context.RegularPages "Params.llms" "ne" false }}
 - [{{ .Title }}]({{ .Permalink }}): {{ .Summary | plainify | truncate 100 | strings.TrimSpace }}{{ if .Date }} - Published {{ .Date.Format "2006-01-02" }}{{ end }}
 {{- end }}

-{{- range $context.Sections }}
+{{- range where $context.Sections "Params.llms" "ne" false }}
 {{ template "llms-section-tree" dict "context" . "level" (add $level 1) }}
 {{- end }}
 {{- end -}}
--- a/layouts/page.markdown.md
+++ b/layouts/page.markdown.md
@@ -0,0 +1,2 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" }}
+{{ .RawContent }}
--- a/layouts/section.markdown.md
+++ b/layouts/section.markdown.md
@@ -0,0 +1,2 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" }}
+{{ .RawContent }}
--- a/layouts/single.html
+++ b/layouts/single.html
@@ -3,7 +3,7 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" . }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        {{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
        <br class="hx:mt-1.5 hx:text-sm" />
        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
@@ -16,4 +16,4 @@
      </main>
    </article>
  </div>
-{{ end }}
+{{ end }}
--- a/layouts/taxonomy.html
+++ b/layouts/taxonomy.html
@@ -3,7 +3,7 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        <br class="hx:mt-1.5 hx:text-sm" />
        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="hx:mb-16"></div>
--- a/layouts/term.html
+++ b/layouts/term.html
@@ -3,7 +3,7 @@
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
    {{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
    <article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
-      <main class="hx:w-full hx:min-w-0 hx:max-w-6xl hx:px-6 hx:pt-4 hx:md:px-12">
+      <main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
        <br class="hx:mt-1.5 hx:text-sm" />
        {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
        <div class="hx:mb-16"></div>
--- a/layouts/wide.html
+++ b/layouts/wide.html
@@ -1,12 +1,12 @@
 {{ define "main" }}
  <div class="hx:mx-auto hx:flex hx:max-w-[90rem]">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" false) }}
-    <article class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pt-4 hx:pb-8 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-left),1.5rem)]">
+    <main id="content" class="hx:w-full hx:break-words hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:pt-4 hx:pb-8 hx:pl-[max(env(safe-area-inset-left),1.5rem)] hx:pr-[max(env(safe-area-inset-left),1.5rem)]">
      <br class="hx:mt-1.5 hx:text-sm" />
      {{ if .Title }}<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>{{ end }}
      <div class="content">
        {{ .Content }}
      </div>
-    </article>
+    </main>
  </div>
 {{ end }}
--- a/layouts/wide.markdown.md
+++ b/layouts/wide.markdown.md
@@ -0,0 +1,3 @@
+{{- .Title | replaceRE "\n" " " | printf "# %s" -}}
+
+{{ .RawContent }}