diff --git a/next.config.mjs b/next.config.mjs index 244af26..431d026 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,11 +1,22 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - experimental: { - serverActions: { - // edit: updated to new key. Was previously `allowedForwardedHosts` - allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'], - }, + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "raw.githubusercontent.com", + }, + ], + }, + experimental: { + serverActions: { + // edit: updated to new key. Was previously `allowedForwardedHosts` + allowedOrigins: ["localhost:3000", "get-zen.vercel.app"], }, + }, + compiler: { + styledComponents: true, + }, }; export default nextConfig; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3de6cf4..971e56e 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"] }); @@ -25,7 +26,7 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > - {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/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 663e666..1d3be00 100644 --- a/src/components/create-theme.tsx +++ b/src/components/create-theme.tsx @@ -180,9 +180,19 @@ export default function CreateThemePage() { setColorsBorder(e.target.value)} />
+

+ Dialog background color +

+
+ 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/download.tsx b/src/components/download.tsx index bc6018c..2ab7f6e 100644 --- a/src/components/download.tsx +++ b/src/components/download.tsx @@ -245,7 +245,7 @@ export default function DownloadPage() { className="mt-5" onClick={() => (window.location.href = - "https://github.com/zen-browser/desktop/issues/53") + "https://docs.zen-browser.app/guides/install-macos") } > Download Zen for MacOS diff --git a/src/components/features.tsx b/src/components/features.tsx index 214e3ab..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 tweaking Firefox's engine and settings to make it + We constantly tweak Firefox's engine and settings to make it faster than ever. Learn more

@@ -117,8 +118,6 @@ export default function Features() {
-
-
@@ -129,17 +128,17 @@ 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) => (
))}
-
+
- + Checkout our themes store @@ -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-card.tsx b/src/components/theme-card.tsx index aae70f6..988bbce 100644 --- a/src/components/theme-card.tsx +++ b/src/components/theme-card.tsx @@ -1,7 +1,7 @@ +import Image from "next/image"; 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"; +import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button"; const ThemeCardWrapepr = styled.div` `; @@ -15,8 +15,9 @@ export default function ThemeCard({ { 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 hover:border-blue-500 hover:shadow-lg"> - {theme.name} + }} 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 "> + {theme.name}

{theme.name}

{theme.homepage && ( diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx index 444a2b7..6a89b9d 100644 --- a/src/components/theme-page.tsx +++ b/src/components/theme-page.tsx @@ -1,20 +1,25 @@ +import Image from "next/image"; import { getThemeAuthorLink, 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"; export default function ThemePage({ theme }: { theme: ZenTheme }) { const [readme, setReadme] = useState(null); useEffect(() => { getThemeMarkdown(theme).then(setReadme); - }, []); + }, [theme]); return ( -
-
- {theme.name} +
+
+
window.history.back()}> + +

Go back

+
+ {theme.name}

{theme.name}

{theme.description}

{theme.homepage && ( @@ -41,14 +46,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 ed9f36b..eb4ea52 100644 --- a/src/lib/release-notes.ts +++ b/src/lib/release-notes.ts @@ -566,7 +566,41 @@ export const releaseNotes: ReleaseNote[] = [ issue: 355 } ] - } + }, + { + version: "1.0.0-a.28", + date: "22/08/2024", + extra: "This release is the twenty-eighth alpha release of the 1.0.0-alpha series.", + features: [ + "Enabled JPEG XL", + "Changed Zen Core Components license to CC BY-SA", + "Added support for color themes in theme creation", + "Fixed sidebar shortcuts", + "Started work on browser translations" + ], + fixes: [ + { + description: "No way to restore native theming to toolbar", + issue: 426 + }, + { + description: "Address bar icons are hidden", + issue: 430 + }, + { + description: "Tabs don't appear in vertical tab bar", + issue: 429 + }, + { + description: "Location bar is not focused when opening new window", + issue: 414 + }, + { + description: "The treshhold for the expanded tab sidebar in compact mode is too high", + issue: 389 + } + ] + }, ].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} + + ); +}