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 && (
|
||||
<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) => {
|
||||
const isCurrent = index === items.length - 1;
|
||||
|
||||
@@ -17,11 +20,14 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
|
||||
{item.label}
|
||||
</a>
|
||||
) : (
|
||||
<span aria-current={isCurrent ? "page" : undefined}>
|
||||
<span
|
||||
aria-current={isCurrent ? "page" : undefined}
|
||||
class={isCurrent ? "font-bold text-black" : undefined}
|
||||
>
|
||||
{item.label}
|
||||
</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 = {
|
||||
website: {
|
||||
dir: "website",
|
||||
},
|
||||
avatarItems: {
|
||||
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" />
|
||||
<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"
|
||||
>
|
||||
<body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center">
|
||||
<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">
|
||||
<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} />
|
||||
</header>
|
||||
<slot />
|
||||
<footer class="text-gray-600 flex-1 flex items-end">
|
||||
<p>
|
||||
|
||||
@@ -35,7 +35,7 @@ const collectionIndex = entries.find((item) => item.id === "index");
|
||||
const entryUrl =
|
||||
entry.id === "index" ? `/${collection}` : `/${collection}/${entry.id}`;
|
||||
const breadcrumbs = [
|
||||
{ label: "Radium Help", href: "/" },
|
||||
{ label: "Help", href: "/" },
|
||||
{
|
||||
label: collectionIndex?.data.title ?? collection,
|
||||
href: entry.id === "index" ? undefined : `/${collection}`,
|
||||
|
||||
@@ -1,10 +1,68 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../layouts/Layout.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 />
|
||||
</section> -->
|
||||
</Layout>
|
||||
|
||||
@@ -2,17 +2,35 @@
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
:root {
|
||||
--background: gray;
|
||||
--background: #ffffff;
|
||||
--foreground: #000000;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background: greenyellow;
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
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 {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
Reference in New Issue
Block a user