Worked on the site a bit more

Co-authored-by: Eveeifyeve <[email protected]>

src/components/NavBar.astro

@@ -44,7 +44,7 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
                   Stay up to date with the latest features and improvements.
                 </div>
               </a>
-              <a class="dropdown-item" href="/discord">
+              <a class="dropdown-item" href="https://discord.gg/zen-browser">
                 <div class="dropdown-title">
                   Discord
                 </div>

src/components/ReleaseNoteItem.astro

@@ -0,0 +1,13 @@
+---
+import { ReleaseNote } from "../release-notes"
+
+export type Props = ReleaseNote;
+
+const props = Astro.props;
+---
+
+
+
+<section class="relative flex flex-col border-t lg:flex-row mt-24 pt-24" id={props.version}>
+
+</section> 

src/mods.ts

@@ -0,0 +1,31 @@
+export interface ZenTheme {
+	name: string;
+	description: string;
+	image: string;
+	downloadUrl: string;
+	id: string;
+	homepage?: string;
+	readme: string;
+	preferences?: string;
+	isColorTheme: boolean;
+	author: string;
+	version: string;
+	tags: string[];
+	createdAt: Date;
+	updatedAt: Date;
+}
+
+const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";
+
+export async function getAllMods(): Promise<ZenTheme[]> {
+  try {
+    const res = await fetch(THEME_API);
+    const json = await res.json();
+    // convert dict to array
+    const mods = Object.keys(json).map((key) => json[key]);
+    return mods;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}

src/pages/mods/[...slug].astro

@@ -0,0 +1,21 @@
+---
+import { getAbsoluteLocaleUrl } from 'astro:i18n';
+import { getAllMods, type ZenTheme } from '../../mods';
+import Layout from '../../layouts/Layout.astro';
+
+export async function getStaticPaths() {
+  const mods = await getAllMods();
+  return mods.map((mod) => ({
+    params: { slug: mod.id },
+    props: { ...mod },
+  }));
+}
+
+// https://github.com/TeaClientMC/Website/blob/7faacc9f8b2c79c74f711d413b155c84faafc00d/src/pages/news/%5B...slug%5D.astro
+
+const mod = Astro.props;
+---
+
+<Layout title={`${mod.name} - Zen Mods`} >
+  {mod.name}
+</Layout>

src/pages/mods/index.astro

@@ -0,0 +1,34 @@
+---
+import Description from '../../components/Description.astro';
+import ModsSearch from '../../components/ModsSearch.astro';
+import Title from '../../components/Title.astro';
+import Layout from '../../layouts/Layout.astro';
+import { getAllMods, type ZenTheme } from '../../mods';
+
+const mods = await getAllMods() || [];
+console.log(mods);
+---
+
+<Layout title="Zen Mods">
+  <main>
+    <header class="min-h-[65vh] flex flex-col justify-center w-full border-b-2 border-dark">
+      <div class="px-8 mx-auto flex flex-col lg:w-1/2 gap-6">
+        <div>
+          <Title>Zen Mods</Title>
+          <Description>
+            Zen Mods is a collection of themes and plugins for Zen Browser. You can
+            find a theme for every mood and a plugin for every need.
+          </Description>
+        </div>
+        <div class="rounded-full border-2 border-dark p-3 flex gap-2">
+          <input type="text" class="border-none bg-transparent w-full !outline-none" placeholder="Search for mods" />
+        </div>
+      </div>
+    </header>
+    <div>
+        {mods.map((mod: ZenTheme) => (
+            <a href={`/mods/${mod.id}`}>{mod.name}</a>
+        ))}
+    </div>
+  </main>
+</Layout>

src/pages/release-notes/index.astro

@@ -0,0 +1,16 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import ReleaseNoteItem from '../../components/ReleaseNoteItem.astro';
+import { releaseNotes } from '../../release-notes';
+---
+
+<Layout title="Release Notes">
+  <main>
+    {releaseNotes.map((notes) => (
+        <div>
+          release notes here
+        </div>
+    ))}
+  </main>
+</Layout>
+