feat: add download page and update button links; remove favicon.svg and release notes page
Some checks are pending
Upload to bunny / upload (1.22.3) (push) Waiting to run

This commit is contained in:
mr. M 2024-12-08 17:51:57 +01:00
parent 2550e15b2f
commit e2eae44969
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
18 changed files with 246 additions and 64 deletions

74
package-lock.json generated
View file

@ -14,6 +14,7 @@
"astro": "^4.16.13",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"free-astro-components": "^1.1.1",
"lucide-astro": "^0.460.0",
"motion": "^11.13.1",
"postcss": "8.4.21",
@ -2971,6 +2972,79 @@
}
}
},
"node_modules/free-astro-components": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/free-astro-components/-/free-astro-components-1.1.1.tgz",
"integrity": "sha512-yCxo9TrXuVn5jejd7Pt3GjxKrvpZQaCVya9B7XXtSk9KERIsWO5zBMqbfn73eVsZAFk57BRUVQjdhO0ic2lB1w==",
"dependencies": {
"@astrojs/check": "^0.8.2",
"astro": "^4.12.2",
"typescript": "^5.5.3"
}
},
"node_modules/free-astro-components/node_modules/@astrojs/check": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@astrojs/check/-/check-0.8.3.tgz",
"integrity": "sha512-ajcSe+ezX5jCc3dreQlWzbknzXgSGnDETNe3C1mawUOtGpO4t5z2YGaD0y+wzB84lmgPWaWZa0fKSPwLq/wUHw==",
"dependencies": {
"@astrojs/language-server": "^2.12.7",
"chokidar": "^3.5.3",
"fast-glob": "^3.3.1",
"kleur": "^4.1.5",
"yargs": "^17.7.2"
},
"bin": {
"astro-check": "dist/bin.js"
},
"peerDependencies": {
"typescript": "^5.0.0"
}
},
"node_modules/free-astro-components/node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/free-astro-components/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"engines": {
"node": ">=8.6"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/free-astro-components/node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",

View file

@ -16,6 +16,7 @@
"astro": "^4.16.13",
"astro-navbar": "^2.3.7",
"autoprefixer": "10.4.14",
"free-astro-components": "^1.1.1",
"lucide-astro": "^0.460.0",
"motion": "^11.13.1",
"postcss": "8.4.21",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 749 B

BIN
src/assets/app-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View file

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 161 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

Before After
Before After

View file

@ -1,10 +1,16 @@
---
const { class: className, isPrimary, isBordered } = Astro.props;
const { class: className, isPrimary, isBordered, href } = Astro.props;
---
<button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</button>
{href ? (
<a href={href} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</a>
) : (
<button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</button>
)}
<style>
button {
font-size: .9rem;

View file

@ -1,18 +1,17 @@
---
// Circles.astro
const { white, multiplier = 0.9, class: classList } = Astro.props;
const sizes = [216, 396, 576, 756]
const borderWidths = [20, 30, 40, 50]
const multiplier = 0.9;
---
<div id="circles" class="inset-0 overflow-hidden pointer-events-none -z-10">
<div id="circles" class:list={["inset-0 overflow-hidden pointer-events-none", classList]}>
<div class="mx-auto opacity-10 lg:opacity-100">
{[...Array(4)].map((_, i) => (
<div class="absolute rounded-full border-coral -translate-x-1/2 -translate-y-1/2"
<div class:list={["absolute rounded-full -translate-x-1/2 -translate-y-1/2", white ? "border-white" : "border-coral"]}
style={{
width: `${multiplier*sizes[i]}px`,
height: `${multiplier*sizes[i]}px`,
borderWidth: `${multiplier*borderWidths[i]}px`,
}}
width: `${multiplier*sizes[i]}px`,
height: `${multiplier*sizes[i]}px`,
borderWidth: `${multiplier*borderWidths[i]}px`,
}}
/>
))}
</div>

View file

@ -10,15 +10,21 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
<footer
id="footer"
class="flex flex-col w-full p-4 lg:p-24 gap-24 md:gap-[15%] bg-coral border-t border-dark"
class="flex flex-col w-full p-4 lg:p-24 !pb-0 gap-24 md:gap-[15%] bg-dark text-paper border-t border-dark relative overflow-hidden"
>
<Title>Zen Browser</Title>
<div class="flex flex-col justify-between w-full lg:flex-row gap-6">
<Button isPrimary class="h-fit">
<div>
<Title class="!text-paper">Zen Browser</Title>
<Description class="w-1/3">
Beautifully designed, privacy-focused, and packed with features. We care
about your experience, not your data.
</Description>
</div>
<div class="flex flex-col justify-between w-full lg:flex-row gap-6 lg:pr-52 my-12">
<Button href="/download" isPrimary class="h-fit bg-paper !text-dark">
Download
<ArrowRight class="size-4" />
</Button>
<div class="gap-6 flex flex-col">
<div class="gap-10 flex flex-col">
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
Follow Us
@ -34,40 +40,40 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
About Us
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
<a href="/privacy-policy" class="font-normal">Privacy Policy</a>
<a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal">Report an Issue</a>
</div>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
Get Started
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
<a href="/download" class="font-normal">Download</a>
<a href="/mods" class="font-normal">Zen Mods</a>
<a href="/release-notes" class="font-normal">Release Notes</a>
<a href="download?twilight" class="font-normal">Twilight</a>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
Get Help
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
</div>
</div>
<div class="flex flex-col gap-2">
<Description class="!font-semibold">
About
</Description>
<div class="opacity-80 flex flex-col">
<a href="/about" class="font-normal">About Us</a>
<a href="/about" class="font-normal">About Us</a>
<a href="https://discord.gg/zen-browser" class="font-normal">Discord</a>
<a href="https://uptime.zen-browser.app/" class="font-normal">Uptime Status</a>
</div>
</div>
</div>
</footer>
<div class="flex w-full h-32 items-center">
<div class="flex">
Made with ❤️ by the <a href="/about" class="font-bold inline-block ml-2">Zen Browser Team</a>
</div>
<Circles white multiplier={0.7} class="ml-auto mb-[-100px] mr-[-80px] hidden lg:block" />
</div>
</footer>

View file

@ -19,7 +19,7 @@ import { ArrowRight } from 'lucide-astro'
/>We care about your experience, not your data.</Description
>
<div class="mt-6 gap-3 sm:gap-6 flex flex-row">
<Button isPrimary>
<Button href="/download" isPrimary>
Download
<ArrowRight class="size-4" />
</Button>

View file

@ -100,7 +100,7 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
<a class="flex items-center" href="/mods">
<span>Mods</span>
</a>
<Button isPrimary>
<Button href="/download" isPrimary>
Download
<ArrowRight class="size-4" />
</Button>

View file

@ -1,9 +1,13 @@
---
import type { ReleaseNote } from '../release-notes'
export type Props = ReleaseNote
const props = Astro.props
import { Accordion, AccordionItem } from 'free-astro-components'
const date = new Date(Date.parse(props.date));
import type { ReleaseNote } from '../release-notes'
export type Props = ReleaseNote;
const props = Astro.props;
const [day, month, year] = props.date.split('/');
const date = new Date(Date.parse(`${year}-${month}-${day}`));
---
<section
@ -12,10 +16,10 @@ const date = new Date(Date.parse(props.date));
>
<div class="mb-0 hidden lg:block ml-5 md:ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground">
{date.toLocaleDateString('en-US', { dateStyle: 'long'})}
<div class="mt-2 flex items-center text-blue-500 opacity-60">
<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
<span class="mx-1 text-muted-foreground">•</span>
<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
<div class="mt-2 flex items-center">
<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
<span class="text-muted-foreground mx-auto">•</span>
<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
</div>
</div>
@ -32,9 +36,71 @@ const date = new Date(Date.parse(props.date));
) : null
}
<div class="mt-8" data-orientation="vertical"></div>
<!--TODO: Fixes, Breaking changes, Features -->
<Accordion>
{props.fixes ? (
<AccordionItem title="Fixes" name="fixes">
<ul class="list-disc list-inside">
{props.fixes.map((fix: any) => (
<li class="text-md text-muted-foreground">
{fix.description}
{fix.issue ? (
<a
class="text-blue-500"
href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
rel="noopener noreferrer"
target="_blank"
>
#{fix.issue}
</a>
) : null}
</li>
))}
</ul>
</AccordionItem>
) : null}
{props.features ? (
<AccordionItem title="Features" name="features">
<ul class="list-disc list-inside">
{props.features.map((feature: string) => (
<li class="text-md text-muted-foreground">{feature}</li>
))}
</ul>
</AccordionItem>
) : null}
{props.themeChanges ? (
<AccordionItem title="Theme Changes" name="themeChanges">
<ul class="list-disc list-inside">
{props.themeChanges.map((themeChange: string) => (
<li class="text-md text-muted-foreground">{themeChange}</li>
))}
</ul>
</AccordionItem>
) : null}
{props.breakingChanges ? (
<AccordionItem title="Breaking Changes" name="breakingChanges">
<ul class="list-disc list-inside">
{props.breakingChanges.map((breakingChange: string) => (
<li class="text-md text-muted-foreground">{breakingChange}</li>
))}
</ul>
</AccordionItem>
) : null}
</div>
</section>
<style is:global>
.ac-accordion-item-title {
@apply !text-dark;
&:hover {
@apply !text-dark/70;
}
}
.ac-accordion-item {
transition: height 0.2s ease-in-out !important;
& li {
@apply !text-dark/70;
}
}
</style>

View file

@ -10,7 +10,7 @@ import Footer from "../components/Footer.astro";
---
<!doctype html>
<html lang="en">
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<!-- no bot here for now -->
@ -19,7 +19,7 @@ import Footer from "../components/Footer.astro";
<!-- end -->
<meta name="description" content="Beautifully designed, privacy-focused, and packed with features. We care about your experience, not your data." />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<meta name="theme-color" content="#da755b">
@ -35,7 +35,7 @@ import Footer from "../components/Footer.astro";
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=bricolage-grotesque:200,300,400,500,600,700,800|instrument-serif:400,400i" rel="stylesheet" />
</head>
<body class="bg-paper font-['bricolage-grotesque']">
<body class="bg-paper font-['bricolage-grotesque'] text-dark">
<slot />
<Footer />
<NavBar />

24
src/pages/download.astro Normal file
View file

@ -0,0 +1,24 @@
---
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 { Image } from 'astro:assets';
import myImage from '../assets/app-icon.png';
---
<Layout title="Welcome to Zen">
<main class="h-screen flex flex-col justify-center items-center">
<div class="flex">
<Image src={myImage } alt="Zen Browser" class="w-24 h-24" />
<div class="p-4 mb-24 lg:w-1/2">
<Title>Try out Zen!</Title>
<Description>
Start browsing the web with Zen Browser today. Beautifully designed,
privacy-focused, and packed with features!
</Description>
</div>
</div>
</main>
</Layout>

View file

@ -0,0 +1,14 @@
---
import { releaseNotes } from '../../release-notes'
import Layout from '../../layouts/Layout.astro';
export async function getStaticPaths() {
return releaseNotes.map((release: any) => ({
params: { slug: release.version },
props: { ...release },
}));
}
const release = Astro.props;
return Astro.redirect(`/release-notes#${release.version}`);
---

View file

@ -1,7 +1,8 @@
---
import Layout from '../layouts/Layout.astro'
import ReleaseNoteItem from '../components/ReleaseNoteItem.astro'
import { releaseNotes } from '../release-notes'
import Layout from '../../layouts/Layout.astro'
import ReleaseNoteItem from '../../components/ReleaseNoteItem.astro'
import { releaseNotes } from '../../release-notes'
import Title from '../../components/Title.astro'
---
<Layout title="Release Notes">
@ -11,7 +12,7 @@ import { releaseNotes } from '../release-notes'
<div
class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
>
<h1 class="mt-48 text-4xl font-bold">Release Notes</h1>
<Title class="mt-48 text-4xl font-bold">Release Notes</Title>
<p class="text-muted-foreground mt-8 text-lg">
Stay up to date with the latest changes to Zen Browser! Since the <a
class="text-blue-500"
@ -23,7 +24,7 @@ import { releaseNotes } from '../release-notes'
>, we've been working hard to make Zen Browser the best it can be.
Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((notes) => <ReleaseNoteItem {...notes} />)}
{releaseNotes.map((notes: any) => <ReleaseNoteItem {...notes} />)}
</div>
</main>
</Layout>