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

Refactor Prettier configuration to adhere to code style guidelines

Browse Source
This commit is contained in:
mauro 🤙
2024-09-15 14:46:10 +00:00
parent e7b4be867f
commit f71d765d16
91 changed files with 16139 additions and 25613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/.env/page.tsx
View File

@@ -1,7 +1,6 @@
import { redirect } from "next/navigation";
export default function WhyAreYouEvenHere() {
redirect("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
return null;
redirect("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
return null;
}

25
src/app/about/page.tsx
View File

@@ -3,15 +3,18 @@ import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
import Link from "next/link";
import Markdown from 'react-markdown'
import '../privacy-policy/markdown.css';
import Markdown from "react-markdown";
import "../privacy-policy/markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div id="policy" className="min-h-screen py-42 flex mx-auto my-52 p-10 lg:p-0 w-full lg:w-1/3 flex-col">
<Markdown>
{`
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Main Developer Team
* [**Mauro Baladés**](https://github.com/mauro-balades): Creator, Main Developer, and a funny guy.
@@ -33,8 +36,8 @@ export default function PrivacyPolicy() {
![Contributors](https://contributors-img.web.app/image?repo=zen-browser/www)
`}
</Markdown>
</div>
</main>
)
</Markdown>
</div>
</main>
);
}

10
src/app/branding-assets/page.tsx
View File

@@ -3,9 +3,9 @@ import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<BrandingAssets />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<BrandingAssets />
</main>
);
}

10
src/app/create-theme/page.tsx
View File

@@ -3,9 +3,9 @@ import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<CreateThemePage />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<CreateThemePage />
</main>
);
}

11
src/app/download/page.tsx
View File

@@ -1,12 +1,11 @@
import DownloadPage from "@/components/download";
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<DownloadPage />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<DownloadPage />
</main>
);
}

136
src/app/feed.xml/route.ts
View File

@@ -14,57 +14,56 @@ const RSS_ENTRY_LIMIT = 20;
* @returns The RSS feed for the Zen Browser release notes.
*/
export async function GET() {
// Just in case the release notes array is empty for whatever reason.
const latestDate = releaseNotes.length > 0
? formatRssDate(releaseNotes[0].date)
: new Date();
// Just in case the release notes array is empty for whatever reason.
const latestDate =
releaseNotes.length > 0 ? formatRssDate(releaseNotes[0].date) : new Date();
const feed = new Feed({
id: "https://www.zen-browser.app/release-notes",
link: "https://www.zen-browser.app/release-notes",
title: "Zen Browser Release Notes",
description: "Release Notes for the Zen Browser",
language: "en",
favicon: "https://www.zen-browser.app/favicon.ico",
copyright: `Zen Browser © ${new Date().getFullYear()} - Made with ❤️ by the Zen team.`,
updated: latestDate,
});
const feed = new Feed({
id: "https://www.zen-browser.app/release-notes",
link: "https://www.zen-browser.app/release-notes",
title: "Zen Browser Release Notes",
description: "Release Notes for the Zen Browser",
language: "en",
favicon: "https://www.zen-browser.app/favicon.ico",
copyright: `Zen Browser © ${new Date().getFullYear()} - Made with ❤️ by the Zen team.`,
updated: latestDate,
});
for (const releaseNote of releaseNotes.slice(0, RSS_ENTRY_LIMIT)) {
feed.addItem({
title: `Release notes for version ${releaseNote.version}`,
id: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
link: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
date: formatRssDate(releaseNote.date),
description: releaseNote.extra,
content: formatReleaseNote(releaseNote),
});
}
for (const releaseNote of releaseNotes.slice(0, RSS_ENTRY_LIMIT)) {
feed.addItem({
title: `Release notes for version ${releaseNote.version}`,
id: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
link: `https://www.zen-browser.app/release-notes/${releaseNote.version}`,
date: formatRssDate(releaseNote.date),
description: releaseNote.extra,
content: formatReleaseNote(releaseNote),
});
}
return new Response(feed.rss2(), {
headers: {
'Content-Type': 'application/xml; charset=utf-8',
},
});
return new Response(feed.rss2(), {
headers: {
"Content-Type": "application/xml; charset=utf-8",
},
});
}
/**
* Formats a date string in the format day/month/year.
*
* Formats a date string in the format day/month/year.
*
* Note: If release notes change to ISO format, this will need to be updated.
* @param dateStr The date string to format.
* @returns The passed in date string as a Date object.
*/
function formatRssDate(dateStr: string) {
const splitDate = dateStr.split("/");
if (splitDate.length !== 3) {
throw new Error("Invalid date format");
}
const splitDate = dateStr.split("/");
if (splitDate.length !== 3) {
throw new Error("Invalid date format");
}
const day = Number(splitDate[0]);
const month = Number(splitDate[1]) - 1;
const year = Number(splitDate[2]);
return new Date(year, month, day);
const day = Number(splitDate[0]);
const month = Number(splitDate[1]) - 1;
const year = Number(splitDate[2]);
return new Date(year, month, day);
}
/**
@@ -73,38 +72,39 @@ function formatRssDate(dateStr: string) {
* @returns The formatted release note as a HTML string.
*/
function formatReleaseNote(releaseNote: ReleaseNote) {
let content = "<p>If you encounter any issues, please report them on <a href=\"https://github.com/zen-browser/desktop/issues/\">the issues page</a>. Thanks everyone for your feedback! ❤️</p>";
let content =
'<p>If you encounter any issues, please report them on <a href="https://github.com/zen-browser/desktop/issues/">the issues page</a>. Thanks everyone for your feedback! ❤️</p>';
if (releaseNote.extra) {
content += `<p>${releaseNote.extra.replace(/(\n)/g, "<br />")}</p>`
}
if (releaseNote.extra) {
content += `<p>${releaseNote.extra.replace(/(\n)/g, "<br />")}</p>`;
}
if (releaseNote.breakingChanges) {
content += `<h2>⚠️ Breaking changes</h2>`
content += `<ul>`
for (const breakingChange of releaseNote.breakingChanges) {
content += `<li>${breakingChange}</li>`
}
content += `</ul>`
}
if (releaseNote.breakingChanges) {
content += `<h2>⚠️ Breaking changes</h2>`;
content += `<ul>`;
for (const breakingChange of releaseNote.breakingChanges) {
content += `<li>${breakingChange}</li>`;
}
content += `</ul>`;
}
if (releaseNote.features) {
content += `<h2>⭐ Features</h2>`
content += `<ul>`
for (const feature of releaseNote.features) {
content += `<li>${feature}</li>`
}
content += `</ul>`
}
if (releaseNote.features) {
content += `<h2>⭐ Features</h2>`;
content += `<ul>`;
for (const feature of releaseNote.features) {
content += `<li>${feature}</li>`;
}
content += `</ul>`;
}
if (releaseNote.fixes) {
content += `<h2>✓ Fixes</h2>`
content += `<ul>`
for (const fix of releaseNote.fixes) {
content += `<li>${fix.description}</li>`
}
content += `</ul>`
}
if (releaseNote.fixes) {
content += `<h2>✓ Fixes</h2>`;
content += `<ul>`;
for (const fix of releaseNote.fixes) {
content += `<li>${fix.description}</li>`;
}
content += `</ul>`;
}
return content;
return content;
}

64
src/app/layout.tsx
View File

@@ -9,39 +9,43 @@ import { Navigation } from "@/components/navigation";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Zen Browser",
description: "Download now and experience the Zen Browser",
keywords: ["Zen", "Browser", "Zen Browser", "Web", "Internet", "Fast"],
title: "Zen Browser",
description: "Download now and experience the Zen Browser",
keywords: ["Zen", "Browser", "Zen Browser", "Web", "Internet", "Fast"],
};
export default async function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
return (
<html suppressHydrationWarning>
<head>
<link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
<script defer data-domain="zen-browser.app" src="https://plausible.io/js/script.js"></script>
<link rel="alternate" type="application/rss+xml" title="Zen Browser Release Notes" href="https://www.zen-browser.app/feed.xml" />
</head>
<body className={inter.className}>
<ThemeProvider
attribute="class"
enableSystem
disableTransitionOnChange
>
<StyledComponentsRegistry>
<div>
{children}
<Footer />
<Navigation /> {/* At the bottom of the page */}
</div>
</StyledComponentsRegistry>
</ThemeProvider>
</body>
</html>
);
return (
<html suppressHydrationWarning>
<head>
<link rel="me" href="https://fosstodon.org/@zenbrowser"></link>
<script
defer
data-domain="zen-browser.app"
src="https://plausible.io/js/script.js"
></script>
<link
rel="alternate"
type="application/rss+xml"
title="Zen Browser Release Notes"
href="https://www.zen-browser.app/feed.xml"
/>
</head>
<body className={inter.className}>
<ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
<StyledComponentsRegistry>
<div>
{children}
<Footer />
<Navigation /> {/* At the bottom of the page */}
</div>
</StyledComponentsRegistry>
</ThemeProvider>
</body>
</html>
);
}

30
src/app/not-found.tsx
View File

@@ -2,19 +2,19 @@ import { Button } from "@/components/ui/button";
import { HomeIcon } from "@radix-ui/react-icons";
export default function NotFoundPage() {
return (
<main className="min-h-screen grid place-items-center">
<div className="flex flex-col justify-center items-center text-center">
<h1 className="animate-fade-in -translate-y-4 text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] sm:text-6xl md:text-7xl lg:text-8xl dark:from-white dark:to-white/40">
Page Not Found!
</h1>
<a href="/"><Button
className="flex items-center justify-center animate-fade-in -translate-y-4 gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] font-medium dark:text-black"
>
<span>Back to Home</span>
<HomeIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button></a>
</div>
</main>
);
return (
<main className="grid min-h-screen place-items-center">
<div className="flex flex-col items-center justify-center text-center">
<h1 className="-translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-black from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
Page Not Found!
</h1>
<a href="/">
<Button className="flex -translate-y-4 animate-fade-in items-center justify-center gap-1 font-medium text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black">
<span>Back to Home</span>
<HomeIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button>
</a>
</div>
</main>
);
}

13
src/app/page.tsx
View File

@@ -6,11 +6,10 @@ import Header from "@/components/header";
import { Navigation } from "@/components/navigation";
export default function Home() {
return (
<main className="flex min-h-screen overflow-x-hidden flex-col items-center justify-start">
<Header />
<Features />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden">
<Header />
<Features />
</main>
);
}

49
src/app/privacy-policy/markdown.css
View File

@@ -1,58 +1,57 @@
#policy h1 {
font-size: 2.5em;
margin: 0.67em 0;
font-weight: bold;
font-size: 2.5em;
margin: 0.67em 0;
font-weight: bold;
}
#policy {
padding-top: 2.5em;
margin-top: 4em;
padding-top: 2.5em;
margin-top: 4em;
}
#policy h1:first-child {
margin-top: 0 !important;
margin-top: 0 !important;
}
#policy h2 {
font-size: 2em;
margin: 0.83em 0;
font-weight: bold;
font-size: 2em;
margin: 0.83em 0;
font-weight: bold;
}
#policy h3 {
font-size: 1.5em;
margin: 1em 0;
font-weight: semi-bold;
font-size: 1.5em;
margin: 1em 0;
font-weight: semi-bold;
}
#policy ul {
margin: 1em 0;
margin: 1em 0;
}
#policy li {
list-style: circle;
margin-left: 1.1em;
font-size: 1.1em;
list-style: circle;
margin-left: 1.1em;
font-size: 1.1em;
}
/* Link styles */
#policy a {
color: #007bff;
transition: color 0.2s ease-in-out;
color: #007bff;
transition: color 0.2s ease-in-out;
}
#policy a:hover {
text-decoration: underline;
color: #0056b3;
text-decoration: underline;
color: #0056b3;
}
#policy hr {
margin: 2em 0;
border: 1px solid #ddd;
margin: 2em 0;
border: 1px solid #ddd;
}
#policy p {
margin: 1em 0;
line-height: 1.6;
margin: 1em 0;
line-height: 1.6;
}

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

@@ -3,15 +3,18 @@ import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
import Link from "next/link";
import Markdown from 'react-markdown'
import './markdown.css';
import Markdown from "react-markdown";
import "./markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div id="policy" className="min-h-screen py-42 flex mx-auto my-52 p-10 lg:p-0 w-full lg:w-1/3 flex-col">
<Markdown>
{`
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Privacy Policy
* Last updated: 2024-08-12
@@ -89,8 +92,8 @@ If you have any questions or concerns about this Privacy Policy or Zen Browser,
---
By using Zen Browser, you agree to this Privacy Policy. Remember, with Zen, your privacy is in your hands.`}
</Markdown>
</div>
</main>
)
</Markdown>
</div>
</main>
);
}

62
src/app/release-notes/[version]/page.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import React from "react";
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import ReleaseNote from "@/components/release-note";
@@ -7,36 +6,45 @@ import { Button } from "@/components/ui/button";
import { releaseNotes } from "@/lib/release-notes";
import Link from "next/link";
import { redirect } from "next/navigation";
import { ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
export async function generateStaticParams() {
return [{version: "latest"}, ...releaseNotes.map((note) => ({ version: note.version }))];
return [
{ version: "latest" },
...releaseNotes.map((note) => ({ version: note.version })),
];
}
export default function ReleaseNotePage({ params }: { params: { version: string } }) {
const { version } = params;
export default function ReleaseNotePage({
params,
}: {
params: { version: string };
}) {
const { version } = params;
if (version === "latest") {
return redirect(`/release-notes/${releaseNotes[0].version}`);
}
if (version === "latest") {
return redirect(`/release-notes/${releaseNotes[0].version}`);
}
const currentIndex = releaseNotes.findIndex((note) => note.version === version);
const releaseNote = releaseNotes[currentIndex];
if (!releaseNote) {
return (
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="h-screen flex flex-wrap items-center justify-center">
<h1 className="text-4xl font-bold mt-12">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
</main>
);
}
const currentIndex = releaseNotes.findIndex(
(note) => note.version === version,
);
const releaseNote = releaseNotes[currentIndex];
return redirect(`/release-notes#${version}`);
if (!releaseNote) {
return (
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="flex h-screen flex-wrap items-center justify-center">
<h1 className="mt-12 text-4xl font-bold">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
</main>
);
}
return redirect(`/release-notes#${version}`);
}

55
src/app/release-notes/page.tsx
View File

@@ -1,26 +1,47 @@
import ReleaseNoteElement from "@/components/release-note";
import { releaseNotes } from "@/lib/release-notes";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Release Notes",
description: "Stay up to date with the latest changes to Zen Browser",
keywords: ["Zen", "Browser", "Zen Browser", "Web", "Internet", "Fast", "Release", "Notes"],
title: "Release Notes",
description: "Stay up to date with the latest changes to Zen Browser",
keywords: [
"Zen",
"Browser",
"Zen Browser",
"Web",
"Internet",
"Fast",
"Release",
"Notes",
],
};
export default function ReleaseNotes() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 lg:w-4/5 xl:w-3/5">
<h1 className="text-4xl font-bold mt-48">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the <a className="text-blue-500" href="#1.0.0-a.1">first release</a> till <a className="text-blue-500" href={`/release-notes/${releaseNotes[0].version}`}>{releaseNotes[0].version}</a>, we've been working hard to make Zen Browser the best it can be.<br /><br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
</main>
)
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="py-42 flex min-h-screen flex-col justify-center px-10 lg:w-4/5 lg:px-0 xl:w-3/5">
<h1 className="mt-48 text-4xl font-bold">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the{" "}
<a className="text-blue-500" href="#1.0.0-a.1">
first release
</a>{" "}
till{" "}
<a
className="text-blue-500"
href={`/release-notes/${releaseNotes[0].version}`}
>
{releaseNotes[0].version}
</a>
, we've been working hard to make Zen Browser the best it can be.
<br />
<br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
</main>
);
}

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

@@ -1,4 +1,3 @@
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import ThemePage from "@/components/theme-page";
@@ -6,49 +5,53 @@ import { getAllThemes, getThemeFromId } from "@/lib/themes";
import { Metadata, ResolvingMetadata } from "next";
export async function generateMetadata(
{ params, searchParams }: any,
parent: ResolvingMetadata
{ 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,
},
],
},
};
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 async function generateStaticParams() {
const themes = await getAllThemes();
console.log(themes);
return themes.map((theme) => ({
theme: theme.id,
}));
const themes = await getAllThemes();
console.log(themes);
return themes.map((theme) => ({
theme: theme.id,
}));
}
export default async function ThemeInfoPage({ params }: { params: { theme: string } }) {
const { theme } = params;
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<ThemePage themeID={theme} />
</main>
);
}
export default async function ThemeInfoPage({
params,
}: {
params: { theme: string };
}) {
const { theme } = params;
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<ThemePage themeID={theme} />
</main>
);
}

11
src/app/themes/page.tsx
View File

@@ -1,4 +1,3 @@
import Footer from "@/components/footer";
import MarketplacePage from "@/components/marketplace";
import { Navigation } from "@/components/navigation";
@@ -6,9 +5,9 @@ import { getAllThemes, ZenTheme } from "@/lib/themes";
import { GetStaticProps } from "next";
export default async function ThemesMarketplace() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<MarketplacePage themes={await getAllThemes()} />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<MarketplacePage themes={await getAllThemes()} />
</main>
);
}

11
src/app/welcome/page.tsx
View File

@@ -1,12 +1,11 @@
import WelcomePage from "@/components/welcome";
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<WelcomePage />
</main>
);
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<WelcomePage />
</main>
);
}