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>
)
}

14
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>
@@ -10,6 +17,9 @@ const { title } = Astro.props;
<title>Radium Help - {title}</title>
</head>
<body>
<slot />
<main class="page-shell">
<Breadcrumbs items={breadcrumbs} />
<slot />
</main>
</body>
</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 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);
---
<Layout title={entry.data.title}>
<Layout title={entry.data.title} breadcrumbs={breadcrumbs}>
<Content />
</Layout>

4
src/pages/index.astro
View File

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

2
src/styles/global.css
View File

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