RadiumPublic/radie-help
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement styling, easier config

Browse Source
This commit is contained in:
mido
2026-05-01 10:39:41 -05:00
parent a8186111ac
commit 55c19578aa
13 changed files with 265 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Breadcrumbs.astro
View File

@@ -1,30 +1,30 @@
---
type BreadcrumbItem = {
label: string;
href?: string;
};
import type { BreadcrumbItem } from "../lib/types/breadcrum";
const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
---
{
items.length > 0 && (
<nav aria-label="Breadcrumb">
<ol>
{items.map((item, index) => {
const isCurrent = index === items.length - 1;
<nav aria-label="Breadcrumb" class="mb-4 flex space-x-2 text-sm">
{items.map((item, index) => {
const isCurrent = index === items.length - 1;
return (
<li>
{item.href && !isCurrent ? (
<a href={item.href}>{item.label}</a>
) : (
<span aria-current={isCurrent ? "page" : undefined}>{item.label}</span>
)}
</li>
);
})}
</ol>
return (
<>
{item.href && !isCurrent ? (
<a href={item.href} class="text-link hover:underline">
{item.label}
</a>
) : (
<span aria-current={isCurrent ? "page" : undefined}>
{item.label}
</span>
)}
{index < items.length - 1 && <span class="text-[#999]">/</span>}
</>
);
})}
</nav>
)
}

2
src/components/TOC.astro
View File

@@ -20,7 +20,7 @@ const sections = await Promise.all(
);
---
<ul>
<ul class="prose-radium">
{
sections.map((section) => (
<li>

17
src/config/content.ts
View File

@@ -1,6 +1,15 @@
export const collectionNames = ["website"] as const;
export type SiteCollection = (typeof collectionNames)[number];
export const contentSections = {
website: {
dir: "website",
},
avatarItems: {
dir: "avatar-items",
},
} as const;
export type SiteCollection = keyof typeof contentSections;
export const collectionNames = Object.keys(contentSections) as SiteCollection[];
export function isSiteCollection(value: string): value is SiteCollection {
return collectionNames.includes(value as SiteCollection);
}
return value in contentSections;
}

20
src/content.config.ts
View File

@@ -1,17 +1,23 @@
import { defineCollection } from "astro/content/config";
import { glob } from "astro/loaders";
import { z } from "astro/zod";
import { contentSections, type SiteCollection } from "./config/content";
const articleSchema = z.object({
title: z.string(),
description: z.string()
});
const website = defineCollection({
loader: glob({ base: './src/content/website', pattern: '**/*.{md,mdx}' }),
schema: articleSchema
});
function createArticleCollection(dir: string) {
return defineCollection({
loader: glob({ base: `./src/content/${dir}`, pattern: "**/*.{md,mdx}" }),
schema: articleSchema,
});
}
export const collections = {
website
};
export const collections = Object.fromEntries(
Object.entries(contentSections).map(([name, section]) => [
name,
createArticleCollection(section.dir),
]),
) as Record<SiteCollection, ReturnType<typeof createArticleCollection>>;

7
src/content/avatar-items/index.mdx Normal file
View File

@@ -0,0 +1,7 @@
---
title: Avatar Items
description: Learn about avatar items in Radium
---
The following list is avatar items that are excludeed from being obtained:
* Todo

35
src/layouts/Layout.astro
View File

@@ -9,17 +9,28 @@ const { title, breadcrumbs = [] } = Astro.props as {
};
---
<!DOCTYPE html>
<!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>
<main class="page-shell">
<Breadcrumbs items={breadcrumbs} />
<slot />
</main>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radium Help - {title}</title>
</head>
<body class="min-h-screen flex items-center justify-center">
<main
class="flex flex-col bg-white p-5 rounded w-full md:w-3/4 shadow min-h-200"
>
<Breadcrumbs items={breadcrumbs} />
<slot />
<footer class="text-gray-600 flex-1 flex items-end">
<p>
&copy; {new Date().getFullYear()} Radium, a project by
<a
href="https://recroomarchive.org"
class="underline">Rec Room Archive</a
>.
</p>
</footer>
</main>
</body>
</html>

9
src/pages/[collection]/[...slug].astro
View File

@@ -32,9 +32,10 @@ if (!collection || !isSiteCollection(collection)) {
const { entry } = Astro.props;
const entries = await getCollection(collection);
const collectionIndex = entries.find((item) => item.id === "index");
const entryUrl = entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
const entryUrl =
entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
const breadcrumbs = [
{ label: "Radie Help", href: "/" },
{ label: "Radium Help", href: "/" },
{
label: collectionIndex?.data.title ?? collection,
href: entry.id === "index" ? undefined : `/${collection}`,
@@ -49,5 +50,7 @@ const { Content } = await render(entry);
---
<Layout title={entry.data.title} breadcrumbs={breadcrumbs}>
<Content />
<div class="prose-radium">
<Content class="prose-radium" />
</div>
</Layout>

2
src/pages/index.astro
View File

@@ -2,7 +2,7 @@
import Layout from "../layouts/Layout.astro";
import TOC from "../components/TOC.astro";
const breadcrumbs = [{ label: "Radie Help" }];
const breadcrumbs = [{ label: "Radium Help" }];
---
<Layout title="Home" breadcrumbs={breadcrumbs}>

25
src/styles/global.css
View File

@@ -1 +1,24 @@
/* @import "tailwindcss"; */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
:root {
--background: gray;
--foreground: #000000;
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-link: #095FB5;
}
@utility prose-radium {
@apply prose prose-sm max-w-none prose-headings:font-bold prose-headings:mb-1 prose-headings:mt-0 prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-gray-300 text-[12px] prose-li:marker:text-black prose-a:text-link prose-a:no-underline prose-a:hover:underline;
}