Move Escape Room breadcrumbs from hero to header

astro/src/components/HeaderER.astro

@@ -4,6 +4,17 @@ import Branding from "@components/Branding.astro";
 import SiteNav from "@components/navigation/NavSiteSecondary.astro";
 import { areSimilarURLs } from "@lib/links";
 
+import { type Breadcrumbs } from "../lib/types";
+
+interface Props {
+  title: string;
+  brandedTitle?: boolean;
+  crumbs?: Breadcrumbs;
+}
+
+const { title, brandedTitle = false, crumbs = undefined, } = Astro.props;
+const breadCrumbs: Breadcrumbs = crumbs ?? [{ name: "Home", href: "/escape-room/" }];
+
 const navLinks = [{
   name: "Build-Your-Own Rooms",
   href: "/escape-room/themes",
@@ -14,7 +25,6 @@ const navLinks = [{
   name: "Our Story",
   href: "/escape-room/our-story",
 }];
-
 ---
 
 <header class="sticky-top" style="top: -3.5em">
@@ -44,14 +54,9 @@ const navLinks = [{
           aria-hidden="true"
         />
       </div>
-      <div class="d-flex flex-column flex-fill">
-        <div class="lh-1">
-          <a class="navbar-brand" href="/escape-room/">
-            <Branding>Accessible Escape Room</Branding>
-          </a>
-        </div>
-        <span class="d-lg-none"
-          ><em>by</em> <Branding>Accessible Community</Branding></span
+      <div class="my-1 flex-fill align-self-start">
+        <a class="navbar-brand" href="/"
+          >Accessible <strong>Escape Room</strong></a
         >
       </div>
     </div>
@@ -60,7 +65,7 @@ const navLinks = [{
       class="collapse navbar-collapse px-3 d-print-none d-lg-flex w-100 justify-content-end"
       aria-label="Escape Room"
     >
-      <ul class="navbar-nav my-1 mx-4">
+      <ul class="navbar-nav my-1 mx-2">
         {
           navLinks.map(({name, href}) => (
             <li class="nav-item">
@@ -77,11 +82,34 @@ const navLinks = [{
         <li class="nav-item d-lg-none">
           <a
             class="nav-link"
-            href="/"><Branding>Accessible Community</Branding> Home</a
+            href="/"
           >
+            <Branding>Accessible Community</Branding>
+            Home
+          </a>
         </li>
       </ul>
     </nav>
+    <nav
+      id="breadcrumbs-nav"
+      aria-label="Breadcrumb"
+      class="position-absolute d-print-none"
+    >
+      <ol class="breadcrumb lh-sm">
+        {
+          breadCrumbs.map(({ name, href, branded }) => (
+            <li class="breadcrumb-item">
+              <a href={href} class="link-offset-1">
+                { branded ? (<Branding set:text={name} />) : name }
+              </a>
+            </li>
+          ))
+        }
+        <li class="breadcrumb-item active" aria-current="page">
+          <span>{ brandedTitle ? (<Branding set:text={title} />) : title }</span>
+        </li>
+      </ol>
+    </nav>
   </div>
 </header>
 <slot />
@@ -131,6 +159,55 @@ const navLinks = [{
     font-size: 1.1rem;
   }
 
+  #breadcrumbs-nav {
+    min-width: 250px;
+  }
+
+  #breadcrumbs-nav {
+    top: 2.4rem;
+    left: 4.7rem;
+  }
+
+  .breadcrumb-item {
+    --bs-breadcrumb-item-active-color: var(--bs-primary);
+    --bs-link-color-rgb: var(--bs-primary-rgb);
+
+    > .text-truncate {
+      display: inline-block;
+      max-width: 10em;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    #breadcrumbs-nav {
+      left: 3.333rem;
+    }
+  }
+  @include media-breakpoint-down(md) {
+    #breadcrumbs-nav .breadcrumb-item {
+      --bs-breadcrumb-item-padding-x: 0.4rem;
+      font-size: 0.9em;
+      line-height: 1.1em;
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    #breadcrumbs-nav .breadcrumb-item {
+      --bs-breadcrumb-item-padding-x: 0.3rem;
+      font-size: 0.9em;
+    }
+    .breadcrumb-item > .text-truncate {
+      max-width: 8em;
+    }
+  }
+  @include media-breakpoint-down(xs) {
+    #breadcrumbs-nav .breadcrumb-item {
+      --bs-breadcrumb-item-padding-x: 0.25rem;
+    }
+    .breadcrumb-item > .text-truncate {
+      max-width: 6em;
+    }
+  }
+
   @include media-breakpoint-down(md) {
     .navbar-brand {
       --bs-navbar-brand-font-size: 1.1rem;
@@ -160,6 +237,11 @@ const navLinks = [{
         --bs-nav-link-color: var(--bs-white);
       }
     }
+
+    .breadcrumb-item {
+      --bs-breadcrumb-item-active-color: var(--bs-white);
+      --bs-link-color-rgb: var(--bs-white-rgb);
+    }
   }
 </style>
 

astro/src/components/navigation/NavSiteSecondary.astro

@@ -53,8 +53,8 @@ const { "page-nav-id": pageNavId = undefined } = Astro.props;
   //    outline: 1px solid white;
   // }
 
-  @import "/src/styles/dark-mode.scss";
-  @import "/src/styles/responsive-sizing.scss";
+  @import "../../styles/dark-mode.scss";
+  @import "../../styles/responsive-sizing.scss";
 
   .navbar {
     min-width: 320px;

astro/src/layouts/EscapeRoomLayout.astro

@@ -1,4 +1,6 @@
 ---
+import type { Breadcrumbs, PageMetadata } from "../lib/types";
+
 import "../styles/bootstrap.scss";
 import { getEntry } from "astro:content";
 
@@ -9,7 +11,6 @@ import FooterLinkList from "../components/navigation/FooterLinkList.astro";
 import HeaderER from "../components/HeaderER.astro";
 import { Icon } from "astro-icon/components";
 import Row from "../components/Row.astro";
-import { type PageMetadata } from "../lib/types";
 
 // Single these from the Header.
 const navLinks = [{
@@ -25,13 +26,13 @@ const navLinks = [{
 
 interface Props {
   title: string;
+  crumbs?: Breadcrumbs;
   metadata?: PageMetadata;
 }
 
-const { metadata, title } = Astro.props;
-
+const { metadata, crumbs, title } = Astro.props;
 const socialEntry = await getEntry("navigation", "escape-social-media");
-const Socials = socialEntry?.data.groups[0];
+const socialLinks = socialEntry?.data.groups[0];
 ---
 
 <!doctype html>
@@ -56,7 +57,7 @@ const Socials = socialEntry?.data.groups[0];
 
   <body>
     <!-- Custom Header -->
-    <HeaderER {title} />
+    <HeaderER {title} {crumbs} />
 
     <main id="main-content">
       <div class="content-spacer"></div>
@@ -100,7 +101,7 @@ const Socials = socialEntry?.data.groups[0];
           <h3 class="visually-hidden">Social Media</h3>
           <ul class="text-center mt-3 mt-md-4">
             {
-              Socials?.map(({ icon, href, iconCls, name }) => (
+              socialLinks?.map(({ icon, href, iconCls, name }) => (
                 <li class="d-inline-block ms-2 me-3">
                   <a
                     class="d-inline-block link-light"

astro/src/lib/og-image.ts

@@ -1,7 +1,7 @@
 import type { ImageData } from "./types";
 
 export function getOpenGraphImageData(
-  baseUrl: URL | undefined,
+  baseUrl: URL | string | undefined,
   folder: string,
   filename: string,
   alt: string = "",

astro/src/pages/escape-room/_kits/[id].astro

@@ -44,7 +44,7 @@ const { headings, Content } = await render(kit);
 import Branding from "src/components/Branding.astro";
 import { Icon } from "astro-icon/components";
 import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
-import Hero from "@components/HeroWithBreadcrumbs.astro";
+import Hero from "@components/Hero.astro";
 import StripedSection from "src/components/StripedSection.astro";
 
 const components = { Section: StripedSection, ...defaultComponents };

astro/src/pages/escape-room/how-it-works.astro

@@ -23,7 +23,7 @@ const quotes = [
 
 import Branding from "@components/Branding.astro";
 import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
-import Hero from "@components/HeroWithBreadcrumbs.astro";
+import Hero from "@components/Hero.astro";
 import { Icon } from "astro-icon/components";
 import Row from "@components/Row.astro";
 import ThemedSection from "@components/ThemedSection.astro";

astro/src/pages/escape-room/index.astro

@@ -1,16 +1,17 @@
 ---
+import type { Breadcrumbs, PageMetadata } from "@lib/types";
+
 import { getOpenGraphImageData } from "@lib/og-image";
-import type { PageMetadata } from "@lib/types";
 import { getCollection, type CollectionEntry } from "astro:content";
 import { sortBy } from "lodash-es";
 
-const title = "The Accessible Escape Room";
+const title = "Home";
 const metadata: PageMetadata = {
-  title,
+  title: "The Accessible Escape Room",
   description: "Overview of the Accessible Escape Room",
   image: getOpenGraphImageData(Astro.site, "pages", "escape-room"),
 };
-
+const crumbs: Breadcrumbs = [];
 const rooms: Array<CollectionEntry<"escapeRoomThemes">> =
   sortBy(
     await getCollection("escapeRoomThemes"),
@@ -33,7 +34,7 @@ import brailleBlocks from "src/images/escape-room/braille-blocks.png";
 import woodenPuzzles from "src/images/escape-room/wooden-puzzles.png";
 ---
 
-<EscapeRoomLayout {metadata} {title}>
+<EscapeRoomLayout {metadata} {crumbs} {title}>
   <ThemedSection slot="header" theme="info">
     <FlexColumn
       lgFlexRow gap="4" class="py-3 justify-content-lg-center align-items-center"

astro/src/pages/escape-room/our-story.astro

@@ -19,7 +19,7 @@ import Column from "@components/Column.astro";
 import ExternalLink from "@components/ExternalLink.astro";
 import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
 import FlexColumn from "@components/FlexColumn.astro";
-import Hero from "@components/HeroWithBreadcrumbs.astro";
+import Hero from "@components/Hero.astro";
 import Testimonial from "@components/Testimonial.astro";
 import ThemedColumn from "@components/ThemedColumn.astro";
 import ThemedSection from "@components/ThemedSection.astro";

astro/src/pages/escape-room/themes/[id].astro

@@ -12,7 +12,7 @@ export async function getStaticPaths() {
     },
     {
       name: "Build-Your-Own Rooms",
-      href: "/escape-room/themes",
+      href: "/escape-room/themes/",
     },
   ];
 
@@ -48,16 +48,16 @@ const textVar = `var(--bs-${theme}-text-emphasis)`;
 
 import Column from "@components/Column.astro";
 import FlexColumn from "@components/FlexColumn.astro";
-import Hero from "@components/HeroWithBreadcrumbs.astro";
+import Hero from "@components/Hero.astro";
 import { Icon } from "astro-icon/components";
 import Layout from "src/layouts/EscapeRoomLayout.astro";
 import Row from "@components/Row.astro";
 import ThemedSection from "@components/ThemedSection.astro";
 ---
 
-<Layout {metadata} {title}>
+<Layout {metadata} {crumbs} {title}>
   <div class="local-wrapper">
-    <Hero slot="header" columns="col col-lg-7" {theme} shade {image} {crumbs} {title}>
+    <Hero slot="header" columns="col col-lg-7" {theme} {image}>
       <h1 class:list={["display-2 text-nowrap", `bg-${theme} bg-opacity-50 p-1`]} set:text={title} />
     </Hero>
   </div>

astro/src/pages/escape-room/themes/index.astro

@@ -17,7 +17,7 @@ const crumbs: Breadcrumbs = [
   },
 ];
 
-import Hero from "@components/HeroWithBreadcrumbs.astro";
+import Hero from "@components/Hero.astro";
 import EscapeRoomLayout from "src/layouts/EscapeRoomLayout.astro";
 import Row from "@components/Row.astro";
 import ThemedSection from "@components/ThemedSection.astro";