✨ Breadcrumbs with navigation for mobile

TODO.md

@@ -13,7 +13,7 @@
 
 ## Layout
 - [ ] Dark mode toggle
-- [ ] Navigate using pathname / breadcrumbs
+- [x] Navigate using pathname / breadcrumbs
 - [ ] Better style for \<code /> blocks
 
 ## Accessibility

src/components/Breadcrumb.astro

@@ -0,0 +1,38 @@
+---
+import { type NavLink, resolvePathname } from "@/utils/linking"
+import LocaleLink from "@/components/links/LocaleLink.astro"
+
+const pathname = resolvePathname(Astro.originPathname)
+
+let paths: string[]
+if (pathname === "/") {
+  paths = ["~"]
+} else {
+  paths = ["~", ...pathname.split("/").slice(1)]
+}
+
+function getLink(path: string): NavLink {
+  switch (path) {
+    case "~":
+      return "/"
+    default:
+      return `/${path}` as NavLink
+  }
+}
+---
+
+<div>
+  {
+    paths.map((path, index) => (
+      <span>
+        {index != paths.length - 1 ? (
+          <span>
+            <LocaleLink to={getLink(path)}>{path}</LocaleLink>/
+          </span>
+        ) : (
+          path
+        )}
+      </span>
+    ))
+  }
+</div>

src/components/header/HamburgerMenuButton.astro

@@ -2,13 +2,13 @@
 import PajamasIcon from "@/components/icons/PajamasIcon.astro"
 
 interface Props {
-  id: string
+  for: string
 }
 
-const { id } = Astro.props
+const { for: forId } = Astro.props
 ---
 
-<label for={id} aria-label="open sidebar" class="btn btn-square btn-ghost">
+<label for={forId} aria-label="open sidebar" class="btn btn-square btn-ghost">
   <PajamasIcon
     name="pajamas:hamburger"
     class="w-6 h-6"

src/components/header/Header.astro

@@ -2,22 +2,24 @@
 import Navbar from "./Navbar.astro"
 import NavbarDrawer from "./NavbarDrawer.astro"
 import HamburgerMenuButton from "./HamburgerMenuButton.astro"
+import Breadcrumb from "../Breadcrumb.astro"
 import { resolvePathname } from "@/utils/linking"
 
 const currentPath = `~${resolvePathname(Astro.originPathname)}`
+const drawerToggleId = "header-drawer"
 ---
 
 <div class="sm:m-auto">
   <div class="drawer drawer-end">
-    <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+    <input id={drawerToggleId} type="checkbox" class="drawer-toggle" />
     <div class="drawer-content flex flex-col">
       <!-- Navbar -->
       <div class="navbar w-full justify-end">
         <div class="flex justify-between items-center w-full h-full sm:hidden">
-          <h1 class="!text-2xl h-5">
-            {currentPath}
+          <h1 class="!text-xl h-5">
+            <Breadcrumb />
           </h1>
-          <HamburgerMenuButton id="my-drawer-3" />
+          <HamburgerMenuButton for={drawerToggleId} />
         </div>
         <div class="hidden flex-none sm:block">
           <Navbar />
@@ -25,8 +27,11 @@ const currentPath = `~${resolvePathname(Astro.originPathname)}`
       </div>
     </div>
     <div class="drawer-side z-50">
-      <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
-      ></label>
+      <label
+        for={drawerToggleId}
+        aria-label="close sidebar"
+        class="drawer-overlay"></label>
+      <!-- Drawer -->
       <ul class="menu bg-cat-base min-h-full w-80 p-4">
         <li class="text-xl font-bold my-5">
           {currentPath}

src/components/projects/ProjectPage.astro

@@ -31,10 +31,11 @@ const {
 } = entry!.data
 
 function localeDateString(isoString: string): string {
+  let template = "DD-MM-YYYY"
   if (languageTag() === "nb") {
-    return dayjs(isoString).locale(languageTag()).format("DD/MM/YYYY")
+    template = "DD/MM/YYYY"
   }
-  return dayjs(isoString).locale(languageTag()).format("DD-MM-YYYY")
+  return dayjs(isoString).locale(languageTag()).format(template)
 }
 ---
 

src/layouts/Layout.astro

@@ -1,8 +1,8 @@
 ---
 import Footer from "@/components/Footer.astro"
 import Header from "@/components/header/Header.astro"
+import Breadcrumb from "@/components/Breadcrumb.astro"
 import { languageTag } from "@/paraglide/runtime"
-import { resolvePathname } from "@/utils/linking"
 
 interface Props {
   title: string
@@ -33,7 +33,7 @@ const mainClass =
     <Header />
     <main class:list={[mainClass, clazz]}>
       <h1 class="text-center not-sm:hidden">
-        ~{resolvePathname(Astro.originPathname)}
+        <Breadcrumb />
       </h1>
       <div class="my-5">
         <slot />

src/utils/linking.ts

@@ -22,6 +22,8 @@ const paths: Set<NavLink> = new Set([
   "/uses",
 ])
 
+const projectPaths: Set<string> = new Set<string>(["homepage", "sb1budget"])
+
 /**
  * Defines the localized pathnames for the site.
  * The key must be used to navigate to the correct path.
@@ -63,3 +65,22 @@ export function resolvePathname(pathname: string): AbsolutePathname {
   }
   return pathname as AbsolutePathname
 }
+
+export function isAbsolutePathname(path: string): path is AbsolutePathname {
+  return path.startsWith("/")
+}
+
+export function isNavLink(path: string): path is NavLink {
+  if (path.startsWith("/en")) {
+    path = path.slice(2)
+  }
+  if (paths.has(path as NavLink)) {
+    return true
+  }
+  const pathSplit = path.split("/").slice(1)
+  return (
+    pathSplit.length === 2 &&
+    pathSplit[0] === "projects" &&
+    projectPaths.has(pathSplit[1])
+  )
+}