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
-
-get-started:
-- title: Get Docker
-  description: Choose the best installation path for your setup.
-  link: /get-started/get-docker/
+layout: wide
+params:
   icon: download
-- title: What is Docker?
-  description: Learn about the Docker platform.
-  link: /get-started/docker-overview/
-  icon: summarize
-get-started2:
-- title: Introduction
-  description: Get started with the basics and the benefits of containerizing your applications.
-  link: /get-started/introduction/
-  icon: rocket
-- title: Docker concepts
-  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
+  notoc: true
+  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?
+    description: Learn about the Docker platform.
+    link: /get-started/docker-overview/
+    icon: summarize
+  get-started2:
+  - title: Introduction
+    description: Get started with the basics and the benefits of containerizing your applications.
+    link: /get-started/introduction/
+    icon: rocket
+  - title: Docker concepts
+    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
-
-dive-deeper:
-- title: Language-specific guides
-  description: Learn how to containerize, develop, and test language-specific apps using Docker.
-  link: /language/
-  icon: code
-- title: Use-case guides
-  description: Walk through practical Docker applications for specific scenarios.
-  link: /guides/use-case/
-  icon: task
-- title: Deployment and Orchestration
-  description: Deploy and manage Docker containers at scale.
-  link: /guides/deployment-orchestration/orchestration/
-  icon: workspaces
-
-resources:
-- title: Educational resources
-  description: Explore diverse Docker training and hands-on experiences.
-  link: /guides/resources/
-  icon: book
-- title: Contribute to Docker's docs
-  description: Learn how to help contribute to Docker docs.
-  link: /contribute/
-  icon: edit
+params:
+  icon: developer_guide
+  notoc: true
+  dive-deeper:
+  - title: Language-specific guides
+    description: Learn how to containerize, develop, and test language-specific apps using Docker.
+    link: /language/
+    icon: code
+  - title: Use-case guides
+    description: Walk through practical Docker applications for specific scenarios.
+    link: /guides/use-case/
+    icon: task
+  - title: Deployment and Orchestration
+    description: Deploy and manage Docker containers at scale.
+    link: /guides/deployment-orchestration/orchestration/
+    icon: workspaces
+  resources:
+  - title: Educational resources
+    description: Explore diverse Docker training and hands-on experiences.
+    link: /guides/resources/
+    icon: book
+  - title: Contribute to Docker's docs
+    description: Learn how to help contribute to Docker docs.
+    link: /contribute/
+    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
-development:
-- title: Docker Desktop
-  description: Your command center for container development.
-  icon: /assets/icons/Whale.svg
-  link: /desktop/
-- title: Docker Compose
-  description: Define and run multi-container applications.
-  icon: /assets/icons/Compose.svg
-  link: /compose/
-- title: Docker Build
-  description: Build and ship any application anywhere.
-  icon: build
-  link: /build/
-- title: Docker Engine
-  description: The industry-leading container runtime.
-  icon: developer_board
-  link: /engine/
-- title: Docker Extensions
-  description: Customize your Docker Desktop workflow.
-  icon: extension
-  link: /extensions/
-services:
-- title: Docker Hub
-  description: Discover, share, and integrate container images
-  icon: hub
-  link: /docker-hub/
-- title: Docker Scout
-  description: Image analysis and policy evaluation.
-  icon: /assets/icons/Scout.svg
-  link: /scout/
-- title: Trusted content
-  description: Curated, high-quality content from trusted sources.
-  icon: verified
-  link: /trusted-content/
-- title: Build Cloud
-  description: Build your images faster in the cloud.
-  icon: /assets/images/logo-build-cloud.svg
-  link: /build-cloud/
-admin:
-- title: Administration
-  description: Centralized observability for companies and organizations.
-  icon: admin_panel_settings
-  link: /admin/
-- title: Security
-  description: Security guardrails for both administrators and developers.
-  icon: lock
-  link: /security/
-- title: Billing
-  description: Manage billing and payment methods.
-  icon: payments
-  link: /billing/
-- title: Subscription
-  description: Commercial use licenses for Docker products.
-  icon: card_membership
-  link: /subscription/
+layout: wide
+params:
+  icon: description
+  notoc: true
+  development:
+  - title: Docker Desktop
+    description: Your command center for container development.
+    icon: /assets/icons/Whale.svg
+    link: /desktop/
+  - title: Docker Compose
+    description: Define and run multi-container applications.
+    icon: /assets/icons/Compose.svg
+    link: /compose/
+  - title: Docker Build
+    description: Build and ship any application anywhere.
+    icon: build
+    link: /build/
+  - title: Docker Engine
+    description: The industry-leading container runtime.
+    icon: developer_board
+    link: /engine/
+  - title: Docker Extensions
+    description: Customize your Docker Desktop workflow.
+    icon: extension
+    link: /extensions/
+  services:
+  - title: Docker Hub
+    description: Discover, share, and integrate container images
+    icon: hub
+    link: /docker-hub/
+  - title: Docker Scout
+    description: Image analysis and policy evaluation.
+    icon: /assets/icons/Scout.svg
+    link: /scout/
+  - title: Trusted content
+    description: Curated, high-quality content from trusted sources.
+    icon: verified
+    link: /trusted-content/
+  - title: Build Cloud
+    description: Build your images faster in the cloud.
+    icon: /assets/images/logo-build-cloud.svg
+    link: /build-cloud/
+  admin:
+  - title: Administration
+    description: Centralized observability for companies and organizations.
+    icon: admin_panel_settings
+    link: /admin/
+  - title: Security
+    description: Security guardrails for both administrators and developers.
+    icon: lock
+    link: /security/
+  - title: Billing
+    description: Manage billing and payment methods.
+    icon: payments
+    link: /billing/
+  - 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
-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.
+params:
   icon: terminal
-  link: /reference/cli/docker/
-- title: Compose CLI
-  description: The CLI for Docker Compose, for building and running multi-container
-    applications.
-  icon: subtitles
-  link: /reference/cli/docker/compose/
-- title: Daemon CLI (dockerd)
-  description: Persistent process that manages containers.
-  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/
+  notoc: true
+  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/
+  - title: Compose CLI
+    description: The CLI for Docker Compose, for building and running multi-container
+      applications.
+    icon: subtitles
+    link: /reference/cli/docker/compose/
+  - title: Daemon CLI (dockerd)
+    description: Persistent process that manages containers.
+    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
 ---