From 854266b06e81b4c7f217933d5e73c7266a24a02e Mon Sep 17 00:00:00 2001 From: pippo Date: Sat, 19 Sep 2026 00:37:01 +0530 Subject: [PATCH] feat(downloads): add dedicated downloads page with OS tab switcher and modern CLI terminal Signed-off-by: pippo --- .../layout/HeroHeader/installOptions.ts | 6 +- src/pages/downloads.tsx | 1005 +++++++++++++++++ 2 files changed, 1008 insertions(+), 3 deletions(-) create mode 100644 src/pages/downloads.tsx diff --git a/src/components/layout/HeroHeader/installOptions.ts b/src/components/layout/HeroHeader/installOptions.ts index 9c6c1bf7d..db7e44976 100644 --- a/src/components/layout/HeroHeader/installOptions.ts +++ b/src/components/layout/HeroHeader/installOptions.ts @@ -24,7 +24,7 @@ const operatingSystemData = [ path: `https://github.com/podman-container-tools/podman/releases/download/v${LATEST_VERSION}/podman-installer-windows-arm64.msi`, }, other: { - path: 'docs/installation', + path: '/downloads', text: 'Other Install Options', }, }, @@ -44,7 +44,7 @@ const operatingSystemData = [ path: `https://github.com/podman-container-tools/podman/releases/download/v${LATEST_VERSION}/podman-installer-macos-arm64.pkg`, }, other: { - path: 'docs/installation', + path: '/downloads', text: 'Other Install Options', }, }, @@ -63,7 +63,7 @@ const operatingSystemData = [ path: `https://github.com/podman-desktop/podman-desktop/releases/download/v${LATEST_DESKTOP_VERSION}/podman-desktop-${LATEST_DESKTOP_VERSION}.flatpak`, }, other: { - path: 'docs/installation', + path: '/downloads', text: 'Other Install Options', }, }, diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx new file mode 100644 index 000000000..2925c9ac7 --- /dev/null +++ b/src/pages/downloads.tsx @@ -0,0 +1,1005 @@ +import React, { useState } from 'react'; +import Layout from '@theme/Layout'; +import { Icon } from '@iconify/react'; +import WaveBorder from '@site/src/components/shapes/WaveBorder'; +import { LATEST_VERSION, LATEST_DESKTOP_VERSION } from '@site/static/data/global'; + +/* ------------------------------------------------------------------ */ +/* Data */ +/* ------------------------------------------------------------------ */ +interface LinuxDistro { + id: string; + name: string; + icon: string; + pkgMgr: string; + command: string; + note: string; +} + +const linuxDistros: LinuxDistro[] = [ + { + id: 'fedora', + name: 'Fedora / RHEL', + icon: 'simple-icons:fedora', + pkgMgr: 'dnf', + command: 'sudo dnf install -y podman', + note: 'Fedora 38+, RHEL 8/9, CentOS Stream, AlmaLinux, Rocky Linux.', + }, + { + id: 'ubuntu', + name: 'Ubuntu / Debian', + icon: 'simple-icons:ubuntu', + pkgMgr: 'apt', + command: 'sudo apt update && sudo apt install -y podman', + note: 'Ubuntu 22.04 LTS+, Debian 11/12 (Bullseye/Bookworm).', + }, + { + id: 'arch', + name: 'Arch Linux', + icon: 'simple-icons:archlinux', + pkgMgr: 'pacman', + command: 'sudo pacman -S --noconfirm podman', + note: 'Always rolling latest stable release from official extra repo.', + }, + { + id: 'opensuse', + name: 'openSUSE', + icon: 'simple-icons:opensuse', + pkgMgr: 'zypper', + command: 'sudo zypper install -y podman', + note: 'openSUSE Tumbleweed and Leap 15.5+.', + }, +]; + +/* ------------------------------------------------------------------ */ +/* Terminal component */ +/* ------------------------------------------------------------------ */ +/* ------------------------------------------------------------------ */ +/* ------------------------------------------------------------------ */ +/* Copy Icon Button (Icon Only, Official Brand Purple #892CA0) */ +/* ------------------------------------------------------------------ */ +function CopyIconButton({ text, className = '' }: { text: string; className?: string }) { + const [copied, setCopied] = useState(false); + + const copy = (e: React.MouseEvent) => { + e.stopPropagation(); + navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( + + ); +} + +/* ------------------------------------------------------------------ */ +/* Terminal component (Clean & Vibrant — Heading + Copy on Right) */ +/* ------------------------------------------------------------------ */ +function Terminal({ command, label }: { command: string; label?: string }) { + const parts = command.split(' '); + + return ( +
+
+
+ + {label && {label}} +
+ +
+
+ $ +
+ {parts.map((p, i) => { + let color = '#ffffff'; + if ( + i === 0 || + p === 'install' || + p === 'update' || + p === 'run' || + p === 'machine' || + p === 'init' || + p === 'start' + ) + color = '#38bdf8'; + else if (p.toLowerCase().includes('podman') || p.includes('RedHat') || p.includes('hello-world')) + color = '#4ade80'; + else if (p.startsWith('-') || p === '&&') color = '#c084fc'; + return ( + + {p}{' '} + + ); + })} +
+
+
+ ); +} + +/* ------------------------------------------------------------------ */ +/* Linux Distro Workspace (Meeting Page Inspired Containers) */ +/* ------------------------------------------------------------------ */ +function LinuxDistroWorkspace({ + distros, + selectedId, + onSelectDistro, +}: { + distros: LinuxDistro[]; + selectedId: string; + onSelectDistro: (id: string) => void; +}) { + const current = distros.find(d => d.id === selectedId) || distros[0]; + + return ( +
+ {/* 1. Header with Badge, Title & All Distros Link */} +
+
+
+ + Linux Package Repositories +
+

+ Choose Your Distribution +

+

+ Podman is officially pre-packaged and maintained across all major Linux distributions. +

+
+ + + + View all distributions + + + +
+ + {/* 2. Distro Selector Grid — Inspo from Meeting SessionCard */} +
+
+ {distros.map(d => { + const isSelected = d.id === current.id; + return ( + + ); + })} +
+
+ + {/* 3. Selected Distro Command Box — Inspo from Meeting Containers */} +
+
+
+
+ + + {current.name} • {current.pkgMgr} + +
+ +
+ +
+ $ + {current.command} +
+ +
+
+ + {current.note} +
+
+ + Official Repository +
+
+
+ + {/* Verification and Next Step — Full Container */} +
+
+
+
+ + Verify Installation +
+ +
+ +
+ $ + + podman --version && podman run --rm hello-world + +
+ +
+
+ + Confirms daemonless engine & rootless runtime +
+ + + Read Getting Started + + + +
+
+
+
+
+ ); +} + +/* ------------------------------------------------------------------ */ +/* Download Button (Sleek, Modern Action Button) */ +/* ------------------------------------------------------------------ */ +function DownloadBtn({ href, title, sub }: { href: string; primary?: boolean; title: string; sub: string }) { + return ( + +
+ +
+
{title}
+
{sub}
+
+
+ + + ); +} + +/* ------------------------------------------------------------------ */ +/* Resource Card — True Bluish-Purple Developer Hub Card */ +/* ------------------------------------------------------------------ */ +interface ResourceCardProps { + badge: string; + badgeColor: string; + icon: string; + iconBg: string; + title: string; + desc: string; + href: string; + cta: string; + tags: string[]; +} + +function ResourceCard({ badge, badgeColor, icon, iconBg, title, desc, href, cta, tags }: ResourceCardProps) { + return ( +
window.open(href, '_blank', 'noopener,noreferrer')} + role="link" + tabIndex={0} + onKeyDown={e => { + if (e.key === 'Enter') window.open(href, '_blank', 'noopener,noreferrer'); + }} + className="group relative flex cursor-pointer flex-col justify-between rounded-2xl border border-black/[0.06] bg-white p-7 text-left shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-black/[0.14] hover:shadow-md dark:border-white/10 dark:bg-[#201f27] dark:hover:border-white/20"> +
+ {/* Top bar: Badge + Icon */} +
+
+ +
+ + {badge} + +
+ + {/* Title */} +

+ {title} +

+ + {/* Description */} +

{desc}

+ + {/* Feature Tags / Topics */} +
+ {tags.map((tag, idx) => ( + + {tag} + + ))} +
+
+ + {/* Footer link */} +
+ + {cta} + +
+ +
+
+
+ ); +} + +/* ------------------------------------------------------------------ */ +/* Page */ +/* ------------------------------------------------------------------ */ +type OS = 'windows' | 'mac' | 'linux'; + +const OS_OPTIONS: { id: OS; label: string; icon: string }[] = [ + { id: 'windows', label: 'Windows', icon: 'fa-brands:windows' }, + { id: 'mac', label: 'macOS', icon: 'fa-brands:apple' }, + { id: 'linux', label: 'Linux', icon: 'fa-brands:linux' }, +]; + +/* ------------------------------------------------------------------ */ +/* Hero CLI Terminal — Interactive, OS-responsive CLI showcase */ +/* ------------------------------------------------------------------ */ +function HeroCliTerminal({ os }: { os: OS }) { + const getCliDetails = () => { + switch (os) { + case 'windows': + return { + installCmd: 'winget install RedHat.Podman', + step1Label: '# 1. Install Podman CLI on Windows', + step1Cmd: 'winget install RedHat.Podman', + step2Label: '# 2. Initialize Podman machine & run rootless', + step2Cmd: 'podman machine init && podman machine start', + step3Cmd: 'podman run -d -p 8080:80 nginx', + output: '✔ Container 4f8b9e2c started (daemonless & rootless)', + }; + case 'mac': + return { + installCmd: 'brew install podman', + step1Label: '# 1. Install Podman CLI on macOS', + step1Cmd: 'brew install podman', + step2Label: '# 2. Initialize Podman machine & run container', + step2Cmd: 'podman machine init && podman machine start', + step3Cmd: 'podman run -d -p 8080:80 nginx', + output: '✔ Container 4f8b9e2c started (daemonless & rootless)', + }; + case 'linux': + default: + return { + installCmd: 'sudo dnf install podman', + step1Label: '# 1. Install Podman CLI natively', + step1Cmd: 'sudo dnf install podman # or apt / pacman', + step2Label: '# 2. Run container without a daemon (rootless)', + step2Cmd: 'podman run -d -p 8080:80 nginx', + step3Cmd: 'podman ps', + output: '4f8b9e2c1a0d nginx:latest Up 2s 0.0.0.0:8080->80/tcp', + }; + } + }; + + const details = getCliDetails(); + + return ( +
+ {/* Ambient glowing border */} +
+ +
+ {/* Terminal Header Bar */} +
+
+
+ + + +
+
+ + podman-cli • {os} +
+
+ + +
+ + {/* Terminal Code Body */} +
+ {/* Step 1 */} +
{details.step1Label}
+
+ $ + {details.step1Cmd} +
+ + {/* Step 2 */} +
+ {details.step2Label} +
+
+ $ + {details.step2Cmd} +
+ + {/* Step 3 */} +
+ $ + {details.step3Cmd} +
+ + {/* Output */} +
+ {details.output} +
+
+ + {/* Terminal Footer Status */} +
+ + + daemonless + • + rootless + + v{LATEST_VERSION} +
+
+
+ ); +} + +export default function DownloadsPage(): JSX.Element { + const [os, setOs] = useState('windows'); + const [distro, setDistro] = useState('fedora'); + + return ( + + {/* ============================================================ + HERO SECTION (Prominent 2-Column Hero: Download Podman CLI + Live Terminal) + ============================================================ */} +
+
+
+ {/* Left Column: Details & OS Switcher */} +
+ {/* Release version badge */} +
+ + + Latest release — v{LATEST_VERSION} + +
+ + {/* Headline */} +

+ Download Podman +

+

+ The daemonless, open-source container engine. Develop, manage, and run OCI containers and pods without a + background daemon and without root privileges. +

+ + {/* OS Selector — clean segmented control matching MeetingTypeSwitcher */} +
+
+ {OS_OPTIONS.map(({ id, label, icon }) => { + const isActive = os === id; + return ( + + ); + })} +
+
+
+ + {/* Right Column: Interactive CLI Terminal Showcase */} +
+ +
+
+
+ + {/* WaveBorder bottom transition to content area — matching background below */} + +
+ + {/* ============================================================ + INSTALL PANEL (Clean, Balanced & Modern Layout) + ============================================================ */} +
+
+ {/* Section Header — Matching Meeting Page Typography & Badges */} +
+
+ + + {os === 'windows' + ? 'Windows Installation' + : os === 'mac' + ? 'macOS Installation' + : 'Linux Package Repositories'} + +
+

+ {os === 'windows' && 'Podman for Windows'} + {os === 'mac' && 'Podman for macOS'} + {os === 'linux' && 'Podman for Linux'} +

+

+ {os === 'windows' && + 'Official standalone MSI installers for 64-bit and ARM64, or silent install via package manager.'} + {os === 'mac' && + 'Universal PKG installer for Apple Silicon and Intel, or one-command setup via Homebrew.'} + {os === 'linux' && + 'Natively available, tested, and maintained across all major Linux distribution repositories.'} +

+
+ + {/* ========================================================== + WINDOWS: 2-Column Balanced Showcase (MSI vs Package Managers) + ========================================================== */} + {os === 'windows' && ( +
+ {/* Card 1: Standalone MSI Installers */} +
+
+
+
+ +
+ + Official Installers + +
+ +

+ Windows MSI Packages +

+

+ Standalone MSI installers with automated WSL 2 integration and background machine setup. +

+ +
+
+ + WSL 2 based container machine engine +
+
+ + Docker CLI compatible alias & compose support +
+
+ + Signed by Red Hat with checksum verification +
+
+
+ +
+ + +
+
+ + {/* Card 2: Package Managers (WinGet & Chocolatey) */} +
+
+
+
+ +
+ + Command Line + +
+ +

Package Managers

+

+ Silent, scriptable installation directly from PowerShell or Windows Terminal. +

+ +
+ + +
+
+ +
+ +
+
+
+ )} + + {/* ========================================================== + MACOS: 2-Column Balanced Showcase (PKG vs Homebrew) + ========================================================== */} + {os === 'mac' && ( +
+ {/* Card 1: Universal PKG Installer */} +
+
+
+
+ +
+ + Recommended + +
+ +

+ Universal PKG Installer +

+

+ Single graphical installer package (.pkg) optimized for both Apple Silicon (M1/M2/M3/M4) and Intel + 64-bit Macs. +

+ +
+
+ + Universal Binary (Apple Silicon & Intel x86_64) +
+
+ + Includes Podman CLI, machine helpers & man pages +
+
+ + Cryptographically signed by Red Hat +
+
+
+ +
+ +
+
+ + {/* Card 2: Homebrew Package Manager */} +
+
+
+
+ +
+ + Package Manager + +
+ +

+ Install via Homebrew +

+

+ Quick CLI setup using macOS's standard developer package manager. Handles updates automatically. +

+ +
+ +
+
+ +
+ +
+
+
+ )} + + {/* ========================================================== + LINUX: Clean Distro Showcase Card (Meeting Page Consistent) + ========================================================== */} + {os === 'linux' && ( + + )} +
+
+ + {/* ============================================================ + PODMAN DESKTOP (Secondary GUI Callout Banner) + ============================================================ */} +
+
+
+ {/* Ambient subtle glow */} +
+
+ +
+ {/* Left Side: Info */} +
+
+ + Podman Desktop • v{LATEST_DESKTOP_VERSION} +
+ +

+ Prefer a Graphical Interface? +

+ +

+ Podman Desktop provides a rich, intuitive GUI to manage containers, inspect logs, build images, and + work with Kubernetes effortlessly — all daemonless and local. +

+ + {/* Feature checklist chips */} +
+ + + One-click container engine + + + + Kubernetes & Kind ready + + + + 100% Free & Open Source + +
+
+ + {/* Right Side: CTA Action Buttons */} + +
+
+
+
+ + {/* ============================================================ + RELEASES & RESOURCES (True Bluish-Purple Developer Hub Cards) + ============================================================ */} +
+
+
+
+ + Developer Hub +
+

+ Releases & Resources +

+

+ Explore official release archives, configuration guides, and in-depth documentation. +

+
+ +
+ + + +
+
+
+ + ); +}