@levino/shipyard-base 0.5.7 → 0.5.8

package/astro/components/Breadcrumbs.astro

@@ -0,0 +1,63 @@
+---
+import type { Entry } from './types'
+
+interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+interface Props {
+  navigation: Entry
+  currentPath?: string
+}
+
+const { navigation, currentPath = Astro.url.pathname } = Astro.props
+
+// Normalize path by removing trailing slash for comparison
+const normalizePath = (path: string) => path.replace(/\/$/, '') || '/'
+
+// Find the path to the current page in the navigation tree
+const findBreadcrumbs = (
+  entry: Entry,
+  targetPath: string,
+  path: BreadcrumbItem[] = [],
+): BreadcrumbItem[] | null => {
+  for (const [key, item] of Object.entries(entry)) {
+    const label = item.label ?? key
+    const currentItem: BreadcrumbItem = { label, href: item.href }
+
+    if (item.href && normalizePath(item.href) === normalizePath(targetPath)) {
+      return [...path, currentItem]
+    }
+
+    if (item.subEntry) {
+      const result = findBreadcrumbs(item.subEntry, targetPath, [
+        ...path,
+        currentItem,
+      ])
+      if (result) return result
+    }
+  }
+  return null
+}
+
+const breadcrumbs = findBreadcrumbs(navigation, currentPath) ?? []
+---
+
+{
+  breadcrumbs.length > 0 && (
+    <div class="breadcrumbs text-sm">
+      <ul>
+        {breadcrumbs.map((item, index) => (
+          <li>
+            {item.href && index < breadcrumbs.length - 1 ? (
+              <a href={item.href}>{item.label}</a>
+            ) : (
+              <span>{item.label}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/astro/components/SidebarElement.astro

@@ -1,23 +1,43 @@
 ---
+import { cn } from '../../src/tools/cn'
 import type { Entry } from './types'
 
 interface Props {
   entry: Entry
+  currentPath?: string
 }
 
-const { entry } = Astro.props
+const { entry, currentPath = Astro.url.pathname } = Astro.props
+
+// Normalize path by removing trailing slash for comparison
+const normalizePath = (path: string) => path.replace(/\/$/, '') || '/'
+
+// Check if entry or any of its children are active
+const isActiveOrHasActiveChild = (entryValue: Entry[string]): boolean => {
+  if (
+    entryValue.href &&
+    normalizePath(entryValue.href) === normalizePath(currentPath)
+  )
+    return true
+  if (entryValue.subEntry) {
+    return Object.values(entryValue.subEntry).some(isActiveOrHasActiveChild)
+  }
+  return false
+}
 ---
 
-{Object.entries(entry).map(([key, entry]) => {
-  const label = entry.label ?? key;
+{Object.entries(entry).map(([key, entryValue]) => {
+  const label = entryValue.label ?? key;
+  const isActive = entryValue.href && normalizePath(entryValue.href) === normalizePath(currentPath);
+  const hasActiveChild = entryValue.subEntry && Object.values(entryValue.subEntry).some(isActiveOrHasActiveChild);
   return (
-    <li>
-      {entry.href
-        ? <a href={entry.href}>{label}</a>
+    <li class={entryValue.className}>
+      {entryValue.href
+        ? <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{label}</a>
         : <span class='menu-title'>{label}</span>}
-      {entry.subEntry ? (
+      {entryValue.subEntry ? (
         <ul>
-          <Astro.self entry={entry.subEntry} />
+          <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />
         </ul>
       ) : null}
     </li>

package/astro/components/TableOfContents.astro

@@ -1,19 +1,84 @@
 ---
+import { cn } from '../../src/tools/cn'
+
 interface Link {
   depth: number
   text: string
   slug: string
 }
 
-interface TableOfContentsProps {
+interface Props {
   links: Link[]
+  label?: string
+  class?: string
+  desktopOnly?: boolean
 }
 
-const { links } = Astro.props as TableOfContentsProps
+const {
+  links,
+  label = 'On this page',
+  class: className,
+  desktopOnly = false,
+} = Astro.props
+
+// Filter to only include h2 and h3 headings (depth 2 and 3)
+const filteredLinks = links.filter((link) => link.depth >= 2 && link.depth <= 3)
 ---
 
-<div class="fixed right-0 h-full lg:h-auto lg:overflow-y-visible">
-  <div class="w-128 sticky" aria-label="Auf dieser Seite">
-    {links.map((link) => <a href={`#${link.slug}`}>{link.text}</a>)}
-  </div>
-</div>
+{
+  filteredLinks.length > 0 && (
+    <div class={className}>
+      {/* Mobile: Collapsible dropdown */}
+      {!desktopOnly && (
+        <div class="xl:hidden mb-4">
+          <details class="collapse collapse-arrow bg-base-200">
+            <summary class="collapse-title min-h-0 py-2 font-medium">
+              {label}
+            </summary>
+            <div class="collapse-content">
+              <ul class="menu menu-sm">
+                {filteredLinks.map((link) => (
+                  <li>
+                    <a
+                      href={`#${link.slug}`}
+                      class={cn({
+                        'pl-4': link.depth === 2,
+                        'pl-8': link.depth === 3,
+                      })}
+                    >
+                      {link.text}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </details>
+        </div>
+      )}
+
+      {/* Desktop: Sidebar within the grid column */}
+      {desktopOnly && (
+        <div class="border-l border-base-300 pl-4">
+          <h4 class="font-medium text-sm mb-2 text-base-content/60">
+            {label}
+          </h4>
+          <ul class="menu menu-xs p-0">
+            {filteredLinks.map((link) => (
+              <li>
+                <a
+                  href={`#${link.slug}`}
+                  class={cn('text-base-content/70 hover:text-primary', {
+                    'pl-0': link.depth === 2,
+                    'pl-4': link.depth === 3,
+                  })}
+                >
+                  {link.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/astro/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Breadcrumbs } from './Breadcrumbs.astro'
 export { default as Footer } from './Footer.astro'
 export { default as GlobalDesktopNavigation } from './GlobalDesktopNavigation.astro'
 export { default as LocalNavigation } from './LocalNavigation.astro'

package/astro/components/types.ts

@@ -5,5 +5,6 @@ export type Entry = Record<
     href?: string
     subEntry?: Entry
     active?: boolean
+    className?: string
   }
 >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levino/shipyard-base",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "type": "module",
   "main": "src/index.ts",
   "exports": {