www/src/pages/[...locale]/whatsnew.astro
2025-05-28 13:43:44 +12:00

83 lines
2.6 KiB
Text

---
import Button from "~/components/Button.astro"
import Description from "~/components/Description.astro"
import SocialMediaStrip from "~/components/SocialMediaStrip.astro"
import ArrowRightIcon from "~/icons/ArrowRightIcon.astro"
import Layout from "~/layouts/Layout.astro"
import whatsNewVideo from "~/assets/whats-new.mp4"
import Video from "~/components/Video.astro"
import { releaseNotes } from "~/release-notes"
import whatsNewText from "~/release-notes/whats-new.json"
import { getLocale, getUI } from "~/utils/i18n"
export { getStaticPaths } from "~/utils/i18n"
const latestVersion = releaseNotes[0]
const locale = getLocale(Astro)
const {
routes: { whatsNew },
layout,
} = getUI(locale)
// Just redirect to the release notes if we are in a patch version
if (latestVersion.version.split(".").length > 2 && whatsNewText[1] !== latestVersion.version) {
return Astro.redirect(`/release-notes#${latestVersion.version}`)
}
---
<Layout title={layout.whatsNew.title.replace("{latestVersion.version}", latestVersion.version)}>
<main
class="xl:mt-22 container flex flex-col gap-12 py-12 xl:grid xl:min-h-[calc(100vh-12rem)] xl:grid-cols-[2fr_3fr]"
>
<div class="flex flex-col gap-8">
<div>
<Description class="text-5xl font-bold md:text-6xl"
>{whatsNew.title.replace("{latestVersion.version}", latestVersion.version)}</Description
>
<Description>{latestVersion.date}</Description>
</div>
<div>
<Fragment set:html={whatsNewText[0].replace(/\n/g, "<br>")} />
</div>
<ul class="hidden list-disc flex-col gap-2 xl:container xl:flex">
<a href="https://github.com/zen-browser/desktop/issues/new/choose" target="_blank">
<li>
<Description class="text-base font-bold">
{whatsNew.reportIssue}
</Description>
</li>
</a>
<a href="https://discord.gg/zen-browser" target="_blank">
<li>
<Description class="text-base font-bold">
{whatsNew.joinDiscord}
</Description>
</li>
</a>
</ul>
<div class="flex flex-wrap gap-8 place-self-start xl:place-self-center">
<Button
href={`/release-notes#${latestVersion.version}`}
isPrimary
class="flex w-fit items-center gap-2"
>
<span>{whatsNew.readFullReleaseNotes}</span>
<ArrowRightIcon />
</Button>
<SocialMediaStrip gap="6" />
</div>
</div>
<Video
src={whatsNewVideo}
autoplay
loop
muted
playsinline
preload="none"
class="rounded-3xl object-cover shadow-lg"
/>
</main>
</Layout>