Merge branch 'zen-browser:main' into main

README.md

@@ -10,6 +10,6 @@ Zen Browser Website
 
 This repository contains the source code for the Zen Browser Website. We are thrilled to welcome you to our community. Before you start, please read this document to understand how you can contribute to this project.
 
-It's built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/).
+Zen Browser's website is built with [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/).
 
 If you are interested in contributing to this project, please read the [Contributing Guidelines](./CONTRIBUTING.md).

next.config.mjs

@@ -3,17 +3,19 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
+        protocol: "https",
-        hostname: 'raw.githubusercontent.com',
+        hostname: "raw.githubusercontent.com",
       },
     ],
   },
   experimental: {
     serverActions: {
       // edit: updated to new key. Was previously `allowedForwardedHosts`
-      allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'],
+      allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
     },
-
+  },
+  compiler: {
+    styledComponents: true,
   },
 };
 

package.json

@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "cobe": "^0.6.3",
     "dotenv": "^16.4.5",
+    "feed": "^4.2.2",
     "framer-motion": "^11.3.24",
     "lucide-react": "^0.400.0",
     "next": "14.2.4",

src/app/feed.xml/route.ts

@@ -0,0 +1,110 @@
+import { Feed } from "feed";
+import { releaseNotes } from "@/lib/release-notes";
+import type { ReleaseNote } from "@/lib/release-notes";
+
+// Force feed.xml to be cached as static and remain constant for the lifetime of the current site build.
+// The supplied releaseNotes array is constant per build, so this will always be the latest release notes.
+export const dynamic = "force-static";
+
+/** The default number of entries to include in the RSS feed. */
+const RSS_ENTRY_LIMIT = 20;
+
+/**
+ * Handles the GET request for the `feed.xml` endpoint.
+ * @returns The RSS feed for the Zen Browser release notes.
+ */
+export async function GET() {
+    // Just in case the release notes array is empty for whatever reason.
+    const latestDate = releaseNotes.length > 0
+        ? formatRssDate(releaseNotes[0].date)
+        : new Date();
+
+    const feed = new Feed({
+        id: "https://www.zen-browser.app/release-notes",
+        link: "https://www.zen-browser.app/release-notes",
+        title: "Zen Browser Release Notes",
+        description: "Release Notes for the Zen Browser",
+        language: "en",
+        favicon: "https://www.zen-browser.app/favicon.ico",
+        copyright: `Zen Browser © ${new Date().getFullYear()} - Made with ❤️ by the Zen team.`,
+        updated: latestDate,
+    });
+
+    for (const releaseNote of releaseNotes.slice(0, RSS_ENTRY_LIMIT)) {
+        feed.addItem({
+            title: `Release notes for version ${releaseNote.version}`,
+            id: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
+            link: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
+            date: formatRssDate(releaseNote.date),
+            description: releaseNote.extra,
+            content: formatReleaseNote(releaseNote),
+        });
+    }
+
+    return new Response(feed.rss2(), {
+        headers: {
+            'Content-Type': 'application/xml; charset=utf-8',
+        },
+    });
+}
+
+/**
+ * Formats a date string in the format day/month/year. 
+ * 
+ * Note: If release notes change to ISO format, this will need to be updated.
+ * @param dateStr The date string to format.
+ * @returns The passed in date string as a Date object.
+ */
+function formatRssDate(dateStr: string) {
+    const splitDate = dateStr.split("/");
+    if (splitDate.length !== 3) {
+        throw new Error("Invalid date format");
+    }
+
+    const day = Number(splitDate[0]);
+    const month = Number(splitDate[1]) - 1;
+    const year = Number(splitDate[2]);
+    return new Date(year, month, day);
+}
+
+/**
+ * Formats the release note entry for use as the content of the RSS feed.
+ * @param releaseNote The release note to format.
+ * @returns The formatted release note as a HTML string.
+ */
+function formatReleaseNote(releaseNote: ReleaseNote) {
+    let content = "<p>If you encounter any issues, please report them on <a href=\"https://github.com/zen-browser/desktop/issues/\">the issues page</a>. Thanks everyone for your feedback! ❤️</p>";
+
+    if (releaseNote.extra) {
+        content += `<p>${releaseNote.extra.replace(/(\n)/g, "<br />")}</p>`
+    }
+
+    if (releaseNote.breakingChanges) {
+        content += `<h2>⚠️ Breaking changes</h2>`
+        content += `<ul>`
+        for (const breakingChange of releaseNote.breakingChanges) {
+            content += `<li>${breakingChange}</li>`
+        }
+        content += `</ul>`
+    }
+
+    if (releaseNote.features) {
+        content += `<h2>⭐ Features</h2>`
+        content += `<ul>`
+        for (const feature of releaseNote.features) {
+            content += `<li>${feature}</li>`
+        }
+        content += `</ul>`
+    }
+
+    if (releaseNote.fixes) {
+        content += `<h2>✓ Fixes</h2>`
+        content += `<ul>`
+        for (const fix of releaseNote.fixes) {
+            content += `<li>${fix.description}</li>`
+        }
+        content += `</ul>`
+    }
+
+    return content;
+}

src/app/layout.tsx

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme-provider";
+import StyledComponentsRegistry from "@/lib/styled-components-registry";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,6 +19,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
+        <link rel="alternate" type="application/rss+xml" title="Zen Browser Release Notes" href="https://www.zen-browser.app/feed.xml" />
+      </head>
       <body className={inter.className}>
         <ThemeProvider
           attribute="class"
@@ -25,7 +30,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
         </ThemeProvider>
       </body>
     </html>

src/app/privacy-policy/page.tsx

@@ -52,7 +52,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's
 # 4. Data Security
 Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe. 
 
-* Note that most of the security measures are taken care by mozilla firefox.
+* Note that most of the security measures are taken care by Mozilla Firefox.
 
 # 5. Your Control
 ## 5.1. Data Deletion

src/app/themes/[theme]/page.tsx

@@ -1,22 +1,45 @@
-"use client";
+
 import Footer from "@/components/footer";
 import { Navigation } from "@/components/navigation";
 import ThemePage from "@/components/theme-page";
 import { getThemeFromId } from "@/lib/themes";
-import { useParams } from "next/navigation";
+import { Metadata, ResolvingMetadata } from "next";
+
+export async function generateMetadata(
+  { params, searchParams }: any,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const theme = params.theme
+  const themeData = await getThemeFromId(theme);
+  if (!themeData) {
+    return {
+      title: "Theme not found",
+      description: "Theme not found",
+    };
+  }
+  return {
+    title: themeData.name,
+    description: themeData.description,
+    keywords: [themeData.name, themeData.description],
+    openGraph: {
+      title: themeData.name,
+      description: themeData.description,
+      images: [
+        {
+          url: themeData.image,
+          width: 500,
+          height: 500,
+          alt: themeData.name,
+        },
+      ],
+    },
+  };
+}
 
 export default async function ThemeInfoPage() {
-  const params = useParams<{ theme: string }>();
-  const { theme: themeID } = params;
-
-  const theme = await getThemeFromId(themeID);
-  if (!theme) {
-    return <div>Theme not found</div>;
-  }
-
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <ThemePage theme={theme} />
+      <ThemePage />
       <Footer />  
       <Navigation /> {/* At the bottom of the page */}
     </main>

src/components/branding-assets.tsx

@@ -1,3 +1,4 @@
+
 import { LOGO_COLORS } from "@/lib/logos";
 
 export function BrandingAssets() {
@@ -19,6 +20,7 @@ export function BrandingAssets() {
               <div className="flex items-center my-2">
                 <a
                   href={`/logos/zen-${color}.svg`}
+                  download={`zen-${color}.svg`}
                   className="text-blue-500 text-md ml-2"
                 >
                   {color}
@@ -40,7 +42,7 @@ export function BrandingAssets() {
               <div className="flex items-center my-2">
                 <a
                   href={`/logos/zen-alpha-${color}.svg`}
-                  download={`zen-alpha-${color}.png`}
+                  download={`zen-alpha-${color}.svg`}
                   className="text-blue-500 text-md ml-2"
                 >
                   {color}

src/components/create-theme.tsx

@@ -187,9 +187,12 @@ export default function CreateThemePage() {
               <input type="text" className="border text-gray-500 rounded-lg p-2 w-2/3" value={dialogBg} onChange={(e) => setDialogBg(e.target.value)} />
               <div className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
             </div>
+            <div className="text-md font-bold text-muted-foreground mt-8">
+              Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.
+            </div>
             <Sheet>
               <SheetTrigger asChild>
-                <Button className="mt-8">Create theme</Button>
+                <Button disabled className="mt-8">Create theme</Button>
               </SheetTrigger>
               <SheetContent className="!w-[600px] !max-w-lg">
                 <SheetHeader>

src/components/download.tsx

@@ -362,7 +362,7 @@ export default function DownloadPage() {
                     <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
                       🍏
                     </h1>
-                    <h1 className="text-2xl font-semibold my-2">aarch64</h1>
+                    <h1 className="text-2xl font-semibold my-2">AArch64</h1>
                     <p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
                   </div>
                   <div
@@ -534,7 +534,7 @@ export default function DownloadPage() {
                 <p className="text-muted-foreground">
                   Confused about which build to choose?{" "}
                   <Link
-                    href="https://github.com/zen-browser/desktop/blob/main/docs/requirements.md#supported-cpus-for-optimized-builds-windows-and-linux"
+                    href="https://docs.zen-browser.app/guides/generic-optimized"
                     target="_blank"
                     className="text-blue-400"
                   >

src/components/features.tsx

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import Sticky from 'react-sticky-el';
 import {
   CheckIcon,
@@ -17,7 +17,7 @@ import {
   SplitSquareHorizontal,
   SplitSquareVertical,
   XIcon,
-} from "lucide-react";
+} from 'lucide-react';
 import {
   Cross1Icon,
   EyeClosedIcon,
@@ -26,12 +26,20 @@ import {
   QuestionMarkIcon,
   ReloadIcon,
   UpdateIcon,
-} from "@radix-ui/react-icons";
+} from '@radix-ui/react-icons';
-import Image from "next/image";
+import Image from 'next/image';
+import Link from 'next/link';
 import { Button } from './ui/button';
 import { COLORS } from './create-theme';
 import { Slider } from './ui/slider';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui/table';
 import React, { useState } from 'react';
 import { ny } from '@/lib/utils';
 
@@ -62,7 +70,7 @@ export default function Features() {
     return () => clearInterval(interval);
   });
   return (
-    <div className="relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
+    <div className="max-w-[1300px] relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
       <div className="grid grid-cols-1 md:grid-cols-3 md:grid-rows-10 w-full">
         <div className="items-center justify-center flex flex-col p-16">
           <div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
@@ -73,8 +81,8 @@ export default function Features() {
               Goodbye bad performance
             </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are constantly tweak firefox's engine and settings to make it
+              We are constantly tweaking Firefox's engine and settings to make it
-              faster than ever. <a className="text-blue-500" href="https://github.com/zen-browser/desktop/blob/main/docs/performance.md" target='_blank'>Learn more</a>
+              faster than ever. <a className="text-blue-500" href="https://docs.zen-browser.app/benchmarks" target='_blank'>Learn more</a>
             </p>
           </div>
         </div>
@@ -83,12 +91,13 @@ export default function Features() {
             <LockClosedIcon className="mx-auto w-7 h-7" />
           </div>
           <div className="mt-10">
-            <h2 className="text-lg font-bold text-center">
+            <h2 className="text-lg font-bold text-center">Privacy first</h2>
-              Privacy first
-            </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
               We don't track you. We don't sell your data. We don't even know
-              who you are. <a className="text-blue-500" href="/privacy-policy">Learn more</a>
+              who you are.{' '}
+              <a className="text-blue-500" href="/privacy-policy">
+                Learn more
+              </a>
             </p>
           </div>
         </div>
@@ -97,78 +106,103 @@ export default function Features() {
             <ShieldCheck className="mx-auto w-7 h-7" />
           </div>
           <div className="mt-10">
-            <h2 className="text-lg font-bold text-center">
+            <h2 className="text-lg font-bold text-center">Secure by default</h2>
-              Secure by default
-            </h2>
             <p className="text-center text-sm mt-2 text-muted-foreground">
-              We are always using the latest security features from firefox to
+              We are always using the latest security features from Firefox to
-              keep you safe. <a className="text-blue-500" href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe">Learn more</a>
+              keep you safe.{' '}
+              <a
+                className="text-blue-500"
+                href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe"
+              >
+                Learn more
+              </a>
             </p>
           </div>
         </div>
         <div className="relative md:border-t-2 hidden md:block flex-col p-16 row-span-4 scrollarea">
-          <Sticky stickyClassName="mx-auto py-32" hideOnBoundaryHit={false} boundaryElement=".scrollarea" topOffset={-130}>
+          <Sticky
-            <h2 className="text-3xl font-bold">
+            stickyClassName="mx-auto py-32"
-              User experience comes first
+            hideOnBoundaryHit={false}
-            </h2>
+            boundaryElement=".scrollarea"
+            topOffset={-130}
+          >
+            <h2 className="text-3xl font-bold">User experience comes first</h2>
             <p className="text-sm mt-2 text-muted-foreground">
-              We are always looking for ways to make your experience better. Always looking for feedback and suggestions!
+              We are always looking for ways to make your experience better.
+              Always looking for feedback and suggestions!
             </p>
           </Sticky>
         </div>
         <div className="relative md:grid border-t-2 md:border-l-2 md:col-span-2 md:grid-cols-2 row-span-2">
-          <div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
             <div className="">
               <div>
-                <h2 className="text-3xl font-bold">
+                <h2 className="text-3xl font-bold">Customization is key</h2>
-                  Customization is key
-                </h2>
                 <p className="text-sm mt-2 text-muted-foreground">
-                  We are always looking for ways to make your experience better. With stackable themes that can be mixed and matched, you can create a browser that is truly yours. <a className="text-blue-500" href="https://docs.zen-browser.app/themes-store/themes-marketplace">Learn more</a>
+                  We are always looking for ways to make your experience better.
+                  With stackable themes that can be mixed and matched, you can
+                  create a browser that is truly yours.{' '}
+                  <a
+                    className="text-blue-500"
+                    href="https://docs.zen-browser.app/themes-store/themes-marketplace"
+                  >
+                    Learn more
+                  </a>
                 </p>
               </div>
-              <Button className="mt-4 rounded-full p-5 ml-auto">Download zen now!</Button>
+              <Link href="/download">
+                <Button className="mt-4 rounded-full p-5 ml-auto">
+                  Download Zen now!
+                </Button>
+              </Link>
             </div>
             <div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
               {COLORS.map((color) => (
-                <div key={color} className="w-5 h-5 rounded-full mx-3 " style={{ backgroundColor: color }} />
+                <div
+                  key={color}
+                  className="w-5 h-5 rounded-full mx-3 "
+                  style={{ backgroundColor: color }}
+                />
               ))}
             </div>
             <div className="border w-1/2 rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex transform translate-x-[calc(50%-1.5rem)]">
               <Slider defaultValue={[80]} max={100} />
             </div>
-            <a href='/themes' className="border-2 w-fit md:w-1/2 lg:w-fit flex items-center justify-center rounded-xl shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black border-blue-500 flex text-muted-foreground">
+            <a
-              <span>
+              href="/themes"
-                Checkout our themes store
+              className="border-2 w-fit md:w-1/2 lg:w-fit flex items-center justify-center rounded-xl shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black border-blue-500 flex text-muted-foreground"
-              </span>
+            >
+              <span>Checkout our themes store</span>
               <ChevronRight className="w-5 h-5 ml-2" />
             </a>
           </div>
         </div>
         <div className="relative md:grid md:border-l-2 border-t-2 md:col-span-2 grid-cols-2 row-span-2">
-          <div className="w-1/2 absolute md:relative z-[-1] opacity-50 md:opacity-1 md:w-full h-full border-r-2 md:border-r"></div>
-          <div className="w-1/2 absolute md:relative z-[-1] hidden md:block md:w-full h-full border-l"></div>
           <div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
             <div className="flex flex-col md:flex-row">
-              <div className='relative'>
+              <div className="relative">
-                <h2 className="text-3xl font-bold">
+                <h2 className="text-3xl font-bold">Compact mode is here!</h2>
-                  Compact mode is here!
-                </h2>
                 <p className="text-sm mt-2 text-muted-foreground">
-                  With a new compact mode, you can save space and focus on what matters.
+                  With a new compact mode, you can save space and focus on what
+                  matters.
                 </p>
                 <div className="bg-blue-600 p-1 px-2 text-white rounded-md text-xs transform rotate-[10deg] absolute right-0 top-[-10px]">
                   Killer feature
                 </div>
               </div>
-              <Button className="mt-4 rounded-full p-5 ml-4">Download zen now!</Button>
+              <Link href="/download">
+                <Button className="mt-4 rounded-full p-5 ml-4">
+                  Download Zen now!
+                </Button>
+              </Link>
             </div>
-            <img src="/compact-mode.png" className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600" />
+            <img
+              src="/compact-mode.png"
+              className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600"
+            />
           </div>
         </div>
-        <div className='flex flex-col p-5 md:p-16 md:col-span-2 border-t-2 row-span-2'>
+        <div className="flex flex-col p-5 md:p-16 md:col-span-2 border-t-2 row-span-2">
           <div className="rounded-full px-8 py-3 shadow border-2 flex items-center">
             <div className="font-bold text-md">
               What makes Zen Browser different?
@@ -176,13 +210,14 @@ export default function Features() {
             <img src="/favicon.ico" className="ml-auto w-7 h-7" />
           </div>
           <div className="h-full w-full flex items-center justify-center">
-            <Table className='w-full'>
+            <Table className="w-full">
               <TableHeader>
-                <TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
+                <TableRow
+                  className="!border-none"
+                  style={{ pointerEvents: 'none' }}
+                >
                   <TableHead className="py-2 text-2xl font-bold text-black dark:text-white">
-                    <span className="">
+                    <span className="">How Zen compares to other browsers</span>
-                    How Zen compares to other browsers
-                    </span>
                   </TableHead>
                   <TableHead className="py-2 font-bold text-center">
                     <Image
@@ -217,7 +252,7 @@ export default function Features() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                <TableRow className='border-none'>
+                <TableRow className="border-none">
                   <TableCell className="py-3 font-medium">
                     Fine-grained security like sandboxing
                   </TableCell>
@@ -231,7 +266,7 @@ export default function Features() {
                     <Checkmark />
                   </TableCell>
                 </TableRow>
-                <TableRow className='border-none'>
+                <TableRow className="border-none">
                   <TableCell className="py-3 font-medium">
                     Optimized for peak performance
                   </TableCell>
@@ -245,7 +280,7 @@ export default function Features() {
                     <Cross />
                   </TableCell>
                 </TableRow>
-                <TableRow className='border-none'>
+                <TableRow className="border-none">
                   <TableCell className="py-3 font-medium">
                     Based on the latest Firefox
                   </TableCell>
@@ -259,7 +294,7 @@ export default function Features() {
                     <Checkmark />
                   </TableCell>
                 </TableRow>
-                <TableRow className='border-none'>
+                <TableRow className="border-none">
                   <TableCell className="py-3 font-medium">
                     Customizable with cutting-edge features
                   </TableCell>
@@ -277,41 +312,47 @@ export default function Features() {
             </Table>
           </div>
         </div>
-        <div className='border-t-2 md:border-l-2 row-span-3 grid grid-rows-3'>
+        <div className="border-t-2 md:border-l-2 row-span-3 grid grid-rows-3">
           <div className="flex items-center flex-col justify-center p-16">
             <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
               <Github className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">
+              <h2 className="text-lg font-bold ml-4">Open source</h2>
-                Open source
-              </h2>
             </div>
             <p className="text-sm mt-8 text-muted-foreground text-center">
               Zen Browser is open source and always will be. You can check out
-              the source code on our <a className="text-blue-500" href="https://github.com/zen-browser">Github</a>!
+              the source code on our{' '}
+              <a
+                className="text-blue-500"
+                href="https://github.com/zen-browser"
+              >
+                Github
+              </a>
+              !
             </p>
           </div>
           <div className="flex flex-col items-center justify-center p-16 md:border-t-2">
             <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
               <ReloadIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">
+              <h2 className="text-lg font-bold ml-4">Updated</h2>
-                Updated
-              </h2>
             </div>
             <p className="text-sm mt-8 text-muted-foreground text-center">
               We are always working on new features and improvements. You can
               expect regular updates to keep your browser up to date.
             </p>
           </div>
+
           <div className="flex flex-col p-16 md:border-t-2">
-            <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
+            <div className="border-2 mt-4 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
               <HeartFilledIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">
+              <h2 className="text-lg font-bold ml-4">Community</h2>
-                Community
-              </h2>
             </div>
             <p className="text-sm mt-8 text-muted-foreground text-center">
               Zen Browser is built by a community of passionate developers and
-              designers. You can join us on our <a className="text-blue-500" href="https://discord.gg/nnShMQzR4b">Discord</a>!
+              designers. You can join us on our{' '}
+              <a className="text-blue-500" href="https://discord.gg/nnShMQzR4b">
+                Discord
+              </a>
+              !
             </p>
           </div>
         </div>
@@ -319,21 +360,17 @@ export default function Features() {
           <div className="p-16 border-r-2 flex flex-col items-center justify-center">
             <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
               <EyeClosedIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">
+              <h2 className="text-lg font-bold ml-4">Your Data</h2>
-                Your Data
-              </h2>
             </div>
             <p className="text-sm mt-8 text-muted-foreground text-center">
-              We are always looking for ways to improve your privacy. Zen Browser
+              We are always looking for ways to improve your privacy. Zen
-              comes with built-in privacy features to keep you safe.
+              Browser comes with built-in privacy features to keep you safe.
             </p>
           </div>
           <div className="p-16 flex flex-col items-center justify-center">
             <div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
               <UpdateIcon className="w-8 h-8" />
-              <h2 className="text-lg font-bold ml-4">
+              <h2 className="text-lg font-bold ml-4">Improvements</h2>
-                Improvements
-              </h2>
             </div>
             <p className="text-sm mt-8 text-muted-foreground text-center">
               We are always looking for ways to make Zen Browser better. You can
@@ -346,26 +383,35 @@ export default function Features() {
             <div className="relative w-full h-full flex items-center justify-center">
               <img
                 src="/split-view.png"
-                className={ny("absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300",
+                className={ny(
+                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                   feature === 0 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
                 )}
               />
               <img
                 src="/workspaces.png"
-                className={ny("absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300",
+                className={ny(
+                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                   feature === 1 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
                 )}
               />
               <img
                 src="/sidebar.png"
-                className={ny("absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300",
+                className={ny(
+                  'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
                   feature === 2 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
                 )}
               />
             </div>
           </div>
           <div className="p-16 flex flex-col items-center justify-around row-span-2">
-            <div className={ny(feature === 0 ? 'opacity-100' : 'opacity-50', "mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer")} onClick={() => setFeature(0)}>
+            <div
+              className={ny(
+                feature === 0 ? 'opacity-100' : 'opacity-50',
+                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
+              )}
+              onClick={() => setFeature(0)}
+            >
               <h2 className="text-lg font-bold ml-4 flex items-center">
                 <SplitSquareHorizontal className="w-4 h-4 mr-2" />
                 Split view
@@ -374,7 +420,13 @@ export default function Features() {
                 Split your browser into two windows to work more efficiently.
               </p>
             </div>
-            <div className={ny(feature === 1 ? 'opacity-100' : 'opacity-50', "mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer")} onClick={() => setFeature(1)}>
+            <div
+              className={ny(
+                feature === 1 ? 'opacity-100' : 'opacity-50',
+                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
+              )}
+              onClick={() => setFeature(1)}
+            >
               <h2 className="text-lg font-bold ml-4 flex items-center">
                 <HomeIcon className="w-4 h-4 mr-2" />
                 Workspaces
@@ -383,7 +435,13 @@ export default function Features() {
                 Organize your tabs into workspaces to keep things tidy.
               </p>
             </div>
-            <div className={ny(feature === 2 ? 'opacity-100' : 'opacity-50', "mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer")} onClick={() => setFeature(2)}>
+            <div
+              className={ny(
+                feature === 2 ? 'opacity-100' : 'opacity-50',
+                'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
+              )}
+              onClick={() => setFeature(2)}
+            >
               <h2 className="text-lg font-bold ml-4 flex items-center">
                 <SidebarIcon className="w-4 h-4 mr-2" />
                 Sidebar

src/components/release-note.tsx

@@ -97,7 +97,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
       </div>
       <div className="flex flex-wrap items-center justify-center">
         <Link href="/download">
-          <Button className="mt-12 w-fit mx-auto">Download zen now!</Button>
+          <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
         </Link>
       </div>
     </div>

src/components/theme-card.tsx

@@ -3,7 +3,7 @@ import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
 import styled from "styled-components";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
 
-const ThemeCardWrapepr = styled.div`
+const ThemeCardWrapper = styled.div`
 `;
 
 export default function ThemeCard({
@@ -11,14 +11,18 @@ export default function ThemeCard({
 }: {
   theme: ZenTheme;
 }) {
+
+  const maxNameLen = 50;
+  const maxDescLen = 100;
+
   return (
-    <ThemeCardWrapepr onClick={(event) => {
+    <ThemeCardWrapper onClick={(event) => {
       if (event.target instanceof HTMLAnchorElement) return;
       window.open(`/themes/${theme.id}`, "_self");
     }} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
       <Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
       className="w-full h-32 object-cover rounded-lg border shadow" />
-      <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
+      <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>
       <div className="flex mt-2">
         {theme.homepage && (
           <>
@@ -34,7 +38,10 @@ export default function ThemeCard({
           Author
         </a>
       </div>
-      <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
+      <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">
-    </ThemeCardWrapepr>
+        {theme.description.substring(0, maxDescLen).trim() +
+          (theme.description.length > maxDescLen ? "..." : "")}
+      </p>
+    </ThemeCardWrapper>
   );
 }

src/components/theme-page.tsx

@@ -1,20 +1,31 @@
+"use client";
 import Image from "next/image";
-import { getThemeAuthorLink, getThemeMarkdown, ZenTheme } from "@/lib/themes";
+import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
-import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
+import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
+import { useParams } from "next/navigation";
 
-export default function ThemePage({ theme }: { theme: ZenTheme }) {
+export default async function ThemePage() {
-  const [readme, setReadme] = useState<string | null>(null);
+  const params = useParams<{ theme: string }>();
-  useEffect(() => {
+  const { theme: themeID } = params;
-    getThemeMarkdown(theme).then(setReadme);
+
-  }, [theme]);
+  const theme = await getThemeFromId(themeID);
+  if (!theme) {
+    return <div>Theme not found</div>;
+  }
+
+  const readme = await getThemeMarkdown(theme);
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
-      <div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+      <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+        <div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          <h3 className="text-md">Go back</h3>
+        </div>
         <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,11 +53,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
       </div>
       <hr className="block my-4 lg:hidden" />
-      <div className="flex flex-col lg:border-l lg:min-h-96 pl-10 lg:ml-[25rem] max-w-xl lg:min-w-96 w-full">
+      <div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
-        <div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
-          <ChevronLeft className="w-4 h-4 mr-1" />
-          <h3 className="text-md">Go back</h3>
-        </div>
         <div id="policy" className="w-full">
           {readme === null ? (
             <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
@@ -60,6 +67,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
           <a href={getThemeAuthorLink(theme)} className="text-blue-500 text-md mt-4" target="_blank" rel="noopener noreferrer">
             {theme.author}
           </a>
+          {` • v${theme.version}`}
         </p>
       </div>
     </div>

src/lib/release-notes.ts

@@ -601,6 +601,31 @@ export const releaseNotes: ReleaseNote[] = [
         }
     ]
   },
+  {
+    version: "1.0.0-a.29",
+    date: "24/08/2024",
+    extra: "This release is the twenty-ninth alpha release of the 1.0.0-alpha series.",
+    features: [
+        "Added Spanish translations",
+        "Added documentation for contributing",
+        "Added support for multi-tab splitting with shortcuts",
+        "Fixed sidebar shortcuts"
+    ],
+    fixes: [
+        {
+            description: "Text on websites is blurry",
+            issue: 383
+        },
+        {
+            description: "Expanded compact mode triggers too early",
+            issue: 520
+        },
+        {
+            description: "Ampersand in workspace name breaks workspace menu",
+            issue: 439
+        }
+    ]
+    }
 ].reverse();
 
 export function releaseNoteIsAlpha(note: ReleaseNote) {

src/lib/styled-components-registry.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}

src/lib/themes.ts

@@ -10,6 +10,7 @@ export interface ZenTheme {
   preferences?: string
   isColorTheme: boolean
   author: string
+  version: string
 }
 
 const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";