mirror of
https://github.com/docker/docs.git
synced 2026-03-27 22:38:54 +07:00
4a3f9e3cbe
<!--Delete sections as needed --> ## Description This might be a my computer thing (because my computer probably isn't the fastest), but the component often flickers on load. - ~Removed x-collapse and~ added x-cloak to prevent the drop-down from appearing expanded before the js loads. - Changed the button text to static, so it's not waiting for the OS detection to load. ## Related issues or tickets ENGDOCS-3149 ## Reviews <!-- Notes for reviewers here --> <!-- List applicable reviews (optionally @tag reviewers) --> - [ ] Editorial review --------- Signed-off-by: Craig Osterhout <craig.osterhout@docker.com>
250 lines
10 KiB
HTML
250 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
</head>
|
|
|
|
<body class="flex min-h-screen flex-col bg-gray-50 text-base dark:bg-gray-950 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" . }}
|
|
{{ partial "gordon-chat.html" . }}
|
|
<main class="flex w-full flex-col items-stretch gap-20 self-center pt-20">
|
|
<div class="grid w-full grid-cols-1 items-center gap-20 px-4 lg:grid-cols-2 xl:w-[1200px] self-center">
|
|
<div class="bg-pattern-blue relative rounded-sm drop-shadow z-10"
|
|
x-data="{
|
|
open: false,
|
|
os: 'unknown',
|
|
arch: 'unknown',
|
|
init() {
|
|
const platform = navigator.platform.toLowerCase();
|
|
const userAgent = navigator.userAgent.toLowerCase();
|
|
|
|
if (platform.includes('mac') || platform.includes('darwin')) {
|
|
this.os = 'mac';
|
|
// Default to Apple Silicon (arm64) as it's now the standard
|
|
// Modern browsers on Apple Silicon report MacIntel for compatibility
|
|
this.arch = 'arm64';
|
|
} else if (platform.includes('win')) {
|
|
this.os = 'windows';
|
|
// Default to x86_64 - Windows ARM is rare and detection is unreliable
|
|
this.arch = 'amd64';
|
|
} else if (platform.includes('linux')) {
|
|
this.os = 'linux';
|
|
}
|
|
},
|
|
getDownloadUrl(os, arch = 'amd64') {
|
|
const baseUtm = 'utm_source=docker&utm_medium=webreferral';
|
|
const urls = {
|
|
'mac-arm64': `https://desktop.docker.com/mac/main/arm64/Docker.dmg?${baseUtm}&utm_campaign=docs-driven-download-mac-arm64`,
|
|
'mac-amd64': `https://desktop.docker.com/mac/main/amd64/Docker.dmg?${baseUtm}&utm_campaign=docs-driven-download-mac-amd64`,
|
|
'windows-arm64': `https://desktop.docker.com/win/main/arm64/Docker%20Desktop%20Installer.exe?${baseUtm}&utm_campaign=docs-driven-download-win-arm64`,
|
|
'windows-amd64': `https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe?${baseUtm}&utm_campaign=docs-driven-download-win-amd64`,
|
|
'linux': '/desktop/linux/install/'
|
|
};
|
|
return urls[os === 'linux' ? 'linux' : `${os}-${arch}`] || '/desktop/setup/install/linux/';
|
|
},
|
|
getOsLabel(os, arch = 'amd64') {
|
|
const labels = {
|
|
'mac-arm64': 'Docker Desktop for Mac (Apple Silicon)',
|
|
'mac-amd64': 'Docker Desktop for Mac (Intel)',
|
|
'windows-arm64': 'Docker Desktop for Windows (ARM)',
|
|
'windows-amd64': 'Docker Desktop for Windows',
|
|
'linux': 'Docker Desktop for Linux'
|
|
};
|
|
return labels[os === 'linux' ? 'linux' : `${os}-${arch}`] || 'Docker Desktop';
|
|
}
|
|
}"
|
|
@click.outside="open = false">
|
|
<div class="flex h-full flex-col items-start justify-between gap-4 px-8 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="icon-svg text-blue dark:text-blue">
|
|
{{ partial "icon" "play_circle" }}</span>
|
|
<h1 class="text-xl">Get Docker</h1>
|
|
</div>
|
|
<p>
|
|
Download Docker Desktop for your platform or
|
|
<a href="/get-started/get-docker/" class="text-blue dark:text-blue-400 hover:underline">view getting started guides</a>.
|
|
</p>
|
|
<div class="mt-20">
|
|
<div class="relative inline-block">
|
|
<div class="flex shadow rounded-sm overflow-hidden">
|
|
<a :href="getDownloadUrl(os, arch)"
|
|
class="bg-blue flex cursor-pointer items-center gap-2 p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 whitespace-nowrap">
|
|
<span class="icon-svg icon-sm">{{ partial "icon" "download" }}</span>
|
|
<span>Download Docker Desktop</span>
|
|
</a>
|
|
<button @click="open = !open" type="button"
|
|
class="bg-blue flex items-center justify-center px-3 text-white border-l border-blue-400 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-300"
|
|
aria-label="More download options">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div x-show="open" x-collapse x-cloak
|
|
class="absolute top-full left-0 mt-1 min-w-full bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden z-50">
|
|
<a href="https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64"
|
|
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
|
Docker Desktop for Mac (Apple Silicon)
|
|
</a>
|
|
<a href="https://desktop.docker.com/mac/main/amd64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-amd64"
|
|
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
|
Docker Desktop for Mac (Intel)
|
|
</a>
|
|
<a href="https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-win-amd64"
|
|
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
|
Docker Desktop for Windows
|
|
</a>
|
|
<a href="https://desktop.docker.com/win/main/arm64/Docker%20Desktop%20Installer.exe?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-win-arm64"
|
|
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
|
Docker Desktop for Windows (ARM)
|
|
</a>
|
|
<a href="/desktop/linux/install/"
|
|
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
|
Docker Desktop for Linux
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="h-full bg-pattern-purple rounded-sm drop-shadow">
|
|
<div class="flex h-full flex-col items-start gap-4 px-6 py-4">
|
|
<div class="flex flex-col gap-2">
|
|
<h2 class="text-xl">Docker Hardened Images, now free to use</h1>
|
|
</div>
|
|
<p>
|
|
Minimal, hardened base images with full transparency:
|
|
signed SBOMs, SLSA Level 3 provenance, and complete CVE
|
|
data.
|
|
</p>
|
|
<a href="/dhi/"
|
|
class="shadow bg-blue flex mt-auto cursor-pointer items-center gap-2 rounded-sm p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">
|
|
Get started for free
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-4 mx-auto px-4 xl:w-[1200px]">
|
|
<div>
|
|
<a class="h-full" href="/get-started/">
|
|
<div class="section-card">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-blue dark:text-blue">
|
|
{{ partial "icon" "rocket" }}
|
|
</span>
|
|
<div>
|
|
<div class="section-card-title">Get started</div>
|
|
</div>
|
|
</div>
|
|
<div class="section-card-text">
|
|
Learn Docker basics and the benefits of containerization.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="h-full" href="/guides/">
|
|
<div class="section-card">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-blue dark:text-blue">
|
|
{{ partial "icon" "developer_guide" }}
|
|
</span>
|
|
<div>
|
|
<div class="section-card-title">Guides</div>
|
|
</div>
|
|
</div>
|
|
<div class="section-card-text">
|
|
Learn how Docker can optimize your development workflows.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="h-full" href="/manuals/">
|
|
<div class="section-card">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-blue dark:text-blue">
|
|
{{ partial "icon" "description" }}
|
|
</span>
|
|
<div>
|
|
<div class="section-card-title">Manuals</div>
|
|
</div>
|
|
</div>
|
|
<div class="section-card-text">
|
|
Learn how to install, set up, configure, and use Docker
|
|
products.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a class="h-full" href="/reference/">
|
|
<div class="section-card">
|
|
<div class="flex items-center gap-4">
|
|
<span class="icon-svg text-blue dark:text-blue">
|
|
{{ partial "icon" "terminal" }}
|
|
</span>
|
|
<div>
|
|
<div class="section-card-title">Reference</div>
|
|
</div>
|
|
</div>
|
|
<div class="section-card-text">
|
|
Browse the CLI and API documentation.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="relative flex h-full items-center justify-center overflow-hidden bg-gray-100 py-8 md:h-[334px] dark:bg-gray-900">
|
|
<div class="w-[1200px] px-4">
|
|
<div class="flex max-w-full flex-col gap-8 md:max-w-[66%]">
|
|
<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 flex-col gap-4 md:flex-row">
|
|
<a href="https://forums.docker.com/"
|
|
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
|
|
Visit Docker Forum
|
|
</a>
|
|
<a href="https://dockr.ly/comm-slack"
|
|
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
|
|
Join Docker Slack
|
|
</a>
|
|
<a href="https://www.docker.com/community/captains/"
|
|
class="cursor-pointer rounded-sm bg-white px-4 py-2 hover:bg-gray-50 dark:bg-gray-500 dark:text-white dark:hover:bg-gray-600">
|
|
Find your Docker Captain
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute top-0 right-0 hidden md:block">
|
|
{{- (resources.Get "images/home-abstract-faint.svg").Content | safe.HTML -}}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="mt-auto">{{ partialCached "footer.html" . }}</footer>
|
|
</body>
|
|
|
|
</html>
|