mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Merge pull request #602 from zen-browser/fix/title
fix(title): replace title css with tailwind
This commit is contained in:
commit
0086d9be7b
15 changed files with 65 additions and 2387 deletions
2313
package-lock.json
generated
2313
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -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 ."]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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: {
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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')
|
||||
})
|
||||
|
|
|
@ -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
6
src/utils/merge.ts
Normal 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))
|
||||
}
|
|
@ -5,12 +5,8 @@
|
|||
"jsxImportSource": "preact",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": [
|
||||
"./src/*"
|
||||
]
|
||||
"~/*": ["./src/*"]
|
||||
},
|
||||
"types": [
|
||||
"@vitest/browser/providers/playwright"
|
||||
]
|
||||
"types": ["@vitest/browser/providers/playwright"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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'],
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue