mirror of
https://github.com/docker/docs.git
synced 2026-10-23 18:09:02 +03:00
ee71c80562
Replaces @material-symbols/svg-400 (5.5 MB) with heroicons (488 KB) — an 11x reduction in icon asset size. Heroicons uses a single consistent distribution format (24px solid SVGs, fill="currentColor") eliminating the need for the separate utils/svg.html partial, the icon-svg-stroke CSS utility, and the dual-path resolution logic in icon.html. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
82 lines
2.8 KiB
HTML
82 lines
2.8 KiB
HTML
<div
|
|
data-pagefind-ignore
|
|
x-data
|
|
x-ref="root"
|
|
class="group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
|
|
>
|
|
{{ with .Attributes.title }}
|
|
<div class="flex w-full items-center gap-2">
|
|
<div
|
|
class="flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
|
|
>
|
|
<div class="font-normal text-gray-500 dark:text-gray-200">
|
|
{{ . }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
<div class="relative w-full">
|
|
{{ $lang := .Type | default "text" }}
|
|
{{ $result := transform.Highlight .Inner
|
|
$lang .Options
|
|
}}
|
|
<div class="syntax-light dark:syntax-dark not-prose w-full">
|
|
<button
|
|
x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
|
|
class="{{ if .Attributes.title }}
|
|
-top-10
|
|
{{ else }}
|
|
top-1
|
|
{{ end }} absolute right-2 z-10 text-gray-300 dark:text-gray-500"
|
|
title="copy"
|
|
@click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
|
|
copying = true;
|
|
setTimeout(() => copying = false, 2000);"
|
|
>
|
|
<span
|
|
:class="{ 'group-hover:block' : !copying }"
|
|
class="icon-svg hidden"
|
|
>{{ partialCached "icon" "document-duplicate" "document-duplicate" }}</span
|
|
>
|
|
<span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden"
|
|
>{{ partialCached "icon" "check-circle" "check-circle" }}</span
|
|
>
|
|
</button>
|
|
{{ with .Attributes.collapse }}
|
|
<div
|
|
x-data="{ collapse: true }"
|
|
class="relative overflow-clip"
|
|
x-init="$watch('collapse', value => $refs.root.scrollIntoView({ behavior: 'smooth'}))"
|
|
>
|
|
<div
|
|
x-show="collapse"
|
|
class="absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip pb-4"
|
|
>
|
|
<button @click="collapse = false" class="chip">
|
|
<span>Show more</span>
|
|
<span class="icon-svg"
|
|
>{{ partialCached "icon" "chevron-down" "chevron-down" }}</span
|
|
>
|
|
</button>
|
|
</div>
|
|
<div :class="{ 'h-32': collapse }">
|
|
{{ $result }}
|
|
<button
|
|
@click="collapse = true"
|
|
x-show="!collapse"
|
|
class="chip mx-auto mt-4 flex items-center text-sm"
|
|
>
|
|
<span>Hide</span>
|
|
<span class="icon-svg"
|
|
>{{ partialCached "icon" "chevron-up" "chevron-up" }}</span
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
{{ $result }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|