mirror of https://github.com/docker/docs.git
288 lines
14 KiB
HTML
288 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
</head>
|
|
|
|
<body class="flex h-max flex-col bg-background-light text-base dark:bg-background-dark dark:text-white">
|
|
<div class="absolute -z-10 w-full">
|
|
<svg class="dark:hidden" viewBox="0 0 1616 797" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z" fill="#EFEFF2" />
|
|
</svg>
|
|
<svg class="hidden dark:block" viewBox="0 0 1616 797" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1066.69 797L0 136.789V0H1616V488.038L1066.69 797Z" fill="#080B0E" fill-opacity="0.3" />
|
|
</svg>
|
|
</div>
|
|
{{ partial "header.html" . }}
|
|
<main class="flex min-h-screen w-full flex-col items-stretch self-center">
|
|
<div class="flex w-[1200px] flex-col items-stretch gap-20 self-center py-20 lg:w-full lg:px-4">
|
|
<div class="bg-pattern-blue-light dark:bg-pattern-blue-dark relative overflow-hidden rounded drop-shadow">
|
|
<div class="flex h-full flex-col items-start justify-between gap-4 p-8">
|
|
<div class="flex items-center gap-6">
|
|
<span class="icon-svg text-violet-light dark:text-violet-dark">
|
|
{{ partial "icon" "play_circle" }}</span>
|
|
<h1 class="text-2xl">Get Docker</h1>
|
|
</div>
|
|
<p>
|
|
Learn how to install Docker for Mac, Windows, or Linux and explore
|
|
our developer tools.
|
|
</p>
|
|
<a href="/get-docker/"
|
|
class="mt-20 flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
|
|
<span class="icon-svg">{{ partial "icon" "download"}}</span>
|
|
Get Docker
|
|
</a>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 origin-bottom-right md:scale-50">
|
|
<img class="dark:hidden" src="/assets/images/app-wf-light-1.svg" />
|
|
<img class="hidden dark:block" src="/assets/images/app-wf-dark-1.svg" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="grid grid-cols-3 gap-4 sm:flex sm:flex-col md:grid-cols-1">
|
|
<div>
|
|
<a class="h-full" href="/get-started/overview/">
|
|
<div
|
|
class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm hover:border-gray-light-200 hover:drop-shadow-lg dark:border-gray-dark-400 dark:bg-gray-dark-200 hover:dark:border-gray-dark">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-violet-light dark:text-violet-dark">
|
|
{{ partial "icon" "developer_guide" }}
|
|
</span>
|
|
<div>
|
|
<div class="text-xl leading-snug text-gray-light-800 dark:text-white">
|
|
Guides
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
|
|
Learn the basics and benefits of containerizing your
|
|
application.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="h-full" href="/manuals/">
|
|
<div
|
|
class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm hover:border-gray-light-200 hover:drop-shadow-lg dark:border-gray-dark-400 dark:bg-gray-dark-200 hover:dark:border-gray-dark">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-violet-light dark:text-violet-dark">
|
|
{{ partial "icon" "description" }}
|
|
</span>
|
|
<div>
|
|
<div class="text-xl leading-snug text-gray-light-800 dark:text-white">
|
|
Manuals
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
|
|
Learn how to install, set up, configure, and use Docker
|
|
products.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="h-full" href="/reference/">
|
|
<div
|
|
class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm hover:border-gray-light-200 hover:drop-shadow-lg dark:border-gray-dark-400 dark:bg-gray-dark-200 hover:dark:border-gray-dark">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-violet-light dark:text-violet-dark">
|
|
{{ partial "icon" "terminal" }}
|
|
</span>
|
|
<div>
|
|
<div class="text-xl leading-snug text-gray-light-800 dark:text-white">
|
|
Reference
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leading-snug text-gray-light-500 dark:text-gray-dark-700">
|
|
Browse the CLI and API documentation.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-10 grid grid-cols-2 gap-20 md:grid-cols-1">
|
|
<div class="bg-pattern-verde-light dark:bg-pattern-verde-dark relative rounded p-6 drop-shadow">
|
|
<div class="flex h-full flex-col items-start justify-between gap-12">
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="font-medium">Getting started</h2>
|
|
<p class="text-xl">
|
|
Learn Docker basics and the benefits of containerizing your
|
|
applications.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<a href="/guides/get-started/"
|
|
class="flex cursor-pointer items-center gap-2 rounded bg-blue-light p-2 px-4 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">
|
|
Get started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 origin-bottom-right sm:scale-75">
|
|
<img class="dark:hidden" src="/assets/images/app-wf-light-2.svg" />
|
|
<img class="hidden dark:block" src="/assets/images/app-wf-dark-2.svg" />
|
|
</div>
|
|
</div>
|
|
<div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
|
|
<div class="bg-pattern-purple-light dark:bg-pattern-purple-dark rounded p-6">
|
|
<div class="flex flex-col gap-12">
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="font-medium">Featured</h2>
|
|
<p class="text-xl">
|
|
Accelerate your builds with cloud capabilities.
|
|
</p>
|
|
<p>
|
|
End-to-end encryption, a shared build cache for teams, and
|
|
native multi-platform builds. Get started today for free.
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-4 justify-self-end sm:grid-cols-2">
|
|
<a href="https://build.docker.com/"
|
|
class="cursor-pointer rounded bg-blue-light px-4 py-2 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">Dashboard</a>
|
|
<a href="/build/cloud/"
|
|
class="cursor-pointer rounded bg-blue-light px-4 py-2 text-white transition duration-300 hover:bg-blue-light-400 dark:bg-blue-dark-400 dark:hover:bg-blue-dark">Docs</a>
|
|
<div class="ml-auto sm:col-start-2">
|
|
{{ $dbcLogoWhite := resources.Get "images/build-cloud-white.svg" }}
|
|
{{ $dbcLogoLight := resources.Get "images/build-cloud-light.svg" }}
|
|
<img class="hidden h-full w-full dark:block" src="{{ $dbcLogoWhite.Permalink }}" />
|
|
<img class="h-full w-full dark:hidden" src="{{ $dbcLogoLight.Permalink }}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="mb-4 text-xl">Browse by section</h2>
|
|
<div class="grid grid-cols-4 gap-4 sm:flex sm:flex-col lg:grid-cols-2 xl:grid-cols-3">
|
|
{{ range .Params.grid }}
|
|
<div>
|
|
<div
|
|
class="flex h-full flex-col gap-2 rounded border border-gray-light-100 bg-white p-4 drop-shadow-sm dark:border-gray-dark-400 dark:bg-gray-dark-200">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-gray-light dark:text-gray-dark">{{ partial "icon" .icon }}</span>
|
|
<div>
|
|
<div class="text-xl">{{ .title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex h-full flex-col justify-between gap-4">
|
|
<p>{{ .description | markdownify }}</p>
|
|
<nav class="flex flex-col gap-2">
|
|
{{ range .links }}
|
|
<div>
|
|
<span class="icon-svg text-gray-light dark:text-gray-dark">{{ partial "icon" "arrow_right" }}</span>
|
|
<a class="link" href="{{ .url }}">{{ .text }}</a>
|
|
</div>
|
|
{{ end }}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative flex h-[334px] items-center justify-center overflow-hidden bg-gray-light-100 dark:bg-gray-dark-200 sm:h-full sm:py-8">
|
|
<div class="w-[1200px] px-4">
|
|
<div class="flex max-w-[66%] flex-col gap-8 sm:max-w-full">
|
|
<h2 class="text-2xl">Community resources</h2>
|
|
<p>
|
|
Find fellow Docker enthusiasts, engage in insightful discussions,
|
|
share knowledge, and collaborate on projects. Our communities
|
|
offer a rich online experience for developers to create valuable
|
|
connections that challenge and inspire!
|
|
</p>
|
|
<div class="flex gap-4 sm:flex-col">
|
|
<a href="https://forums.docker.com/"
|
|
class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
|
|
Visit Docker Forum
|
|
</a>
|
|
<a href="https://dockr.ly/comm-slack"
|
|
class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
|
|
Join Docker Slack
|
|
</a>
|
|
<a href="https://www.docker.com/community/captains/"
|
|
class="cursor-pointer rounded bg-white px-4 py-2 text-blue-light hover:bg-gray-light-100 dark:bg-gray-dark-400 dark:text-white dark:hover:bg-gray-dark-500">
|
|
Find your Docker Captain
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute right-0 top-0 sm:hidden">
|
|
<svg class="dark:hidden" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29139)" />
|
|
</g>
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29139)" />
|
|
</g>
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29139)" />
|
|
</g>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_129_29139" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#C0E0FA" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
<linearGradient id="paint1_linear_129_29139" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#F7ECFF" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
<linearGradient id="paint2_linear_129_29139" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#C6EAE1" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
<svg class="hidden dark:block" width="555" height="334" viewBox="0 0 555 334" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M0 249.997L283.445 0H555V334H89.8843L0 249.997Z" fill="url(#paint0_linear_129_29443)" />
|
|
</g>
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M80 84.003L363.445 334H554.5V0H169.884L80 84.003Z" fill="url(#paint1_linear_129_29443)" />
|
|
</g>
|
|
<g style="mix-blend-mode: multiply">
|
|
<path d="M279 334L555 104V182.33V254.174V334H279Z" fill="url(#paint2_linear_129_29443)" />
|
|
</g>
|
|
<defs>
|
|
<linearGradient id="paint0_linear_129_29443" x1="18.5" y1="61.5" x2="502" y2="240.5"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#C0E0FA" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
<linearGradient id="paint1_linear_129_29443" x1="98.5" y1="272.5" x2="582" y2="93.5"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#F7ECFF" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
<linearGradient id="paint2_linear_129_29443" x1="282.381" y1="-33.7561" x2="1315.56" y2="352.19"
|
|
gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#C6EAE1" />
|
|
<stop offset="1" stop-color="#EFEFF2" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer>{{ partial "footer.html" . }}</footer>
|
|
</body>
|
|
|
|
</html>
|