hugo: update layout architecture

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

.prettierrc

@@ -1,3 +1,16 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": [
+    "prettier-plugin-go-template",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.html"
+      ],
+      "options": {
+        "parser": "go-template"
+      }
+    }
+  ]
 }

assets/css/global.css

@@ -1,9 +1,15 @@
 /* global styles */
 
 @layer base {
-  [x-cloak] {
+  [x-cloak=""] {
     display: none !important;
   }
+  /* alpine cloak for small screens only */
+  [x-cloak="sm"] {
+    @media (width <= 768px) {
+      display: none !important;
+    }
+  }
 
   :root {
     -webkit-font-smoothing: antialiased;

assets/css/kapa.css

@@ -1,4 +1,6 @@
 .mantine-Modal-root {
+  .mantine-Modal-inner { inset: 0; }
+
   ol {
     list-style-type: decimal;
   }

content/get-started/_index.md

@@ -3,7 +3,7 @@ title: Get started
 keywords: Docker, get started
 description: Get started with Docker
 notoc: true
-
+layout: wide
 get-started:
 - title: Get Docker
   description: Choose the best installation path for your setup.

content/guides/_index.md

@@ -3,7 +3,7 @@ title: Guides
 keywords: Docker guides
 description: Explore the Docker guides
 notoc: true
-
+layout: wide
 dive-deeper:
 - title: Language-specific guides
   description: Learn how to containerize, develop, and test language-specific apps using Docker.

content/learning-paths/_index.md

@@ -1,7 +1,5 @@
 ---
 title: Learning paths
-cascade:
-  layout: wide
 description: |
   Docker Learning Paths offer structured guides to help you master Docker.
 keywords: docker, learning, paths, tutorials, resources

content/manuals/_index.md

@@ -4,6 +4,7 @@ description: Learn how to install, set up, configure, and use Docker products wi
 keywords: docker, docs, manuals, products, user guides, how-to
 # hard-code the URL of this page
 url: /manuals/
+layout: wide
 notoc: true
 development:
 - title: Docker Desktop

content/reference/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Reference documentation
+layout: wide
 description: Find reference documentation for the Docker platform’s various APIs, CLIs, and file formats
 notoc: true
 grid_files:

content/tags/_index.md

@@ -1,7 +1,5 @@
 ---
 title: Tags
-cascade:
-  layout: wide
 ---
 
 Here you can browse Docker docs by tag.

hugo_stats.json

@@ -3,16 +3,20 @@
     "tags": null,
     "classes": [
       "!mt-0",
+      "-",
       "--mount",
       "--tmpfs",
       "-mb-3",
+      "-mr-8",
       "-mt-0.5",
       "-mt-1",
       "-mt-4",
+      "-mt-8",
       "-top-16",
       "-v",
       "-z-10",
       ".NET",
+      "64px)]",
       "Admin-Console",
       "After",
       "Angular",
@@ -142,6 +146,7 @@
       "bg-amber-light",
       "bg-amber-light-200",
       "bg-background-light",
+      "bg-black/50",
       "bg-black/70",
       "bg-blue-light",
       "bg-blue-light-400",
@@ -152,7 +157,6 @@
       "bg-gradient-to-t",
       "bg-gray-light-100",
       "bg-gray-light-200",
-      "bg-gray-light-200/50",
       "bg-gray-light-400",
       "bg-gray-light-700",
       "bg-green-light",
@@ -188,7 +192,6 @@
       "border-violet-light",
       "border-white",
       "bottom-0",
-      "box-content",
       "build-push-action",
       "chroma",
       "col-start-2",
@@ -203,7 +206,6 @@
       "dark:bg-gray-dark-100",
       "dark:bg-gray-dark-200",
       "dark:bg-gray-dark-300",
-      "dark:bg-gray-dark-300/50",
       "dark:bg-gray-dark-400",
       "dark:bg-green-dark",
       "dark:bg-green-dark-400",
@@ -222,12 +224,12 @@
       "dark:border-l-magenta-dark",
       "dark:border-red-dark",
       "dark:border-violet-dark",
-      "dark:decoration-blue-dark",
       "dark:fill-blue-dark",
       "dark:focus:ring-blue-dark",
       "dark:from-background-dark",
       "dark:from-blue-dark-200",
       "dark:from-blue-dark-400",
+      "dark:from-gray-dark-100",
       "dark:hidden",
       "dark:hover:bg-blue-dark",
       "dark:hover:bg-blue-dark-500",
@@ -241,6 +243,7 @@
       "dark:text-blue-dark",
       "dark:text-divider-dark",
       "dark:text-gray-dark",
+      "dark:text-gray-dark-300",
       "dark:text-gray-dark-500",
       "dark:text-gray-dark-600",
       "dark:text-gray-dark-700",
@@ -250,10 +253,9 @@
       "dark:text-red-dark",
       "dark:text-violet-dark",
       "dark:text-white",
+      "dark:to-background-dark",
       "dark:to-blue-dark-100",
       "dark:to-magenta-dark-400",
-      "decoration-2",
-      "decoration-blue-light",
       "docker/bake-action",
       "docker/build-push-action",
       "drop-shadow",
@@ -263,15 +265,18 @@
       "fixed",
       "flex",
       "flex-1",
+      "flex-[2_2_0%]",
       "flex-col",
       "flex-col-reverse",
       "flex-grow",
+      "flex-none",
       "flex-wrap",
       "focus:ring-blue-light",
       "font-medium",
       "footnote-backref",
       "footnote-ref",
       "footnotes",
+      "from-20%",
       "from-background-light",
       "from-blue-light-400",
       "from-blue-light-600",
@@ -296,7 +301,9 @@
       "h-48",
       "h-8",
       "h-96",
+      "h-[calc(100vh-64px)]",
       "h-auto",
+      "h-fit",
       "h-full",
       "h-max",
       "h-screen",
@@ -313,7 +320,6 @@
       "hover:dark:border-gray-dark",
       "hover:dark:text-blue-dark",
       "hover:drop-shadow-lg",
-      "hover:opacity-75",
       "hover:opacity-90",
       "hover:text-black",
       "hover:text-blue-light",
@@ -339,9 +345,7 @@
       "lg:block",
       "lg:grid-cols-2",
       "lg:grid-cols-3",
-      "lg:grid-cols-main-lg",
       "lg:hidden",
-      "lg:max-w-[300px]",
       "lg:no-underline",
       "lg:pb-2",
       "lg:scale-100",
@@ -354,7 +358,9 @@
       "m-auto",
       "macOS",
       "max-h-full",
+      "max-w-4xl",
       "max-w-56",
+      "max-w-[1920px]",
       "max-w-[840px]",
       "max-w-full",
       "max-w-none",
@@ -368,14 +374,18 @@
       "md:gap-8",
       "md:grid-cols-2",
       "md:grid-cols-3",
-      "md:grid-cols-main-md",
       "md:h-[334px]",
+      "md:h-[calc(100vh",
       "md:hidden",
       "md:max-w-[66%]",
       "md:px-20",
       "md:scale-100",
+      "md:text-sm",
+      "md:w-[300px]",
+      "md:z-auto",
       "min-h-screen",
       "min-w-0",
+      "min-w-52",
       "ml-3",
       "ml-auto",
       "mt-1",
@@ -399,7 +409,7 @@
       "overflow-clip",
       "overflow-hidden",
       "overflow-x-hidden",
-      "overflow-y-scroll",
+      "overflow-y-auto",
       "p-1",
       "p-2",
       "p-4",
@@ -410,7 +420,6 @@
       "pb-0.5",
       "pb-1",
       "pb-2",
-      "pb-32",
       "pb-4",
       "pl-1",
       "pl-2",
@@ -419,7 +428,6 @@
       "pl-5",
       "place-items-center",
       "placeholder:text-white",
-      "pr-2",
       "prose",
       "pt-0",
       "px-1",
@@ -439,6 +447,7 @@
       "right-8",
       "ring-[1.5px]",
       "ring-gray-light-200",
+      "rotate-180",
       "rotate-45",
       "rounded",
       "rounded-[6px]",
@@ -463,6 +472,7 @@
       "sm:items-center",
       "sm:w-full",
       "space-x-2",
+      "space-y-2",
       "space-y-4",
       "sticky",
       "svg-container",
@@ -477,6 +487,7 @@
       "text-center",
       "text-divider-light",
       "text-gray-light",
+      "text-gray-light-200",
       "text-gray-light-300",
       "text-gray-light-500",
       "text-gray-light-600",
@@ -491,18 +502,22 @@
       "text-white",
       "text-xl",
       "text-xs",
+      "to-30%",
       "to-50%",
       "to-75%",
       "to-blue-light",
       "to-magenta-light-400",
       "to-transparent",
+      "to-white",
       "toc",
       "top-0",
       "top-16",
       "top-3",
       "top-6",
       "top-full",
+      "transform",
       "transition",
+      "transition-transform",
       "truncate",
       "underline",
       "underline-offset-2",
@@ -518,13 +533,13 @@
       "w-screen",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
-      "xl:grid-cols-main-xl",
       "xl:w-[1200px]",
       "xl:w-[400px]",
       "youtube-video",
       "z-10",
       "z-20",
       "z-30",
+      "z-40",
       "z-50"
     ],
     "ids": null

layouts/_default/baseof.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 <head>
@@ -6,48 +6,62 @@
 </head>
 
 <body
-  class="bg-background-light text-base dark:bg-background-dark dark:text-white">
+  class="flex flex-col items-center bg-gradient-to-r from-background-light from-20% to-white to-30% text-base dark:from-gray-dark-100 dark:to-background-dark dark:text-white">
   {{ partial "header.html" . }}
-  <main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
+  <main class="relative flex w-full max-w-[1920px]">
-    <!-- First column: visible on lg and xl -->
+    <!-- Sidebar -->
-    <div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
+    <div x-data
-         {{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
+      class="md:h-[calc(100vh - 64px)] sticky top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 sm:w-full md:z-auto md:block md:w-[300px]"
-         x-data @togglesidebar.window="
+      :class="{ 'hidden': ! $store.showSidebar }">
-           if ($store.showSidebar == false) {
+      <!-- Gray backdrop on small screens -->
-             document.body.classList.add('overflow-hidden');
+      <div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
-             $el.classList.remove('hidden');
+        x-transition.opacity></div>
-             $el.classList.add({{$classes}});
+      <div class="z-50 w-full bg-background-light p-4 dark:bg-gray-dark-100 md:block md:w-[300px]">
-             $store.showSidebar = true;
+        <!-- Collapse button for small screens -->
-             return;
+        <button class="my-4 md:hidden" @click="$store.showSidebar = false">
-           }
+          <span class="icon-svg">{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span>
-           document.body.classList.remove('overflow-hidden');
+          Back
-           $el.classList.add('hidden');
+        </button>
-           $el.classList.remove({{$classes}});
+        <!-- Main navigation -->
-           $store.showSidebar = false;
+        <div x-data="{ expanded: false }">
-         "
+          <div class="px-4 flex w-full items-center justify-between">
-      >
+            <a class="text-lg flex-grow" href="{{ .FirstSection.Permalink }}">{{ .FirstSection.LinkTitle }}</a>
-      <div class="w-full max-w-none lg:max-w-[300px] ml-auto p-2">
+            <button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
+              <span :class="{ 'rotate-180': expanded }" class="icon-svg transform transition-transform">
+                {{ partialCached "icon" "expand_more" "expand_more" }}
+              </span>
+            </button>
+          </div>
+          <ul x-cloak x-show="expanded" class="mt-2 space-y-2 px-2">
+            {{ range site.Menus.main }}
+            {{ if ne page.FirstSection .Page }}
+            <li>
+              <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
+            </li>
+            {{ end }}
+            {{ end }}
+          </ul>
+        </div>
+        <hr class="my-2 text-gray-light-200 dark:text-gray-dark-300" />
+        <!-- Actual Sidebar Content -->
         {{ block "left" . }}
         {{ end }}
       </div>
     </div>
-    <div
+
-      {{- if ne .Params.sitemap false }}
+    <!-- Main content -->
-        data-pagefind-body
+    <div {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
-      {{- end }}
+      class="w-full min-w-0 bg-white p-8 dark:bg-background-dark">
-      class="min-w-0 px-4 pb-32">
       {{ block "main" . }}
       {{ end }}
     </div>
-    <div class="sticky top-16 pb-32 h-screen hidden lg:block overflow-x-hidden overflow-y-scroll pr-2">
-      {{ block "right" . }}
-      {{ end }}
-    </div>
   </main>
-  <footer>{{ partialCached "footer.html" . }}</footer>
+
+  <footer class="w-full">{{ partialCached "footer.html" . }}</footer>
+
   {{/* Load the YouTube player if the page embeds a YouTube video */}}
   {{ with .Store.Get "youtube" }}
-    {{- partial "youtube-script.html" . }}
+  {{ partial "youtube-script.html" . }}
   {{ end }}
 </body>
 

layouts/_default/cli.html

@@ -11,8 +11,9 @@
   {{ end }}
   {{ .Scratch.Set "headings" slice }}
   {{ .Scratch.Set "subheadings" slice }}
+  <div class="flex w-full">
+    <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
     {{ partial "breadcrumbs.html" . }}
-  <article class="prose max-w-none dark:prose-invert">
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
     <table>
       <tbody>
@@ -192,8 +193,34 @@ can be removed entirely in a future release.
       </table>
     {{ end }}
   </article>
-{{ end }}
 
-{{ define "right" }}
+  <div class="hidden flex-1 min-w-52 lg:block">
-  {{ partial "cli-aside.html" . }}
+    <aside
+      class="sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
+      >
+      <div id="TableOfContents">
+        <div class="text-lg pb-2">{{ T "tableOfContents" }}</div>
+        <nav class="toc">
+          <ul>
+            {{ range (.Scratch.Get "headings") }}
+              {{/* add left padding depending on level (pl-2, pl-3, pl-4) */}}
+              {{ $slice := strings.Split .text "{#" }}
+              {{ $text := index $slice 0 }}
+              {{ $anchor := index $slice 1 | strings.TrimRight "}" }}
+              <li{{ with .level }} class="pl-{{ . }}"{{ end }}>
+                <a
+                  {{ if $anchor }}
+                    href="#{{ $anchor }}"
+                  {{ else }}
+                    href="#{{ $text | anchorize }}"
+                  {{ end }}
+                  >{{ markdownify $text }}</a>
+              </li>
+            {{ end }}
+          </ul>
+        </nav>
+      </div>
+    </aside>
+  </div>
+
 {{ end }}

layouts/_default/list.html

@@ -3,18 +3,5 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
+  {{ partial "content-default.html" . }}
-  <article class="prose max-w-none dark:prose-invert">
-    {{ with .Title }}
-    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ . }}</h1>
-    {{ end }}
-    <div class="block lg:hidden">
-      {{ partial "pagemeta.html" . }}
-    </div>
-    {{ .Content }}
-  </article>
-{{ end }}
-
-{{ define "right" }}
-  {{ partial "aside.html" . }}
 {{ end }}

layouts/_default/single.html

@@ -3,22 +3,5 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
+  {{ partial "content-default.html" . }}
-  <article class="prose max-w-none dark:prose-invert">
-    {{ with .Title }}
-    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ . }}</h1>
-    {{ end }}
-    {{ if eq .CurrentSection.Layout "series" }}
-      {{ partial "guides-stepper.html" . }}
-    {{ end }}
-    <div class="block lg:hidden">
-      {{ partialCached "pagemeta.html" . . }}
-      <hr>
-    </div>
-    {{ .Content }}
-  </article>
-{{ end }}
-
-{{ define "right" }}
-  {{ partial "aside.html" . }}
 {{ end }}

layouts/_default/wide-baseof.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  {{ partial "head.html" . }}
-</head>
-
-<body class="flex flex-col min-h-screen bg-background-light text-base dark:bg-background-dark dark:text-white">
-  {{ partial "header.html" . }}
-  <main class="flex justify-center">
-    <div class="lg:w-[1200px] overflow-clip p-6 pt-0 w-lvw">
-      {{ block "main" . }}
-      {{ end }}
-    </div>
-  </main>
-  <footer class="mt-auto">{{ partialCached "footer.html" . }}</footer>
-  {{/* Load the YouTube player if the page embeds a YouTube video */}}
-  {{ with .Store.Get "youtube" }}
-    {{- partial "youtube-script.html" . }}
-  {{ end }}
-</body>
-
-</html>

layouts/_default/wide.html

@@ -0,0 +1,18 @@
+{{ define "left" }}
+  {{ partial "sidebar.html" . }}
+{{ end }}
+
+{{ define "main" }}
+  <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
+    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
+    {{ if eq .CurrentSection.Layout "series" }}
+      {{ partial "guides-stepper.html" . }}
+    {{ end }}
+    <div class="block lg:hidden">
+      {{ partialCached "pagemeta.html" . . }}
+      <hr />
+    </div>
+    {{ .Content }}
+  </article>
+{{ end }}

layouts/learning-paths/list.html

@@ -1,6 +1,10 @@
+{{ define "left" }}
+  {{- partial "sidebar.html" . }}
+{{ end }}
+
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
     <h1>{{ .Title }}</h1>
     {{ .Content }}
     <hr>

layouts/learning-paths/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
     {{- $img := resources.Get .Params.image }}
     <img src="{{ $img.Permalink }}" alt="{{ .Title }}" class="w-full rounded-lg object-cover h-96">
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
@@ -12,3 +12,7 @@
     {{ partial "post-links.html" (where .CurrentSection.Pages "Permalink" "ne" page.Permalink) }}
   </article>
 {{ end }}
+
+{{ define "left" }}
+  {{- partial "sidebar.html" . }}
+{{ end }}

layouts/partials/aside.html

@@ -1,4 +1,6 @@
-<aside class="py-4 space-y-4">
+<aside
+  class="sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
+>
   {{ partial "github-links.html" . }}
   <div id="TableOfContents">
     {{ partialCached "pagemeta.html" . . }}

layouts/partials/breadcrumbs.html

@@ -1,13 +1,12 @@
 <nav id="breadcrumbs"
   {{- $breadcrumbTitles := slice }}
+  data-pagefind-ignore class="gap-4 flex items-center text-gray-light dark:text-gray-dark min-w-0">
   {{ range .Ancestors.Reverse }}
     {{ $breadcrumbTitles = $breadcrumbTitles | append .LinkTitle }}
-  {{ end }}
-  data-pagefind-meta="breadcrumbs:{{ collections.Delimit $breadcrumbTitles " / " }}"
-  data-pagefind-ignore class="py-4 gap-4 flex items-center text-gray-light dark:text-gray-dark max-w-full min-w-0">
-  {{ range .Ancestors.Reverse }}
     <a href="{{ .Permalink }}" class="link truncate">{{ markdownify .LinkTitle }}</a>
     <span>/</span>
   {{- end }}
-  <span class="truncate">{{ markdownify .LinkTitle }}</span>
+  <span
+    data-pagefind-meta="breadcrumbs:{{ collections.Delimit $breadcrumbTitles " / " }}"
+    class="truncate">{{ markdownify .LinkTitle }}</span>
 </nav>

layouts/partials/cli-aside.html

@@ -1,24 +0,0 @@
-<aside class="py-4 space-y-4">
-  <div id="TableOfContents">
-    <div class="text-lg pb-2">{{ T "tableOfContents" }}</div>
-    <nav class="toc">
-      <ul>
-        {{ range (.Scratch.Get "headings") }}
-          {{/* add left padding depending on level (pl-2, pl-3, pl-4) */}}
-          {{ $slice := strings.Split .text "{#" }}
-          {{ $text := index $slice 0 }}
-          {{ $anchor := index $slice 1 | strings.TrimRight "}" }}
-          <li{{ with .level }} class="pl-{{ . }}"{{ end }}>
-            <a
-              {{ if $anchor }}
-                href="#{{ $anchor }}"
-              {{ else }}
-                href="#{{ $text | anchorize }}"
-              {{ end }}
-              >{{ markdownify $text }}</a>
-          </li>
-        {{ end }}
-      </ul>
-    </nav>
-  </div>
-</aside>

layouts/partials/content-default.html

@@ -0,0 +1,17 @@
+<div class="flex gap-8 w-full">
+  <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
+    <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
+    {{ if eq .CurrentSection.Layout "series" }}
+      {{ partial "guides-stepper.html" . }}
+    {{ end }}
+    <div class="block lg:hidden">
+      {{ partialCached "pagemeta.html" . . }}
+      <hr />
+    </div>
+    {{ .Content }}
+  </article>
+  <div class="hidden flex-1 min-w-52 lg:block -mr-8 -mt-8">
+    {{ partial "aside.html" . }}
+  </div>
+</div>

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<div class="flex justify-center py-20 px-4 bg-gray-light-200/50 dark:bg-gray-dark-300/50">
+<div class="flex justify-center py-20 px-4 bg-gray-light-100 dark:bg-gray-dark-200">
   <div class="flex w-full max-w-[840px] flex-col gap-10">
     <div class="flex flex-col md:flex-row gap-4 items-center justify-evenly">
       <a class="underline-offset-2 hover:underline" href="https://www.docker.com/">Product offerings</a>

layouts/partials/header.html

@@ -1,13 +1,12 @@
-<header
+<header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-gradient-to-r from-blue-light-600 to-blue-light dark:from-blue-dark-200 to-50% dark:to-blue-dark-100">
-  class="sticky top-0 z-20 h-16 px-6 text-white bg-gradient-to-r from-blue-light-600 to-blue-light dark:from-blue-dark-200 to-50% dark:to-blue-dark-100">
+  <div class="max-w-[1920px] mx-auto flex gap-8 h-full items-center justify-between">
-  <div class="mx-auto flex h-full items-center justify-between">
     <div class="flex h-full items-center md:gap-8 gap-2">
-      {{ if not .IsHome }}
+      {{- if not .IsHome }}
-      <button x-data @click="$dispatch('togglesidebar')"
+      <button x-data @click="$store.showSidebar = true"
         class="icon-svg block px-4 md:hidden h-full" aria-label="Menu">
         {{ partialCached "icon" "menu" "menu" }}
       </button>
-      {{ end }}
+      {{- end }}
       <div>
         {{/* main logo */}}
         <a title="Docker Docs home page" href="{{ site.BaseURL }}">
@@ -16,8 +15,8 @@
           </div>
         </a>
       </div>
-      <nav>
+      <nav class="mt-1 hidden md:block">
-        <ul class="mt-1 box-content hidden gap-4 md:flex">
+        <ul class="flex gap-4">
           {{ range site.Menus.main }}
           <li
             {{- if or (eq page .Page) (page.IsDescendant .Page) }}
@@ -31,7 +30,7 @@
         </ul>
       </nav>
     </div>
-    <div class="flex items-center gap-6 flex-grow justify-end">
+    <div class="flex min-w-0 items-center gap-6 flex-grow justify-end">
       {{ partialCached "search-bar.html" "-" }}
       <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {

layouts/partials/sidebar.html

@@ -1,20 +1,9 @@
-{{/* Render the top-nav in sidebar for small screens */}}
+<!-- section tree -->
-<nav class="text-sm pb-4 gap-4 flex md:hidden flex-col justify-evenly">
+<nav class="md:text-sm flex flex-col">
-  <div class="text-gray-light dark:text-gray-dark">Main sections</div>
+  <div
-  {{ range site.Menus.main }}
+    class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
-  <div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
-      {{- if or (page.IsDescendant .Page) (eq page .Page) }}
-        underline
-      {{- end }}">
-    <a href="{{ .URL }}">{{ .Name }}</a>
-  </div>
-  {{ end }}
-</nav>
-<nav class="text-sm flex flex-col">
-  <div class="block py-4 md:hidden text-gray-light dark:text-gray-dark">This section</div>
   {{/* The current page is in the table of contents */}}
   <ul>
-    {{ template "renderSingle" .FirstSection }}
     {{ template "renderChildren" .FirstSection }}
   </ul>
 </nav>
@@ -42,21 +31,21 @@
   {{ $expanded := or $isCurrent (page.IsDescendant .) }}
   <li x-data="{ expanded: {{$expanded}} }">
     <div class="rounded px-4 w-full flex items-center justify-between{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
-      <span class="py-2 truncate flex items-center gap-2">
+      <div class="w-full py-2 truncate">
         {{- if .Permalink }}
           {{/* If the link is not empty, use it */}}
-          <a class="select-none hover:text-blue-light hover:dark:text-blue-dark"
+          <a class="block select-none hover:text-blue-light hover:dark:text-blue-dark"
             href="{{ .Permalink }}">
             {{ template "renderTitle" . }}
           </a>
         {{- else }}
           {{/* Otherwise, just expand the section */}}
           <button @click="expanded = !expanded"
-            class="select-none hover:text-blue-light hover:dark:text-blue-dark">
+            class="w-full text-left select-none hover:text-blue-light hover:dark:text-blue-dark">
             {{ template "renderTitle" . }}
           </button>
         {{- end }}
-      </span>
+      </div>
       <button @click="expanded = !expanded" class="hover:bg-gray-light-300 hover:dark:bg-gray-dark-300 rounded">
         <span :class="{ 'hidden' : expanded }" class="icon-svg {{ if $expanded }}hidden{{ end }}">
           {{ partialCached "icon" "expand_more" "expand_more" }}
@@ -76,11 +65,9 @@
   {{- if .Params.goto }}
     <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark">
       <a class="py-2 w-full truncate block"
-         href="{{ markdownify .Params.goto }}"
+         href="{{ .Params.goto }}"
-         title="{{ markdownify .Title }}">
+         title="{{ .LinkTitle }}">
-        <span class="flex items-center gap-2">
         {{ template "renderTitle" . }}
-        </span>
       </a>
     </li>
   {{- else }}
@@ -88,10 +75,8 @@
     <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
       {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
       <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
-          href="{{ .Permalink }}" title="{{ markdownify .Title }}"
+        href="{{ .Permalink }}" title="{{ .LinkTitle }}">
-          ><span class="flex items-center gap-2">
         {{ template "renderTitle" . }}
-      </span>
       </a>
     </li>
   {{- end }}
@@ -100,6 +85,6 @@
 {{ define "renderTitle" }}
   {{ .LinkTitle }}
   {{- with .Params.sidebar.badge }}
-    {{- partial "components/badge.html" (dict "color" .color "content" .text) }}
+    <span>{{- partial "components/badge.html" (dict "color" .color "content" .text) }}</span>
   {{- end }}
 {{ end }}

layouts/shortcodes/youtube-embed.html

@@ -1,2 +1,3 @@
 {{- .Page.Store.Set "youtube" true -}}
-<div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0 }}" class="youtube-video aspect-video w-full py-2"></div>
+<div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0 }}" class="youtube-video aspect-video h-fit w-full py-2">
+</div>

package-lock.json

@@ -25,7 +25,8 @@
       },
       "devDependencies": {
         "markdownlint": "^0.34.0",
-        "prettier": "^3.3.2",
+        "prettier": "^3.3.3",
+        "prettier-plugin-go-template": "^0.0.15",
         "prettier-plugin-tailwindcss": "^0.6.5"
       }
     },
@@ -1404,9 +1405,9 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prettier": {
-      "version": "3.3.2",
+      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -1418,6 +1419,21 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-go-template": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.15.tgz",
+      "integrity": "sha512-WqU92E1NokWYNZ9mLE6ijoRg6LtIGdLMePt2C7UBDjXeDH9okcRI3zRqtnWR4s5AloiqyvZ66jNBAa9tmRY5EQ==",
+      "dev": true,
+      "dependencies": {
+        "ulid": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "prettier": "^3.0.0"
+      }
+    },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.6.5",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
@@ -1931,6 +1947,15 @@
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "dev": true
     },
+    "node_modules/ulid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
+      "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
+      "dev": true,
+      "bin": {
+        "ulid": "bin/cli.js"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",

package.json

@@ -30,7 +30,8 @@
   },
   "devDependencies": {
     "markdownlint": "^0.34.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-tailwindcss": "^0.6.5"
   }
 }