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

Implement breadcrum navigation

Browse Source
This commit is contained in:
mido
2026-04-15 11:34:53 -05:00
parent 549f131ffd
commit a8186111ac
6 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Breadcrumbs.astro Normal file
View File

@@ -0,0 +1,30 @@
---
type BreadcrumbItem = {
label: string;
href?: string;
};
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;
return (
<li>
{item.href && !isCurrent ? (
<a href={item.href}>{item.label}</a>
) : (
<span aria-current={isCurrent ? "page" : undefined}>{item.label}</span>
)}
</li>
);
})}
</ol>
</nav>
)
}

12
src/layouts/Layout.astro
View File

@@ -1,5 +1,12 @@
--- ---
const { title } = Astro.props; import "../styles/global.css";
import Breadcrumbs from "../components/Breadcrumbs.astro";
import type { BreadcrumbItem } from "../lib/types/breadcrum";
const { title, breadcrumbs = [] } = Astro.props as {
title: string;
breadcrumbs?: BreadcrumbItem[];
};
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -10,6 +17,9 @@ const { title } = Astro.props;
<title>Radium Help - {title}</title> <title>Radium Help - {title}</title>
</head> </head>
<body> <body>
<main class="page-shell">
<Breadcrumbs items={breadcrumbs} />
<slot /> <slot />
</main>
</body> </body>
</html> </html>

4
src/lib/types/breadcrum.ts Normal file
View File

@@ -0,0 +1,4 @@
export type BreadcrumbItem = {
label: string;
href?: string;
};

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

@@ -30,9 +30,24 @@ if (!collection || !isSiteCollection(collection)) {
} }
const { entry } = Astro.props; 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 breadcrumbs = [
{ label: "Radie Help", href: "/" },
{
label: collectionIndex?.data.title ?? collection,
href: entry.id === "index" ? undefined : `/${collection}`,
},
];
if (entry.id !== "index") {
breadcrumbs.push({ label: entry.data.title, href: entryUrl });
}
const { Content } = await render(entry); const { Content } = await render(entry);
--- ---
<Layout title={entry.data.title}> <Layout title={entry.data.title} breadcrumbs={breadcrumbs}>
<Content /> <Content />
</Layout> </Layout>

4
src/pages/index.astro
View File

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

2
src/styles/global.css
View File

@@ -1 +1 @@
@import "tailwindcss"; /* @import "tailwindcss"; */