Refactor code structure for improved readability and maintainability
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
mido
BIN
public/branding/banner.png
Normal file
BIN
public/branding/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
BIN
public/branding/logo.png
Normal file
BIN
public/branding/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -6,7 +6,10 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
|
|||||||
|
|
||||||
{
|
{
|
||||||
items.length > 0 && (
|
items.length > 0 && (
|
||||||
<nav aria-label="Breadcrumb" class="mb-4 flex space-x-2 text-sm">
|
<nav
|
||||||
|
aria-label="Breadcrumb"
|
||||||
|
class="flex flex-wrap items-center gap-1.5 rounded md:px-3 text-[13px] leading-none text-gray-600"
|
||||||
|
>
|
||||||
{items.map((item, index) => {
|
{items.map((item, index) => {
|
||||||
const isCurrent = index === items.length - 1;
|
const isCurrent = index === items.length - 1;
|
||||||
|
|
||||||
@@ -17,11 +20,14 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
|
|||||||
{item.label}
|
{item.label}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<span aria-current={isCurrent ? "page" : undefined}>
|
<span
|
||||||
|
aria-current={isCurrent ? "page" : undefined}
|
||||||
|
class={isCurrent ? "font-bold text-black" : undefined}
|
||||||
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{index < items.length - 1 && <span class="text-[#999]">/</span>}
|
{index < items.length - 1 && <span class="text-gray-400">/</span>}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -1,7 +1,4 @@
|
|||||||
export const contentSections = {
|
export const contentSections = {
|
||||||
website: {
|
|
||||||
dir: "website",
|
|
||||||
},
|
|
||||||
avatarItems: {
|
avatarItems: {
|
||||||
dir: "avatar-items",
|
dir: "avatar-items",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
title: Website
|
|
||||||
description: Learn about the Radium 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" />
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
---
|
|
||||||
title: Registration
|
|
||||||
description: Learn how to register for Radium
|
|
||||||
---
|
|
||||||
# Registration
|
|
||||||
To register for Radium, follow these steps:
|
|
||||||
1. Go to the [Radium website](https://radium.live/).
|
|
||||||
2. Click on the "Sign Up" button in the top right corner of the homepage.
|
|
||||||
3. Fill out the registration form with your email address, username, and password.
|
|
||||||
@@ -16,11 +16,18 @@ const { title, breadcrumbs = [] } = Astro.props as {
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Radium Help - {title}</title>
|
<title>Radium Help - {title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="min-h-screen flex items-center justify-center">
|
<body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center">
|
||||||
<main
|
<main class="flex min-h-screen w-full flex-col bg-white p-4 sm:min-h-200 sm:w-11/12 md:w-3/4 sm:rounded sm:p-5 sm:shadow">
|
||||||
class="flex flex-col bg-white p-5 rounded w-full md:w-3/4 shadow min-h-200"
|
<header class="mb-5 flex flex-col gap-3 border-b border-gray-200 pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
|
||||||
>
|
<a href="/" class="inline-flex w-fit items-center">
|
||||||
|
<img
|
||||||
|
src="/branding/logo.png"
|
||||||
|
alt="Radium Logo"
|
||||||
|
class="h-auto w-42.5"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
<Breadcrumbs items={breadcrumbs} />
|
<Breadcrumbs items={breadcrumbs} />
|
||||||
|
</header>
|
||||||
<slot />
|
<slot />
|
||||||
<footer class="text-gray-600 flex-1 flex items-end">
|
<footer class="text-gray-600 flex-1 flex items-end">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const collectionIndex = entries.find((item) => item.id === "index");
|
|||||||
const entryUrl =
|
const entryUrl =
|
||||||
entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
|
entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
|
||||||
const breadcrumbs = [
|
const breadcrumbs = [
|
||||||
{ label: "Radium Help", href: "/" },
|
{ label: "Help", href: "/" },
|
||||||
{
|
{
|
||||||
label: collectionIndex?.data.title ?? collection,
|
label: collectionIndex?.data.title ?? collection,
|
||||||
href: entry.id === "index" ? undefined : `/${collection}`,
|
href: entry.id === "index" ? undefined : `/${collection}`,
|
||||||
|
|||||||
@@ -1,10 +1,68 @@
|
|||||||
---
|
---
|
||||||
|
import { getCollection } from "astro:content";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import TOC from "../components/TOC.astro";
|
import TOC from "../components/TOC.astro";
|
||||||
|
import { collectionNames } from "../config/content";
|
||||||
|
|
||||||
const breadcrumbs = [{ label: "Radium Help" }];
|
const breadcrumbs = [{ label: "Help" }];
|
||||||
|
|
||||||
|
const sections = await Promise.all(
|
||||||
|
collectionNames.map(async (name) => {
|
||||||
|
const entries = await getCollection(name);
|
||||||
|
const indexEntry = entries.find((entry) => entry.id === "index");
|
||||||
|
const articles = entries.filter((entry) => entry.id !== "index");
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
title: indexEntry?.data.title ?? name,
|
||||||
|
description:
|
||||||
|
indexEntry?.data.description ??
|
||||||
|
"Browse help articles for this section.",
|
||||||
|
articleCount: articles.length,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
);
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Home" breadcrumbs={breadcrumbs}>
|
<Layout title="Help Home" breadcrumbs={breadcrumbs}>
|
||||||
|
<section class="prose-radium mb-6">
|
||||||
|
<h1>Welcome to Radium's Official Help Page!</h1>
|
||||||
|
<p>
|
||||||
|
Find quick answers, setup guidance, and reference information for
|
||||||
|
Radium. Choose a section below to get started!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mb-7">
|
||||||
|
<h2 class="mb-3 text-sm font-bold">Start here</h2>
|
||||||
|
<div class="grid gap-3 md:grid-cols-2">
|
||||||
|
{
|
||||||
|
sections.map((section) => (
|
||||||
|
<a
|
||||||
|
href={`/${section.name}`}
|
||||||
|
class="block rounded border border-gray-200 hover:bg-gray-50 p-4 text-black bg-white"
|
||||||
|
>
|
||||||
|
<span class="mb-1 block text-sm font-bold text-link">
|
||||||
|
{section.title}
|
||||||
|
</span>
|
||||||
|
<span class="mb-2 block text-[12px] leading-5 text-gray-700">
|
||||||
|
{section.description}
|
||||||
|
</span>
|
||||||
|
{section.articleCount !== 0 && (
|
||||||
|
<span class="text-[11px] text-gray-500">
|
||||||
|
{section.articleCount === 1
|
||||||
|
? "1 article"
|
||||||
|
: `${section.articleCount} articles`}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- <section>
|
||||||
|
<h2 class="mb-2 text-sm font-bold">All help topics</h2>
|
||||||
<TOC />
|
<TOC />
|
||||||
|
</section> -->
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
@@ -2,17 +2,35 @@
|
|||||||
@plugin "@tailwindcss/typography";
|
@plugin "@tailwindcss/typography";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: gray;
|
--background: #ffffff;
|
||||||
--foreground: #000000;
|
--foreground: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: greenyellow;
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* @media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: #000000;
|
||||||
|
--foreground: #ffffff;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
body.site-shell {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)),
|
||||||
|
url("/branding/banner.png");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
|
|||||||
Reference in New Issue
Block a user