diff --git a/next.config.mjs b/next.config.mjs index 48f03d4..431d026 100644 --- 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, }, }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3de6cf4..13fbbc8 100644 --- 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 ( + + + - {children} + {children} diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx index 7a9af0a..5408dea 100644 --- 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 diff --git a/src/app/themes/[theme]/page.tsx b/src/app/themes/[theme]/page.tsx index bb2d5c2..ab32280 100644 --- 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 async function generateMetadata( + { params, searchParams }: any, + parent: ResolvingMetadata +): Promise { + 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
Theme not found
; - } - return (
- +
{/* At the bottom of the page */}
diff --git a/src/components/branding-assets.tsx b/src/components/branding-assets.tsx index fb14914..5100b07 100644 --- 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() {
{color} @@ -40,7 +42,7 @@ export function BrandingAssets() {
{color} diff --git a/src/components/create-theme.tsx b/src/components/create-theme.tsx index 806be32..1d3be00 100644 --- a/src/components/create-theme.tsx +++ b/src/components/create-theme.tsx @@ -187,9 +187,12 @@ export default function CreateThemePage() { setDialogBg(e.target.value)} />
+
+ 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. +
- + diff --git a/src/components/features.tsx b/src/components/features.tsx index 014fdce..31d12a0 100644 --- 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

- 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. Learn more

@@ -101,7 +102,7 @@ export default function Features() { Secure by default

- 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. Learn more

@@ -117,8 +118,6 @@ export default function Features() {
-
-
@@ -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. Learn more

- +
{COLORS.map((color) => ( @@ -148,8 +147,6 @@ export default function Features() {
-
-
@@ -163,7 +160,7 @@ export default function Features() { Killer feature
- +
diff --git a/src/components/release-note.tsx b/src/components/release-note.tsx index 8cf450a..9dc2c15 100644 --- a/src/components/release-note.tsx +++ b/src/components/release-note.tsx @@ -97,7 +97,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
- +
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx index b8be7fd..bfef366 100644 --- 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(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
Theme not found
; + } + + const readme = await getThemeMarkdown(theme); return (
-
+
+
window.history.back()}> + +

Go back

+
{theme.name}

{theme.name}

{theme.description}

@@ -42,14 +53,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {

You need to have Zen Browser installed to install this theme. Download now!

-
-
window.history.back()}> - -

Go back

-
+
{readme === null ? ( - + ) : ( {`${readme}`} )} diff --git a/src/lib/release-notes.ts b/src/lib/release-notes.ts index eb4ea52..8d0cfaf 100644 --- 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) { diff --git a/src/lib/styled-components-registry.tsx b/src/lib/styled-components-registry.tsx new file mode 100644 index 0000000..fa12293 --- /dev/null +++ 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 ( + + {children} + + ); +}