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

Merge pull request #602 from zen-browser/fix/title

Browse source 
fix(title): replace title css with tailwind
This commit is contained in:
mr. m 2025-05-16 08:22:53 +02:00 • committed by GitHub
commit 0086d9be7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 65 additions and 2387 deletions
Download patch file Download diff file Expand all files Collapse all files

2313
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
package.json
View file

@ -30,6 +30,7 @@
"astro": "^5.7.10",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"free-astro-components": "^1.1.1",
"lucide-astro": "^0.460.0",
@ -38,6 +39,7 @@
"postcss": "^8.5.1",
"preact": "^10.26.2",
"sharp": "^0.33.5",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3"
},
@ -57,8 +59,6 @@
"wrangler": "^3.94.0"
},
"lint-staged": {
"src/**/*.{ts,tsx,astro,js,jsx}": [
"biome check --write ./src"
]
"src/**/*.{ts,tsx,astro,js,jsx}": ["biome check --write ."]
}
}

4
playwright.config.ts
View file

@ -1,4 +1,4 @@
import { defineConfig, devices } from '@playwright/test';
import { defineConfig, devices } from '@playwright/test'
/**
* Read environment variables from file.
@ -69,4 +69,4 @@ export default defineConfig({
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
})

6
src/components/Hero.astro
View file

@ -37,7 +37,7 @@ const {
>
<div class="flex h-full flex-col items-center justify-center">
<Title
class="relative px-12 text-center !font-normal leading-8 md:text-7xl lg:px-0 lg:text-9xl"
class="relative px-12 text-center font-normal leading-8 md:text-7xl lg:px-0 lg:text-9xl"
>
<motion.span client:load {...getHeroTitleAnimation()}>
{hero.title[0]}
@ -69,13 +69,13 @@ const {
</motion.span>
<div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
<motion.span client:load {...getHeroTitleAnimation()}>
<Button class="w-full" href={getLocalePath('/download')} isPrimary>
<Button class="w-full" href={getLocalePath("/download")} isPrimary>
{hero.buttons.beta}
<ArrowRightIcon class="size-4" />
</Button>
</motion.span>
<motion.span client:load {...getHeroTitleAnimation()}>
<Button href={getLocalePath('/donate')}>{hero.buttons.support}</Button>
<Button href={getLocalePath("/donate")}>{hero.buttons.support}</Button>
</motion.span>
</div>
<motion.span

18
src/components/Title.astro
View file

@ -1,17 +1,13 @@
---
import { cn } from '~/utils/merge'
const { class: className } = Astro.props
---
<h1 class:list={['title text-dark', className]}>
<h1
class={cn(
"text-dark leading-[0.9] mb-[0.4rem] font-junicode font-semibold text-5xl",
className,
)}
>
<slot />
</h1>
<style>
.title {
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Junicode', serif;
font-weight: 600;
font-style: normal;
font-feature-settings: 'swsh' 1;
}
</style>

10
src/components/download/release-data.ts
View file

@ -30,11 +30,6 @@ export function getReleasesWithChecksums(checksums: Record<string, string>) {
label: 'Tarball',
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',
checksum: checksums['zen-x86_64.AppImage'],
},
},
aarch64: {
tarball: {
@ -42,11 +37,6 @@ export function getReleasesWithChecksums(checksums: Record<string, string>) {
label: 'Tarball',
checksum: checksums['zen.linux-aarch64.tar.xz'],
},
appImage: {
link: 'https://github.com/zen-browser/desktop/releases/latest/download/zen-aarch64.AppImage',
label: 'AppImage',
checksum: checksums['zen-aarch64.AppImage'],
},
},
flathub: {
all: {

2
src/constants/checksum.ts
View file

@ -3,7 +3,5 @@ export const CHECKSUMS = {
'zen.installer.exe': 'winsum',
'zen.installer-arm64.exe': 'winarmsum',
'zen.linux-x86_64.tar.xz': 'linuxsum',
'zen-x86_64.AppImage': 'linuxappsum',
'zen.linux-aarch64.tar.xz': 'linuxarmsum',
'zen-aarch64.AppImage': 'linuxarmappsum',
}

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

@ -17,7 +17,9 @@ const {
<main
class="container flex min-h-[70vh] flex-col items-center justify-center gap-6 py-24 text-center"
>
<Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
<Title class="text-7xl font-bold text-coral md:text-9xl xl:text-9xl">
404
</Title>
<div class="flex flex-col items-center gap-6">
<Description class="text-xl md:text-2xl">
{notFound.title}
@ -25,7 +27,7 @@ const {
<p class="max-w-xl text-lg text-gray-500 dark:text-gray-400">
{notFound.description}
</p>
<Button href={getLocalePath('/')} isPrimary class="w-fit">
<Button href={getLocalePath("/")} isPrimary class="w-fit">
{notFound.button}
</Button>
</div>

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

@ -17,9 +17,9 @@ const {
description={layout.privacyPolicy.description}
>
<main class="mx-auto mt-52 w-1/2 pb-24">
<Title id="privacy-policy">{privacyPolicy.title}</Title>
<Title id="privacy-policy" class="xl:text-6xl">{privacyPolicy.title}</Title>
<div class="ml-4 font-bold">{privacyPolicy.lastUpdated}</div>
<Title class="mt-16 !text-4xl font-bold" id="introduction">
<Title class="mt-16 text-4xl font-bold" id="introduction">
{privacyPolicy.sections.introduction.title}
</Title>
<p>{privacyPolicy.sections.introduction.body}</p>
@ -27,44 +27,44 @@ const {
{privacyPolicy.sections.introduction.summary}
</div>
<Title
class="mt-16 !text-4xl font-bold"
class="mt-16 text-4xl font-bold"
id="1-information-we-do-not-collect"
>
{privacyPolicy.sections.noCollect.title}
</Title>
<p>{privacyPolicy.sections.noCollect.body}</p>
<h3 class="mt-4 text-xl !font-bold" id="-1-1-no-telemetry-">
<h3 class="mt-4 text-xl font-bold" id="-1-1-no-telemetry-">
<strong class="font-bold"
>{privacyPolicy.sections.noTelemetry.title}</strong
>
</h3>
<p>{privacyPolicy.sections.noTelemetry.body}</p>
<p>{privacyPolicy.sections.noTelemetry.body2}</p>
<h3 class="mt-4 text-xl !font-bold" id="-1-2-no-personal-data-collection-">
<h3 class="mt-4 text-xl font-bold" id="-1-2-no-personal-data-collection-">
<strong class="font-bold"
>{privacyPolicy.sections.noPersonalData.title}</strong
>
</h3>
<p>{privacyPolicy.sections.noPersonalData.body}</p>
<h3 class="mt-4 text-xl !font-bold" id="-1-4-no-third-party-tracking-">
<h3 class="mt-4 text-xl font-bold" id="-1-4-no-third-party-tracking-">
<strong class="font-bold"
>{privacyPolicy.sections.noThirdParty.title}</strong
>
</h3>
<p>{privacyPolicy.sections.noThirdParty.body}</p>
<h3 class="mt-4 text-xl !font-bold" id="-1-3-no-third-party-tracking-">
<h3 class="mt-4 text-xl font-bold" id="-1-3-no-third-party-tracking-">
<strong class="font-bold"
>{privacyPolicy.sections.externalConnections.title}</strong
>
</h3>
<p>{privacyPolicy.sections.externalConnections.body}</p>
<Title
class="mt-16 !text-4xl font-bold"
class="mt-16 text-4xl font-bold"
id="2-information-stored-locally-on-your-device"
>
{privacyPolicy.sections.localStorage.title}
</Title>
<h3 class="mt-4 text-xl !font-bold" id="-2-1-browsing-data-">
<h3 class="mt-4 text-xl font-bold" id="-2-1-browsing-data-">
<strong class="font-bold"
>{privacyPolicy.sections.browsingData.title}</strong
>
@ -81,11 +81,11 @@ const {
}
</li>
</ul>
<h3 class="mt-4 text-xl !font-bold" id="-2-2-settings-and-preferences-">
<h3 class="mt-4 text-xl font-bold" id="-2-2-settings-and-preferences-">
<strong class="font-bold">{privacyPolicy.sections.settings.title}</strong>
</h3>
<p>{privacyPolicy.sections.settings.body}</p>
<Title class="mt-16 !text-4xl font-bold" id="3-sync-feature">
<Title class="mt-16 text-4xl font-bold" id="3-sync-feature">
{privacyPolicy.sections.sync.title}
</Title>
<p>{privacyPolicy.sections.sync.body}</p>
@ -105,38 +105,38 @@ const {
>
</li>
</ul>
<Title class="mt-16 !text-4xl font-bold" id="4-add-ons-and-mods">
<Title class="mt-16 text-4xl font-bold" id="4-add-ons-and-mods">
{privacyPolicy.sections.addons.title}
</Title>
<p>{privacyPolicy.sections.addons.body}</p>
<Title class="mt-16 !text-4xl font-bold" id="5-data-security">
<Title class="mt-16 text-4xl font-bold" id="5-data-security">
{privacyPolicy.sections.security.title}
</Title>
<p>{privacyPolicy.sections.security.body}</p>
<ul>
<li>{privacyPolicy.sections.security.note}</li>
</ul>
<Title class="mt-16 !text-4xl font-bold" id="6-your-control">
<Title class="mt-16 text-4xl font-bold" id="6-your-control">
{privacyPolicy.sections.control.title}
</Title>
<h3 class="mt-4 text-xl !font-bold" id="-6-1-data-deletion-">
<h3 class="mt-4 text-xl font-bold" id="-6-1-data-deletion-">
<strong class="font-bold"
>{privacyPolicy.sections.control.deletionTitle}</strong
>
</h3>
<p>{privacyPolicy.sections.control.deletionBody}</p>
<Title class="mt-16 !text-4xl font-bold" id="7-our-website-and-services">
<Title class="mt-16 text-4xl font-bold" id="7-our-website-and-services">
{privacyPolicy.sections.website.title}
</Title>
<p>{privacyPolicy.sections.website.body}</p>
<h3 class="mt-4 text-xl !font-bold" id="-7-1-external-links-">
<h3 class="mt-4 text-xl font-bold" id="-7-1-external-links-">
<strong class="font-bold"
>{privacyPolicy.sections.website.externalLinksTitle}</strong
>
</h3>
<p>{privacyPolicy.sections.website.externalLinksBody}</p>
<Title
class="mt-16 !text-4xl font-bold"
class="mt-16 text-4xl font-bold"
id="8-changes-to-this-privacy-policy"
>
{privacyPolicy.sections.changes.title}
@ -145,7 +145,7 @@ const {
{privacyPolicy.sections.changes.body}
</p>
<Title
class="mt-16 !text-4xl font-bold"
class="mt-16 text-4xl font-bold"
id="9-other-telemetry-done-by-mozilla-firefox"
>
{privacyPolicy.sections.otherTelemetry.title}
@ -163,7 +163,7 @@ const {
{privacyPolicy.sections.otherTelemetry.forMoreInformation}
</li>
</ul>
<Title class="mt-16 !text-4xl font-bold" id="10-contact-us">
<Title class="mt-16 text-4xl font-bold" id="10-contact-us">
{privacyPolicy.sections.contact.title}
</Title>
<p>

8
src/tests/components/PlatformDownload.test.ts
View file

@ -73,11 +73,9 @@ describe('<PlatformDownload />', () => {
flathub: { all: { label: 'Flathub', link: '/flathub' } },
x86_64: {
tarball: { label: 'Tarball x86_64', link: '/tarball-x86_64', checksum: 'sha256' },
appImage: { label: 'AppImage x86_64', link: '/appimage-x86_64', checksum: 'sha256-appimage' },
},
aarch64: {
tarball: { label: 'Tarball ARM64', link: '/tarball-arm64', checksum: 'sha256-arm64' },
appImage: { label: 'AppImage ARM64', link: '/appimage-arm64', checksum: 'sha256-appimage-arm64' },
},
}
const result = await container.renderToString(PlatformDownload, {
@ -103,17 +101,11 @@ describe('<PlatformDownload />', () => {
expect(result).toContain('Tarball x86_64')
expect(result).toContain('/tarball-x86_64')
expect(result).toContain('sha256')
expect(result).toContain('AppImage x86_64')
expect(result).toContain('/appimage-x86_64')
expect(result).toContain('sha256-appimage')
// Test ARM64 section
expect(result).toContain('ARM64')
expect(result).toContain('Tarball ARM64')
expect(result).toContain('/tarball-arm64')
expect(result).toContain('sha256-arm64')
expect(result).toContain('AppImage ARM64')
expect(result).toContain('/appimage-arm64')
expect(result).toContain('sha256-appimage-arm64')
})
})

4
src/tests/components/release-data.test.ts
View file

@ -8,18 +8,14 @@ describe('getReleasesWithChecksums', () => {
'zen.installer.exe': 'winsum',
'zen.installer-arm64.exe': 'winarmsum',
'zen.linux-x86_64.tar.xz': 'linx86sum',
'zen-x86_64.AppImage': 'linx86appsum',
'zen.linux-aarch64.tar.xz': 'linaarchsum',
'zen-aarch64.AppImage': 'linaarchappsum',
}
const releases = getReleasesWithChecksums(checksums)
expect(releases.macos.universal.checksum).toBe('macsum')
expect(releases.windows.x86_64.checksum).toBe('winsum')
expect(releases.windows.arm64.checksum).toBe('winarmsum')
expect(releases.linux.x86_64.tarball.checksum).toBe('linx86sum')
expect(releases.linux.x86_64.appImage.checksum).toBe('linx86appsum')
expect(releases.linux.aarch64.tarball.checksum).toBe('linaarchsum')
expect(releases.linux.aarch64.appImage.checksum).toBe('linaarchappsum')
expect(releases.linux.flathub.all.label).toBe('Flathub')
expect(releases.linux.flathub.all.link).toBe('https://flathub.org/apps/app.zen_browser.zen')
})

8
src/tests/pages/download.spec.ts
View file

@ -81,13 +81,7 @@ test.describe('Download page download links', () => {
return {
mac: [releases.macos.universal],
windows: [releases.windows.x86_64, releases.windows.arm64],
linux: [
releases.linux.x86_64.tarball,
releases.linux.x86_64.appImage,
releases.linux.aarch64.tarball,
releases.linux.aarch64.appImage,
releases.linux.flathub.all,
],
linux: [releases.linux.x86_64.tarball, releases.linux.aarch64.tarball, releases.linux.flathub.all],
}
}

6
src/utils/merge.ts Normal file
View file

@ -0,0 +1,6 @@
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}

10
tsconfig.json
View file

@ -5,12 +5,8 @@
"jsxImportSource": "preact",
"baseUrl": ".",
"paths": {
"~/*": [
"./src/*"
]
"~/*": ["./src/*"]
},
"types": [
"@vitest/browser/providers/playwright"
]
"types": ["@vitest/browser/providers/playwright"]
}
}
}

11
vitest.config.ts
View file

@ -1,17 +1,14 @@
/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';
import { defaultExclude } from 'vitest/config';
import { getViteConfig } from 'astro/config'
import { defaultExclude } from 'vitest/config'
export default getViteConfig({
test: {
exclude: [
...defaultExclude,
"**/*.spec.ts",
],
exclude: [...defaultExclude, '**/*.spec.ts'],
setupFiles: ['./src/tests/vitest.setup.ts'],
coverage: {
provider: 'istanbul',
reporter: ['text', 'html'],
},
},
});
})