feat: add author link function, integrate Cloudflare adapter, and enhance layout with new HomeExtras component

astro.config.mjs

@@ -3,7 +3,10 @@ import { defineConfig } from 'astro/config';
 
 import tailwind from '@astrojs/tailwind';
 
+import cloudflare from '@astrojs/cloudflare';
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind()],
+  adapter: cloudflare()
 });

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/cloudflare": "^12.0.1",
     "@astrojs/tailwind": "^5.1.2",
     "@fontsource/bricolage-grotesque": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-brands-svg-icons": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
-    "astro": "^4.16.13",
+    "astro": "^5.0.4",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "free-astro-components": "^1.1.1",

src/components/Features.astro

@@ -1,19 +1,19 @@
 ---
 import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
-import Button from '../components/Button.astro'
+import { Image } from 'astro:assets';
-import Circles from '../components/Circles.astro'
+
-import { Image } from 'astro:assets'
+import browserWorkspaces from '../assets/browser-workspaces.png';
-import myImage from '../assets/browser.png'
+import browserCompactMode from '../assets/browser-compactmode.png';
-import { 
+import browserSplitViews from '../assets/browser-splitview.png';
-  Github,
+import browserSidebar from '../assets/browser-sidebar.png';
-  Check,
+
- } from 'lucide-astro'
+import browserGlance from '../assets/browser-glance.webm';
 ---
 
 <section
   id="features"
-  class="flex min-h-screen w-full px-4 lg:px-12 xl:px-24 py-36 flex-col relative"
+  class="flex w-full px-4 lg:px-12 xl:px-24 py-36 flex-col relative"
 >
   <div class="flex flex-col lg:flex-row w-full items-start gap-12">
     <div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
@@ -71,11 +71,11 @@ import {
     </div>
     <div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
       <div class="bg-coral rounded-xl ml-auto" id="feature-list-image">
-        <img src="/browser.webp" alt="" class="object-fit">
+        <Image src={browserWorkspaces} alt="Browser Workspaces" class="rounded-xl" />
-        <img src="/browser.webp" alt="" class="object-fit">
+        <Image src={browserCompactMode} alt="Browser Compact Mode" class="rounded-xl" />
-        <img src="/browser.webp" alt="" class="object-fit">
+        <Image src={browserSplitViews} alt="Browser Split Views" class="rounded-xl" />
-        <img src="/browser.webp" alt="" class="object-fit">
+        <Image src={browserSidebar} alt="Browser Sidebar" class="rounded-xl" />
-        <img src="/browser.webp" alt="" class="object-fit">
+        <video src={browserGlance} autoplay loop muted playsinline class="rounded-xl absolute top-0 left-0 w-full h-full object-cover" />
       </div>
     </div>
   </div>
@@ -89,7 +89,7 @@ import {
         feature.removeAttribute('active');
       }
     });
-    document.querySelectorAll('#feature-list-image img').forEach((img: any, i) => {
+    document.querySelectorAll('#feature-list-image > *').forEach((img: any, i) => {
       img.style.opacity = i === index ? 1 : 0;
       img.classList.toggle('absolute', i !== index);
     });

src/components/Footer.astro

@@ -3,10 +3,18 @@ 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 { Image } from 'astro:assets'
+import { ArrowRight } from 'lucide-astro'
-import myImage from '../assets/browser.png'
-import { ArrowRight, Github, Twitter } from 'lucide-astro'
 import { ThemeSwitch } from 'free-astro-components'
+
+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
@@ -35,12 +43,21 @@ import { ThemeSwitch } from 'free-astro-components'
         <Description class="!font-semibold">
           Follow Us
         </Description>
-        <div class="opacity-80 flex gap-4">
+        <div class="opacity-80 flex gap-4 items-center">
           <a href="https://github.com/zen-browser" target="_blank" class="font-bold">
-            <Github class="size-4" />
+            <Fragment set:html={Github.html} />
           </a>
           <a href="https://twitter.com/zen_browser" target="_blank" class="font-normal">
-            <Twitter class="size-4" />
+            <Fragment set:html={Twitter.html} />
+          </a>
+          <a href="https://fosstodon.org/@zenbrowser" target="_blank" class="font-normal">
+            <Fragment set:html={Mastodon.html} />
+          </a>
+          <a href="https://bsky.app/profile/zen-browser.app" target="_blank" class="font-normal">
+            <Fragment set:html={Bluesky.html} />
+          </a>
+          <a href="https://www.reddit.com/r/zen_browser" target="_blank" class="font-normal">
+            <Fragment set:html={Reddit.html} />
           </a>
         </div>
       </div>

src/components/Hero.astro

@@ -2,7 +2,6 @@
 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 { Image } from 'astro:assets'
 import myImage from '../assets/browser.png'
 import { ArrowRight } from 'lucide-astro'
@@ -10,7 +9,7 @@ import { ArrowRight } from 'lucide-astro'
 
 <header
   id="header"
-  class="flex h-screen w-full flex-col items-center gap-24 text-center md:gap-[15%]"
+  class="flex h-screen w-full flex-col items-center gap-24 text-center gap-[20%] lg:gap-[15%]"
 >
   <div class="flex flex-col items-center h-full justify-center">
     <Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px] !text-9xl !font-normal'>Welcome to<br class="hidden md:block" /> a <span class="italic">calmer</span> internet</Title>
@@ -26,6 +25,5 @@ import { ArrowRight } from 'lucide-astro'
       <Button>Start Exploring</Button>
     </div>
   </div>
-  <!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
   <Image src={myImage} alt="Zen browser" class="absolute top-full -translate-y-[20%]" />
 </header>

src/components/HomeExtras.astro

@@ -0,0 +1,55 @@
+---
+import Title from '../components/Title.astro'
+import Description from '../components/Description.astro'
+import { Image } from 'astro:assets';
+
+import browserCollapsed from '../assets/collapsed.png';
+import browseMultiToolbar from '../assets/multiple-toolbar.png';
+import browserSingleToolbar from '../assets/single-toolbar.png';
+import Button from './Button.astro';
+import { ArrowRight } from 'lucide-astro';
+---
+
+<section
+  id="customization"
+  class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative"
+>
+  <div>
+    <Title>Customizable to<br />the last pixel</Title>
+    <Description class="px-4 lg:px-0 lg:w-1/2">
+      Zen Browser is designed to be customizable. You can change every aspect of the browser to suit your needs. Literally, your imagination is the limit.
+    </Description>
+    <div class="flex mt-4">
+      <Button isPrimary>
+        Zen Mods
+        <ArrowRight class="size-4" />
+      </Button>
+    </div>
+  </div>
+  <div class="relative w-1/2 flex hidden lg:block" id="browser-images">
+    <Image src={browserCollapsed} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[5%] left-[65%] -translate-x-1/2" />
+    <Image src={browseMultiToolbar} alt="Zen browser" class="w-2/3 rounded-md mx-auto absolute top-1/2 left-1/2 transform -translate-x-1/2" />
+    <Image src={browserSingleToolbar} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[15%] left-[10%] z-10 -translate-x-1/2" />
+  </div>
+</section>
+<style>
+  #browser-images {
+    & img {
+      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    }
+
+    &:hover {
+      & 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>

src/components/Logo.astro

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M32 44.3077C38.7974 44.3077 44.3077 38.7974 44.3077 32C44.3077 25.2027 38.7974 19.6923 32 19.6923C25.2027 19.6923 19.6923 25.2027 19.6923 32C19.6923 38.7974 25.2027 44.3077 32 44.3077ZM41.8462 32C41.8462 37.4379 37.4379 41.8462 32 41.8462C26.5621 41.8462 22.1538 37.4379 22.1538 32C22.1538 26.5621 26.5621 22.1538 32 22.1538C37.4379 22.1538 41.8462 26.5621 41.8462 32Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M53.3333 32C53.3333 43.7821 43.7821 53.3333 32 53.3333C20.2179 53.3333 10.6667 43.7821 10.6667 32C10.6667 20.2179 20.2179 10.6667 32 10.6667C43.7821 10.6667 53.3333 20.2179 53.3333 32ZM32 49.2308C41.5163 49.2308 49.2308 41.5163 49.2308 32C49.2308 22.4837 41.5163 14.7692 32 14.7692C22.4837 14.7692 14.7692 22.4837 14.7692 32C14.7692 41.5163 22.4837 49.2308 32 49.2308Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32C0 14.3269 14.3269 0 32 0C49.6731 0 64 14.3269 64 32ZM32 58.2564C46.501 58.2564 58.2564 46.501 58.2564 32C58.2564 17.499 46.501 5.74359 32 5.74359C17.499 5.74359 5.74359 17.499 5.74359 32C5.74359 46.501 17.499 58.2564 32 58.2564Z" fill="currentColor"/>
+</svg>

src/components/NavBar.astro

@@ -5,6 +5,7 @@ import Description from '../components/Description.astro'
 import Button from '../components/Button.astro'
 import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar";
 import { ArrowRight, ChevronDown } from 'lucide-astro'
+import Logo from './Logo.astro';
 ---
 
 <nav
@@ -12,11 +13,11 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
   class="fixed flex justify-between w-full items-center pt-6 px-6 z-10 top-0 left-0"
 >
   <Astronav>
-    <MenuItems class="rounded-full border-dark border-2 p-2 pl-4 backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md hidden mx-auto lg:flex gap-12">
+    <MenuItems class="rounded-full border-dark border-2 p-2 backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md hidden mx-auto lg:flex gap-20">
-      <a class="font-bold text-lg items-center flex" href="/">
+      <a class="font-bold text-lg items-center flex gap-2" href="/">
-        zen browser
+        <Logo class="text-dark" /> zen browser
       </a>
-      <ul class="gap-6 lg:flex items-center">
+      <div class="gap-6 lg:flex items-center">
         <Dropdown class="group">
           <button class="flex items-center">
             <span>Getting Started</span>
@@ -100,10 +101,11 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
         <a class="flex items-center" href="/mods">
           <span>Mods</span>
         </a>
-        <Button href="/download" isPrimary>
+      </div>
-          Download
+      <Button href="/download" isPrimary>
-          <ArrowRight class="size-4" />
+        Download
-        </Button>
+        <ArrowRight class="size-4" />
+      </Button>
     </MenuItems>
   </Astronav>
 </nav>

src/layouts/Layout.astro

@@ -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'] text-dark">
+	<body class="bg-paper font-['bricolage-grotesque'] text-dark overflow-x-hidden">
 		<slot />
 		<Footer />
 		<NavBar />

src/mods.ts

@@ -29,3 +29,7 @@ export async function getAllMods(): Promise<ZenTheme[]> {
     return [];
   }
 }
+
+export function getAuthorLink(author: string): string {
+	return `https://github.com/${author}`;
+}

src/pages/about.astro

@@ -0,0 +1,50 @@
+---
+import Button from '../components/Button.astro'
+import Description from '../components/Description.astro'
+import Title from '../components/Title.astro'
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout title="Welcome to Zen">
+  <main class="min-h-screen h-screen relative flex flex-col my-52 justify-center items-center">
+    <div class="text-center p-4 mb-24 lg:w-1/2">
+      <Title>About Us</Title>
+      <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.
+      </Description>
+      <Button href="/donate" class="w-fit mx-auto mt-4" isPrimary>A little help?</Button>
+    </div>
+    <div class="w-full relative flex flex-col lg:flex-row justify-center items-center">
+      <div class="p-8 lg:pr-24 flex flex-col lg:w-1/3">
+        <div class="font-bold text-6xl">Main Team</div>
+        <Description>
+          This list shows the main team members who are working hard to bring you the best browsing experience.
+        </Description>
+        <div class="mt-4">
+          <ul>
+              <li class="text-sm"><a href="https://github.com/mr-cheff"><strong class="font-bold">Mauro Baladés</strong></a>: Creator, Main Developer, and a funny guy.</li>
+              <li class="text-sm mt-1"><strong class="italic">Oscar Gonzalez</strong>: Site Reliability Engineer (SRE) and code signing.</li>
+              <li class="text-sm mt-1"><a href="https://janheres.eu/"><strong class="font-bold">Jan Heres</strong></a>: Active contributor and helps with MacOS builds</li>
+              <li class="text-sm mt-1"><a href="https://github.com/BrhmDev"><strong class="font-bold">BrhmDev</strong></a>: Active contributor with great contributions</li>
+              <li class="text-sm mt-1"><a href="https://thatcanoa.org/"><strong class="font-bold">Canoa</strong></a> Active contributor, and very active in issue handling and website management</li>
+              <li class="text-sm mt-1"><a href="https://github.com/kristijanribaric"><strong class="font-bold">kristijanribaric</strong></a>: Active contributor</li>
+              <li class="text-sm mt-1"><a href="https://github.com/n7itro"><strong class="font-bold">n7itro</strong></a>: Active contributor and release notes writer</li>
+              <li class="text-sm mt-1"><a href="https://josuegalre.netlify.app/"><strong class="font-bold">Bryan Galdámez</strong></a>: Huge contributor on theme functionalities</li>
+              <li class="text-sm mt-1"><a href="https://iamjafeth.com/"><strong class="font-bold">Jafeth Garro</strong></a>: Documentation writer</li>
+              <li class="text-sm mt-1"><a href="https://github.com/LarveyOfficial/"><strong class="font-bold">Larvey</strong></a>: AUR maintainer</li>
+              <li class="text-sm mt-1"><a href="https://github.com/gunir"><strong class="font-bold">Gunir</strong></a>: Helps a lot with firefox's configuration and knowledge</li>
+            </ul>
+        </div>
+      </div>
+      <div class="hidden lg:block h-full w-[1.5px] bg-dark absolute"></div>
+      <div class="p-8 lg:pl-24 flex flex-col lg:w-1/3">
+        <div class="font-bold text-6xl">Contributors</div>
+        <Description>
+          Here are all the wonderful people that decided to contribute to the project! The first set of images are from the desktop repository, and the second set is from the website repository.
+        </Description>
+        <img src="https://contributors-img.web.app/image?repo=zen-browser/desktop" alt="Contributors Image" class="mt-4" />
+        <img src="https://contributors-img.web.app/image?repo=zen-browser/www" alt="Contributors Image (website)" class="mt-4" />
+      </div>
+    </div>
+  </main>
+</Layout>

src/pages/index.astro

@@ -3,6 +3,7 @@ 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="Welcome to Zen">
@@ -10,6 +11,7 @@ import Features from '../components/Features.astro'
     <Hero />
     <Community />
     <Features />
+    <HomeExtras />
   </main>
 </Layout>
 <style>

src/pages/mods/[...slug].astro

@@ -1,7 +1,10 @@
 ---
 import { getAbsoluteLocaleUrl } from 'astro:i18n';
-import { getAllMods, type ZenTheme } from '../../mods';
+import { getAllMods, type ZenTheme, getAuthorLink } from '../../mods';
 import Layout from '../../layouts/Layout.astro';
+import Title from '../../components/Title.astro';
+import Description from '../../components/Description.astro';
+import Button from '../../components/Button.astro';
 
 export async function getStaticPaths() {
   const mods = await getAllMods();
@@ -17,5 +20,53 @@ const mod = Astro.props;
 ---
 
 <Layout title={`${mod.name} - Zen Mods`} >
-  {mod.name}
+  <main class="mt-32 2xl:mt-0">
+    <div class="px-8 mx-auto flex flex-col lg:w-1/2 gap-6 my-52">
+      <div>
+        <Title>{mod.name}</Title>
+        <Description>{mod.description}</Description>
+      </div>
+      <img
+        src={mod.image}
+        alt={mod.name}
+        class="h-full w-full object-cover rounded-xl border-8 shadow border-white"
+      />
+      <div class="flex justify-between flex-col lg:flex-row flex">
+        <div class="font-normal w-full">
+          Created by <a href={getAuthorLink(mod.author)} class="font-bold">@{mod.author}</a> • <span class="font-bold">v{mod.version}</span>
+        </div>
+        <div>
+          <Button
+            class="hidden"
+            id="install-theme"
+            zen-theme-id={mod.id}
+            isPrimary
+          >
+            Install Theme 🎉
+          </Button>
+          <Button
+            class="hidden"
+            id="install-theme-uninstall"
+            zen-theme-id={mod.id}
+            isPrimary
+          >
+            Uninstall Theme
+          </Button>
+          <p
+            id="install-theme-error"
+            class="text-sm text-muted-foreground"
+          >
+            You need to have Zen Browser installed to install this theme.{" "}
+            <a href="/download" class="text-blue-500 text-sm inline">
+              Download now!
+            </a>
+          </p>
+        </div>
+      </div>
+      <!-- TODO: Readme markdown 
+      <div class="h-[1px] opacity-80 bg-dark w-full"></div>
+      -->
+    </div>
+    <div>
+  </main>
 </Layout>

src/pages/mods/index.astro

@@ -10,7 +10,7 @@ console.log(mods);
 
 <Layout title="Zen Mods">
   <main class="mt-32 2xl:mt-0">
-    <header class="min-h-[65vh] flex flex-col justify-center w-full border-b-2 border-dark">
+    <header class="mt-52 mb-32 flex flex-col justify-center w-full border-dark">
       <div class="px-8 mx-auto flex flex-col lg:w-1/2 gap-6">
         <div>
           <Title>Zen Mods</Title>
@@ -24,12 +24,24 @@ console.log(mods);
         </div>
       </div>
     </header>
-    <div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 p-10 lg:p-24 lg:px-24 mx-auto">
-        {mods.map((mod: ZenTheme) => (
+      {mods.map((mod: ZenTheme) => (
-            <a href={`/mods/${mod.id}`}>
+        <a href={`/mods/${mod.id}`} class="block border-transparent transition-colors duration-100 flex flex-col gap-4 hover:opacity-90 mb-6">
-              
+          <div class="relative mb-0 hidden aspect-[1.85/1] h-48 overflow-hidden rounded-md border-4 object-cover shadow-md border-white lg:block lg:h-auto">
-            </a>
+            <img
-        ))}
+              src={mod.image}
+              alt={mod.name}
+              class="h-full w-full object-cover hover:scale-105 transition-transform duration-100"
+            />
+          </div>
+          <div class="">
+            <h2 class="font-bold text-lg">
+              {mod.name} <span class="font-normal text-sm ml-1">by @{mod.author}</span>
+            </h2>
+            <p class="text-sm font-thin">{mod.description}</p>
+          </div>
+        </a>
+      ))}
     </div>
   </main>
 </Layout>

src/release-notes.ts

@@ -943,7 +943,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description: "Misaligned padding across window",
-				isue: 1542,
+				issue: 1542,
 			},
 			{
 				description: "Fixed exiting from split view with more than 6 tabs",
@@ -952,7 +952,7 @@ export const releaseNotes: ReleaseNote[] = [
 			{
 				description:
 					"Fixed the sidebar ignoring the mobile user agent checkbox on creation",
-				isue: 1536,
+				issue: 1536,
 			},
 			{
 				description:
@@ -1490,7 +1490,7 @@ export const releaseNotes: ReleaseNote[] = [
 		fixes: [
 			{
 				description: "Fixed compact mode sidebar breaking when open a link from the other subpanels",
-				isue: 2218
+				issue: 2218
 			},
 			{
 				description: "Allow glance meta key only for macos",
@@ -1509,7 +1509,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description: "Fixed Workspace icon jumping in sidebar if not in strip mode",
-				isue: 2413
+				issue: 2413
 			}
 		],
 		features: [
@@ -1577,7 +1577,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description: "Fixed being able to unload splitted tabs",
-				isue: 2236
+				issue: 2236
 			},
 			{
 				description: "Fixed having a duplicate new-tab button when creating new profiles",
@@ -1619,7 +1619,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description: "Fixed white flash when navigating popups",
-				isue: 2438
+				issue: 2438
 			},
 			{
 				description: "Fixed some translations issues",
@@ -1658,7 +1658,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description: "Fixed not being able to remove sidepanel button from the toolbar",
-				isue: 2792
+				issue: 2792
 			},
 			{
 				description: "Fixed support URLs pointing to a 404 pages",
@@ -1690,5 +1690,92 @@ export const releaseNotes: ReleaseNote[] = [
 			"Added a max height to pinned tabs, making it less intrusive",
 			"Made workspace indicator stand less out",
 		]
-	}
+	},
+	{
+		version: "1.0.2-b.0",
+		date: "10/12/2024",
+		image: true,
+		workflowId: 12246343549,
+		extra:
+			"This release introduces a new stage for Zen Browser, the beta stage! This means that we are getting closer to a stable release, and we are now focusing on fixing bugs and improving the overall experience.\n\nWe've added a new feature called Zen Sync, which allows you to sync your workspaces, pinned tabs, and essentials across devices. We've also added a new feature called Zen Search, which allows you to search for tabs, workspaces, and pinned tabs.\n\nWe've also updated to the latest stable version of Firefox (132.0.2), and we've added a new feature called Zen Sync, which allows you to sync your workspaces, pinned tabs, and essentials across devices.",
+		fixes: [
+			{
+				description: "Various fixes in version 20",
+			},
+			{
+				description: "Fix pinned tab state and favicon handling",
+				issue: 2853
+			},
+			{
+				description: "Prevent pins deletion from database on non explicit tab closes (window closing)",
+				issue: 2875,
+			},
+			{
+				description: "Fix inconsistent cursor when resizing split view",
+				issue: 2252
+			},
+			{
+				description: "Fixed changing essential tab when switching workspaces",
+			},
+			{
+				description: "Fixed restoring pinned tabs to their pinned URLs on startup if the option is checked",
+				isue: 2817
+			},
+			{
+				description: "Prevent creating new window for dragging pinned tab out of the window.",
+			},
+			{
+				description: "Fixed handling container-specific essentials (now available)",
+			},
+			{
+				description: "Fixed right-side sidebar on compact mode occupying the screen space",
+			},
+			{
+				description: "Fixed some titlebar buttons not covering full height",
+			},
+			{
+				description: "Fixed bug where a popup window would not close/open a new tab",
+			},
+			{
+				description: "Fixed switching workspaces with the mouse wheel being sluggish",
+			},
+			{
+				description: "Fixed weird layouts in very specific conditions on macos",
+			},
+			{
+				description: "Fixed HTTP pacing requests for improved performance",
+			},
+			{
+				description: "Fixed windows mica titlebar disappearing",
+			},
+			{
+				description: "Fixed random 'null's appearing for macos users",
+			}
+		],
+		features: [
+			"New branding and logos!",
+			"Updated zen glance animations for smoother transitions and adjust timing (Still in development)",
+			"Add reset to pinned URL button to pinned tabs",
+			"Made the URL bar background more rounded",
+			"Updated to Firefox 133.0",
+			"Added support for -moz-gtk-csd-reversed-placement on Linux",
+			"Enhance workspace deactivation styles with grayscale filter for better visibility",
+			"Windows and linux ARM64 builds are now available on the github for testing!",
+			"Hide container label when URL bar is narrow",
+			"Macos ARM64 builds will now ship with PGO, performance increase!",
+			"Added different layouts for zen: single toolbar, multiple toolbars, and no toolbar",
+			"The URL bar will now be floating on the top of the page",
+			"Added native mica support for Windows 11",
+			"Added hiding window controls support",
+			"Created new animations for glance",
+			"Added context aware animations for workspace switching",
+			"New onboarding experience for new users!",
+			"Started experimenting with horizontal tabs",
+		],
+		breakingChanges: [
+			"Urlbar now will open when clicking on it instead of on-mousedown",
+			"Changed default glance opening trigger to 'alt+click' on linux/windows systems",
+			"Removed collapsible sidebar expande on hover (mod will be available soon). This is due to the dificulty of maintaining it as we evolve the sidebar",
+		],
+	},
 ].reverse();

tailwind.config.mjs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	darkMode: 'media',
 	theme: {
 		extend: {
 			screens: {