Add breadcrumbs

Author: nikoshell

src/components/Breadcrumbs.astro

@@ -0,0 +1,112 @@
+---
+import Section from "@ui/Section.astro";
+
+export interface Props {
+  linksData: any;
+  currentPath: string;
+  homeLabel?: string;
+  homePath?: string;
+  separator?: string;
+}
+
+const {
+  linksData,
+  currentPath,
+  homeLabel = "Home",
+  homePath = "/",
+  separator = "/"
+} = Astro.props;
+
+interface BreadcrumbItem {
+  name: string;
+  path: string;
+  isActive: boolean;
+}
+
+function findBreadcrumbTrail(items: any[], currentPath: string, parentName?: string): BreadcrumbItem[] {
+  for (const item of items) {
+    if (item.path === currentPath) {
+      const breadcrumb: BreadcrumbItem = {
+        name: item.name,
+        path: item.path,
+        isActive: true
+      };
+
+      if (parentName) {
+        return [
+          { name: parentName, path: '', isActive: false },
+          breadcrumb
+        ];
+      }
+
+      return [breadcrumb];
+    }
+
+    if (item.items) {
+      const subTrail = findBreadcrumbTrail(item.items, currentPath, item.name);
+      if (subTrail.length > 0) {
+        return subTrail;
+      }
+    }
+  }
+
+  return [];
+}
+
+const breadcrumbs: BreadcrumbItem[] = [];
+
+breadcrumbs.push({
+  name: homeLabel,
+  path: homePath,
+  isActive: currentPath === homePath
+});
+
+if (currentPath !== homePath && linksData?.header) {
+  const trail = findBreadcrumbTrail(linksData.header, currentPath);
+  breadcrumbs.push(...trail);
+}
+
+if (breadcrumbs.length === 1 && currentPath !== homePath) {
+  const pathSegments = currentPath.split('/').filter(Boolean);
+  const lastSegment = pathSegments[pathSegments.length - 1];
+
+  if (lastSegment) {
+    breadcrumbs.push({
+      name: lastSegment.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
+      path: currentPath,
+      isActive: true
+    });
+  }
+}
+---
+
+<Section>
+{ currentPath !== homePath &&
+  <nav aria-label="Breadcrumb" class="px-4">
+    <ol class="flex flex-wrap items-center text-sm list-none m-0 p-0">
+      {breadcrumbs.map((crumb, index) => (
+        <li class="flex items-center">
+          {crumb.isActive ? (
+            <span class="text-gray-900 font-medium px-2 py-1" aria-current="page">
+              {crumb.name}
+            </span>
+          ) : crumb.path ? (
+            <a href={crumb.path} class="underline hover:text-button-hover px-2 py-1 rounded transition-colors duration-200 hover:underline">
+              {crumb.name}
+            </a>
+          ) : (
+            <span class="text-gray-500 italic px-2 py-1">
+              {crumb.name}
+            </span>
+          )}
+          {index < breadcrumbs.length - 1 && (
+            <span class="mx-2 text-gray-400 select-none" aria-hidden="true">
+              {separator}
+            </span>
+          )}
+        </li>
+      ))}
+    </ol>
+  </nav>
+  }
+</Section>

src/layouts/Layout.astro

@@ -3,17 +3,23 @@ import BaseHead from "@components/BaseHead.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Offline from "@components/Offline.astro";
+import Breadcrumbs from '@components/Breadcrumbs.astro';
+
+import linksData from '@src/data/links.json';
 
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import "@styles/tailwind.css";
 import "@styles/global.css";
 import "@styles/search.css";
 
+
 export interface Props {
   title: string;
   description: string;
 }
 
+const currentPath = Astro.url.pathname;
+
 const { title, description } = Astro.props;
 
 if (!title || !description) {
@@ -37,6 +43,13 @@ const externalDomain = new URL(Astro.site || "").hostname;
 
       <main class="main pt-28" role="main">
       <Offline />
+        <Breadcrumbs
+            linksData={linksData}
+            currentPath={currentPath}
+            homeLabel="EuroPython 2025"
+            homePath="/"
+            separator="›"
+        />
         <slot />
       </main>