mirror of https://github.com/docker/docs.git
hugo: update layout architecture
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
parent
d078a3b291
commit
4443d3640a
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Get started
|
|||
keywords: Docker, get started
|
||||
description: Get started with Docker
|
||||
notoc: true
|
||||
|
||||
layout: wide
|
||||
get-started:
|
||||
- title: Get Docker
|
||||
description: Choose the best installation path for your setup.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Guides
|
|||
keywords: Docker guides
|
||||
description: Explore the Docker guides
|
||||
notoc: true
|
||||
|
||||
layout: wide
|
||||
dive-deeper:
|
||||
- title: Language-specific guides
|
||||
description: Learn how to containerize, develop, and test language-specific apps using Docker.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
---
|
||||
title: Learning paths
|
||||
cascade:
|
||||
layout: wide
|
||||
description: |
|
||||
Docker Learning Paths offer structured guides to help you master Docker.
|
||||
keywords: docker, learning, paths, tutorials, resources
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ description: Learn how to install, set up, configure, and use Docker products wi
|
|||
keywords: docker, docs, manuals, products, user guides, how-to
|
||||
# hard-code the URL of this page
|
||||
url: /manuals/
|
||||
layout: wide
|
||||
notoc: true
|
||||
development:
|
||||
- title: Docker Desktop
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Reference documentation
|
||||
layout: wide
|
||||
description: Find reference documentation for the Docker platform’s various APIs, CLIs, and file formats
|
||||
notoc: true
|
||||
grid_files:
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
---
|
||||
title: Tags
|
||||
cascade:
|
||||
layout: wide
|
||||
---
|
||||
|
||||
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",
|
||||
|
|
@ -142,6 +146,7 @@
|
|||
"bg-amber-light",
|
||||
"bg-amber-light-200",
|
||||
"bg-background-light",
|
||||
"bg-black/50",
|
||||
"bg-black/70",
|
||||
"bg-blue-light",
|
||||
"bg-blue-light-400",
|
||||
|
|
@ -152,7 +157,6 @@
|
|||
"bg-gradient-to-t",
|
||||
"bg-gray-light-100",
|
||||
"bg-gray-light-200",
|
||||
"bg-gray-light-200/50",
|
||||
"bg-gray-light-400",
|
||||
"bg-gray-light-700",
|
||||
"bg-green-light",
|
||||
|
|
@ -188,7 +192,6 @@
|
|||
"border-violet-light",
|
||||
"border-white",
|
||||
"bottom-0",
|
||||
"box-content",
|
||||
"build-push-action",
|
||||
"chroma",
|
||||
"col-start-2",
|
||||
|
|
@ -203,7 +206,6 @@
|
|||
"dark:bg-gray-dark-100",
|
||||
"dark:bg-gray-dark-200",
|
||||
"dark:bg-gray-dark-300",
|
||||
"dark:bg-gray-dark-300/50",
|
||||
"dark:bg-gray-dark-400",
|
||||
"dark:bg-green-dark",
|
||||
"dark:bg-green-dark-400",
|
||||
|
|
@ -222,12 +224,12 @@
|
|||
"dark:border-l-magenta-dark",
|
||||
"dark:border-red-dark",
|
||||
"dark:border-violet-dark",
|
||||
"dark:decoration-blue-dark",
|
||||
"dark:fill-blue-dark",
|
||||
"dark:focus:ring-blue-dark",
|
||||
"dark:from-background-dark",
|
||||
"dark:from-blue-dark-200",
|
||||
"dark:from-blue-dark-400",
|
||||
"dark:from-gray-dark-100",
|
||||
"dark:hidden",
|
||||
"dark:hover:bg-blue-dark",
|
||||
"dark:hover:bg-blue-dark-500",
|
||||
|
|
@ -241,6 +243,7 @@
|
|||
"dark:text-blue-dark",
|
||||
"dark:text-divider-dark",
|
||||
"dark:text-gray-dark",
|
||||
"dark:text-gray-dark-300",
|
||||
"dark:text-gray-dark-500",
|
||||
"dark:text-gray-dark-600",
|
||||
"dark:text-gray-dark-700",
|
||||
|
|
@ -250,10 +253,9 @@
|
|||
"dark:text-red-dark",
|
||||
"dark:text-violet-dark",
|
||||
"dark:text-white",
|
||||
"dark:to-background-dark",
|
||||
"dark:to-blue-dark-100",
|
||||
"dark:to-magenta-dark-400",
|
||||
"decoration-2",
|
||||
"decoration-blue-light",
|
||||
"docker/bake-action",
|
||||
"docker/build-push-action",
|
||||
"drop-shadow",
|
||||
|
|
@ -263,15 +265,18 @@
|
|||
"fixed",
|
||||
"flex",
|
||||
"flex-1",
|
||||
"flex-[2_2_0%]",
|
||||
"flex-col",
|
||||
"flex-col-reverse",
|
||||
"flex-grow",
|
||||
"flex-none",
|
||||
"flex-wrap",
|
||||
"focus:ring-blue-light",
|
||||
"font-medium",
|
||||
"footnote-backref",
|
||||
"footnote-ref",
|
||||
"footnotes",
|
||||
"from-20%",
|
||||
"from-background-light",
|
||||
"from-blue-light-400",
|
||||
"from-blue-light-600",
|
||||
|
|
@ -296,7 +301,9 @@
|
|||
"h-48",
|
||||
"h-8",
|
||||
"h-96",
|
||||
"h-[calc(100vh-64px)]",
|
||||
"h-auto",
|
||||
"h-fit",
|
||||
"h-full",
|
||||
"h-max",
|
||||
"h-screen",
|
||||
|
|
@ -313,7 +320,6 @@
|
|||
"hover:dark:border-gray-dark",
|
||||
"hover:dark:text-blue-dark",
|
||||
"hover:drop-shadow-lg",
|
||||
"hover:opacity-75",
|
||||
"hover:opacity-90",
|
||||
"hover:text-black",
|
||||
"hover:text-blue-light",
|
||||
|
|
@ -339,9 +345,7 @@
|
|||
"lg:block",
|
||||
"lg:grid-cols-2",
|
||||
"lg:grid-cols-3",
|
||||
"lg:grid-cols-main-lg",
|
||||
"lg:hidden",
|
||||
"lg:max-w-[300px]",
|
||||
"lg:no-underline",
|
||||
"lg:pb-2",
|
||||
"lg:scale-100",
|
||||
|
|
@ -354,7 +358,9 @@
|
|||
"m-auto",
|
||||
"macOS",
|
||||
"max-h-full",
|
||||
"max-w-4xl",
|
||||
"max-w-56",
|
||||
"max-w-[1920px]",
|
||||
"max-w-[840px]",
|
||||
"max-w-full",
|
||||
"max-w-none",
|
||||
|
|
@ -368,14 +374,18 @@
|
|||
"md:gap-8",
|
||||
"md:grid-cols-2",
|
||||
"md:grid-cols-3",
|
||||
"md:grid-cols-main-md",
|
||||
"md:h-[334px]",
|
||||
"md:h-[calc(100vh",
|
||||
"md:hidden",
|
||||
"md:max-w-[66%]",
|
||||
"md:px-20",
|
||||
"md:scale-100",
|
||||
"md:text-sm",
|
||||
"md:w-[300px]",
|
||||
"md:z-auto",
|
||||
"min-h-screen",
|
||||
"min-w-0",
|
||||
"min-w-52",
|
||||
"ml-3",
|
||||
"ml-auto",
|
||||
"mt-1",
|
||||
|
|
@ -399,7 +409,7 @@
|
|||
"overflow-clip",
|
||||
"overflow-hidden",
|
||||
"overflow-x-hidden",
|
||||
"overflow-y-scroll",
|
||||
"overflow-y-auto",
|
||||
"p-1",
|
||||
"p-2",
|
||||
"p-4",
|
||||
|
|
@ -410,7 +420,6 @@
|
|||
"pb-0.5",
|
||||
"pb-1",
|
||||
"pb-2",
|
||||
"pb-32",
|
||||
"pb-4",
|
||||
"pl-1",
|
||||
"pl-2",
|
||||
|
|
@ -419,7 +428,6 @@
|
|||
"pl-5",
|
||||
"place-items-center",
|
||||
"placeholder:text-white",
|
||||
"pr-2",
|
||||
"prose",
|
||||
"pt-0",
|
||||
"px-1",
|
||||
|
|
@ -439,6 +447,7 @@
|
|||
"right-8",
|
||||
"ring-[1.5px]",
|
||||
"ring-gray-light-200",
|
||||
"rotate-180",
|
||||
"rotate-45",
|
||||
"rounded",
|
||||
"rounded-[6px]",
|
||||
|
|
@ -463,6 +472,7 @@
|
|||
"sm:items-center",
|
||||
"sm:w-full",
|
||||
"space-x-2",
|
||||
"space-y-2",
|
||||
"space-y-4",
|
||||
"sticky",
|
||||
"svg-container",
|
||||
|
|
@ -477,6 +487,7 @@
|
|||
"text-center",
|
||||
"text-divider-light",
|
||||
"text-gray-light",
|
||||
"text-gray-light-200",
|
||||
"text-gray-light-300",
|
||||
"text-gray-light-500",
|
||||
"text-gray-light-600",
|
||||
|
|
@ -491,18 +502,22 @@
|
|||
"text-white",
|
||||
"text-xl",
|
||||
"text-xs",
|
||||
"to-30%",
|
||||
"to-50%",
|
||||
"to-75%",
|
||||
"to-blue-light",
|
||||
"to-magenta-light-400",
|
||||
"to-transparent",
|
||||
"to-white",
|
||||
"toc",
|
||||
"top-0",
|
||||
"top-16",
|
||||
"top-3",
|
||||
"top-6",
|
||||
"top-full",
|
||||
"transform",
|
||||
"transition",
|
||||
"transition-transform",
|
||||
"truncate",
|
||||
"underline",
|
||||
"underline-offset-2",
|
||||
|
|
@ -518,13 +533,13 @@
|
|||
"w-screen",
|
||||
"xl:grid-cols-3",
|
||||
"xl:grid-cols-4",
|
||||
"xl:grid-cols-main-xl",
|
||||
"xl:w-[1200px]",
|
||||
"xl:w-[400px]",
|
||||
"youtube-video",
|
||||
"z-10",
|
||||
"z-20",
|
||||
"z-30",
|
||||
"z-40",
|
||||
"z-50"
|
||||
],
|
||||
"ids": null
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
|
@ -6,48 +6,62 @@
|
|||
</head>
|
||||
|
||||
<body
|
||||
class="bg-background-light text-base dark:bg-background-dark dark:text-white">
|
||||
class="flex flex-col items-center bg-gradient-to-r from-background-light from-20% to-white to-30% text-base dark:from-gray-dark-100 dark:to-background-dark dark:text-white">
|
||||
{{ partial "header.html" . }}
|
||||
<main class="grid grid-cols-1 xl:grid-cols-main-xl lg:grid-cols-main-lg md:grid-cols-main-md">
|
||||
<!-- 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)] sticky top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 sm:w-full md:z-auto md:block md:w-[300px]"
|
||||
: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>
|
||||
<!-- Main navigation -->
|
||||
<div x-data="{ expanded: false }">
|
||||
<div class="px-4 flex w-full items-center justify-between">
|
||||
<a class="text-lg flex-grow" href="{{ .FirstSection.Permalink }}">{{ .FirstSection.LinkTitle }}</a>
|
||||
<button @click="expanded = !expanded" class="rounded hover:bg-gray-light-300 hover:dark:bg-gray-dark-300">
|
||||
<span :class="{ 'rotate-180': expanded }" class="icon-svg transform transition-transform">
|
||||
{{ partialCached "icon" "expand_more" "expand_more" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul x-cloak x-show="expanded" class="mt-2 space-y-2 px-2">
|
||||
{{ range site.Menus.main }}
|
||||
{{ if ne page.FirstSection .Page }}
|
||||
<li>
|
||||
<a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="my-2 text-gray-light-200 dark:text-gray-dark-300" />
|
||||
<!-- Actual Sidebar Content -->
|
||||
{{ block "left" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
{{- if ne .Params.sitemap false }}
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@
|
|||
{{ end }}
|
||||
{{ .Scratch.Set "headings" slice }}
|
||||
{{ .Scratch.Set "subheadings" slice }}
|
||||
<div class="flex w-full">
|
||||
<article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
<h1 class="scroll-mt-36">{{ .Title }}</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
|
|
@ -192,8 +193,34 @@ can be removed entirely in a future release.
|
|||
</table>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ define "right" }}
|
||||
{{ 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 }}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,5 @@
|
|||
{{ 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 }}
|
||||
|
|
|
|||
|
|
@ -3,22 +3,5 @@
|
|||
{{ 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,18 @@
|
|||
{{ define "left" }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<article class="prose min-w-0 flex-[2_2_0%] max-w-4xl dark:prose-invert">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<h1 data-pagefind-weight="10" class="scroll-mt-36">{{ .Title }}</h1>
|
||||
{{ if eq .CurrentSection.Layout "series" }}
|
||||
{{ partial "guides-stepper.html" . }}
|
||||
{{ end }}
|
||||
<div class="block lg:hidden">
|
||||
{{ partialCached "pagemeta.html" . . }}
|
||||
<hr />
|
||||
</div>
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
{{ define "left" }}
|
||||
{{- partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ define "main" }}
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<article class="prose max-w-none dark:prose-invert">
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
{{- $img := resources.Get .Params.image }}
|
||||
<img src="{{ $img.Permalink }}" alt="{{ .Title }}" class="w-full rounded-lg object-cover h-96">
|
||||
<h1 class="scroll-mt-36">{{ .Title }}</h1>
|
||||
|
|
@ -12,3 +12,7 @@
|
|||
{{ partial "post-links.html" (where .CurrentSection.Pages "Permalink" "ne" page.Permalink) }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ define "left" }}
|
||||
{{- partial "sidebar.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
<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-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="mx-auto flex h-full 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 => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
<button @click="expanded = !expanded" class="hover:bg-gray-light-300 hover:dark:bg-gray-dark-300 rounded">
|
||||
<span :class="{ 'hidden' : expanded }" class="icon-svg {{ if $expanded }}hidden{{ end }}">
|
||||
{{ partialCached "icon" "expand_more" "expand_more" }}
|
||||
|
|
@ -76,11 +65,9 @@
|
|||
{{- if .Params.goto }}
|
||||
<li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark">
|
||||
<a class="py-2 w-full truncate block"
|
||||
href="{{ markdownify .Params.goto }}"
|
||||
title="{{ markdownify .Title }}">
|
||||
<span class="flex items-center gap-2">
|
||||
href="{{ .Params.goto }}"
|
||||
title="{{ .LinkTitle }}">
|
||||
{{ template "renderTitle" . }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- else }}
|
||||
|
|
@ -88,10 +75,8 @@
|
|||
<li class="pl-4 hover:text-blue-light hover:dark:text-blue-dark
|
||||
{{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
|
||||
<a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
|
||||
href="{{ .Permalink }}" title="{{ markdownify .Title }}"
|
||||
><span class="flex items-center gap-2">
|
||||
href="{{ .Permalink }}" title="{{ .LinkTitle }}">
|
||||
{{ 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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue