From 56ea450e7bff9ae6642c6352821b55064ce6dce9 Mon Sep 17 00:00:00 2001
From: mido <122419606+midozen@users.noreply.github.com>
Date: Wed, 15 Apr 2026 11:23:10 -0500
Subject: [PATCH] Add TOC and Layout components; update pages

---
 src/components/ContentTOC.astro        | 21 +++++++++++
 src/components/TOC.astro               | 49 ++++++++++++++++++++++++++
 src/content/website/index.mdx          |  9 +++--
 src/layouts/Layout.astro               | 15 ++++++++
 src/pages/[collection]/[...slug].astro |  5 ++-
 src/pages/index.astro                  | 45 +++--------------------
 6 files changed, 101 insertions(+), 43 deletions(-)
 create mode 100644 src/components/ContentTOC.astro
 create mode 100644 src/components/TOC.astro
 create mode 100644 src/layouts/Layout.astro

diff --git a/src/components/ContentTOC.astro b/src/components/ContentTOC.astro
new file mode 100644
index 0000000..70b6fee
--- /dev/null
+++ b/src/components/ContentTOC.astro
@@ -0,0 +1,21 @@
+---
+import { getCollection } from "astro:content";
+
+const { sectionName } = Astro.props;
+
+const entries = (await getCollection(sectionName)).sort((a, b) =>
+  a.data.title.localeCompare(b.data.title),
+);
+
+const articles = entries.filter((entry) => entry.id !== "index");
+---
+
+<ul>
+    {articles.map((entry) => (
+        <li>
+            <a href={`/${sectionName}/${entry.id}`}>
+                {entry.data.title}
+            </a>
+        </li>
+    ))}
+</ul>
diff --git a/src/components/TOC.astro b/src/components/TOC.astro
new file mode 100644
index 0000000..df77f8c
--- /dev/null
+++ b/src/components/TOC.astro
@@ -0,0 +1,49 @@
+---
+import { getCollection } from "astro:content";
+import { collectionNames } from "../config/content";
+
+const sections = await Promise.all(
+    collectionNames.map(async (name) => {
+        const entries = (await getCollection(name)).sort((a, b) =>
+            a.data.title.localeCompare(b.data.title),
+        );
+
+        const indexEntry = entries.find((entry) => entry.id === "index");
+        const articles = entries.filter((entry) => entry.id !== "index");
+
+        return {
+            name,
+            indexEntry,
+            articles,
+        };
+    }),
+);
+---
+
+<ul>
+    {
+        sections.map((section) => (
+            <li>
+                {section.indexEntry ? (
+                    <a href={`/${section.name}`}>
+                        {section.indexEntry.data.title}
+                    </a>
+                ) : (
+                    section.name
+                )}
+
+                {section.articles.length > 0 && (
+                    <ul>
+                        {section.articles.map((entry) => (
+                            <li>
+                                <a href={`/${section.name}/${entry.id}`}>
+                                    {entry.data.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </li>
+        ))
+    }
+</ul>
diff --git a/src/content/website/index.mdx b/src/content/website/index.mdx
index 6791d06..a629166 100644
--- a/src/content/website/index.mdx
+++ b/src/content/website/index.mdx
@@ -2,9 +2,14 @@
 title: Website
 description: Learn about the Radium website
 ---
-# Website
+import ContentTOC from '../../components/ContentTOC.astro';
+
 The Radium website is the central hub for all things Radium. It includes the following sections:
 - [Home](https://radium.live/): The main landing page for Radium, where you can learn about the project and its features.
 - [Documentation](https://docs.radium.live/): The official documentation for Radium, which includes guides, API references, and tutorials.
 - [Community Forum](https://forum.radium.live/): A place to ask questions, share ideas, and connect with other Radium users.
-- [Blog](https://blog.radium.live/): A collection of articles and updates about Radium, including release notes, feature announcements, and community highlights.
\ No newline at end of file
+- [Blog](https://blog.radium.live/): A collection of articles and updates about Radium, including release notes, feature announcements, and community highlights.
+
+
+## Table of Contents
+<ContentTOC sectionName="website" />
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
new file mode 100644
index 0000000..150c9f4
--- /dev/null
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,15 @@
+---
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Radium Help - {title}</title>
+</head>
+<body>
+    <slot />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/[collection]/[...slug].astro b/src/pages/[collection]/[...slug].astro
index a26f5f5..2251fc0 100644
--- a/src/pages/[collection]/[...slug].astro
+++ b/src/pages/[collection]/[...slug].astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection, render } from "astro:content";
 import { collectionNames, isSiteCollection } from "../../config/content";
+import Layout from "../../layouts/Layout.astro";
 
 export async function getStaticPaths() {
   const paths = [];
@@ -32,4 +33,6 @@ const { entry } = Astro.props;
 const { Content } = await render(entry);
 ---
 
-<Content />
+<Layout title={entry.data.title}>
+  <Content />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 87c1ee3..946be82 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,43 +1,8 @@
 ---
-import { getCollection } from "astro:content";
-import { collectionNames } from "../config/content";
-
-const sections = await Promise.all(
-  collectionNames.map(async (name) => {
-    const entries = (await getCollection(name)).sort((a, b) =>
-      a.data.title.localeCompare(b.data.title)
-    );
-
-    const indexEntry = entries.find((entry) => entry.id === "index");
-    const articles = entries.filter((entry) => entry.id !== "index");
-
-    return {
-      name,
-      indexEntry,
-      articles,
-    };
-  })
-);
+import Layout from "../layouts/Layout.astro";
+import TOC from "../components/TOC.astro";
 ---
 
-<ul>
-  {sections.map((section) => (
-    <li>
-      {section.indexEntry ? (
-        <a href={`/${section.name}`}>{section.indexEntry.data.title}</a>
-      ) : (
-        section.name
-      )}
-
-      {section.articles.length > 0 && (
-        <ul>
-          {section.articles.map((entry) => (
-            <li>
-              <a href={`/${section.name}/${entry.id}`}>{entry.data.title}</a>
-            </li>
-          ))}
-        </ul>
-      )}
-    </li>
-  ))}
-</ul>
+<Layout title="Home">
+  <TOC />
+</Layout>