mirror of https://github.com/docker/docs.git
236 lines
11 KiB
HTML
236 lines
11 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 xl:w-[1200px] flex-col items-stretch gap-20 self-center py-20 w-full px-4">
|
|
<div class="bg-pattern-blue 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-started/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 scale-50 lg:scale-100">
|
|
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-1.svg" />
|
|
<img class="hidden dark:block" alt="Low-fi desktop app" src="/assets/images/app-wf-dark-1.svg" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
|
<div>
|
|
<a class="h-full" href="/guides/">
|
|
<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">
|
|
Get started and learn how Docker can optimize your development workflows.
|
|
</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-1 gap-20 lg:grid-cols-2">
|
|
<div class="bg-pattern-verde 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="/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 scale-75 md:scale-100">
|
|
<img class="dark:hidden" alt="Low-fi desktop app" src="/assets/images/app-wf-light-2.svg" />
|
|
<img class="hidden dark:block" alt="Low-fi desktop app" 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 rounded p-6">
|
|
<div class="flex flex-col gap-12">
|
|
<div class="flex flex-col gap-4">
|
|
<h2 class="font-medium">Research</h2>
|
|
<p class="text-xl">
|
|
Docker State of Application Development survey
|
|
</p>
|
|
<p>
|
|
Help us better understand and support the application development
|
|
community by answering our community survey.
|
|
</p>
|
|
<p>
|
|
The survey takes approximately 20-30 minutes to complete, and
|
|
you can save your progress and return at any time. As a thank
|
|
you, you can opt into a raffle for Docker swag and other
|
|
prizes!
|
|
</p>
|
|
</div>
|
|
<a href="https://docker.qualtrics.com/jfe/form/SV_3IDfGscnmh99ex8"
|
|
class="max-w-fit 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">Take the survey</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="mb-4 text-xl">Browse by section</h2>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{{ 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 class="flex flex-col gap-4">
|
|
<h2 class="mb-4 text-xl">Browse by tag</h2>
|
|
<div class="flex flex-wrap gap-4">
|
|
{{ $tags := slice }}
|
|
{{- range site.Taxonomies.tags }}
|
|
{{ $tags = $tags | append .Page }}
|
|
{{ end }}
|
|
{{ partial "tags.html" $tags }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative flex md:h-[334px] items-center justify-center overflow-hidden bg-gray-light-100 dark:bg-gray-dark-200 h-full py-8">
|
|
<div class="w-[1200px] px-4">
|
|
<div class="flex md:max-w-[66%] flex-col gap-8 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 flex-col md:flex-row">
|
|
<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 hidden md:block">
|
|
{{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer>{{ partialCached "footer.html" . }}</footer>
|
|
</body>
|
|
|
|
</html>
|