Merge pull request #20916 from dvdksn/blue-skies-navs

site: templates/navigation overhaul

.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

@@ -2,30 +2,32 @@
 title: Get started
 keywords: Docker, get started
 description: Get started with Docker
-notoc: true
+layout: wide
-
+params:
-get-started:
-- title: Get Docker
-  description: Choose the best installation path for your setup.
-  link: /get-started/get-docker/
   icon: download
-- title: What is Docker?
+  notoc: true
-  description: Learn about the Docker platform.
+  get-started:
-  link: /get-started/docker-overview/
+  - title: Get Docker
-  icon: summarize
+    description: Choose the best installation path for your setup.
-get-started2:
+    link: /get-started/get-docker/
-- title: Introduction
+    icon: download
-  description: Get started with the basics and the benefits of containerizing your applications.
+  - title: What is Docker?
-  link: /get-started/introduction/
+    description: Learn about the Docker platform.
-  icon: rocket
+    link: /get-started/docker-overview/
-- title: Docker concepts
+    icon: summarize
-  description: Gain a better understanding of foundational Docker concepts.
+  get-started2:
-  link: /get-started/docker-concepts/the-basics/what-is-a-container/
+  - title: Introduction
-  icon: foundation
+    description: Get started with the basics and the benefits of containerizing your applications.
-- title: Docker workshop
+    link: /get-started/introduction/
-  description: Get guided through a 45-minute workshop to learn about Docker.
+    icon: rocket
-  link: /get-started/workshop/
+  - title: Docker concepts
-  icon: desk
+    description: Gain a better understanding of foundational Docker concepts.
+    link: /get-started/docker-concepts/the-basics/what-is-a-container/
+    icon: foundation
+  - title: Docker workshop
+    description: Get guided through a 45-minute workshop to learn about Docker.
+    link: /get-started/workshop/
+    icon: desk
 ---
 
 If you're new to Docker, this section guides you through the essential resources to get started.

content/guides/_index.md

@@ -2,31 +2,32 @@
 title: Guides
 keywords: Docker guides
 description: Explore the Docker guides
-notoc: true
+params:
-
+  icon: developer_guide
-dive-deeper:
+  notoc: true
-- title: Language-specific guides
+  dive-deeper:
-  description: Learn how to containerize, develop, and test language-specific apps using Docker.
+  - title: Language-specific guides
-  link: /language/
+    description: Learn how to containerize, develop, and test language-specific apps using Docker.
-  icon: code
+    link: /language/
-- title: Use-case guides
+    icon: code
-  description: Walk through practical Docker applications for specific scenarios.
+  - title: Use-case guides
-  link: /guides/use-case/
+    description: Walk through practical Docker applications for specific scenarios.
-  icon: task
+    link: /guides/use-case/
-- title: Deployment and Orchestration
+    icon: task
-  description: Deploy and manage Docker containers at scale.
+  - title: Deployment and Orchestration
-  link: /guides/deployment-orchestration/orchestration/
+    description: Deploy and manage Docker containers at scale.
-  icon: workspaces
+    link: /guides/deployment-orchestration/orchestration/
-
+    icon: workspaces
-resources:
+  resources:
-- title: Educational resources
+  - title: Educational resources
-  description: Explore diverse Docker training and hands-on experiences.
+    description: Explore diverse Docker training and hands-on experiences.
-  link: /guides/resources/
+    link: /guides/resources/
-  icon: book
+    icon: book
-- title: Contribute to Docker's docs
+  - title: Contribute to Docker's docs
-  description: Learn how to help contribute to Docker docs.
+    description: Learn how to help contribute to Docker docs.
-  link: /contribute/
+    link: /contribute/
-  icon: edit
+    icon: edit
+layout: wide
 ---
 
 This section contains more advanced guides to help you learn how Docker can optimize your development workflows.

content/includes/_index.md

@@ -1,7 +1,7 @@
 ---
 cascade:
 - build:
-    list: local
+    list: never
     publishResources: false
     render: never
 ---

content/learning-paths/_index.md

@@ -1,10 +1,10 @@
 ---
 title: Learning paths
-cascade:
-  layout: wide
 description: |
   Docker Learning Paths offer structured guides to help you master Docker.
 keywords: docker, learning, paths, tutorials, resources
+params:
+  icon: "school"
 ---
 
 <p class="w-2/3">

content/manuals/_index.md

@@ -4,62 +4,65 @@ 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/
-notoc: true
+layout: wide
-development:
+params:
-- title: Docker Desktop
+  icon: description
-  description: Your command center for container development.
+  notoc: true
-  icon: /assets/icons/Whale.svg
+  development:
-  link: /desktop/
+  - title: Docker Desktop
-- title: Docker Compose
+    description: Your command center for container development.
-  description: Define and run multi-container applications.
+    icon: /assets/icons/Whale.svg
-  icon: /assets/icons/Compose.svg
+    link: /desktop/
-  link: /compose/
+  - title: Docker Compose
-- title: Docker Build
+    description: Define and run multi-container applications.
-  description: Build and ship any application anywhere.
+    icon: /assets/icons/Compose.svg
-  icon: build
+    link: /compose/
-  link: /build/
+  - title: Docker Build
-- title: Docker Engine
+    description: Build and ship any application anywhere.
-  description: The industry-leading container runtime.
+    icon: build
-  icon: developer_board
+    link: /build/
-  link: /engine/
+  - title: Docker Engine
-- title: Docker Extensions
+    description: The industry-leading container runtime.
-  description: Customize your Docker Desktop workflow.
+    icon: developer_board
-  icon: extension
+    link: /engine/
-  link: /extensions/
+  - title: Docker Extensions
-services:
+    description: Customize your Docker Desktop workflow.
-- title: Docker Hub
+    icon: extension
-  description: Discover, share, and integrate container images
+    link: /extensions/
-  icon: hub
+  services:
-  link: /docker-hub/
+  - title: Docker Hub
-- title: Docker Scout
+    description: Discover, share, and integrate container images
-  description: Image analysis and policy evaluation.
+    icon: hub
-  icon: /assets/icons/Scout.svg
+    link: /docker-hub/
-  link: /scout/
+  - title: Docker Scout
-- title: Trusted content
+    description: Image analysis and policy evaluation.
-  description: Curated, high-quality content from trusted sources.
+    icon: /assets/icons/Scout.svg
-  icon: verified
+    link: /scout/
-  link: /trusted-content/
+  - title: Trusted content
-- title: Build Cloud
+    description: Curated, high-quality content from trusted sources.
-  description: Build your images faster in the cloud.
+    icon: verified
-  icon: /assets/images/logo-build-cloud.svg
+    link: /trusted-content/
-  link: /build-cloud/
+  - title: Build Cloud
-admin:
+    description: Build your images faster in the cloud.
-- title: Administration
+    icon: /assets/images/logo-build-cloud.svg
-  description: Centralized observability for companies and organizations.
+    link: /build-cloud/
-  icon: admin_panel_settings
+  admin:
-  link: /admin/
+  - title: Administration
-- title: Security
+    description: Centralized observability for companies and organizations.
-  description: Security guardrails for both administrators and developers.
+    icon: admin_panel_settings
-  icon: lock
+    link: /admin/
-  link: /security/
+  - title: Security
-- title: Billing
+    description: Security guardrails for both administrators and developers.
-  description: Manage billing and payment methods.
+    icon: lock
-  icon: payments
+    link: /security/
-  link: /billing/
+  - title: Billing
-- title: Subscription
+    description: Manage billing and payment methods.
-  description: Commercial use licenses for Docker products.
+    icon: payments
-  icon: card_membership
+    link: /billing/
-  link: /subscription/
+  - title: Subscription
+    description: Commercial use licenses for Docker products.
+    icon: card_membership
+    link: /subscription/
 ---
 
 This section contains user guides on how to install, set up, configure, and use

content/reference/_index.md

@@ -1,43 +1,47 @@
 ---
 title: Reference documentation
+linkTitle: Reference
+layout: wide
 description: Find reference documentation for the Docker platform’s various APIs, CLIs, and file formats
-notoc: true
+params:
-grid_files:
-- title: Dockerfile
-  description: Defines the contents and startup behavior of a single container.
-  icon: edit_document
-  link: /reference/dockerfile/
-- title: Compose file
-  description: Defines a multi-container application.
-  icon: polyline
-  link: /reference/compose-file/
-grid_clis:
-- title: Docker CLI
-  description: The main Docker CLI, includes all `docker` commands.
   icon: terminal
-  link: /reference/cli/docker/
+  notoc: true
-- title: Compose CLI
+  grid_files:
-  description: The CLI for Docker Compose, for building and running multi-container
+  - title: Dockerfile
-    applications.
+    description: Defines the contents and startup behavior of a single container.
-  icon: subtitles
+    icon: edit_document
-  link: /reference/cli/docker/compose/
+    link: /reference/dockerfile/
-- title: Daemon CLI (dockerd)
+  - title: Compose file
-  description: Persistent process that manages containers.
+    description: Defines a multi-container application.
-  icon: developer_board
+    icon: polyline
-  link: /reference/cli/dockerd/
+    link: /reference/compose-file/
-grid_apis:
+  grid_clis:
-- title: Engine API
+  - title: Docker CLI
-  description: The main API for Docker, provides programmatic access to a daemon.
+    description: The main Docker CLI, includes all `docker` commands.
-  icon: api
+    icon: terminal
-  link: /reference/api/engine/
+    link: /reference/cli/docker/
-- title: Docker Hub API
+  - title: Compose CLI
-  description: API to interact with Docker Hub.
+    description: The CLI for Docker Compose, for building and running multi-container
-  icon: communities
+      applications.
-  link: /reference/api/hub/latest/
+    icon: subtitles
-- title: DVP Data API
+    link: /reference/cli/docker/compose/
-  description: API for Docker Verified Publishers to fetch analytics data.
+  - title: Daemon CLI (dockerd)
-  icon: area_chart
+    description: Persistent process that manages containers.
-  link: /reference/api/hub/dvp/
+    icon: developer_board
+    link: /reference/cli/dockerd/
+  grid_apis:
+  - title: Engine API
+    description: The main API for Docker, provides programmatic access to a daemon.
+    icon: api
+    link: /reference/api/engine/
+  - title: Docker Hub API
+    description: API to interact with Docker Hub.
+    icon: communities
+    link: /reference/api/hub/latest/
+  - title: DVP Data API
+    description: API for Docker Verified Publishers to fetch analytics data.
+    icon: area_chart
+    link: /reference/api/hub/dvp/
 ---
 
 This section includes the reference documentation for the Docker platform's

content/search.md

@@ -1,5 +1,7 @@
 ---
-sitemap: false
 title: Search
 layout: search
+params:
+  sitemap: false
+  icon: search
 ---

content/tags/_index.md

@@ -1,7 +1,7 @@
 ---
 title: Tags
-cascade:
+params:
-  layout: wide
+  icon: tag
 ---
 
 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",
@@ -36,7 +40,6 @@
       "Debian",
       "Debian-GNU/Linux",
       "Diff",
-      "DocSearch-content",
       "Docker-Compose",
       "Docker-Desktop",
       "Docker-Engine",
@@ -139,10 +142,10 @@
       "absolute",
       "aspect-video",
       "bake-action",
-      "bg-accent-light",
       "bg-amber-light",
       "bg-amber-light-200",
       "bg-background-light",
+      "bg-black/50",
       "bg-black/70",
       "bg-blue-light",
       "bg-blue-light-400",
@@ -153,8 +156,8 @@
       "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",
       "bg-green-light-400",
       "bg-pattern-blue",
@@ -188,14 +191,11 @@
       "border-violet-light",
       "border-white",
       "bottom-0",
-      "box-content",
       "build-push-action",
       "chroma",
-      "cls-1",
       "col-start-2",
       "cursor-not-allowed",
       "cursor-pointer",
-      "dark:bg-accent-dark",
       "dark:bg-amber-dark",
       "dark:bg-amber-dark-200",
       "dark:bg-background-dark",
@@ -205,7 +205,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",
@@ -224,17 +223,18 @@
       "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-accent-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",
       "dark:hover:bg-gray-dark-200",
       "dark:hover:bg-gray-dark-500",
+      "dark:hover:text-blue-dark",
       "dark:hover:text-white",
       "dark:prose-invert",
       "dark:ring-gray-dark-400",
@@ -243,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",
@@ -252,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",
@@ -265,18 +265,21 @@
       "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-accent-light",
+      "from-20%",
       "from-background-light",
       "from-blue-light-400",
+      "from-blue-light-600",
       "gap-1",
       "gap-10",
       "gap-12",
@@ -298,7 +301,9 @@
       "h-48",
       "h-8",
       "h-96",
+      "h-[calc(100vh-64px)]",
       "h-auto",
+      "h-fit",
       "h-full",
       "h-max",
       "h-screen",
@@ -315,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",
@@ -341,23 +345,22 @@
       "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",
       "lg:text-base",
-      "lg:w-[1200px]",
       "link",
       "lntable",
       "lntd",
+      "m-2",
       "m-4",
       "m-auto",
       "macOS",
       "max-h-full",
+      "max-w-4xl",
       "max-w-56",
-      "max-w-[1400px]",
+      "max-w-[1920px]",
       "max-w-[840px]",
       "max-w-full",
       "max-w-none",
@@ -371,20 +374,25 @@
       "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:sticky",
+      "md:text-sm",
+      "md:top-16",
+      "md:w-[300px]",
+      "md:z-auto",
       "min-h-screen",
       "min-w-0",
+      "min-w-52",
       "ml-3",
       "ml-auto",
       "mt-1",
       "mt-2",
       "mt-20",
-      "mt-auto",
       "mx-auto",
       "my-0",
       "my-2",
@@ -402,7 +410,7 @@
       "overflow-clip",
       "overflow-hidden",
       "overflow-x-hidden",
-      "overflow-y-scroll",
+      "overflow-y-auto",
       "p-1",
       "p-2",
       "p-4",
@@ -413,7 +421,6 @@
       "pb-0.5",
       "pb-1",
       "pb-2",
-      "pb-32",
       "pb-4",
       "pl-1",
       "pl-2",
@@ -424,7 +431,7 @@
       "placeholder:text-white",
       "pr-2",
       "prose",
-      "pt-0",
+      "pt-4",
       "px-1",
       "px-2",
       "px-3",
@@ -480,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",
@@ -494,10 +502,13 @@
       "text-white",
       "text-xl",
       "text-xs",
+      "to-30%",
+      "to-50%",
       "to-75%",
-      "to-blue-light-500",
+      "to-blue-light",
       "to-magenta-light-400",
       "to-transparent",
+      "to-white",
       "toc",
       "top-0",
       "top-16",
@@ -516,17 +527,16 @@
       "w-[32px]",
       "w-fit",
       "w-full",
-      "w-lvw",
       "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,43 @@
 </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)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 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}});
+        <!-- Actual Sidebar Content -->
-           $store.showSidebar = false;
-         "
-      >
-      <div class="w-full max-w-none lg:max-w-[300px] ml-auto p-2">
         {{ block "left" . }}
+          {{ partial "sidebar/mainnav.html" . }}
+          {{ partial "sidebar/sections.html" . }}
         {{ 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

@@ -1,7 +1,3 @@
-{{ define "left" }}
-  {{ partial "sidebar.html" . }}
-{{ end }}
-
 {{ define "main" }}
   {{ $data := "" }}
   {{ if .Params.datafolder }}
@@ -11,8 +7,9 @@
   {{ end }}
   {{ .Scratch.Set "headings" slice }}
   {{ .Scratch.Set "subheadings" slice }}
-  {{ partial "breadcrumbs.html" . }}
+  <div class="flex w-full">
-  <article class="prose max-w-none dark:prose-invert">
+    <article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
     <table>
       <tbody>
@@ -192,8 +189,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/glossary.html

@@ -1,5 +1,5 @@
 {{ define "left" }}
-  {{ partial "sidebar.html" . }}
+  {{ partial "sidebar/mainnav.html" . }}
 {{ end }}
 
 {{ define "main" }}

layouts/_default/list.html

@@ -1,20 +1,3 @@
-{{ define "left" }}
-  {{ partial "sidebar.html" . }}
-{{ 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/search.html

@@ -1,38 +1,29 @@
-<!doctype html>
+{{ define "left" }}
-<html lang="en">
+  {{ partial "sidebar/mainnav.html" . }}
+{{ end }}
 
-<head>
+{{ define "main" }}
-  {{ partial "head.html" . }}
+  <article class="prose max-w-none dark:prose-invert">
-</head>
+    <h1 class="py-4">{{ .Title }}</h1>
-
+    {{ .Content }}
-<body class="flex min-h-screen flex-col bg-background-light text-base dark:bg-background-dark dark:text-white">
+    <div class="not-prose">
-  {{ partial "header.html" . }}
+      <div class="flex gap-4">
-  <main class="flex justify-center">
+        <input type="search" id="search-page-input"
-    <div class="w-lvw overflow-clip p-6 pt-0 lg:w-[1200px]">
+          class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
-      <article class="prose max-w-none dark:prose-invert">
+          placeholder="Search…" tabindex="0" />
-        <h1 class="py-4">{{ .Title }}</h1>
+        <button
-        {{ .Content }}
+          class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
-        <div class="not-prose">
+          <span>Ask&nbsp;AI</span>
-          <div class="flex gap-4">
+          <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-            <input type="search" id="search-page-input"
+            alt="AI sparkles!" />
-              class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
+        </button>
-              placeholder="Search…" tabindex="0" />
+      </div>
-            <button
+      <hr class="border-divider-light dark:border-divider-dark">
-              class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
+      <div id="search-page-results">
-              <span>Ask&nbsp;AI</span>
+        <!-- results -->
-              <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
+      </div>
-                alt="AI sparkles!" />
-            </button>
-          </div>
-          <hr class="border-divider-light dark:border-divider-dark">
-          <div id="search-page-results">
-            <!-- results -->
-          </div>
-        </div>
-      </article>
     </div>
-  </main>
+  </article>
-  <footer class="mt-auto">{{ partialCached "footer.html" . }}</footer>
   <script type="module">
     // Global variable to hold the pagefind module
     let pagefind;
@@ -180,6 +171,4 @@
       });
     }
   </script>
-</body>
+{{ end }}
-
-</html>

layouts/_default/series.html

@@ -1,7 +1,3 @@
-{{ define "left" }}
-{{ partial "sidebar.html" . }}
-{{ end }}
-
 {{ define "main" }}
 {{ partial "breadcrumbs.html" . }}
 <article class="prose max-w-none dark:prose-invert">

layouts/_default/single.html

@@ -1,24 +1,3 @@
-{{ define "left" }}
-  {{ partial "sidebar.html" . }}
-{{ 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,14 @@
+{{ 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,6 @@
 {{ 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>

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 }}
+    {{ $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-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark 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 gap-4 h-full max-w-[1400px] 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/mainnav.html

@@ -0,0 +1,45 @@
+<!-- Main navigation for the sidebar -->
+<div class="py-2 px-4" x-data="{ expanded: false }">
+  <div class="flex w-full items-center justify-between">
+    <!-- Current section: use menu, fall back to current page -->
+    {{- $curr := page }}
+    {{- range site.Menus.main }}
+      {{- if .Page.IsAncestor page }}
+        {{- $curr = .Page }}
+      {{- end }}
+    {{- end }}
+    <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ $curr.Permalink }}">
+      {{- with $curr.Params.icon }}
+        <span class="pr-2 icon-sm icon-svg">
+          {{- partialCached "icon.html" . . -}}
+        </span>
+      {{- end }}
+      {{- $curr.LinkTitle -}}
+    </a>
+    <button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
+      <span x-show="! expanded" class="icon-svg">
+        {{ partialCached "icon" "expand_more" "expand_more" }}
+      </span>
+      <span x-cloak x-show="expanded" class="icon-svg">
+        {{ partialCached "icon" "expand_less" "expand_less" }}
+      </span>
+    </button>
+  </div>
+  <ul x-cloak x-show="expanded" class="pt-4 space-y-4">
+    {{ range site.Menus.main }}
+      {{ if ne page.FirstSection .Page }}
+      <li>
+        <a class="hover:text-blue-light dark:hover:text-blue-dark" href="{{ .URL }}">
+          {{- with .Page.Params.icon }}
+            <span class="pr-2 icon-sm icon-svg">
+              {{- partialCached "icon.html" . . -}}
+            </span>
+          {{- end }}
+          {{- .Name }}
+        </a>
+      </li>
+      {{ end }}
+    {{ end }}
+  </ul>
+</div>
+<hr class="m-2 text-gray-light-200 dark:text-gray-dark-300" />

layouts/partials/sidebar/sections.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 }}
+        {{- 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" }}
@@ -74,24 +63,20 @@
 
 {{ define "renderSingle" }}
   {{- if .Params.goto }}
-    <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark">
+    <li class="px-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" . }}
-          {{ template "renderTitle" . }}
-        </span>
       </a>
     </li>
   {{- else }}
     {{ $isCurrent := eq page . }}
-    <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
+    <li class="rounded px-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" . }}
-            {{ 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/partials/sidebar/tags.html

@@ -0,0 +1,13 @@
+<ul>
+  {{- range site.Taxonomies.tags }}
+    <li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
+    {{ if eq .Page page }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
+      <a class="py-2 w-full truncate block"
+         href="{{ .Page.Permalink }}"
+         title="{{ .Page.LinkTitle }}">
+        <span class="icon-svg">{{- partialCached "icon.html" .Page.Params.icon .Page.Params.icon -}}</span>
+        {{ .Page.LinkTitle }}
+      </a>
+    </li>
+  {{- end }}
+</ul>

layouts/partials/tooltip.html

@@ -3,9 +3,9 @@
     {{ partialCached "icon" "help" "help" }}
   </div>
   <div data-tooltip-body
-    class="absolute left-0 top-0 hidden max-w-56 rounded bg-accent-light p-2 text-white dark:bg-accent-dark"
+    class="absolute left-0 top-0 hidden max-w-56 rounded bg-gray-light-700 p-2 text-white dark:bg-gray-dark-300"
     role="tooltip">
     {{ . }}
-    <div data-tooltip-arrow class="absolute h-2 w-2 rotate-45 bg-accent-light dark:bg-accent-dark"></div>
+    <div data-tooltip-arrow class="absolute h-2 w-2 rotate-45 bg-gray-light-700 dark:bg-gray-dark-300"></div>
   </div>
 </div>

layouts/samples/single.html

@@ -1,5 +1,6 @@
 {{ define "left" }}
-  {{ partial "sidebar.html" . }}
+  {{ partial "sidebar/mainnav.html" . }}
+  {{ partial "sidebar/sections.html" . }}
 {{ end }}
 
 {{ define "main" }}

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>

layouts/tag/taxonomy.html

@@ -1,6 +1,11 @@
+{{ define "left" }}
+  {{ partial "sidebar/mainnav.html" . }}
+  {{ partial "sidebar/tags.html" . }}
+{{ end }}
+
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
+  <article class="prose max-w-none dark:prose-invert">
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
     {{ .Content }}
     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3">

layouts/tag/term.html

@@ -1,7 +1,10 @@
+{{ define "left" }}
+  {{ partial "sidebar/tags.html" . }}
+{{ end }}
+
 {{ define "main" }}
-  {{ partial "breadcrumbs.html" . }}
+  <article class="prose max-w-none dark:prose-invert">
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+    {{ partial "breadcrumbs.html" . }}
-    <a class="link" href="/tags/"><span class="icon-svg">{{ partialCached "icon" "navigate_before" "navigate_before" }}</span>View all tags</a>
     <h1 class="scroll-mt-36 flex gap-4 items-center">
       <span class="bg-gray-light-200 dark:bg-gray-dark-300 rounded-full px-3 icon-svg icon-lg pb-2">{{ partialCached "icon" .Params.icon .Params.icon }}</span>
       </span>{{ .Title }}</span>

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"
   }
 }

tailwind.config.js

@@ -68,11 +68,6 @@ module.exports = {
       black: "#000",
       transparent: 'transparent',
 
-      accent: {
-        light: "#677285",
-        dark: "#2D404E",
-      },
-
       background: {
         light: "#f9f9fa",
         dark: "#141b1f",