mirror of https://github.com/docker/docs.git
Merge pull request #20916 from dvdksn/blue-skies-navs
site: templates/navigation overhaul
This commit is contained in:
David Karlsson
GitHub
commit
2db16747db
15
.prettierrc
15
.prettierrc
|
|
@ -1,3 +1,16 @@
|
|||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
"plugins": [
|
||||
"prettier-plugin-go-template",
|
||||
"prettier-plugin-tailwindcss"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"*.html"
|
||||
],
|
||||
"options": {
|
||||
"parser": "go-template"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.mantine-Modal-root {
|
||||
.mantine-Modal-inner { inset: 0; }
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
cascade:
|
||||
- build:
|
||||
list: local
|
||||
list: never
|
||||
publishResources: false
|
||||
render: never
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
sitemap: false
|
||||
title: Search
|
||||
layout: search
|
||||
params:
|
||||
sitemap: false
|
||||
icon: search
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Tags
|
||||
cascade:
|
||||
layout: wide
|
||||
params:
|
||||
icon: tag
|
||||
---
|
||||
|
||||
Here you can browse Docker docs by tag.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<!-- First column: visible on lg and xl -->
|
||||
<div class="hidden md:block bg-background-light dark:bg-gray-dark-100 overflow-y-scroll"
|
||||
{{- $classes := "'fixed', 'z-20', 'left-0', 'top-16', 'w-full', 'flex', 'h-lvh'" }}
|
||||
x-data @togglesidebar.window="
|
||||
if ($store.showSidebar == false) {
|
||||
document.body.classList.add('overflow-hidden');
|
||||
$el.classList.remove('hidden');
|
||||
$el.classList.add({{$classes}});
|
||||
$store.showSidebar = true;
|
||||
return;
|
||||
}
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
$el.classList.add('hidden');
|
||||
$el.classList.remove({{$classes}});
|
||||
$store.showSidebar = false;
|
||||
"
|
||||
>
|
||||
<div class="w-full max-w-none lg:max-w-[300px] ml-auto p-2">
|
||||
<main class="relative flex w-full max-w-[1920px]">
|
||||
<!-- Sidebar -->
|
||||
<div x-data
|
||||
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]"
|
||||
:class="{ 'hidden': ! $store.showSidebar }">
|
||||
<!-- Gray backdrop on small screens -->
|
||||
<div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
|
||||
x-transition.opacity></div>
|
||||
<div class="z-50 w-full bg-background-light p-4 dark:bg-gray-dark-100 md:block md:w-[300px]">
|
||||
<!-- Collapse button for small screens -->
|
||||
<button class="my-4 md:hidden" @click="$store.showSidebar = false">
|
||||
<span class="icon-svg">{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span>
|
||||
Back
|
||||
</button>
|
||||
<!-- Actual Sidebar Content -->
|
||||
{{ block "left" . }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
{{ partial "sidebar/sections.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
{{- if ne .Params.sitemap false }}
|
||||
data-pagefind-body
|
||||
{{- end }}
|
||||
class="min-w-0 px-4 pb-32">
|
||||
|
||||
<!-- Main content -->
|
||||
<div {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
|
||||
class="w-full min-w-0 bg-white p-8 dark:bg-background-dark">
|
||||
{{ 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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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" . }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<div class="flex w-full">
|
||||
<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" }}
|
||||
{{ partial "cli-aside.html" . }}
|
||||
<div class="hidden flex-1 min-w-52 lg:block">
|
||||
<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 }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,3 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.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" . }}
|
||||
{{ partial "content-default.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
{{ define "left" }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<head>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
|
||||
<body class="flex min-h-screen flex-col bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="flex justify-center">
|
||||
<div class="w-lvw overflow-clip p-6 pt-0 lg:w-[1200px]">
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<h1 class="py-4">{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<div class="not-prose">
|
||||
<div class="flex gap-4">
|
||||
<input type="search" id="search-page-input"
|
||||
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"
|
||||
placeholder="Search…" tabindex="0" />
|
||||
<button
|
||||
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">
|
||||
<span>Ask AI</span>
|
||||
<img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
|
||||
alt="AI sparkles!" />
|
||||
</button>
|
||||
</div>
|
||||
<hr class="border-divider-light dark:border-divider-dark">
|
||||
<div id="search-page-results">
|
||||
<!-- results -->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{ define "main" }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<h1 class="py-4">{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<div class="not-prose">
|
||||
<div class="flex gap-4">
|
||||
<input type="search" id="search-page-input"
|
||||
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"
|
||||
placeholder="Search…" tabindex="0" />
|
||||
<button
|
||||
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">
|
||||
<span>Ask AI</span>
|
||||
<img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
|
||||
alt="AI sparkles!" />
|
||||
</button>
|
||||
</div>
|
||||
<hr class="border-divider-light dark:border-divider-dark">
|
||||
<div id="search-page-results">
|
||||
<!-- results -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="mt-auto">{{ partialCached "footer.html" . }}</footer>
|
||||
</article>
|
||||
<script type="module">
|
||||
// Global variable to hold the pagefind module
|
||||
let pagefind;
|
||||
|
|
@ -180,6 +171,4 @@
|
|||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
|
|
|
|||
|
|
@ -1,24 +1,3 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.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" . }}
|
||||
{{ partial "content-default.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 }}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" . . }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
{{ $breadcrumbTitles = $breadcrumbTitles | append .LinkTitle }}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<header
|
||||
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="mx-auto flex gap-4 h-full max-w-[1400px] items-center justify-between">
|
||||
<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">
|
||||
<div class="max-w-[1920px] mx-auto flex gap-8 h-full items-center justify-between">
|
||||
<div class="flex h-full items-center md:gap-8 gap-2">
|
||||
{{ if not .IsHome }}
|
||||
<button x-data @click="$dispatch('togglesidebar')"
|
||||
{{- if not .IsHome }}
|
||||
<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>
|
||||
<ul class="mt-1 box-content hidden gap-4 md:flex">
|
||||
<nav class="mt-1 hidden md:block">
|
||||
<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 => {
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
@ -1,20 +1,9 @@
|
|||
{{/* Render the top-nav in sidebar for small screens */}}
|
||||
<nav class="text-sm pb-4 gap-4 flex md:hidden flex-col justify-evenly">
|
||||
<div class="text-gray-light dark:text-gray-dark">Main sections</div>
|
||||
{{ range site.Menus.main }}
|
||||
<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>
|
||||
<!-- section tree -->
|
||||
<nav class="md: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>
|
||||
{{- end }}
|
||||
</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 }}"
|
||||
title="{{ markdownify .Title }}">
|
||||
<span class="flex items-center gap-2">
|
||||
{{ template "renderTitle" . }}
|
||||
</span>
|
||||
href="{{ .Params.goto }}"
|
||||
title="{{ .LinkTitle }}">
|
||||
{{ template "renderTitle" . }}
|
||||
</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 }}"
|
||||
><span class="flex items-center gap-2">
|
||||
{{ template "renderTitle" . }}
|
||||
</span>
|
||||
href="{{ .Permalink }}" title="{{ .LinkTitle }}">
|
||||
{{ template "renderTitle" . }}
|
||||
</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 }}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
{{ partial "sidebar/sections.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar/mainnav.html" . }}
|
||||
{{ partial "sidebar/tags.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="DocSearch-content prose max-w-none dark:prose-invert">
|
||||
<article class="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">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar/tags.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="DocSearch-content prose max-w-none dark:prose-invert">
|
||||
<a class="link" href="/tags/"><span class="icon-svg">{{ partialCached "icon" "navigate_before" "navigate_before" }}</span>View all tags</a>
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
|
||||
"integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,11 +68,6 @@ module.exports = {
|
|||
black: "#000",
|
||||
transparent: 'transparent',
|
||||
|
||||
accent: {
|
||||
light: "#677285",
|
||||
dark: "#2D404E",
|
||||
},
|
||||
|
||||
background: {
|
||||
light: "#f9f9fa",
|
||||
dark: "#141b1f",
|
||||
|
|
|
|||
Loading…
Reference in New Issue