From a8186111ac46292a01317fe04bf69e47a8a8aa6c Mon Sep 17 00:00:00 2001 From: mido <122419606+midozen@users.noreply.github.com> Date: Wed, 15 Apr 2026 11:34:53 -0500 Subject: [PATCH] Implement breadcrum navigation --- src/components/Breadcrumbs.astro | 30 ++++++++++++++++++++++++++ src/layouts/Layout.astro | 16 +++++++++++--- src/lib/types/breadcrum.ts | 4 ++++ src/pages/[collection]/[...slug].astro | 19 ++++++++++++++-- src/pages/index.astro | 4 +++- src/styles/global.css | 2 +- 6 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 src/components/Breadcrumbs.astro create mode 100644 src/lib/types/breadcrum.ts diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro new file mode 100644 index 0000000..579dfdc --- /dev/null +++ b/src/components/Breadcrumbs.astro @@ -0,0 +1,30 @@ +--- +type BreadcrumbItem = { + label: string; + href?: string; +}; + +const { items = [] } = Astro.props as { items?: BreadcrumbItem[] }; +--- + +{ + items.length > 0 && ( + + ) +} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 150c9f4..f70b413 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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[]; +}; --- @@ -10,6 +17,9 @@ const { title } = Astro.props; Radium Help - {title} - +
+ + +
- \ No newline at end of file + diff --git a/src/lib/types/breadcrum.ts b/src/lib/types/breadcrum.ts new file mode 100644 index 0000000..227a47f --- /dev/null +++ b/src/lib/types/breadcrum.ts @@ -0,0 +1,4 @@ +export type BreadcrumbItem = { + label: string; + href?: string; +}; \ No newline at end of file diff --git a/src/pages/[collection]/[...slug].astro b/src/pages/[collection]/[...slug].astro index 2251fc0..4627d9d 100644 --- a/src/pages/[collection]/[...slug].astro +++ b/src/pages/[collection]/[...slug].astro @@ -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); --- - + - \ No newline at end of file + diff --git a/src/pages/index.astro b/src/pages/index.astro index 946be82..680fa12 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,8 +1,10 @@ --- import Layout from "../layouts/Layout.astro"; import TOC from "../components/TOC.astro"; + +const breadcrumbs = [{ label: "Radie Help" }]; --- - + diff --git a/src/styles/global.css b/src/styles/global.css index a461c50..ba7b7df 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1 +1 @@ -@import "tailwindcss"; \ No newline at end of file +/* @import "tailwindcss"; */ \ No newline at end of file