diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 988bbce..3e29af1 100644
--- a/src/components/theme-card.tsx
+++ b/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({
@@ -12,7 +12,7 @@ export default function ThemeCard({
theme: ZenTheme;
}) {
return (
- {
+ {
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 ">
@@ -35,6 +35,6 @@ export default function ThemeCard({
{theme.description}
-
+
);
}
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.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}
+
+ );
+}
![{color} @@ -40,7 +42,7 @@ export function BrandingAssets() { {color} diff --git a/src/components/download.tsx b/src/components/download.tsx index 2ab7f6e..7398499 100644 --- a/src/components/download.tsx +++ b/src/components/download.tsx @@ -382,7 +382,7 @@ export default function DownloadPage() { 🍏 - aarch64 + AArch64 64-bit ARM architecture, for Apple's M Series Chips clearInterval(interval); }); return ( - + @@ -102,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 @@ -118,8 +118,6 @@ export default function Features() { - - @@ -149,8 +147,6 @@ export default function Features() { - - diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx index 988bbce..3e29af1 100644 --- a/src/components/theme-card.tsx +++ b/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({ @@ -12,7 +12,7 @@ export default function ThemeCard({ theme: ZenTheme; }) { return ( - { + { 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 "> @@ -35,6 +35,6 @@ export default function ThemeCard({ {theme.description} - + ); } 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.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} + + ); +}]({`/logos/zen-${color}.svg`}){kind=link}
