Add TOC and Layout components; update pages

This commit is contained in:
mido
2026-04-15 11:23:10 -05:00
parent 57f672386a
commit 56ea450e7b
6 changed files with 101 additions and 43 deletions

View File

@@ -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>

49
src/components/TOC.astro Normal file
View File

@@ -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>

View File

@@ -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.
## Table of Contents
<ContentTOC sectionName="website" />

15
src/layouts/Layout.astro Normal file
View File

@@ -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>

View File

@@ -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>

View File

@@ -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>