docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19558 from dvdksn/dds-updates-march24 

site: style updates and performance improvements
This commit is contained in:
David Karlsson 2024-03-04 17:02:36 +01:00 committed by GitHub
parent b1aa8d3bd8 df0455d16f
commit 8b39609e1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 89 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/global.css
View File

@ -8,6 +8,11 @@
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
&.dark {
scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
}
}
}

8
assets/css/icons.css
View File

@ -11,19 +11,19 @@
.icon-xs {
svg {
@apply text-base;
font-size: 12px;
}
}
.icon-sm {
svg {
@apply text-lg;
font-size: 16px;
}
}
.icon-top {
.icon-lg {
svg {
@apply ml-1 align-top;
font-size: 32px;
}
}
}

1
assets/css/styles.css
View File

@ -10,7 +10,6 @@
@import "/assets/css/code";
@import "/assets/css/toc";
@import "/assets/css/callouts";
@import "/assets/css/tables";
@import "tailwindcss/utilities";
@import "/assets/css/syntax-light";

15
assets/css/tables.css
View File

@ -1,15 +0,0 @@
@layer components {
.prose table {
@apply table w-full overflow-x-auto text-base sm:block;
thead tr {
@apply bg-gray-light-300 dark:bg-gray-dark-300;
}
tbody tr:nth-of-type(2n) {
@apply bg-gray-light-200 dark:bg-gray-dark-200;
}
th,
td {
@apply p-2;
}
}
}

4
content/scout/integrations/registry/acr.md
View File

@ -54,12 +54,14 @@ the Azure resources.
{{< accordion title="JSON template" >}}
{{< acr-template.inline >}}
{{ $data := data.GetJSON "https://prod-scout-integration-templates.s3.amazonaws.com/latest/acr_token_template.json" }}
{{ with resources.GetRemote "https://prod-scout-integration-templates.s3.amazonaws.com/latest/acr_token_template.json" }}
{{ $data := .Content | transform.Unmarshal }}
```json
{{ transform.Remarshal "json" $data }}
```
{{ end }}
{{< /acr-template.inline >}}
{{< /accordion >}}

4
layouts/_default/_markup/render-codeblock.html
View File

@ -7,8 +7,8 @@
copying = true;
setTimeout(() => copying = false, 2000);"
>
<span :class="{ 'group-hover:block' : !copying }" class="hidden icon-svg">{{ partial "icon" "content_copy" }}</span>
<span :class="{ 'group-hover:block' : copying }" class="hidden icon-svg">{{ partial "icon" "check_circle" }}</span>
<span :class="{ 'group-hover:block' : !copying }" class="hidden icon-svg">{{ partialCached "icon" "content_copy" "content_copy" }}</span>
<span :class="{ 'group-hover:block' : copying }" class="hidden icon-svg">{{ partialCached "icon" "check_circle" "check_circle" }}</span>
</button>
{{ $result := transform.HighlightCodeBlock . }}
<div class="syntax-light dark:syntax-dark">

2
layouts/_default/_markup/render-image.html
View File

@ -37,7 +37,7 @@
<button
class="text-white fixed z-30 top-6 right-8 icon-svg"
>
{{ partial "icon" "close" }}
{{ partialCached "icon" "close" "close" }}
</button>
<img
loading="lazy"

4
layouts/_default/_markup/render-link.html
View File

@ -7,8 +7,8 @@
target="_blank"
rel="noopener">
{{- .Text | safeHTML -}}
<span class="icon-svg icon-xs icon-top">
{{- partial "icon" "open_in_new" -}}
<span class="pl-1 icon-svg icon-sm">
{{- partialCached "icon" "open_in_new" "open_in_new" -}}
</span></a>
{{- else if (strings.HasPrefix $url "/") -}}
{{/* absolute link, use url as-is */}}

26
layouts/_default/cli.html
View File

@ -33,7 +33,7 @@
<tr>
<th class="text-left w-32 flex items-center gap-2">
<span>Aliases</span>
{{ partial "tooltip.html" "An alias is a short or memorable alternative for a longer command." }}
{{ partialCached "tooltip.html" "An alias is a short or memorable alternative for a longer command." "cli-alias" }}
</th>
<td>
<div class="flex gap-3">
@ -71,19 +71,19 @@
{{ end }}
{{ with $data.kubernetes }}
<p>
{{ partial "components/badge.html" (dict "color" "blue" "content" "Kubernetes") }}
{{ partialCached "components/badge.html" (dict "color" "blue" "content" "Kubernetes") "k8s" }}
This command works with the Kubernetes orchestrator.
</p>
{{ end }}
{{ with $data.swarm }}
<p>
{{ partial "components/badge.html" (dict "color" "blue" "content" "Swarm") }}
{{ partialCached "components/badge.html" (dict "color" "blue" "content" "Swarm") "swarm" }}
This command works with the Swarm orchestrator.
</p>
{{ end }}
{{ with $data.long }}
{{ $heading := dict "level" 2 "text" "Description" }}
{{ partial "heading.html" $heading }}
{{ partialCached "heading.html" $heading "cli-description" }}
{{ $subHeadings := (strings.FindRE `(?m:#{3,4} .*)` .) }}
{{ $.Scratch.Add "headings" $heading }}
{{ range $subHeadings }}
@ -97,7 +97,7 @@
{{ $opts := where . "hidden" false }}
{{ with $opts }}
{{ $heading := dict "level" 2 "text" "Options" }}
{{ partial "heading.html" $heading }}
{{ partialCached "heading.html" $heading "cli-options" }}
{{ $.Scratch.Add "headings" $heading }}
<table>
<thead>
@ -129,22 +129,22 @@
</td>
<td>
{{ with .min_api_version }}
{{ partial "components/badge.html" (dict "color" "blue" "content" (printf "API %s+" .)) }}
{{ partialCached "components/badge.html" (dict "color" "blue" "content" (printf "API %s+" .)) "api" . }}
{{ end }}
{{ with .deprecated }}
{{ partial "components/badge.html" (dict "color" "red" "content" "Deprecated") }}
{{ partialCached "components/badge.html" (dict "color" "red" "content" "Deprecated") "deprecated" }}
{{ end }}
{{ with .experimental }}
{{ partial "components/badge.html" (dict "color" "amber" "content" "experimental (daemon)") }}
{{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (daemon)") "exp" }}
{{ end }}
{{ with .experimentalcli }}
{{ partial "components/badge.html" (dict "color" "amber" "content" "experimental (CLI)") }}
{{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental (CLI)") "exp-cli" }}
{{ end }}
{{ with .kubernetes }}
{{ partial "components/badge.html" (dict "color" "blue" "content" "Kubernetes") }}
{{ partialCached "components/badge.html" (dict "color" "blue" "content" "Kubernetes") "k8s" }}
{{ end }}
{{ with .swarm }}
{{ partial "components/badge.html" (dict "color" "blue" "content" "Swarm") }}
{{ partialCached "components/badge.html" (dict "color" "blue" "content" "Swarm") "swarm" }}
{{ end }}
{{ if .description }}
{{/* replace newlines in long desc with break tags */}}
@ -159,7 +159,7 @@
{{ end }}
{{ with $data.examples }}
{{ $heading := dict "level" 2 "text" "Examples" }}
{{ partial "heading.html" $heading }}
{{ partialCached "heading.html" $heading "cli-examples" }}
{{ $subHeadings := (strings.FindRE `(?m:#{3,4} .*)` .) }}
{{ $.Scratch.Add "headings" $heading }}
{{ range $subHeadings }}
@ -171,7 +171,7 @@
{{ end }}
{{ if eq .Kind "section" }}
{{ $heading := dict "level" 2 "text" "Subcommands" }}
{{ partial "heading.html" $heading }}
{{ partialCached "heading.html" $heading "cli-subcommands" }}
{{ $.Scratch.Add "headings" $heading }}
<table>
<thead>

2
layouts/index.html
View File

@ -281,7 +281,7 @@
</div>
</div>
</main>
<footer>{{ partial "footer.html" . }}</footer>
<footer>{{ partialCached "footer.html" . }}</footer>
</body>
</html>

4
layouts/partials/components/accordion.html
View File

@ -1,8 +1,8 @@
<div x-data="{ open: false }" class="border border-gray-light-200 dark:border-gray-dark-200 bg-white dark:bg-gray-dark-100">
<button class="not-prose w-full py-2 px-4 flex justify-between" x-on:click="open = ! open">
<span>{{ .title }}</span>
<span :class="{ 'hidden' : !open }" class="icon-svg">{{ partial "icon" "expand_less" }}</span>
<span :class="{ 'hidden' : open }" class="icon-svg">{{ partial "icon" "expand_more" }}</span>
<span :class="{ 'hidden' : !open }" class="icon-svg">{{ partialCached "icon" "expand_less" "expand_less" }}</span>
<span :class="{ 'hidden' : open }" class="icon-svg">{{ partialCached "icon" "expand_more" "expand_more" }}</span>
</button>
<div x-show="open" x-collapse class="px-4">

80
layouts/partials/components/card.html
View File

@ -1,54 +1,52 @@
{{ if (and .image .icon) }}
{{ errorf "card: don't use both image and icon: %s" . }}
{{ end }}
<div class="not-prose overflow-x-hidden">
<div class="not-prose overflow-x-hidden drop-shadow bg-white rounded
border border-gray-light-100 dark:bg-gray-dark-200 dark:border-gray-dark-400
{{ if .link }}hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
{{ if .link }}
<a class="h-full" href="{{ .link }}">
{{ end }}
<div class="h-full bg-white rounded-sm
border border-gray-light-100 drop-shadow-sm dark:bg-gray-dark-200 dark:border-gray-dark-400
{{ if .link }}hover:drop-shadow-lg hover:border-gray-light-200 hover:dark:border-gray-dark{{ end }}">
{{ if .image }}
{{/* use the "tall image" layout */}}
<div class="flex gap-2 items-stretch">
<div class="basis-1/3">
<img class="h-full w-full object-cover" src="{{ .image }}" alt="">
</div>
<div class="basis-2/3 flex flex-col gap-2 p-4">
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
{{ markdownify .title }}
</div>
<div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
<a href="{{ .link }}">
{{ end }}
{{ if .image }}
{{/* use the "tall image" layout */}}
<div class="flex gap-2 items-stretch">
<div class="basis-1/3">
<img class="h-full w-full object-cover" src="{{ .image }}" alt="">
</div>
{{ else }}
{{/* use the default layout */}}
<div class="flex flex-col gap-2 p-4">
<div class="flex gap-4 items-center">
{{ with .icon }}
{{ if strings.ContainsAny . "/." }}
{{/* image file */}}
<img class="w-[32px] invertible" src="{{ . }}" alt="">
{{ else }}
{{/* icon ligature */}}
<span class="icon-svg">{{ partial "icon" . }}</span>
{{ end }}
{{ end }}
<div>
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
{{ markdownify .title }}
</div>
</div>
<div class="basis-2/3 flex flex-col gap-2 p-4">
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex gap-2">
{{ markdownify .title }}
</div>
<div class="text-gray-light-500 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
{{ end }}
</div>
{{ if .link }}
</a>
{{ else }}
{{/* use the default layout */}}
<div class="flex flex-col gap-2 p-4">
<div class="flex gap-4 items-center">
{{ with .icon }}
{{ if strings.ContainsAny . "/." }}
{{/* image file */}}
<img class="w-[32px] invertible" src="{{ . }}" alt="">
{{ else }}
{{/* icon ligature */}}
<span class="icon-svg">{{ partial "icon" . }}</span>
{{ end }}
{{ end }}
<div>
<div class="text-xl text-gray-light-800 leading-snug dark:text-white flex items-center gap-2">
{{ markdownify .title }}
</div>
</div>
</div>
<div class="text-gray-light-600 leading-snug dark:text-gray-dark-700">
{{ .description | markdownify }}
</div>
</div>
{{ end }}
{{ if .link }}
</a>
{{ end }}
</div>

16
layouts/partials/github-links.html
View File

@ -2,21 +2,21 @@
{{ with .File }}
{{ if not (in .Filename "/_vendor/") }}
<p class="flex items-center gap-2">
<span class="icon-svg">{{ partial "icon" "edit" }}</span>
<span class="icon-svg">{{ partialCached "icon" "edit" "edit" }}</span>
<a class="link" target="_blank" rel="noopener"
href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
<span class="icon-svg icon-xs icon-top">
{{- partial "icon" "open_in_new" -}}
href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{- T "editPage" -}}
<span class="icon-svg icon-xs">
{{ partialCached "icon" "open_in_new" "open_in_new" }}
</span></a>
</p>
{{ end }}
{{ end }}
<p class="flex items-center gap-2">
<span class="icon-svg">{{ partial "icon" "done" }}</span>
<span class="icon-svg">{{ partialCached "icon" "done" "done" }}</span>
<a class="link" target="_blank" rel="noopener"
href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{ T "requestChanges" }}
<span class="icon-svg icon-xs icon-top">
{{- partial "icon" "open_in_new" -}}
href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{- T "requestChanges" -}}
<span class="icon-svg icon-xs">
{{ partialCached "icon" "open_in_new" "open_in_new" }}
</span></a>
</a>
</p>

4
layouts/partials/head.html
View File

@ -38,7 +38,7 @@
{{ end }}
{{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
<link href="/assets/fonts/RobotoFlex.woff2" rel="preload" as="font" type="font/woff2" crossorigin />
{{ partial "utils/css.html" . }}
{{ partialCached "utils/css.html" "-" }}
{{ $theme := resources.Get "js/theme.js" | js.Build (dict "minify" true) }}
<script>{{ $theme.Content | safeJS }}</script>
{{ $js := resources.Match "js/src/**.js"
@ -55,4 +55,4 @@
}}
<script defer src="{{ $js.Permalink }}"></script>
<link rel="preconnect" href="https://{{ site.Params.algolia.appid }}-dsn.algolia.net" crossorigin />
{{ partialCached "utils/resources.html" . }}
{{ partialCached "utils/resources.html" "-" }}

6
layouts/partials/header.html
View File

@ -11,7 +11,7 @@
sidebar.classList.replace('md:block', 'md:hidden');
}
}" class="icon-svg hidden px-4 md:block" aria-label="Menu">
{{ partial "icon" "menu" }}
{{ partialCached "icon" "menu" "menu" }}
</button>
{{ end }}
<div>
@ -31,8 +31,8 @@
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
})" @click="theme = (theme === 'dark' ? 'light' : 'dark')">
<span class="icon-svg dark:hidden">{{ partial "icon" "light_mode"}}</span>
<span class="icon-svg hidden dark:block">{{ partial "icon" "dark_mode"}}</span>
<span class="icon-svg dark:hidden">{{ partialCached "icon" "light_mode" "light_mode"}}</span>
<span class="icon-svg hidden dark:block">{{ partialCached "icon" "dark_mode" "dark_mode"}}</span>
</button>
</div>
</div>

4
layouts/partials/sidebar.html
View File

@ -49,10 +49,10 @@
{{ markdownify .entry.sectiontitle }}
</span>
<span class="icon-svg {{ if $expanded }}hidden{{ end }}">
{{ partial "icon" "expand_more" }}
{{ partialCached "icon" "expand_more" "expand_more" }}
</span>
<span class="icon-svg {{ if not $expanded }}hidden{{ end }}">
{{ partial "icon" "expand_less" }}
{{ partialCached "icon" "expand_less" "expand_less" }}
</span>
</button>
<ul class="{{if not $expanded}}hidden {{end}}ml-3 md:ml-[21px]">

4
layouts/partials/tooltip.html
View File

@ -1,6 +1,6 @@
<div data-tooltip-wrapper>
<div data-tooltip-button class="icon-svg icon-sm flex items-center text-blue-light dark:text-blue-dark">
{{ partial "icon" "help" }}
<div data-tooltip-button class="icon-svg flex items-center text-blue-light dark:text-blue-dark">
{{ 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"

1
tailwind.config.js
View File

@ -12,7 +12,6 @@ module.exports = {
'pre code': false,
'code::before': false,
'code::after': false,
table: false,
// light colors for prose
"--tw-prose-body": theme("colors.black"),
"--tw-prose-headings": theme("colors.black"),