mirror of
https://github.com/zen-browser/www
synced 2026-04-25 17:14:56 +02:00
Revert "feat(i18n): implement internationalization support and refactor components for localization"
This commit is contained in:
mr. m
@@ -1,237 +0,0 @@
|
||||
---
|
||||
import Description from '~/components/Description.astro'
|
||||
import Layout from '~/layouts/Layout.astro'
|
||||
import { getReleasesWithChecksums } from '~/components/download/release-data.astro'
|
||||
import PlatformDownload from '~/components/download/PlatformDownload.astro'
|
||||
import DownloadScript from '~/components/download/DownloadScript.astro'
|
||||
import { getChecksums } from '~/utils/githubChecksums'
|
||||
import { getLocale, getUI } from '~/utils/i18n'
|
||||
|
||||
import { library, icon } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faWindows,
|
||||
faLinux,
|
||||
faApple,
|
||||
faGithub,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
import { Lock, ExternalLink } from 'lucide-astro'
|
||||
|
||||
export { getStaticPaths } from '~/utils/i18n'
|
||||
|
||||
const locale = getLocale(Astro)
|
||||
const {
|
||||
routes: { download },
|
||||
layout,
|
||||
} = getUI(locale)
|
||||
|
||||
library.add(faWindows, faLinux, faApple, faGithub)
|
||||
const windowsIcon = icon({ prefix: 'fab', iconName: 'windows' })
|
||||
const linuxIcon = icon({ prefix: 'fab', iconName: 'linux' })
|
||||
const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
|
||||
const githubIcon = icon({ prefix: 'fab', iconName: 'github' })
|
||||
|
||||
const checksums = await getChecksums()
|
||||
const releases = getReleasesWithChecksums(checksums)
|
||||
|
||||
const platformNames = download.platformNames
|
||||
const platformDescriptions = download.platformDescriptions
|
||||
---
|
||||
|
||||
<DownloadScript />
|
||||
|
||||
<Layout title={layout.download.title} description={layout.download.description}>
|
||||
<main class="flex min-h-screen flex-col px-6 data-[os='windows']:bg-zen-blue">
|
||||
<div class="container relative mx-auto max-w-5xl py-12">
|
||||
<div class="mb-6 mt-12 flex flex-col gap-4">
|
||||
<Description id="download-title" class="text-6xl font-bold"
|
||||
>{download.title}</Description
|
||||
>
|
||||
<Description class="max-w-xl text-pretty">
|
||||
{download.description}
|
||||
</Description>
|
||||
<div
|
||||
id="twilight-info"
|
||||
class="hidden max-w-xl items-center justify-center gap-3 text-pretty rounded-xl border border-zen-blue/20 bg-zen-blue/5 p-4 text-left data-[twilight='true']:flex"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mt-0.5 h-5 w-5 flex-shrink-0 text-zen-blue"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
<Description set:html={download.alertInfo.description} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform selector -->
|
||||
<div class="mb-6 flex">
|
||||
<div
|
||||
class="inline-flex rounded-3xl bg-[rgba(255,255,255,0.4)] p-2 shadow-md dark:bg-[rgba(0,0,0,0.3)] dark:shadow-sm"
|
||||
>
|
||||
<button
|
||||
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
||||
data-platform="mac"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<Fragment set:html={appleIcon.html} />
|
||||
<span>{platformNames.mac}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
||||
data-platform="windows"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<Fragment set:html={windowsIcon.html} />
|
||||
<span>{platformNames.windows}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="platform-selector rounded-2xl px-5 py-2.5 transition-all duration-200 data-[active='true']:bg-subtle"
|
||||
data-platform="linux"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<Fragment set:html={linuxIcon.html} />
|
||||
<span>{platformNames.linux}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Cards -->
|
||||
<div
|
||||
class="relative mb-16 overflow-hidden rounded-3xl bg-[rgba(255,255,255,0.4)] p-8 shadow-xl md:p-10 dark:bg-[rgba(0,0,0,0.3)]"
|
||||
>
|
||||
<!-- MacOS Download -->
|
||||
<PlatformDownload
|
||||
platform="mac"
|
||||
icon={appleIcon.html}
|
||||
title={platformNames.macDownload}
|
||||
description={platformDescriptions.mac}
|
||||
releases={releases.macos}
|
||||
/>
|
||||
<!-- Windows Download -->
|
||||
<PlatformDownload
|
||||
platform="windows"
|
||||
icon={windowsIcon.html}
|
||||
title={platformNames.windowsDownload}
|
||||
description={platformDescriptions.windows}
|
||||
releases={releases.windows}
|
||||
/>
|
||||
|
||||
<!-- Linux Download -->
|
||||
<PlatformDownload
|
||||
platform="linux"
|
||||
icon={linuxIcon.html}
|
||||
title={platformNames.linuxDownload}
|
||||
description={platformDescriptions.linux}
|
||||
releases={releases.linux}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Additional resources -->
|
||||
<section class="mb-16">
|
||||
<h2 class="mb-4 text-3xl font-semibold">
|
||||
{download.additionalResources.title}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<a
|
||||
href="https://github.com/zen-browser"
|
||||
class="group rounded-2xl bg-[rgba(255,255,255,0.4)] p-6 transition-all duration-300 hover:shadow-lg dark:bg-[rgba(0,0,0,0.3)]"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="mb-2 text-xl font-medium">
|
||||
{download.additionalResources.sourceCode.title}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{download.additionalResources.sourceCode.description}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="grid aspect-square h-12 w-12 place-items-center rounded-xl border border-subtle transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-10"
|
||||
>
|
||||
<div
|
||||
class="text-muted-foreground transition-all duration-200 group-hover:text-coral"
|
||||
>
|
||||
<Fragment set:html={githubIcon.html} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://docs.zen-browser.app"
|
||||
class="group rounded-2xl bg-[rgba(255,255,255,0.4)] p-6 transition-all duration-200 hover:shadow-lg dark:bg-[rgba(0,0,0,0.3)]"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="mb-2 text-xl font-medium">
|
||||
{download.additionalResources.documentation.title}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{download.additionalResources.documentation.description}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="rounded-xl border border-subtle p-3 transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-20"
|
||||
>
|
||||
<ExternalLink
|
||||
class="h-5 w-5 transition-all duration-200 group-hover:text-coral"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security Notice -->
|
||||
<div
|
||||
class="bg-opaicty-10 grid grid-cols-[auto,1fr] gap-4 rounded-2xl bg-subtle p-6"
|
||||
>
|
||||
<div class="h-fit rounded-xl bg-subtle p-3">
|
||||
<Lock class="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="mb-2 text-lg font-medium">
|
||||
{download.securityNotice.title}
|
||||
</h3>
|
||||
<p
|
||||
class="text-muted-foreground"
|
||||
set:html={download.securityNotice.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
/* Download card icon */
|
||||
.download-card__icon {
|
||||
@apply flex h-10 w-10 items-center justify-center rounded-full bg-subtle p-2 text-coral data-[twilight='true']:text-zen-blue;
|
||||
}
|
||||
|
||||
/* Make FontAwesome icons match size */
|
||||
.download-card__icon svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is:global>
|
||||
.os-icon svg {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user