Merge branch 'zen-browser:main' into patch-1

2024-08-25 14:43:38 -04:00
parent b40cf9aec1 b101766f33
commit 708094e771
11 changed files with 135 additions and 43 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -3,17 +3,19 @@ const nextConfig = {
  images: {
    remotePatterns: [
      {
-        protocol: 'https',
-        hostname: 'raw.githubusercontent.com',
+        protocol: "https",
+        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,
  },
 };

--- a/src/app/layout.tsx
+++ b/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,9 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
+      </head>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
@@ -25,7 +29,7 @@ export default function RootLayout({
          enableSystem
          disableTransitionOnChange
        >
-          {children}
+          <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
        </ThemeProvider>
      </body>
    </html>
--- a/src/app/privacy-policy/page.tsx
+++ b/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
--- a/src/app/themes/[theme]/page.tsx
+++ b/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 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>;
+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() {
  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>
--- a/src/components/branding-assets.tsx
+++ b/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}
--- a/src/components/create-theme.tsx
+++ b/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>
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -28,6 +28,7 @@ import {
  UpdateIcon,
 } from "@radix-ui/react-icons";
 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';
@@ -73,7 +74,7 @@ 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 constantly tweak 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>
            </p>
          </div>
@@ -101,7 +102,7 @@ export default function Features() {
              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>
            </p>
          </div>
@@ -117,8 +118,6 @@ export default function Features() {
          </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>
@@ -129,7 +128,7 @@ export default function Features() {
                  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) => (
@@ -148,8 +147,6 @@ export default function Features() {
          </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'>
@@ -163,7 +160,7 @@ export default function Features() {
                  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" />
          </div>
--- a/src/components/release-note.tsx
+++ b/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>
--- a/src/components/theme-page.tsx
+++ b/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 }) {
-  const [readme, setReadme] = useState<string | null>(null);
-  useEffect(() => {
-    getThemeMarkdown(theme).then(setReadme);
-  }, [theme]);
+export default async function ThemePage() {
+  const params = useParams<{ theme: string }>();
+  const { theme: themeID } = params;
+
+  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 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 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 id="policy" className="w-full">
          {readme === null ? (
            <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
--- a/src/lib/release-notes.ts
+++ b/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) {
--- a/src/lib/styled-components-registry.tsx
+++ b/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>
+  );
+}