joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ΛRSfr
2024-08-25 14:43:38 -04:00
committed by GitHub
parent b40cf9aec1 b101766f33
commit 708094e771
11 changed files with 135 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
next.config.mjs
View File

@@ -3,17 +3,19 @@ const nextConfig = {
images: { images: {
remotePatterns: [ remotePatterns: [
{ {
protocol: 'https', protocol: "https",
hostname: 'raw.githubusercontent.com', hostname: "raw.githubusercontent.com",
}, },
], ],
}, },
experimental: { experimental: {
serverActions: { serverActions: {
// edit: updated to new key. Was previously `allowedForwardedHosts` // 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,
}, },
}; };

8
src/app/layout.tsx
View File

@@ -1,7 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; 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"] }); const inter = Inter({ subsets: ["latin"] });
@@ -18,6 +19,9 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<head>
<link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
</head>
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
@@ -25,7 +29,7 @@ export default function RootLayout({
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
{children} <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

2
src/app/privacy-policy/page.tsx
View File

@@ -52,7 +52,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's
# 4. Data Security # 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. 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. Your Control
## 5.1. Data Deletion ## 5.1. Data Deletion

45
src/app/themes/[theme]/page.tsx
View File

@@ -1,22 +1,45 @@
"use client";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation"; import { Navigation } from "@/components/navigation";
import ThemePage from "@/components/theme-page"; import ThemePage from "@/components/theme-page";
import { getThemeFromId } from "@/lib/themes"; 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() { 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 ( return (
<main className="flex min-h-screen flex-col items-center justify-start"> <main className="flex min-h-screen flex-col items-center justify-start">
<ThemePage theme={theme} /> <ThemePage />
<Footer /> <Footer />
<Navigation /> {/* At the bottom of the page */} <Navigation /> {/* At the bottom of the page */}
</main> </main>

4
src/components/branding-assets.tsx
View File

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

5
src/components/create-theme.tsx
View File

@@ -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)} /> <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 className="w-11 h-11 ml-4 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
</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> <Sheet>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button className="mt-8">Create theme</Button> <Button disabled className="mt-8">Create theme</Button>
</SheetTrigger> </SheetTrigger>
<SheetContent className="!w-[600px] !max-w-lg"> <SheetContent className="!w-[600px] !max-w-lg">
<SheetHeader> <SheetHeader>

13
src/components/features.tsx
View File

@@ -28,6 +28,7 @@ import {
UpdateIcon, 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 { Button } from './ui/button';
import { COLORS } from './create-theme'; import { COLORS } from './create-theme';
import { Slider } from './ui/slider'; import { Slider } from './ui/slider';
@@ -73,7 +74,7 @@ export default function Features() {
Goodbye bad performance Goodbye bad performance
</h2> </h2>
<p className="text-center text-sm mt-2 text-muted-foreground"> <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> 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> </p>
</div> </div>
@@ -101,7 +102,7 @@ export default function Features() {
Secure by default Secure by default
</h2> </h2>
<p className="text-center text-sm mt-2 text-muted-foreground"> <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> </p>
</div> </div>
@@ -117,8 +118,6 @@ export default function Features() {
</Sticky> </Sticky>
</div> </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="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="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
<div className=""> <div className="">
<div> <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> 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> </p>
</div> </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>
<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"> <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) => ( {COLORS.map((color) => (
@@ -148,8 +147,6 @@ export default function Features() {
</div> </div>
</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="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="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="flex flex-col md:flex-row">
<div className='relative'> <div className='relative'>
@@ -163,7 +160,7 @@ export default function Features() {
Killer feature Killer feature
</div> </div>
</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> </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>

2
src/components/release-note.tsx
View File

@@ -97,7 +97,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
</div> </div>
<div className="flex flex-wrap items-center justify-center"> <div className="flex flex-wrap items-center justify-center">
<Link href="/download"> <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> </Link>
</div> </div>
</div> </div>

35
src/components/theme-page.tsx
View File

@@ -1,20 +1,31 @@
"use client";
import Image from "next/image"; 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 { Button } from "./ui/button";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css'; 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 ( return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative"> <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" /> <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> <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
<p className="text-sm text-muted-foreground mt-2">{theme.description}</p> <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,14 +53,10 @@ 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> <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> </div>
<hr className="block my-4 lg:hidden" /> <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"> <div id="policy" className="w-full">
{readme === null ? ( {readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" /> <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
) : ( ) : (
<Markdown>{`${readme}`}</Markdown> <Markdown>{`${readme}`}</Markdown>
)} )}

25
src/lib/release-notes.ts
View File

@@ -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(); ].reverse();
export function releaseNoteIsAlpha(note: ReleaseNote) { export function releaseNoteIsAlpha(note: ReleaseNote) {

29
src/lib/styled-components-registry.tsx Normal file
View File

@@ -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>
);
}