www/src/components/download/PlatformDownload.astro
taroj1205 6a7bd311c0
feat(download): enhance download page with checksum integration and platform-specific releases
- Added a new `release-data.ts` file to manage release information with dynamic checksums.
- Introduced `CHECKSUMS` constant for easy access to file checksums.
- Updated `PlatformDownload.astro` to support additional release types and improved type safety.
- Enhanced the download page to correctly display platform-specific download links and checksums.
- Refactored tests to validate the new download functionality and checksum integration.
2025-05-16 12:30:14 +12:00

207 lines
7.1 KiB
Text

---
interface ReleaseInfo {
label?: string
link: string
checksum?: string
}
interface PlatformReleases {
universal?: ReleaseInfo
all?: ReleaseInfo
tarball?: ReleaseInfo
x86_64?:
| {
tarball?: ReleaseInfo
appImage?: ReleaseInfo
}
| ReleaseInfo
aarch64?: {
tarball?: ReleaseInfo
appImage?: ReleaseInfo
}
arm64?: ReleaseInfo
flathub?: { all: ReleaseInfo }
}
interface Props {
platform: 'mac' | 'windows' | 'linux'
icon: string[]
title: string
description: string
releases: PlatformReleases
}
const { platform, icon, title, description, releases } = Astro.props
import { Image } from 'astro:assets'
import AppIconDark from '../../assets/app-icon-dark.png'
import AppIconLight from '../../assets/app-icon-light.png'
import DownloadCard from './ButtonCard.astro'
function isFlatReleaseInfo(obj: unknown): obj is ReleaseInfo {
return !!obj && typeof obj === 'object' && 'link' in obj
}
---
<div
id={`${platform}-downloads`}
data-active={platform === "mac"}
class="platform-section data-[active='false']:hidden"
>
<div class="items-center gap-8 md:flex">
<div class="mb-8 md:mb-0 md:w-2/3">
<div class="mb-4 flex items-center gap-3">
<div class="download-card__icon">
<Fragment set:html={icon} />
</div>
<h3 class="text-2xl font-medium">{title}</h3>
</div>
<p class="text-muted-foreground mb-6" set:html={description} />
<div class="space-y-6">
{
platform === "linux" ? (
<>
{releases.flathub && releases.flathub.all.label && (
<div>
<h4 class="mb-3 text-lg font-medium">Package Managers</h4>
<div class="space-y-3">
<DownloadCard
label={releases.flathub.all.label}
href={releases.flathub.all.link}
variant="flathub"
/>
</div>
</div>
)}
{releases.x86_64 &&
typeof releases.x86_64 === "object" &&
"tarball" in releases.x86_64 &&
(releases.x86_64.tarball || releases.x86_64.appImage) && (
<div>
<h4 class="mb-3 text-lg font-medium">x86_64</h4>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
{releases.x86_64.tarball && (
<DownloadCard
label={
releases.x86_64.tarball.label
? releases.x86_64.tarball.label
: ""
}
href={
releases.x86_64.tarball.link
? releases.x86_64.tarball.link
: ""
}
variant="x86_64"
checksum={releases.x86_64.tarball.checksum}
/>
)}
{releases.x86_64.appImage && (
<DownloadCard
label={
releases.x86_64.appImage.label
? releases.x86_64.appImage.label
: ""
}
href={
releases.x86_64.appImage.link
? releases.x86_64.appImage.link
: ""
}
variant="x86_64"
checksum={releases.x86_64.appImage.checksum}
/>
)}
</div>
</div>
)}
{releases.aarch64 &&
typeof releases.aarch64 === "object" &&
"tarball" in releases.aarch64 &&
(releases.aarch64.tarball || releases.aarch64.appImage) && (
<div>
<h4 class="mb-3 text-lg font-medium">ARM64</h4>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
{releases.aarch64.tarball && (
<DownloadCard
label={
releases.aarch64.tarball.label
? releases.aarch64.tarball.label
: ""
}
href={
releases.aarch64.tarball.link
? releases.aarch64.tarball.link
: ""
}
variant="aarch64"
checksum={releases.aarch64.tarball.checksum}
/>
)}
{releases.aarch64.appImage && (
<DownloadCard
label={
releases.aarch64.appImage.label
? releases.aarch64.appImage.label
: ""
}
href={
releases.aarch64.appImage.link
? releases.aarch64.appImage.link
: ""
}
variant="aarch64"
checksum={releases.aarch64.appImage.checksum}
/>
)}
</div>
</div>
)}
</>
) : (
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-3">
{releases.universal && releases.universal.label && (
<DownloadCard
label={releases.universal.label}
href={releases.universal.link}
checksum={releases.universal.checksum}
/>
)}
{releases.x86_64 &&
isFlatReleaseInfo(releases.x86_64) &&
releases.x86_64.label && (
<DownloadCard
label={releases.x86_64.label}
href={releases.x86_64.link}
checksum={releases.x86_64.checksum}
/>
)}
{releases.arm64 && releases.arm64.label && (
<DownloadCard
label={releases.arm64.label}
href={releases.arm64.link}
checksum={releases.arm64.checksum}
/>
)}
</div>
</div>
)
}
</div>
</div>
<div
class="download-browser-logo flex justify-center text-coral transition-colors data-[twilight='true']:text-zen-blue md:w-1/3"
>
<Image
src={AppIconDark}
alt="Zen Browser"
class="w-32 translate-y-6 transform dark:hidden"
/>
<Image
src={AppIconLight}
alt="Zen Browser"
class="hidden w-32 translate-y-6 transform dark:block"
/>
</div>
</div>
</div>