mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
feat: remove unused assets and update release notes with new features and improvements
This commit is contained in:
mr. M
parent
18315556a6
commit
39149fabd1
27 changed files with 244 additions and 437 deletions
|
|
@ -10,10 +10,6 @@
|
|||
"wrangler": "wrangler",
|
||||
"astro": "astro"
|
||||
},
|
||||
"overrides": {
|
||||
"react": "npm:@preact/compat@latest",
|
||||
"react-dom": "npm:@preact/compat@latest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@astrojs/cloudflare": "^12.2.1",
|
||||
|
|
|
|||
BIN
src/assets/HomePageVideo.mp4
Normal file
BIN
src/assets/HomePageVideo.mp4
Normal file
Binary file not shown.
BIN
src/assets/Workspaces.mp4
Normal file
BIN
src/assets/Workspaces.mp4
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 513 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 522 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 525 KiB |
BIN
src/assets/whats-new.mp4
Normal file
BIN
src/assets/whats-new.mp4
Normal file
Binary file not shown.
|
|
@ -1,30 +1,30 @@
|
|||
---
|
||||
import Title from '../components/Title.astro'
|
||||
import Description from '../components/Description.astro'
|
||||
import Button from '../components/Button.astro'
|
||||
import { motion } from 'motion/react'
|
||||
import { Github, Check } from 'lucide-astro'
|
||||
import { getTitleAnimation } from '../animations'
|
||||
import Video from './Video.astro'
|
||||
import WorkspacesVideo from '../assets/Workspaces.mp4'
|
||||
---
|
||||
|
||||
<section
|
||||
id="Community"
|
||||
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:py-24"
|
||||
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:py-36"
|
||||
>
|
||||
<Title class="px-4 font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
Community
|
||||
</motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.4)}> Driven </motion.span>
|
||||
</Title>
|
||||
<Description class="mb-2 px-4 text-6xl font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}> What </motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.4)}> Defines </motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.6)}> Zen? </motion.span>
|
||||
</Description>
|
||||
<motion.p
|
||||
client:load
|
||||
{...getTitleAnimation(0.6)}
|
||||
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
|
||||
>
|
||||
We are a community-driven project. We listen to our users and build the
|
||||
features they want. Zen focuses on privacy and customization, not on data
|
||||
collection.
|
||||
We make it not only a priority but a necessity to ensure that Zen provides
|
||||
always the best experience for you. We are committed to making Zen the most
|
||||
beautiful, productive, and privacy-focused browser out there.
|
||||
</motion.p>
|
||||
<div
|
||||
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
|
||||
|
|
@ -32,7 +32,7 @@ import { getTitleAnimation } from '../animations'
|
|||
<motion.span client:load {...getTitleAnimation(0.8)}>
|
||||
<Button class:list={['px-4']} href="https://github.com/zen-browser">
|
||||
<Github class="size-4" />
|
||||
<span>View on GitHub</span>
|
||||
<span>Free and open-source</span>
|
||||
</Button>
|
||||
</motion.span>
|
||||
<motion.div
|
||||
|
|
@ -41,7 +41,7 @@ import { getTitleAnimation } from '../animations'
|
|||
className="flex items-center gap-4"
|
||||
>
|
||||
<Check class="size-4" />
|
||||
<span>Always on the latest version of Firefox</span>
|
||||
<span>Simple yet powerful</span>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
client:load
|
||||
|
|
@ -49,7 +49,22 @@ import { getTitleAnimation } from '../animations'
|
|||
className="flex items-center gap-4"
|
||||
>
|
||||
<Check class="size-4" />
|
||||
<span>Privacy-focused</span>
|
||||
<span>True privacy and always up-to-date</span>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.span
|
||||
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
|
||||
client:load
|
||||
{...getTitleAnimation(1.4)}
|
||||
>
|
||||
<Video
|
||||
src={WorkspacesVideo}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="mb-24 mt-12 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
||||
/>
|
||||
</motion.span>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,184 +0,0 @@
|
|||
---
|
||||
import Description from '../components/Description.astro'
|
||||
|
||||
import browserSidebar from '../assets/browser-sidebar.webm'
|
||||
import browserWorkspaces from '../assets/browser-workspaces.webm'
|
||||
import browserCompactMode from '../assets/browser-compactmode.webm'
|
||||
import browserGlance from '../assets/browser-glance.webm'
|
||||
import browserSplitViews from '../assets/browser-splitview.webm'
|
||||
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '../animations'
|
||||
import Video from './Video.astro'
|
||||
---
|
||||
|
||||
<section
|
||||
id="features"
|
||||
class="relative flex w-full flex-col px-4 py-36 lg:px-12 xl:px-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center gap-24 xl:gap-48">
|
||||
<div class="flex w-full flex-col px-2 md:px-12 lg:px-24 xl:text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Description class="text-6xl font-bold"
|
||||
>How does Zen <br class="lg:hidden" />keep <u class="font-extrabold"
|
||||
>you</u
|
||||
><br class="hidden lg:block" /> always <span
|
||||
class="font-extrabold text-coral">organized</span
|
||||
>?</Description
|
||||
>
|
||||
</motion.span>
|
||||
<Description class="mt-4 text-lg font-normal">
|
||||
Zen is designed to help you focus on what matters most. Here are some<br
|
||||
class="hidden lg:block"
|
||||
/> of the features that help you stay focused.
|
||||
</Description>
|
||||
</div>
|
||||
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Workspaces
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
With Zen, you can create multiple workspaces to keep your tabs
|
||||
organized.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserWorkspaces}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-3xl object-cover shadow-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
Compact Mode
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
Zen's compact mode allows you to focus on your work without any
|
||||
distractions.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserCompactMode}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-3xl object-cover shadow-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Zen Glance
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
Zen's glance feature allows you to view links without <i>actually</i>
|
||||
opening them.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserGlance}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-3xl object-cover shadow-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Split Views
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
Zen's split view feature allows you to view multiple tabs at once.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserSplitViews}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-3xl object-cover shadow-md"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
Sidebar
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
Zen's sidebar feature allows you to view all your tabs in one place.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserSidebar}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-3xl object-cover shadow-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
function changeFeature(index: number) {
|
||||
document
|
||||
.querySelectorAll('#feature-list .feature')
|
||||
.forEach((feature: any, i) => {
|
||||
if (i === index) {
|
||||
feature.setAttribute('active', '')
|
||||
} else {
|
||||
feature.removeAttribute('active')
|
||||
}
|
||||
})
|
||||
document
|
||||
.querySelectorAll('#feature-list-image > *')
|
||||
.forEach((img: any, i) => {
|
||||
img.style.opacity = i === index ? 1 : 0
|
||||
img.classList.toggle('absolute', i !== index)
|
||||
img.classList.toggle('hidden', i !== index)
|
||||
})
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll('#feature-list .feature')
|
||||
.forEach((feature: any, i) => {
|
||||
feature.addEventListener('click', () => {
|
||||
changeFeature(i)
|
||||
})
|
||||
})
|
||||
changeFeature(0)
|
||||
</script>
|
||||
<style>
|
||||
.long-feature {
|
||||
@apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
||||
|
||||
& > div:first-child {
|
||||
@apply xl:min-w-[40%];
|
||||
}
|
||||
|
||||
& video {
|
||||
@apply xl:h-96 2xl:h-[32rem];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,23 +3,8 @@ import Title from '../components/Title.astro'
|
|||
import Description from '../components/Description.astro'
|
||||
import Button from '../components/Button.astro'
|
||||
import Circles from '../components/Circles.astro'
|
||||
import SocialMediaStrip from '../components/SocialMediaStrip.astro'
|
||||
import { ArrowRight } from 'lucide-astro'
|
||||
|
||||
import { library, icon } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faMastodon,
|
||||
faBluesky,
|
||||
faGithub,
|
||||
faTwitter,
|
||||
faReddit,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
library.add(faMastodon, faBluesky, faGithub, faTwitter, faReddit)
|
||||
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
|
||||
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
|
||||
const Github = icon({ prefix: 'fab', iconName: 'github' })
|
||||
const Twitter = icon({ prefix: 'fab', iconName: 'twitter' })
|
||||
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
|
||||
---
|
||||
|
||||
<footer
|
||||
|
|
@ -45,48 +30,7 @@ const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
|
|||
<div class="flex flex-col gap-10">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Description class="!font-semibold"> Follow Us </Description>
|
||||
<div class="flex items-center gap-4 opacity-80">
|
||||
<a
|
||||
href="https://github.com/zen-browser"
|
||||
target="_blank"
|
||||
class="font-bold"
|
||||
aria-label="Visit Zen Browser on GitHub"
|
||||
>
|
||||
<Fragment set:html={Github.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/zen_browser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Twitter"
|
||||
>
|
||||
<Fragment set:html={Twitter.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://fosstodon.org/@zenbrowser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Mastodon"
|
||||
>
|
||||
<Fragment set:html={Mastodon.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://bsky.app/profile/zen-browser.app"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Bluesky"
|
||||
>
|
||||
<Fragment set:html={Bluesky.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.reddit.com/r/zen_browser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Reddit"
|
||||
>
|
||||
<Fragment set:html={Reddit.html} />
|
||||
</a>
|
||||
</div>
|
||||
<SocialMediaStrip />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Description class="!font-semibold"> About Us </Description>
|
||||
|
|
@ -135,7 +79,7 @@ const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
|
|||
<div class="flex h-32 w-full items-center">
|
||||
<div class="flex">
|
||||
Made with ❤️ by the <a href="/about" class="ml-2 inline-block font-bold"
|
||||
>Zen Browser Team</a
|
||||
>Zen Team</a
|
||||
>
|
||||
</div>
|
||||
<Circles
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import Title from '../components/Title.astro'
|
|||
import Description from '../components/Description.astro'
|
||||
import Button from '../components/Button.astro'
|
||||
import { Image } from 'astro:assets'
|
||||
import myImage from '../assets/browser.png'
|
||||
import HomePageVideo from '../assets/HomePageVideo.mp4'
|
||||
import { ArrowRight } from 'lucide-astro'
|
||||
import { motion } from 'motion/react'
|
||||
import { getTitleAnimation } from '../animations'
|
||||
import Video from './Video.astro'
|
||||
|
||||
let titleAnimationCounter = 0
|
||||
function getNewAnimationDelay() {
|
||||
|
|
@ -25,7 +26,7 @@ function getHeroTitleAnimation() {
|
|||
>
|
||||
<div class="flex h-full flex-col items-center justify-center">
|
||||
<Title
|
||||
class="relative px-12 text-left !font-normal leading-[108px] md:text-center md:!text-7xl lg:px-0 lg:!text-9xl"
|
||||
class="relative px-12 text-center !font-normal leading-[108px] md:!text-7xl lg:px-0 lg:!text-9xl"
|
||||
>
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
welcome
|
||||
|
|
@ -45,8 +46,9 @@ function getHeroTitleAnimation() {
|
|||
</motion.span>
|
||||
</Title>
|
||||
<motion.span client:load {...getHeroTitleAnimation()}>
|
||||
<Description class="px-12 text-left md:text-center lg:px-0"
|
||||
<Description class="px-12 text-center lg:px-0"
|
||||
>Beautifully designed, privacy-focused, and packed with features.<br
|
||||
class="hidden md:block"
|
||||
/>We care about your experience, not your data.</Description
|
||||
>
|
||||
</motion.span>
|
||||
|
|
@ -68,10 +70,13 @@ function getHeroTitleAnimation() {
|
|||
client:load
|
||||
{...getHeroTitleAnimation()}
|
||||
>
|
||||
<Image
|
||||
src={myImage}
|
||||
alt="Zen browser"
|
||||
<Video
|
||||
src={HomePageVideo}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
||||
loading="eager"
|
||||
/>
|
||||
</motion.span>
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
---
|
||||
import Title from '../components/Title.astro'
|
||||
import Description from '../components/Description.astro'
|
||||
import { Image } from 'astro:assets'
|
||||
import { motion } from 'motion/react'
|
||||
|
||||
import browserCollapsed from '../assets/collapsed.png'
|
||||
import browseMultiToolbar from '../assets/multiple-toolbar.png'
|
||||
import browserSingleToolbar from '../assets/single-toolbar.png'
|
||||
import tutaLogo from '../assets/tuta-logo.png'
|
||||
import Button from './Button.astro'
|
||||
import { ArrowRight } from 'lucide-astro'
|
||||
|
||||
import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
||||
---
|
||||
|
||||
<section id="sponsors" class="px-4 lg:flex-row lg:px-12 lg:py-32 xl:px-24">
|
||||
<div class="mx-auto flex flex-col px-6 lg:w-1/2 lg:px-0 lg:text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Title class="font-bold">Our Sponsors</Title>
|
||||
</motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.4)}>
|
||||
<Description>
|
||||
We are grateful to our sponsors for their support. They help us to keep
|
||||
the project alive.<br />You can also be part of this journey by donating <a
|
||||
href="/donate"
|
||||
class="text-coral">here</a
|
||||
>!
|
||||
</Description>
|
||||
</motion.span>
|
||||
<div class="relative mt-8 flex items-center justify-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.6)}>
|
||||
<a href="https://tuta.com/" target="_blank" class="w-fit">
|
||||
<Image src={tutaLogo} alt="Tuta" class="h-16 w-fit object-contain" />
|
||||
</a>
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
id="customization"
|
||||
class="relative flex w-full flex-col overflow-y-hidden px-10 py-36 pt-24 md:px-12 lg:flex-row lg:gap-12 xl:px-52"
|
||||
>
|
||||
<div>
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Title
|
||||
>Customizable<br class="md:hidden" /> to <br
|
||||
class="hidden md:block"
|
||||
/>the last pixel</Title
|
||||
>
|
||||
</motion.span>
|
||||
<motion.span client:load {...getTitleAnimation(0.4)}>
|
||||
<Description class="lg:w-1/2 lg:px-0">
|
||||
Experience a new standard in web browsing with Zen Browser. Designed
|
||||
from the ground up for complete customization, Zen allows you to tailor
|
||||
every aspect of your browsing experience to meet your specific needs.
|
||||
Your imagination is the limit, literally.
|
||||
</Description>
|
||||
</motion.span>
|
||||
<div class="mt-4 flex gap-4">
|
||||
<motion.span client:load {...getTitleAnimation(0.6)}>
|
||||
<Button isPrimary href="/mods">
|
||||
Explore Zen Mods
|
||||
<ArrowRight className="size-4" />
|
||||
</Button>
|
||||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="relative ml-16 mt-32 flex h-32 md:mt-52 lg:mx-0 lg:mt-0 lg:w-1/2"
|
||||
id="browser-images"
|
||||
>
|
||||
<Image
|
||||
src={browserCollapsed}
|
||||
alt="Zen browser"
|
||||
class="absolute left-[65%] top-[5%] w-2/3 -translate-x-1/2 rounded-md shadow-md"
|
||||
/>
|
||||
<Image
|
||||
src={browseMultiToolbar}
|
||||
alt="Zen browser"
|
||||
class="absolute left-1/2 top-1/2 mx-auto w-2/3 -translate-x-1/2 transform rounded-md"
|
||||
/>
|
||||
<Image
|
||||
src={browserSingleToolbar}
|
||||
alt="Zen browser"
|
||||
class="absolute left-[10%] top-[15%] z-10 w-2/3 -translate-x-1/2 rounded-md shadow-md"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<style>
|
||||
#browser-images {
|
||||
& img:nth-child(1) {
|
||||
transform: rotate(5deg) scale(1.05) translateX(-52%) translateY(-10%);
|
||||
}
|
||||
|
||||
& img:nth-child(2) {
|
||||
transform: rotate(2deg) scale(1.05) translateX(-50%) translateY(10%);
|
||||
}
|
||||
|
||||
& img:nth-child(3) {
|
||||
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
src/components/SocialMediaStrip.astro
Normal file
62
src/components/SocialMediaStrip.astro
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
const { gap = 4 } = Astro.props
|
||||
|
||||
import { library, icon } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faMastodon,
|
||||
faBluesky,
|
||||
faGithub,
|
||||
faTwitter,
|
||||
faReddit,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
library.add(faMastodon, faBluesky, faGithub, faTwitter, faReddit)
|
||||
const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
|
||||
const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
|
||||
const Github = icon({ prefix: 'fab', iconName: 'github' })
|
||||
const Twitter = icon({ prefix: 'fab', iconName: 'twitter' })
|
||||
const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
|
||||
---
|
||||
|
||||
<div class={`flex items-center opacity-80 gap-${gap}`}>
|
||||
<a
|
||||
href="https://github.com/zen-browser"
|
||||
target="_blank"
|
||||
class="font-bold"
|
||||
aria-label="Visit Zen Browser on GitHub"
|
||||
>
|
||||
<Fragment set:html={Github.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/zen_browser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Twitter"
|
||||
>
|
||||
<Fragment set:html={Twitter.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://fosstodon.org/@zenbrowser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Mastodon"
|
||||
>
|
||||
<Fragment set:html={Mastodon.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://bsky.app/profile/zen-browser.app"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Bluesky"
|
||||
>
|
||||
<Fragment set:html={Bluesky.html} />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.reddit.com/r/zen_browser"
|
||||
target="_blank"
|
||||
class="font-normal"
|
||||
aria-label="Visit Zen Browser on Reddit"
|
||||
>
|
||||
<Fragment set:html={Reddit.html} />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -45,6 +45,7 @@ import MobileNavBar from '../components/MobileNavBar'
|
|||
<link rel="sitemap" href="/sitemap-0.xml" />
|
||||
|
||||
{isHome && (
|
||||
// @prettier-ignore
|
||||
<!-- Injecting schema to homepage only (for SEO) -->
|
||||
<script is:inline type="application/ld+json">
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import Title from '../components/Title.astro'
|
|||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="About - Zen Browser" description="We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected.">
|
||||
<Layout
|
||||
title="About - Zen Browser"
|
||||
description="We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected."
|
||||
>
|
||||
<main
|
||||
class="relative flex min-h-screen flex-col items-center justify-center py-24"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -419,14 +419,12 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
|
|||
|
||||
if (!isTwilight) {
|
||||
document
|
||||
.getElementById('linux-flathub-download')
|
||||
?.addEventListener('click', () => {
|
||||
window.open('https://flathub.org/apps/app.zen_browser.zen')
|
||||
})
|
||||
}
|
||||
else {
|
||||
document
|
||||
.getElementById('linux-flathub-download')?.classList.add('hidden')
|
||||
.getElementById('linux-flathub-download')
|
||||
?.addEventListener('click', () => {
|
||||
window.open('https://flathub.org/apps/app.zen_browser.zen')
|
||||
})
|
||||
} else {
|
||||
document.getElementById('linux-flathub-download')?.classList.add('hidden')
|
||||
}
|
||||
|
||||
document
|
||||
|
|
|
|||
|
|
@ -2,16 +2,12 @@
|
|||
import Layout from '../layouts/Layout.astro'
|
||||
import Hero from '../components/Hero.astro'
|
||||
import Community from '../components/Community.astro'
|
||||
import Features from '../components/Features.astro'
|
||||
import HomeExtras from '../components/HomeExtras.astro'
|
||||
---
|
||||
|
||||
<Layout title="Zen Browser" isHome>
|
||||
<main>
|
||||
<Hero />
|
||||
<Community />
|
||||
<Features />
|
||||
<HomeExtras />
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,11 @@ const dates = {
|
|||
}
|
||||
---
|
||||
|
||||
<Layout title={`${mod.name} - Zen Mods`} description={`Learn more about ${mod.name} mod available on Zen Browser`} ogImage={mod.image}>
|
||||
<Layout
|
||||
title={`${mod.name} - Zen Mods`}
|
||||
description={`Learn more about ${mod.name} mod available on Zen Browser`}
|
||||
ogImage={mod.image}
|
||||
>
|
||||
<main class="mt-6 2xl:mt-0">
|
||||
<div class="mx-auto mb-24 mt-12 flex flex-col gap-6 px-8 lg:mt-32 lg:w-1/2">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,3 +1,72 @@
|
|||
---
|
||||
return Astro.redirect('/release-notes/latest')
|
||||
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 { releaseNotes } from '../release-notes'
|
||||
import whatsNewText from '../release-notes/whats-new.json'
|
||||
import Video from '../components/Video.astro'
|
||||
|
||||
import whatsNewVideo from '../assets/whats-new.mp4'
|
||||
|
||||
const latestVersion = releaseNotes[0]
|
||||
---
|
||||
|
||||
<Layout title="What's New - Zen Browser">
|
||||
<main
|
||||
class="relative mx-auto flex flex-col items-center gap-24 px-6 pb-52 pt-36 lg:px-24 xl:flex-row"
|
||||
>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div>
|
||||
<Description class="text-5xl font-bold md:text-6xl"
|
||||
>What's New in {latestVersion.version}!</Description
|
||||
>
|
||||
<Description>{latestVersion.date}</Description>
|
||||
</div>
|
||||
<div>
|
||||
<Fragment set:html={whatsNewText[0].replace(/\n/g, '<br>')} />
|
||||
</div>
|
||||
<ul class="hidden flex-col gap-2 md:flex">
|
||||
<a
|
||||
href="https://github.com/zen-browser/desktop/issues/new/choose"
|
||||
target="_blank"
|
||||
>
|
||||
<li class="ml-3 list-disc">
|
||||
<Description class="text-base font-bold"
|
||||
>Report an issue</Description
|
||||
>
|
||||
</li>
|
||||
</a>
|
||||
<a href="https://discord.gg/zen-browser" target="_blank">
|
||||
<li class="ml-3 list-disc">
|
||||
<Description class="text-base font-bold"
|
||||
>Join our Discord</Description
|
||||
>
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
<div class="flex flex-col gap-8 md:flex-row">
|
||||
<Button
|
||||
href={`/releases#${latestVersion.version}`}
|
||||
isPrimary
|
||||
class="flex w-fit items-center gap-2"
|
||||
>
|
||||
<span>Read the full release notes</span>
|
||||
<ArrowRight />
|
||||
</Button>
|
||||
<SocialMediaStrip gap="6" />
|
||||
</div>
|
||||
</div>
|
||||
<Video
|
||||
src={whatsNewVideo}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="w-full rounded-3xl object-cover shadow-lg"
|
||||
/>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -363,9 +363,7 @@
|
|||
"version": "1.0.0-a.13",
|
||||
"date": "05/08/2024",
|
||||
"extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
|
||||
"features": [
|
||||
"Allow to remember sidebar width even after collapsing it."
|
||||
],
|
||||
"features": ["Allow to remember sidebar width even after collapsing it."],
|
||||
"fixes": [
|
||||
{
|
||||
"description": "Task Manager Icon Missing in Flatpak Version",
|
||||
|
|
@ -921,9 +919,7 @@
|
|||
"image": true,
|
||||
"workflowId": 11000317603,
|
||||
"extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
|
||||
"features": [
|
||||
"Added a new system for handling keyboard shortcuts"
|
||||
],
|
||||
"features": ["Added a new system for handling keyboard shortcuts"],
|
||||
"fixes": [
|
||||
{
|
||||
"description": "The New Tab button is not visible",
|
||||
|
|
@ -980,9 +976,7 @@
|
|||
"Enabled container tabs by default",
|
||||
"Improved Expand Tabs on Hover layout"
|
||||
],
|
||||
"themeChanges": [
|
||||
"Toggle inputs will not use the themed tertiary color"
|
||||
],
|
||||
"themeChanges": ["Toggle inputs will not use the themed tertiary color"],
|
||||
"breakingChanges": [
|
||||
"The keyboard shortcuts will be overriden by the defaults ones in this update"
|
||||
],
|
||||
|
|
@ -1279,9 +1273,7 @@
|
|||
"issue": 2156
|
||||
}
|
||||
],
|
||||
"breakingChanges": [
|
||||
"Removed Show Expand Button option from settings"
|
||||
],
|
||||
"breakingChanges": ["Removed Show Expand Button option from settings"],
|
||||
"themeChanges": [
|
||||
"The variable '--zen-main-browser-background' will now contain the generated gradient",
|
||||
"Added the 'unread' attribute for background tabs that haven't been accessed yet"
|
||||
|
|
@ -1384,9 +1376,7 @@
|
|||
"description": "Fixed wrong aligment on glance action buttons"
|
||||
}
|
||||
],
|
||||
"features": [
|
||||
"No new features, sorry"
|
||||
]
|
||||
"features": ["No new features, sorry"]
|
||||
},
|
||||
{
|
||||
"version": "1.0.1-a.17",
|
||||
|
|
@ -2313,7 +2303,7 @@
|
|||
"workflowId": 13505992592,
|
||||
"date": "24/02/2025"
|
||||
},
|
||||
{
|
||||
{
|
||||
"version": "1.8.2b",
|
||||
"image": false,
|
||||
"extra": "Another update with many bug fixes!",
|
||||
|
|
@ -2330,5 +2320,42 @@
|
|||
],
|
||||
"workflowId": 13530880093,
|
||||
"date": "25/02/2025"
|
||||
},
|
||||
{
|
||||
"version": "1.9b",
|
||||
"image": false,
|
||||
"extra": "Another nice update for Zen! This time we've added a new feature that allows you drag and drop tabs into the browser to split them!",
|
||||
"fixes": [
|
||||
"Fixed pinned tabs being subject to appearing on the essentials container",
|
||||
"Fixed opening bookmarks on empty tab pages",
|
||||
"Fixed automatic glance opening from the edge of the screen",
|
||||
"Fixed background gradients not showing the colors in the correct order",
|
||||
"Fixed creating essentials being in the wrong order",
|
||||
"Fixed watermark not waiting enough time and startup layout",
|
||||
"Fixed reordering tabs not being correctly saved for pinned tabs",
|
||||
"Fixed bookmark items not opening",
|
||||
"Fixed not hiding empty tab from add-ons, crashing the browser on some cases",
|
||||
"Fixed compact mode sidebar animating on an empty state and not animating properly when having the URL bar floating",
|
||||
"Fixed expanding glance not opening in the correct possition when having container specific essentials",
|
||||
"Fixed external links not opening in the correct workspace container",
|
||||
"Fixed appimage not being able to set itself as default web browser",
|
||||
"Fixed closing the browser in an empty state opening about:blank on startup",
|
||||
"Fixed linux users crashing when closing the laptop lid"
|
||||
],
|
||||
"features": [
|
||||
"Updated to firefox 136.0",
|
||||
"Added support for a drag and drop tab split feature that also groups tabs in a nice UI!",
|
||||
"Implemented a more complete JPEG XL decoding and OS support, allowing things such as animated images and more",
|
||||
"Allow having full url without https in sidebar (zen.urlbar.show-domain-only-in-sidebar)",
|
||||
"Add preference to hide one-off search buttons (off by default, zen.urlbar.hide-one-offs)",
|
||||
"Added martial arts emoji to the default emoji set",
|
||||
"MacOS users can now control what window material they have (zen.widget.macos.window-material, 1 to 7, default is 2)",
|
||||
"Added support to drag and drop tabs from other windows while in compact mode",
|
||||
"Small changes to padding around the website and URL bar",
|
||||
"Favicons should render with better corners now",
|
||||
"Did some changes to the default on boarding essentials selection as some people had concerns about them"
|
||||
],
|
||||
"workflowId": 13730470316,
|
||||
"date": "07/03/2025"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,35 +1,7 @@
|
|||
{
|
||||
"version": "1.9t",
|
||||
"version": "xxx",
|
||||
"image": false,
|
||||
"extra": "Another nice update for Zen! This time we've added a new feature that allows you drag and drop tabs into the browser to split them!",
|
||||
"fixes": [
|
||||
"Fixed pinned tabs being subject to appearing on the essentials container",
|
||||
"Fixed opening bookmarks on empty tab pages",
|
||||
"Fixed automatic glance opening from the edge of the screen",
|
||||
"Fixed background gradients not showing the colors in the correct order",
|
||||
"Fixed creating essentials being in the wrong order",
|
||||
"Fixed watermark not waiting enough time and startup layout",
|
||||
"Fixed reordering tabs not being correctly saved for pinned tabs",
|
||||
"Fixed bookmark items not opening",
|
||||
"Fixed not hiding empty tab from add-ons, crashing the browser on some cases",
|
||||
"Fixed compact mode sidebar animating on an empty state and not animating properly when having the URL bar floating",
|
||||
"Fixed expanding glance not opening in the correct possition when having container specific essentials",
|
||||
"Fixed external links not opening in the correct workspace container",
|
||||
"Fixed appimage not being able to set itself as default web browser",
|
||||
"Fixed closing the browser in an empty state opening about:blank on startup",
|
||||
"Fixed linux users crashing when closing the laptop lid"
|
||||
],
|
||||
"features": [
|
||||
"Updated to firefox 136.0",
|
||||
"Added support for a drag and drop tab split feature that also groups tabs in a nice UI!",
|
||||
"Implemented a more complete JPEG XL decoding and OS support, allowing things such as animated images and more",
|
||||
"Allow having full url without https in sidebar (zen.urlbar.show-domain-only-in-sidebar)",
|
||||
"Add preference to hide one-off search buttons (off by default, zen.urlbar.hide-one-offs)",
|
||||
"Added martial arts emoji to the default emoji set",
|
||||
"MacOS users can now control what window material they have (zen.widget.macos.window-material, 1 to 7, default is 2)",
|
||||
"Added support to drag and drop tabs from other windows while in compact mode",
|
||||
"Small changes to padding around the website and URL bar",
|
||||
"Favicons should render with better corners now",
|
||||
"Did some changes to the default on boarding essentials selection as some people had concerns about them"
|
||||
]
|
||||
"extra": "",
|
||||
"fixes": [],
|
||||
"features": []
|
||||
}
|
||||
3
src/release-notes/whats-new.json
Normal file
3
src/release-notes/whats-new.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[
|
||||
"With our new split view implementation, you can now easily compare two different versions of your document side by side by simply dragging one tab into the center of the screen."
|
||||
]
|
||||
Loading…
Add table
Add a link
Reference in a new issue