ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 01:10:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(biome): update biome rules

Browse source
This commit is contained in:
Shintaro Jokagi 2025-05-15 14:19:39 +12:00
parent 78627c7749
commit 017cb2a7f5
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
45 changed files with 589 additions and 596 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.prettierrc.mjs
View file

@ -1,9 +0,0 @@
/** @type {import('prettier').Config} */
export default {
printWidth: 80,
tabWidth: 2,
semi: false,
singleQuote: true,
endOfLine: 'lf',
plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
}

6
biome.json
View file

@ -21,5 +21,11 @@
".git",
"dist"
]
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded"
}
}
}

8
src/animations.ts
View file

@ -1,19 +1,19 @@
export function getTitleAnimation(delay = 0, duration = 0.3, once = true) {
return {
initial: { opacity: 0.001, translateY: 20, filter: "blur(4px)" },
initial: { opacity: 0.001, translateY: 20, filter: 'blur(4px)' },
whileInView: {
opacity: 1,
translateY: 0,
filter: "blur(0px)",
filter: 'blur(0px)',
transition: { duration, delay },
},
viewport: { once: once },
};
}
}
export function getZoomInAnimation(delay = 0) {
return {
initial: { scale: 0.8, opacity: 0.001 },
whileInView: { scale: 1, opacity: 1, transition: { duration: 0.2, delay } },
};
}
}

8
src/components/BackButton.astro
View file

@ -1,14 +1,14 @@
---
import { ArrowLeft } from "lucide-astro";
import { getLocale, getUI } from "~/utils/i18n";
import { ArrowLeft } from 'lucide-astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: {
mods: { slug },
},
} = getUI(locale);
} = getUI(locale)
---
<button

8
src/components/Button.astro
View file

@ -1,9 +1,9 @@
---
import { getLocale, getPath } from "~/utils/i18n";
import { getLocale, getPath } from '~/utils/i18n'
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = Astro.props;
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const { class: className, isPrimary, isAlert, isBordered, href, id, extra } = Astro.props
---
{

6
src/components/Circles.astro
View file

@ -1,7 +1,7 @@
---
const { white, multiplier = 0.9, class: classList } = Astro.props;
const sizes = [216, 396, 576, 756];
const borderWidths = [20, 30, 40, 50];
const { white, multiplier = 0.9, class: classList } = Astro.props
const sizes = [216, 396, 576, 756]
const borderWidths = [20, 30, 40, 50]
---
<div

20
src/components/Community.astro
View file

@ -1,20 +1,20 @@
---
import Image from "astro/components/Image.astro";
import { Check, Github } from "lucide-astro";
import { motion } from "motion/react";
import { getTitleAnimation } from "~/animations";
import ComImage from "~/assets/ComImage.png";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import { getLocale, getUI } from "~/utils/i18n";
import Image from 'astro/components/Image.astro'
import { Check, Github } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import ComImage from '~/assets/ComImage.png'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: {
index: { community },
},
} = getUI(locale);
} = getUI(locale)
---
<section

30
src/components/Features.astro
View file

@ -1,31 +1,27 @@
---
import { motion } from "motion/react";
import { getTitleAnimation } from "~/animations";
import Description from "~/components/Description.astro";
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import Description from '~/components/Description.astro'
import CompactModeVideo from "~/assets/CompactMode.webm";
import GlanceVideo from "~/assets/Glance.webm";
import SplitViewsVideo from "~/assets/SplitViews.webm";
import WorkspacesVideo from "~/assets/Workspaces.webm";
import CompactModeVideo from '~/assets/CompactMode.webm'
import GlanceVideo from '~/assets/Glance.webm'
import SplitViewsVideo from '~/assets/SplitViews.webm'
import WorkspacesVideo from '~/assets/Workspaces.webm'
import { getLocale, getUI } from "~/utils/i18n";
import Video from "./Video.astro";
import { getLocale, getUI } from '~/utils/i18n'
import Video from './Video.astro'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: {
index: { features },
},
} = getUI(locale);
} = getUI(locale)
const {
title1 = features.title1,
title2 = features.title2,
title3 = features.title3,
} = Astro.props;
const { title1 = features.title1, title2 = features.title2, title3 = features.title3 } = Astro.props
const descriptions = Object.values(features.featureTabs).map((tab) => tab.description);
const descriptions = Object.values(features.featureTabs).map((tab) => tab.description)
---
<section

18
src/components/Footer.astro
View file

@ -1,16 +1,16 @@
---
import { ArrowRight } from "lucide-astro";
import Button from "~/components/Button.astro";
import Circles from "~/components/Circles.astro";
import Description from "~/components/Description.astro";
import SocialMediaStrip from "~/components/SocialMediaStrip.astro";
import { getLocale, getPath, getUI } from "~/utils/i18n";
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Circles from '~/components/Circles.astro'
import Description from '~/components/Description.astro'
import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
components: { footer },
} = getUI(locale);
} = getUI(locale)
---
<footer

34
src/components/Hero.astro
View file

@ -1,34 +1,34 @@
---
import { ArrowRight } from "lucide-astro";
import { motion } from "motion/react";
import { getTitleAnimation } from "~/animations";
import HomePageVideo from "~/assets/HomePageVideo.webm";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import Title from "~/components/Title.astro";
import { getLocale, getPath, getUI } from "~/utils/i18n";
import SocialMediaStrip from "./SocialMediaStrip.astro";
import Video from "./Video.astro";
import { ArrowRight } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import HomePageVideo from '~/assets/HomePageVideo.webm'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Title from '~/components/Title.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import SocialMediaStrip from './SocialMediaStrip.astro'
import Video from './Video.astro'
let titleAnimationCounter = 0;
let titleAnimationCounter = 0
function getNewAnimationDelay() {
titleAnimationCounter++;
return titleAnimationCounter * 0.15;
titleAnimationCounter++
return titleAnimationCounter * 0.15
}
function getHeroTitleAnimation() {
return getTitleAnimation(getNewAnimationDelay());
return getTitleAnimation(getNewAnimationDelay())
}
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale);
const getLocalePath = getPath(locale)
const {
routes: {
index: { hero },
},
} = getUI(locale);
} = getUI(locale)
---
<header

2
src/components/Logo.astro
View file

@ -1,5 +1,5 @@
---
const { class: className } = Astro.props;
const { class: className } = Astro.props
---
<svg

8
src/components/MobileMenu.astro
View file

@ -1,13 +1,13 @@
---
import { getLocale, getPath, getUI } from "~/utils/i18n";
import { getLocale, getPath, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
components: {
nav: { menu },
},
} = getUI(locale);
} = getUI(locale)
---
<!-- Hidden checkbox for menu toggle -->

90
src/components/ModsList.tsx
View file

@ -1,21 +1,21 @@
import { icon, library } from "@fortawesome/fontawesome-svg-core";
import { faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "preact/hooks";
import { useModsSearch } from "~/hooks/useModsSearch";
import type { ZenTheme } from "~/mods";
import { type Locale, getUI } from "~/utils/i18n";
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
import { useEffect, useState } from 'preact/hooks'
import { useModsSearch } from '~/hooks/useModsSearch'
import type { ZenTheme } from '~/mods'
import { type Locale, getUI } from '~/utils/i18n'
// Add icons to the library
library.add(faSort, faSortUp, faSortDown);
library.add(faSort, faSortUp, faSortDown)
// Create icon objects
const defaultSortIcon = icon({ prefix: "fas", iconName: "sort" });
const ascSortIcon = icon({ prefix: "fas", iconName: "sort-up" });
const descSortIcon = icon({ prefix: "fas", iconName: "sort-down" });
const defaultSortIcon = icon({ prefix: 'fas', iconName: 'sort' })
const ascSortIcon = icon({ prefix: 'fas', iconName: 'sort-up' })
const descSortIcon = icon({ prefix: 'fas', iconName: 'sort-down' })
interface ModsListProps {
allMods: ZenTheme[];
locale: Locale;
allMods: ZenTheme[]
locale: Locale
}
export default function ModsList({ allMods, locale }: ModsListProps) {
@ -34,71 +34,71 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
setLimit,
mods: paginatedMods,
// searchParams,
} = useModsSearch(allMods);
} = useModsSearch(allMods)
const [pageInput, setPageInput] = useState(page.toString());
const [pageInput, setPageInput] = useState(page.toString())
// Keep page input in sync with actual page
useEffect(() => {
setPageInput(page.toString());
}, [page]);
setPageInput(page.toString())
}, [page])
function getSortIcon(state: "default" | "asc" | "desc") {
if (state === "asc") return ascSortIcon;
if (state === "desc") return descSortIcon;
return defaultSortIcon;
function getSortIcon(state: 'default' | 'asc' | 'desc') {
if (state === 'asc') return ascSortIcon
if (state === 'desc') return descSortIcon
return defaultSortIcon
}
function handleSearch(e: Event) {
const target = e.target as HTMLInputElement;
setSearch(target.value);
const target = e.target as HTMLInputElement
setSearch(target.value)
}
function handleLimitChange(e: Event) {
const target = e.target as HTMLSelectElement;
setLimit(Number.parseInt(target.value, 10));
const target = e.target as HTMLSelectElement
setLimit(Number.parseInt(target.value, 10))
}
function handlePageSubmit(e: Event) {
e.preventDefault();
const newPage = Number.parseInt(pageInput, 10);
e.preventDefault()
const newPage = Number.parseInt(pageInput, 10)
if (!Number.isNaN(newPage) && newPage >= 1 && newPage <= totalPages) {
setPage(newPage);
window.scrollTo(0, 0);
setPage(newPage)
window.scrollTo(0, 0)
} else {
setPageInput(page.toString());
setPageInput(page.toString())
}
}
function handlePageInputChange(e: Event) {
const target = e.target as HTMLInputElement;
setPageInput(target.value);
const target = e.target as HTMLInputElement
setPageInput(target.value)
}
function navigatePage(pageNum: number) {
setPage(pageNum);
window.scrollTo(0, 0);
setPage(pageNum)
window.scrollTo(0, 0)
}
const {
routes: { mods },
} = getUI(locale);
} = getUI(locale)
function renderPagination() {
if (totalPages <= 1) return null;
if (totalPages <= 1) return null
return (
<div className="mx-auto mb-12 flex items-center justify-center gap-4 px-8">
<button
type="button"
onClick={() => navigatePage(page - 1)}
className={`px-3 py-2 ${
page === 1 ? "pointer-events-none text-gray-400" : "text-dark hover:text-gray-600"
page === 1 ? 'pointer-events-none text-gray-400' : 'text-dark hover:text-gray-600'
}`}
>
&lt;
</button>
<form onSubmit={handlePageSubmit} className="flex items-center gap-2">
{mods.pagination.pagination.split("{input}").map((value, index) => {
{mods.pagination.pagination.split('{input}').map((value, index) => {
if (index === 0) {
return (
<input
@ -108,15 +108,15 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
className="w-16 rounded border border-dark bg-transparent px-2 py-1 text-center text-sm"
aria-label="Page number"
/>
);
)
}
return (
<span key={value} className="text-sm">
{value
.replace("{totalPages}", totalPages.toString())
.replace("{totalItems}", totalItems.toString())}
.replace('{totalPages}', totalPages.toString())
.replace('{totalItems}', totalItems.toString())}
</span>
);
)
})}
</form>
<button
@ -124,14 +124,14 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
onClick={() => navigatePage(page + 1)}
className={`px-3 py-2 ${
page === totalPages
? "pointer-events-none text-gray-400"
: "text-dark hover:text-gray-600"
? 'pointer-events-none text-gray-400'
: 'text-dark hover:text-gray-600'
}`}
>
&gt;
</button>
</div>
);
)
}
return (
@ -234,5 +234,5 @@ export default function ModsList({ allMods, locale }: ModsListProps) {
{renderPagination()}
</div>
);
)
}

24
src/components/NavBar.astro
View file

@ -1,21 +1,21 @@
---
import { Astronav, Dropdown, DropdownItems, MenuItems } from "astro-navbar";
import { ArrowRight, ChevronDown, Download, Menu } from "lucide-astro";
import { motion } from "motion/react";
import Button from "~/components/Button.astro";
import { getLocale, getPath, getUI } from "~/utils/i18n";
import { getTitleAnimation } from "../animations.ts";
import Logo from "./Logo.astro";
import MobileMenu from "./MobileMenu.astro";
import ThemeSwitch from "./ThemeSwitch.astro";
import { Astronav, Dropdown, DropdownItems, MenuItems } from 'astro-navbar'
import { ArrowRight, ChevronDown, Download, Menu } from 'lucide-astro'
import { motion } from 'motion/react'
import Button from '~/components/Button.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import { getTitleAnimation } from '../animations.ts'
import Logo from './Logo.astro'
import MobileMenu from './MobileMenu.astro'
import ThemeSwitch from './ThemeSwitch.astro'
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
components: {
nav: { brand, menu },
},
} = getUI(locale);
} = getUI(locale)
---
<!-- Desktop Navigation -->

36
src/components/ReleaseNoteItem.astro
View file

@ -1,41 +1,41 @@
---
import { Accordion, AccordionItem } from "free-astro-components";
import { Info } from "lucide-astro";
import { Accordion, AccordionItem } from 'free-astro-components'
import { Info } from 'lucide-astro'
import { releaseNotes as releaseNotesData } from "~/release-notes";
import { getLocale, getPath, getUI } from "~/utils/i18n";
import { releaseNotes as releaseNotesData } from '~/release-notes'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import {
type BreakingChange,
type ReleaseNote,
getReleaseNoteFirefoxVersion,
} from "../release-notes";
export type Props = ReleaseNote;
const { isTwilight, ...props } = Astro.props;
} from '../release-notes'
export type Props = ReleaseNote
const { isTwilight, ...props } = Astro.props
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
routes: {
releaseNotes: {
components: { releaseNoteItem },
},
},
} = getUI(locale);
} = getUI(locale)
let date: Date | undefined;
let date: Date | undefined
if (props.date) {
const [day, month, year] = props.date.split("/");
date = new Date(Date.parse(`${year}-${month}-${day}`));
const [day, month, year] = props.date.split('/')
date = new Date(Date.parse(`${year}-${month}-${day}`))
}
const ffVersion = getReleaseNoteFirefoxVersion(props);
const ffVersion = getReleaseNoteFirefoxVersion(props)
const currentReleaseIndex = releaseNotesData.findIndex(
(releaseNote: ReleaseNote) => releaseNote.version === props.version,
);
const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1];
let compareLink = "";
)
const prevReleaseNote = releaseNotesData[currentReleaseIndex + 1]
let compareLink = ''
if (prevReleaseNote && !isTwilight) {
compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`;
compareLink = `https://github.com/zen-browser/desktop/compare/${prevReleaseNote.version}...${props.version}`
}
---

18
src/components/SocialMediaStrip.astro
View file

@ -1,21 +1,21 @@
---
const { gap = 4 } = Astro.props;
const { gap = 4 } = Astro.props
import { icon, library } from "@fortawesome/fontawesome-svg-core";
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import {
faBluesky,
faGithub,
faMastodon,
faReddit,
faXTwitter,
} from "@fortawesome/free-brands-svg-icons";
} from '@fortawesome/free-brands-svg-icons'
library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit);
const Mastodon = icon({ prefix: "fab", iconName: "mastodon" });
const Bluesky = icon({ prefix: "fab", iconName: "bluesky" });
const Github = icon({ prefix: "fab", iconName: "github" });
const XTwitter = icon({ prefix: "fab", iconName: "x-twitter" });
const Reddit = icon({ prefix: "fab", iconName: "reddit" });
library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
const Github = icon({ prefix: 'fab', iconName: 'github' })
const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
---
<ul class={`flex items-center opacity-80 gap-${gap}`}>

18
src/components/Sponsors.astro
View file

@ -1,21 +1,21 @@
---
import { motion } from "motion/react";
import { getTitleAnimation } from "~/animations";
import Description from "~/components/Description.astro";
import { getLocale, getUI } from "~/utils/i18n";
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import Description from '~/components/Description.astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
import tutaLogo from "~/assets/tuta-logo.png";
import tutaLogo from '~/assets/tuta-logo.png'
import Image from "astro/components/Image.astro";
const { showSponsors = true } = Astro.props;
import Image from 'astro/components/Image.astro'
const { showSponsors = true } = Astro.props
const {
routes: {
index: { sponsors },
},
} = getUI(locale);
} = getUI(locale)
---
<section id="sponsors" class:list={['mb-32 px-4', !showSponsors && 'hidden']}>

6
src/components/ThemeSwitch.astro
View file

@ -1,10 +1,10 @@
---
interface Props {
label?: string;
className?: string;
label?: string
className?: string
}
const { label, className = "" } = Astro.props;
const { label, className = '' } = Astro.props
---
<button

2
src/components/Title.astro
View file

@ -1,5 +1,5 @@
---
const { class: className } = Astro.props;
const { class: className } = Astro.props
---
<h1 class:list={['title text-dark', className]}>

4
src/components/Video.astro
View file

@ -1,6 +1,6 @@
---
const { src, class: className, ...rest } = Astro.props;
const type = src.split(".").pop() || "webm";
const { src, class: className, ...rest } = Astro.props
const type = src.split('.').pop() || 'webm'
---
<video

10
src/components/download/ButtonCard.astro
View file

@ -1,12 +1,12 @@
---
interface Props {
label: string;
href: string;
variant?: string;
checksum?: string;
label: string
href: string
variant?: string
checksum?: string
}
const { label, href, checksum } = Astro.props;
const { label, href, checksum } = Astro.props
---
<div class="relative flex flex-col">

38
src/components/download/PlatformDownload.astro
View file

@ -1,32 +1,32 @@
---
interface ReleaseInfo {
label?: string;
link: string;
checksum?: string;
label?: string
link: string
checksum?: string
}
interface PlatformReleases {
universal?: ReleaseInfo;
all?: ReleaseInfo;
tarball?: ReleaseInfo;
x86_64?: { tarball: ReleaseInfo } | ReleaseInfo;
arm64?: ReleaseInfo;
flathub?: { all: ReleaseInfo };
universal?: ReleaseInfo
all?: ReleaseInfo
tarball?: ReleaseInfo
x86_64?: { tarball: ReleaseInfo } | ReleaseInfo
arm64?: ReleaseInfo
flathub?: { all: ReleaseInfo }
}
interface Props {
platform: "mac" | "windows" | "linux";
icon: string[];
title: string;
description: string;
releases: PlatformReleases;
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";
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'
---
<div

48
src/components/download/release-data.astro
View file

@ -7,55 +7,55 @@ export function getReleasesWithChecksums(checksums: Record<string, string>) {
return {
macos: {
universal: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-universal.dmg",
label: "Universal",
checksum: checksums["zen.macos-universal.dmg"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.macos-universal.dmg',
label: 'Universal',
checksum: checksums['zen.macos-universal.dmg'],
},
},
windows: {
x86_64: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe",
label: "64-bit (Recommended)",
checksum: checksums["zen.installer.exe"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer.exe',
label: '64-bit (Recommended)',
checksum: checksums['zen.installer.exe'],
},
arm64: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe",
label: "ARM64",
checksum: checksums["zen.installer-arm64.exe"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.installer-arm64.exe',
label: 'ARM64',
checksum: checksums['zen.installer-arm64.exe'],
},
},
linux: {
x86_64: {
tarball: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.xz",
label: "Tarball x86_64",
checksum: checksums["zen.linux-x86_64.tar.xz"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-x86_64.tar.xz',
label: 'Tarball x86_64',
checksum: checksums['zen.linux-x86_64.tar.xz'],
},
appImage: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.AppImage",
label: "AppImage x86_64",
checksum: checksums["zen-x86_64.AppImage"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-x86_64.AppImage',
label: 'AppImage x86_64',
checksum: checksums['zen-x86_64.AppImage'],
},
},
aarch64: {
tarball: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.xz",
label: "Tarball aarch64",
checksum: checksums["zen.linux-aarch64.tar.xz"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen.linux-aarch64.tar.xz',
label: 'Tarball aarch64',
checksum: checksums['zen.linux-aarch64.tar.xz'],
},
appImage: {
link: "https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage",
label: "AppImage aarch64",
checksum: checksums["zen-aarch64.AppImage"],
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage',
label: 'AppImage aarch64',
checksum: checksums['zen-aarch64.AppImage'],
},
},
flathub: {
all: {
link: "https://flathub.org/apps/app.zen_browser.zen",
label: "Flathub",
link: 'https://flathub.org/apps/app.zen_browser.zen',
label: 'Flathub',
},
},
},
};
}
}
---

6
src/constants/i18n.ts
View file

@ -1,4 +1,4 @@
export const I18N = {
DEFAULT_LOCALE: "en",
LOCALES: [{ label: "English", value: "en" }],
} as const;
DEFAULT_LOCALE: 'en',
LOCALES: [{ label: 'English', value: 'en' }],
} as const

4
src/constants/index.ts
View file

@ -1,5 +1,5 @@
import { I18N } from "./i18n";
import { I18N } from './i18n'
export const CONSTANT = {
I18N,
};
}

142
src/hooks/useModsSearch.ts
View file

@ -1,91 +1,91 @@
import { useEffect, useState } from "preact/hooks";
import type { ZenTheme } from "../mods";
import { useEffect, useState } from 'preact/hooks'
import type { ZenTheme } from '../mods'
type SortOrder = "default" | "asc" | "desc";
type SortOrder = 'default' | 'asc' | 'desc'
interface ModsSearchState {
search: string;
createdSort: SortOrder;
updatedSort: SortOrder;
page: number;
limit: number;
search: string
createdSort: SortOrder
updatedSort: SortOrder
page: number
limit: number
}
const DEFAULT_LIMIT = 12;
const DEFAULT_LIMIT = 12
export function useModsSearch(mods: ZenTheme[]) {
const [searchParams, setSearchParams] = useState<URLSearchParams>();
const [searchParams, setSearchParams] = useState<URLSearchParams>()
const [state, setState] = useState<ModsSearchState>({
search: "",
createdSort: "desc",
updatedSort: "default",
search: '',
createdSort: 'desc',
updatedSort: 'default',
page: 1,
limit: DEFAULT_LIMIT,
});
})
// Initialize search params
useEffect(() => {
const params = new URLSearchParams(window.location.search);
setSearchParams(params);
const params = new URLSearchParams(window.location.search)
setSearchParams(params)
setState({
search: params.get("q") || "",
createdSort: (params.get("created") as SortOrder) || "desc",
updatedSort: (params.get("updated") as SortOrder) || "default",
page: Number.parseInt(params.get("page") || "1", 10),
limit: Number.parseInt(params.get("limit") || String(DEFAULT_LIMIT), 10),
});
}, []);
search: params.get('q') || '',
createdSort: (params.get('created') as SortOrder) || 'desc',
updatedSort: (params.get('updated') as SortOrder) || 'default',
page: Number.parseInt(params.get('page') || '1', 10),
limit: Number.parseInt(params.get('limit') || String(DEFAULT_LIMIT), 10),
})
}, [])
// Update URL when state changes
useEffect(() => {
if (!searchParams) return;
if (!searchParams) return
if (state.search) {
searchParams.set("q", state.search);
searchParams.set('q', state.search)
} else {
searchParams.delete("q");
searchParams.delete('q')
}
if (state.createdSort !== "default") {
searchParams.set("created", state.createdSort);
if (state.createdSort !== 'default') {
searchParams.set('created', state.createdSort)
} else {
searchParams.delete("created");
searchParams.delete('created')
}
if (state.updatedSort !== "default") {
searchParams.set("updated", state.updatedSort);
if (state.updatedSort !== 'default') {
searchParams.set('updated', state.updatedSort)
} else {
searchParams.delete("updated");
searchParams.delete('updated')
}
if (state.page > 1) {
searchParams.set("page", state.page.toString());
searchParams.set('page', state.page.toString())
} else {
searchParams.delete("page");
searchParams.delete('page')
}
if (state.limit !== DEFAULT_LIMIT) {
searchParams.set("limit", state.limit.toString());
searchParams.set('limit', state.limit.toString())
} else {
searchParams.delete("limit");
searchParams.delete('limit')
}
const newUrl = `${window.location.pathname}${
searchParams.toString() ? `?${searchParams.toString()}` : ""
}`;
searchParams.toString() ? `?${searchParams.toString()}` : ''
}`
if (state.page > 1) {
window.history.pushState({}, "", newUrl);
window.history.pushState({}, '', newUrl)
} else {
window.history.replaceState({}, "", newUrl);
window.history.replaceState({}, '', newUrl)
}
}, [state, searchParams]);
}, [state, searchParams])
const filteredMods = (() => {
let filtered = [...mods];
let filtered = [...mods]
// Filter by search
const searchTerm = state.search.toLowerCase();
const searchTerm = state.search.toLowerCase()
if (searchTerm) {
filtered = filtered.filter(
(mod) =>
@ -93,66 +93,66 @@ export function useModsSearch(mods: ZenTheme[]) {
mod.description.toLowerCase().includes(searchTerm) ||
mod.author.toLowerCase().includes(searchTerm) ||
(mod.tags?.some((tag) => tag.toLowerCase().includes(searchTerm)) ?? false),
);
)
}
// Sort by createdAt if chosen
if (state.createdSort !== "default") {
if (state.createdSort !== 'default') {
filtered.sort((a, b) => {
const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
return state.createdSort === "asc" ? diff : -diff;
});
const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
return state.createdSort === 'asc' ? diff : -diff
})
}
// Sort by updatedAt if chosen
if (state.updatedSort !== "default") {
if (state.updatedSort !== 'default') {
filtered.sort((a, b) => {
const diff = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
return state.updatedSort === "asc" ? diff : -diff;
});
const diff = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
return state.updatedSort === 'asc' ? diff : -diff
})
}
return filtered;
})();
return filtered
})()
// Calculate pagination
const totalPages = Math.ceil(filteredMods.length / state.limit);
const startIndex = (state.page - 1) * state.limit;
const endIndex = startIndex + state.limit;
const paginatedMods = filteredMods.slice(startIndex, endIndex);
const totalPages = Math.ceil(filteredMods.length / state.limit)
const startIndex = (state.page - 1) * state.limit
const endIndex = startIndex + state.limit
const paginatedMods = filteredMods.slice(startIndex, endIndex)
const setSearch = (search: string) => {
setState((prev) => ({ ...prev, search, page: 1 })); // Reset page when search changes
};
setState((prev) => ({ ...prev, search, page: 1 })) // Reset page when search changes
}
const toggleCreatedSort = () => {
setState((prev) => ({
...prev,
createdSort:
prev.createdSort === "default" ? "asc" : prev.createdSort === "asc" ? "desc" : "default",
prev.createdSort === 'default' ? 'asc' : prev.createdSort === 'asc' ? 'desc' : 'default',
page: 1, // Reset page when sort changes
}));
};
}))
}
const toggleUpdatedSort = () => {
setState((prev) => ({
...prev,
updatedSort:
prev.updatedSort === "default" ? "asc" : prev.updatedSort === "asc" ? "desc" : "default",
prev.updatedSort === 'default' ? 'asc' : prev.updatedSort === 'asc' ? 'desc' : 'default',
page: 1, // Reset page when sort changes
}));
};
}))
}
const setPage = (page: number) => {
setState((prev) => ({
...prev,
page: Math.max(1, Math.min(page, totalPages)),
}));
};
}))
}
const setLimit = (limit: number) => {
setState((prev) => ({ ...prev, limit, page: 1 })); // Reset page when limit changes
};
setState((prev) => ({ ...prev, limit, page: 1 })) // Reset page when limit changes
}
return {
search: state.search,
@ -169,5 +169,5 @@ export function useModsSearch(mods: ZenTheme[]) {
setLimit,
mods: paginatedMods,
searchParams,
};
}
}

30
src/layouts/Layout.astro
View file

@ -1,23 +1,23 @@
---
interface Props {
title: string;
description?: string;
ogImage?: string;
isHome?: boolean;
redirect?: string;
title: string
description?: string
ogImage?: string
isHome?: boolean
redirect?: string
}
const { title, description, ogImage, isHome, redirect } = Astro.props;
const { title, description, ogImage, isHome, redirect } = Astro.props
const defaultDescription =
"Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features.";
const defaultOgImage = "/share-pic.png";
import "@fontsource/bricolage-grotesque/400.css";
import "@fontsource/bricolage-grotesque/500.css";
import "@fontsource/bricolage-grotesque/600.css";
import Footer from "~/components/Footer.astro";
import NavBar from "~/components/NavBar.astro";
import { getLocale } from "~/utils/i18n";
const locale = getLocale(Astro);
'Zen Browser is built for speed, security, and true privacy. Download now to enjoy a beautifully-designed, distraction-free web experience packed with features.'
const defaultOgImage = '/share-pic.png'
import '@fontsource/bricolage-grotesque/400.css'
import '@fontsource/bricolage-grotesque/500.css'
import '@fontsource/bricolage-grotesque/600.css'
import Footer from '~/components/Footer.astro'
import NavBar from '~/components/NavBar.astro'
import { getLocale } from '~/utils/i18n'
const locale = getLocale(Astro)
---
<script is:inline data-cfasync="false">

48
src/mods.ts
View file

@ -1,41 +1,41 @@
import { format } from "date-fns";
import { format } from 'date-fns'
export interface ZenTheme {
name: string;
description: string;
image: string;
downloadUrl: string;
id: string;
homepage?: string;
readme: string;
preferences?: string;
isColorTheme: boolean;
author: string;
version: string;
tags: string[];
createdAt: Date;
updatedAt: Date;
name: string
description: string
image: string
downloadUrl: string
id: string
homepage?: string
readme: string
preferences?: string
isColorTheme: boolean
author: string
version: string
tags: string[]
createdAt: Date
updatedAt: Date
}
const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";
const THEME_API = 'https://zen-browser.github.io/theme-store/themes.json'
export async function getAllMods(): Promise<ZenTheme[]> {
try {
const res = await fetch(THEME_API);
const json = await res.json();
const res = await fetch(THEME_API)
const json = await res.json()
// convert dict to array
const mods = Object.keys(json).map((key) => json[key]);
return mods;
const mods = Object.keys(json).map((key) => json[key])
return mods
} catch (error) {
console.error(error);
return [];
console.error(error)
return []
}
}
export function getAuthorLink(author: string): string {
return `https://github.com/${author}`;
return `https://github.com/${author}`
}
export function getLocalizedDate(date: Date): string {
return format(date, "PP");
return format(date, 'PP')
}

2
src/pages/404.astro
View file

@ -1,5 +1,5 @@
---
import NotFound from "./[...locale]/404.astro";
import NotFound from './[...locale]/404.astro'
---
<NotFound />

18
src/pages/[...locale]/404.astro
View file

@ -1,16 +1,16 @@
---
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import Title from "~/components/Title.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getPath, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Title from '~/components/Title.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const getLocalePath = getPath(locale);
const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
routes: { notFound },
} = getUI(locale);
} = getUI(locale)
---
<Layout title={notFound.title}>

14
src/pages/[...locale]/about.astro
View file

@ -1,16 +1,16 @@
---
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { about },
layout,
} = getUI(locale);
} = getUI(locale)
---
<Layout

16
src/pages/[...locale]/donate.astro
View file

@ -1,16 +1,16 @@
---
import { ArrowRight } from "lucide-astro";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { donate },
layout,
} = getUI(locale);
} = getUI(locale)
---
<Layout title={layout.donate.title} description={layout.donate.description}>

44
src/pages/[...locale]/download.astro
View file

@ -1,35 +1,35 @@
---
import Description from "~/components/Description.astro";
import DownloadScript from "~/components/download/DownloadScript.astro";
import PlatformDownload from "~/components/download/PlatformDownload.astro";
import { getReleasesWithChecksums } from "~/components/download/release-data.astro";
import Layout from "~/layouts/Layout.astro";
import { getChecksums } from "~/utils/githubChecksums";
import { getLocale, getUI } from "~/utils/i18n";
import Description from '~/components/Description.astro'
import DownloadScript from '~/components/download/DownloadScript.astro'
import PlatformDownload from '~/components/download/PlatformDownload.astro'
import { getReleasesWithChecksums } from '~/components/download/release-data.astro'
import Layout from '~/layouts/Layout.astro'
import { getChecksums } from '~/utils/githubChecksums'
import { getLocale, getUI } from '~/utils/i18n'
import { icon, library } from "@fortawesome/fontawesome-svg-core";
import { faApple, faGithub, faLinux, faWindows } from "@fortawesome/free-brands-svg-icons";
import { ExternalLink, Lock } from "lucide-astro";
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faApple, faGithub, faLinux, faWindows } from '@fortawesome/free-brands-svg-icons'
import { ExternalLink, Lock } from 'lucide-astro'
export { getStaticPaths } from "~/utils/i18n";
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { download },
layout,
} = getUI(locale);
} = 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" });
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 checksums = await getChecksums()
const releases = getReleasesWithChecksums(checksums)
const platformNames = download.platformNames;
const platformDescriptions = download.platformDescriptions;
const platformNames = download.platformNames
const platformDescriptions = download.platformDescriptions
---
<DownloadScript />

100
src/pages/[...locale]/feed.xml.ts
View file

@ -1,10 +1,10 @@
import rss, { type RSSOptions } from "@astrojs/rss";
import { releaseNotes } from "~/release-notes";
import type { ReleaseNote } from "~/release-notes";
export { getStaticPaths } from "~/utils/i18n";
import rss, { type RSSOptions } from '@astrojs/rss'
import { releaseNotes } from '~/release-notes'
import type { ReleaseNote } from '~/release-notes'
export { getStaticPaths } from '~/utils/i18n'
/** The default number of entries to include in the RSS feed. */
const RSS_ENTRY_LIMIT = 20;
const RSS_ENTRY_LIMIT = 20
/**
* Handles the GET request for the `feed.xml` endpoint.
@ -13,11 +13,11 @@ const RSS_ENTRY_LIMIT = 20;
export function GET(context: { url: URL }) {
// Just in case the release notes array is empty for whatever reason.
const latestDate =
releaseNotes.length > 0 ? formatRssDate(releaseNotes[0].date as string) : new Date();
releaseNotes.length > 0 ? formatRssDate(releaseNotes[0].date as string) : new Date()
const rssData: RSSOptions = {
title: "Zen Browser Release Notes",
description: "Release Notes for the Zen Browser",
title: 'Zen Browser Release Notes',
description: 'Release Notes for the Zen Browser',
site: context.url,
items: [],
customData: `
@ -31,7 +31,7 @@ export function GET(context: { url: URL }) {
<link>https://www.zen-browser.app</link>
</image>
`,
};
}
for (const releaseNote of releaseNotes.slice(0, RSS_ENTRY_LIMIT)) {
rssData.items.push({
@ -40,10 +40,10 @@ export function GET(context: { url: URL }) {
pubDate: formatRssDate(releaseNote.date as string),
description: releaseNote.extra,
content: formatReleaseNote(releaseNote),
});
})
}
return rss(rssData);
return rss(rssData)
}
/**
@ -54,15 +54,15 @@ export function GET(context: { url: URL }) {
* @returns The passed in date string as a Date object.
*/
function formatRssDate(dateStr: string) {
const splitDate = dateStr.split("/");
const splitDate = dateStr.split('/')
if (splitDate.length !== 3) {
throw new Error("Invalid date format");
throw new Error('Invalid date format')
}
const day = Number(splitDate[0]);
const month = Number(splitDate[1]) - 1;
const year = Number(splitDate[2]);
return new Date(year, month, day);
const day = Number(splitDate[0])
const month = Number(splitDate[1]) - 1
const year = Number(splitDate[2])
return new Date(year, month, day)
}
/**
@ -74,83 +74,83 @@ function formatReleaseNote(releaseNote: ReleaseNote) {
let content = `<p>
If you encounter any issues, please report them on <a href="https://github.com/zen-browser/desktop/issues/">the issues page</a>.
Thanks everyone for your feedback! ❤️
</p>`;
</p>`
if (releaseNote.image) {
content += `<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/releases/${releaseNote.version}.png"
alt="Release Image for version ${releaseNote.version}"
style="max-width: 30em; width: 100%; border-radius: 0.5rem;"
/>`;
/>`
}
if (releaseNote.extra) {
content += `<p>${releaseNote.extra.replace(/(\n)/g, "<br />")}</p>`;
content += `<p>${releaseNote.extra.replace(/(\n)/g, '<br />')}</p>`
}
content += addReleaseNoteSection(
"⚠️ Breaking changes",
'⚠️ Breaking changes',
releaseNote.breakingChanges?.map(breakingChangeToReleaseNote),
);
content += addReleaseNoteSection("✓ Fixes", releaseNote.fixes?.map(fixToReleaseNote));
content += addReleaseNoteSection("🖌 Theme Changes", releaseNote.themeChanges);
content += addReleaseNoteSection("⭐ Features", releaseNote.features);
)
content += addReleaseNoteSection('✓ Fixes', releaseNote.fixes?.map(fixToReleaseNote))
content += addReleaseNoteSection('🖌 Theme Changes', releaseNote.themeChanges)
content += addReleaseNoteSection('⭐ Features', releaseNote.features)
return content;
return content
}
function addReleaseNoteSection(title: string, items?: string[]): string {
if (!items) {
return "";
return ''
}
let content = `<h2>${title}</h2>`;
content += "<ul>";
let content = `<h2>${title}</h2>`
content += '<ul>'
for (const item of items) {
if (item && item.length > 0) {
content += `<li>${item}</li>`;
content += `<li>${item}</li>`
}
}
content += "</ul>";
return content;
content += '</ul>'
return content
}
function fixToReleaseNote(fix?: Exclude<ReleaseNote["fixes"], undefined>[number]) {
if (typeof fix === "string") {
return fix;
function fixToReleaseNote(fix?: Exclude<ReleaseNote['fixes'], undefined>[number]) {
if (typeof fix === 'string') {
return fix
}
if (!fix || !fix.description || fix.description.length === 0) {
return "";
return ''
}
let note = fix.description;
let note = fix.description
if (fix.issue) {
note += ` (<a href="https://github.com/zen-browser/desktop/issues/${fix.issue}" target="_blank">#${fix.issue}</a>)`;
note += ` (<a href="https://github.com/zen-browser/desktop/issues/${fix.issue}" target="_blank">#${fix.issue}</a>)`
}
return note;
return note
}
function breakingChangeToReleaseNote(
breakingChange?: Exclude<ReleaseNote["breakingChanges"], undefined>[number],
breakingChange?: Exclude<ReleaseNote['breakingChanges'], undefined>[number],
) {
if (typeof breakingChange === "string") {
return breakingChange;
if (typeof breakingChange === 'string') {
return breakingChange
}
if (!breakingChange || !breakingChange.description || breakingChange.description.length === 0) {
return "";
return ''
}
return `${breakingChange.description} (<a href="${breakingChange.link}" target="_blank">Learn more</a>)`;
return `${breakingChange.description} (<a href="${breakingChange.link}" target="_blank">Learn more</a>)`
}
function pubDate(date?: Date) {
const newDate = date ?? new Date();
const newDate = date ?? new Date()
const pieces = newDate.toString().split(" ");
const offsetTime = pieces[5].match(/[-+]\d{4}/);
const offset = offsetTime ? offsetTime : pieces[5];
const parts = [`${pieces[0]},`, pieces[2], pieces[1], pieces[3], pieces[4], offset];
const pieces = newDate.toString().split(' ')
const offsetTime = pieces[5].match(/[-+]\d{4}/)
const offset = offsetTime ? offsetTime : pieces[5]
const parts = [`${pieces[0]},`, pieces[2], pieces[1], pieces[3], pieces[4], offset]
return parts.join(" ");
return parts.join(' ')
}

18
src/pages/[...locale]/index.astro
View file

@ -1,15 +1,15 @@
---
import Community from "~/components/Community.astro";
import Features from "~/components/Features.astro";
import Hero from "~/components/Hero.astro";
import Sponsors from "~/components/Sponsors.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Community from '~/components/Community.astro'
import Features from '~/components/Features.astro'
import Hero from '~/components/Hero.astro'
import Sponsors from '~/components/Sponsors.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const { layout } = getUI(locale);
const { layout } = getUI(locale)
---
<Layout

28
src/pages/[...locale]/mods/[...slug].astro
View file

@ -1,15 +1,15 @@
---
import { ArrowRight, Info } from "lucide-astro";
import BackButton from "~/components/BackButton.astro";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import Layout from "~/layouts/Layout.astro";
import { getAllMods, getAuthorLink, getLocalizedDate } from "~/mods";
import { getUI } from "~/utils/i18n";
import { getLocale, getOtherLocales } from "~/utils/i18n";
import { ArrowRight, Info } from 'lucide-astro'
import BackButton from '~/components/BackButton.astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Layout from '~/layouts/Layout.astro'
import { getAllMods, getAuthorLink, getLocalizedDate } from '~/mods'
import { getUI } from '~/utils/i18n'
import { getLocale, getOtherLocales } from '~/utils/i18n'
export async function getStaticPaths() {
const mods = await getAllMods();
const mods = await getAllMods()
return mods.flatMap((mod) => [
...getOtherLocales().map((locale) => ({
params: {
@ -31,25 +31,25 @@ export async function getStaticPaths() {
locale: undefined,
},
},
]);
])
}
// https://github.com/TeaClientMC/Website/blob/7faacc9f8b2c79c74f711d413b155c84faafc00d/src/pages/news/%5B...slug%5D.astro
const mod = Astro.props;
const mod = Astro.props
const dates = {
createdAt: getLocalizedDate(mod.createdAt),
updatedAt: getLocalizedDate(mod.updatedAt),
};
}
const locale = getLocale(Astro as { params: { locale?: string } });
const locale = getLocale(Astro as { params: { locale?: string } })
const {
routes: {
mods: { slug },
},
} = getUI(locale);
} = getUI(locale)
---
<Layout

20
src/pages/[...locale]/mods/index.astro
View file

@ -1,20 +1,20 @@
---
import Description from "~/components/Description.astro";
import ModsList from "~/components/ModsList";
import { CONSTANT } from "~/constants";
import Layout from "~/layouts/Layout.astro";
import { getAllMods } from "~/mods";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Description from '~/components/Description.astro'
import ModsList from '~/components/ModsList'
import { CONSTANT } from '~/constants'
import Layout from '~/layouts/Layout.astro'
import { getAllMods } from '~/mods'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { mods },
layout,
} = getUI(locale);
} = getUI(locale)
const allMods = (await getAllMods()) || [];
const allMods = (await getAllMods()) || []
---
<Layout title={layout.mods.title}>

12
src/pages/[...locale]/privacy-policy.astro
View file

@ -1,15 +1,15 @@
---
import Title from "~/components/Title.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Title from '~/components/Title.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { privacyPolicy },
layout,
} = getUI(locale);
} = getUI(locale)
---
<Layout

18
src/pages/[...locale]/release-notes/[...slug].astro
View file

@ -1,18 +1,18 @@
---
import Layout from "~/layouts/Layout.astro";
import { releaseNotes } from "~/release-notes";
import { getStaticPaths as getI18nPaths, getLocale, getUI } from "~/utils/i18n";
import Layout from '~/layouts/Layout.astro'
import { releaseNotes } from '~/release-notes'
import { getStaticPaths as getI18nPaths, getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: {
releaseNotes: { slug },
},
} = getUI(locale);
} = getUI(locale)
export async function getStaticPaths() {
const i18nPaths = getI18nPaths();
const i18nPaths = getI18nPaths()
return i18nPaths.flatMap(({ params: { locale } }) => [
...releaseNotes.map((release) => ({
@ -20,13 +20,13 @@ export async function getStaticPaths() {
props: { ...release },
})),
{
params: { slug: "latest", locale },
params: { slug: 'latest', locale },
props: { ...releaseNotes[0] },
},
]);
])
}
const release = Astro.props;
const release = Astro.props
---
<Layout title={slug.title} redirect={`/release-notes#${release.version}`}>

22
src/pages/[...locale]/release-notes/index.astro
View file

@ -1,20 +1,20 @@
---
import { Modal, ModalBody, ModalHeader } from "free-astro-components";
import { ArrowUp } from "lucide-astro";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import ReleaseNoteItem from "~/components/ReleaseNoteItem.astro";
import Layout from "~/layouts/Layout.astro";
import { releaseNotes as releaseNotesData, releaseNotesTwilight } from "~/release-notes";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import { Modal, ModalBody, ModalHeader } from 'free-astro-components'
import { ArrowUp } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ReleaseNoteItem from '~/components/ReleaseNoteItem.astro'
import Layout from '~/layouts/Layout.astro'
import { releaseNotes as releaseNotesData, releaseNotesTwilight } from '~/release-notes'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { releaseNotes },
layout,
} = getUI(locale);
} = getUI(locale)
---
<Layout title={layout.releaseNotes.title}>

12
src/pages/[...locale]/welcome.astro
View file

@ -1,15 +1,15 @@
---
import Features from "~/components/Features.astro";
import Layout from "~/layouts/Layout.astro";
import { getLocale, getUI } from "~/utils/i18n";
export { getStaticPaths } from "~/utils/i18n";
import Features from '~/components/Features.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { welcome },
layout,
} = getUI(locale);
} = getUI(locale)
---
<Layout title={layout.welcome.title} description={layout.welcome.description}>

32
src/pages/[...locale]/whatsnew.astro
View file

@ -1,29 +1,29 @@
---
import { ArrowRight } from "lucide-astro";
import Button from "~/components/Button.astro";
import Description from "~/components/Description.astro";
import SocialMediaStrip from "~/components/SocialMediaStrip.astro";
import Layout from "~/layouts/Layout.astro";
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import SocialMediaStrip from '~/components/SocialMediaStrip.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";
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 latestVersion = releaseNotes[0]
const locale = getLocale(Astro);
const locale = getLocale(Astro)
const {
routes: { whatsNew },
layout,
} = getUI(locale);
} = 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}`);
if (latestVersion.version.split('.').length > 2 && whatsNewText[1] !== latestVersion.version) {
return Astro.redirect(`/release-notes#${latestVersion.version}`)
}
---

44
src/release-notes.ts
View file

@ -1,41 +1,41 @@
import releaseNotesStable from "./release-notes/stable.json";
import releaseNotesStable from './release-notes/stable.json'
interface FixWithIssue {
description: string;
issue?: number;
description: string
issue?: number
}
type Fix = string | FixWithIssue;
type Fix = string | FixWithIssue
export type BreakingChange = string | { description: string; link: string };
export type BreakingChange = string | { description: string; link: string }
export interface ReleaseNote {
version: string;
date?: string; // optional for twilight
extra?: string;
image?: boolean;
fixes?: Fix[];
features?: string[];
breakingChanges?: BreakingChange[];
themeChanges?: string[];
inProgress?: boolean;
workflowId?: number;
isTwilight?: boolean;
version: string
date?: string // optional for twilight
extra?: string
image?: boolean
fixes?: Fix[]
features?: string[]
breakingChanges?: BreakingChange[]
themeChanges?: string[]
inProgress?: boolean
workflowId?: number
isTwilight?: boolean
}
export const releaseNotes: ReleaseNote[] = releaseNotesStable.reverse();
export { default as releaseNotesTwilight } from "./release-notes/twilight.json";
export const releaseNotes: ReleaseNote[] = releaseNotesStable.reverse()
export { default as releaseNotesTwilight } from './release-notes/twilight.json'
export function getReleaseNoteFirefoxVersion(releaseNote: ReleaseNote): string | null {
// Check if "firefox" is on the feature list
for (const feature of releaseNote.features || []) {
if (feature.toLowerCase().includes("firefox")) {
if (feature.toLowerCase().includes('firefox')) {
// may be X or X.X or X.X.X
const match = feature.match(/(\d+(\.\d+){0,2})/);
const match = feature.match(/(\d+(\.\d+){0,2})/)
if (match) {
return match[0];
return match[0]
}
}
}
return null;
return null
}

28
src/utils/githubChecksums.ts
View file

@ -3,25 +3,25 @@
* Returns a mapping from filename to checksum.
*/
export async function getChecksums() {
const res = await fetch("https://api.github.com/repos/zen-browser/desktop/releases/latest", {
const res = await fetch('https://api.github.com/repos/zen-browser/desktop/releases/latest', {
headers: {
Accept: "application/vnd.github+json",
"X-GitHub-Api-Version": "2022-11-28",
"User-Agent": "zen-browser-checksum-fetcher",
Accept: 'application/vnd.github+json',
'X-GitHub-Api-Version': '2022-11-28',
'User-Agent': 'zen-browser-checksum-fetcher',
},
});
if (!res.ok) throw new Error(`Failed to fetch GitHub release: ${res.statusText}`);
const data = await res.json();
const body = data.body as string;
})
if (!res.ok) throw new Error(`Failed to fetch GitHub release: ${res.statusText}`)
const data = await res.json()
const body = data.body as string
// Extract the checksum block
const match = body.match(/File Checksums \(SHA-256\)[\s\S]*?```([\s\S]*?)```/);
const checksums: Record<string, string> = {};
const match = body.match(/File Checksums \(SHA-256\)[\s\S]*?```([\s\S]*?)```/)
const checksums: Record<string, string> = {}
if (match?.[1]) {
for (const line of match[1].split("\n")) {
const [hash, filename] = line.trim().split(/\s+/, 2);
if (hash && filename) checksums[filename] = hash;
for (const line of match[1].split('\n')) {
const [hash, filename] = line.trim().split(/\s+/, 2)
if (hash && filename) checksums[filename] = hash
}
}
return checksums;
return checksums
}

76
src/utils/i18n.ts
View file

@ -1,12 +1,12 @@
import type { GetStaticPaths } from "astro";
import { CONSTANT } from "~/constants";
import UI_EN from "~/i18n/en/translation.json";
import type { GetStaticPaths } from 'astro'
import { CONSTANT } from '~/constants'
import UI_EN from '~/i18n/en/translation.json'
/**
* Represents the available locales in the application
* @typedef {string} Locale
*/
export type Locale = (typeof locales)[number];
export type Locale = (typeof locales)[number]
/**
* Generates a localized path by prefixing the locale if necessary
@ -15,10 +15,10 @@ export type Locale = (typeof locales)[number];
*/
export const getPath = (locale?: Locale) => (path: string) => {
if (locale && locale !== CONSTANT.I18N.DEFAULT_LOCALE && !path.startsWith(`/${locale}`)) {
return `/${locale}${path.startsWith("/") ? "" : "/"}${path}`;
return `/${locale}${path.startsWith('/') ? '' : '/'}${path}`
}
return path;
};
return path
}
/**
* Extracts the current locale from Astro's params, defaulting to the default locale
@ -29,16 +29,16 @@ export const getPath = (locale?: Locale) => (path: string) => {
*/
export const getLocale = (Astro: { params?: { locale?: string } }) => {
if (Astro.params?.locale) {
return Astro.params.locale as Locale;
return Astro.params.locale as Locale
}
return CONSTANT.I18N.DEFAULT_LOCALE as Locale;
};
return CONSTANT.I18N.DEFAULT_LOCALE as Locale
}
/**
* List of all supported locales
* @type {Locale[]}
*/
export const locales = CONSTANT.I18N.LOCALES.map(({ value }) => value);
export const locales = CONSTANT.I18N.LOCALES.map(({ value }) => value)
/**
* List of locales excluding the default locale
@ -46,25 +46,25 @@ export const locales = CONSTANT.I18N.LOCALES.map(({ value }) => value);
*/
const otherLocales = CONSTANT.I18N.LOCALES.filter(
({ value }) => value !== CONSTANT.I18N.DEFAULT_LOCALE,
);
)
/**
* Retrieves locales other than the default locale
* @returns {Locale[]} Array of non-default locales
*/
export const getOtherLocales = () => otherLocales;
export const getOtherLocales = () => otherLocales
/**
* Type definition for UI translations based on the English translation
* @typedef {Object} UI
*/
export type UI = typeof UI_EN;
export type UI = typeof UI_EN
/**
* Mapping of locales to their UI translation objects
* @type {Object.<Locale, UI>}
*/
export const ui = { en: UI_EN };
export const ui = { en: UI_EN }
/**
* Retrieves UI translations for a given locale, merging with default translations
@ -72,9 +72,9 @@ export const ui = { en: UI_EN };
* @returns {UI} Merged UI translations
*/
export const getUI = (locale?: Locale | string): UI => {
const validLocale = locales.includes(locale as Locale) ? locale : CONSTANT.I18N.DEFAULT_LOCALE;
const defaultUI = ui[CONSTANT.I18N.DEFAULT_LOCALE];
const localeUI = ui[validLocale as Locale];
const validLocale = locales.includes(locale as Locale) ? locale : CONSTANT.I18N.DEFAULT_LOCALE
const defaultUI = ui[CONSTANT.I18N.DEFAULT_LOCALE]
const localeUI = ui[validLocale as Locale]
/**
* Recursively merges two objects, with the override object taking precedence
@ -85,51 +85,51 @@ export const getUI = (locale?: Locale | string): UI => {
*/
function deepMerge<T extends object>(defaultObj: T, overrideObj: Partial<T>): T {
// Handle non-object cases
if (typeof defaultObj !== "object" || defaultObj === null) {
return (overrideObj ?? defaultObj) as T;
if (typeof defaultObj !== 'object' || defaultObj === null) {
return (overrideObj ?? defaultObj) as T
}
if (typeof overrideObj !== "object" || overrideObj === null) {
return (overrideObj ?? defaultObj) as T;
if (typeof overrideObj !== 'object' || overrideObj === null) {
return (overrideObj ?? defaultObj) as T
}
// Create a new object or array based on the default object's type
const result = Array.isArray(defaultObj) ? [...defaultObj] : { ...defaultObj };
const result = Array.isArray(defaultObj) ? [...defaultObj] : { ...defaultObj }
// Merge properties from the default object
for (const key of Object.keys(defaultObj) as Array<keyof T>) {
const defaultValue = defaultObj[key];
const overrideValue = overrideObj[key];
const defaultValue = defaultObj[key]
const overrideValue = overrideObj[key]
// Recursively merge nested objects
if (
defaultValue !== null &&
overrideValue !== null &&
typeof defaultValue === "object" &&
typeof overrideValue === "object"
typeof defaultValue === 'object' &&
typeof overrideValue === 'object'
) {
// Type assertion to handle nested merging
(result as Record<keyof T, unknown>)[key] = deepMerge(
;(result as Record<keyof T, unknown>)[key] = deepMerge(
defaultValue as object,
overrideValue as Partial<object>,
);
)
} else if (overrideValue !== undefined) {
// Override with the new value if it exists
(result as Record<keyof T, unknown>)[key] = overrideValue;
;(result as Record<keyof T, unknown>)[key] = overrideValue
}
}
// Add any new properties from overrideObj
for (const key of Object.keys(overrideObj) as Array<keyof T>) {
if (!(key in defaultObj)) {
(result as Record<keyof T, unknown>)[key] = overrideObj[key];
;(result as Record<keyof T, unknown>)[key] = overrideObj[key]
}
}
return result as T;
return result as T
}
return deepMerge(defaultUI, localeUI);
};
return deepMerge(defaultUI, localeUI)
}
/**
* Generates static paths for internationalization
@ -150,13 +150,13 @@ export const getStaticPaths = (() => {
},
}),
),
];
}) satisfies GetStaticPaths;
]
}) satisfies GetStaticPaths
/**
* Retrieves all available locales, including both default and non-default
* @returns {Locale[]} Combined array of all locales
*/
export const getLocales = () => {
return [...locales, ...otherLocales];
};
return [...locales, ...otherLocales]
}