@levino/shipyard-base 0.0.0-rc-20251122114952

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/Footer.astro

@@ -0,0 +1,26 @@
+---
+interface FooterProps {
+  links: {
+    label: string
+    href: string
+  }[]
+  copyright: {
+    label: string
+    href: string
+    year: number
+  }
+}
+
+const { links, copyright } = Astro.props as FooterProps
+---
+
+<footer class="flex w-full items-center justify-between px-6 py-4 text-sm font-medium">
+  <a href={copyright.href} target="_blank">
+    © {copyright.label}, {copyright.year}
+  </a>
+  {links.map(({ label, href }) => (
+    <a href={href}>
+      {label}
+    </a>
+  ))}
+</footer>

package/astro/components/GlobalDesktopNavigation.astro

@@ -0,0 +1,72 @@
+---
+import type { Config } from '../../src/schemas/config'
+import { cn } from '../../src/tools/cn'
+
+type Props = Pick<Config, 'brand' | 'navigation'> & { showBrand: boolean }
+
+const { brand, navigation, showBrand = false } = Astro.props as Props
+---
+
+<div class="navbar z-10 bg-base-100">
+  <span
+    class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]"
+    data-tip="Menu"
+  >
+    <label
+      aria-label="Open menu"
+      for="drawer"
+      class="btn btn-square btn-ghost drawer-button lg:hidden"
+    >
+      <svg
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block h-5 w-5 stroke-current md:h-6 md:w-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 6h16M4 12h16M4 18h16"></path>
+      </svg>
+    </label>
+  </span>
+  <div class="flex-1">
+    <a
+      href="/"
+      class={cn("btn btn-ghost text-xl", {
+        "md:hidden": !showBrand,
+      })}
+    >
+      {brand}
+    </a>
+  </div>
+  <div class="hidden flex-none lg:flex">
+    <ul class="menu menu-horizontal px-1">
+      {
+        Object.entries(navigation).map(([key, entry]) =>
+          entry.subEntry ? (
+            <li>
+              <details>
+                <summary>{entry.label ?? key}</summary>
+                <ul class="rounded-t-none bg-base-100 p-2">
+                  {Object.entries(entry.subEntry).map(([key, entry]) => (
+                    <li>
+                      <a href={entry.href}>{entry.label ?? key}</a>
+                    </li>
+                  ))}
+                </ul>
+              </details>
+            </li>
+          ) : (
+            <li>
+              <a href={entry.href}>{entry.label ?? key}</a>
+            </li>
+          ),
+        )
+      }
+    </ul>
+  </div>
+</div>

package/astro/components/LocalNavigation.astro

@@ -0,0 +1,12 @@
+---
+import SidebarElement from './SidebarElement.astro'
+import type { Entry } from './types'
+
+interface SidebarProps {
+  entry: Entry
+}
+
+const { entry } = Astro.props as SidebarProps
+---
+
+<SidebarElement entry={entry} />

package/astro/components/SidebarElement.astro

@@ -0,0 +1,45 @@
+---
+import { cn } from '../../src/tools/cn'
+import type { Entry } from './types'
+
+interface Props {
+  entry: Entry
+  currentPath?: string
+}
+
+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, 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 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>}
+      {entryValue.subEntry ? (
+        <ul>
+          <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />
+        </ul>
+      ) : null}
+    </li>
+  )
+})}

package/astro/components/SidebarNavigation.astro

@@ -0,0 +1,40 @@
+---
+import { cn } from '../../src/tools/cn'
+import SidebarElement from './SidebarElement.astro'
+import type { Entry } from './types'
+
+interface Props {
+  local: Entry | undefined
+  global: Entry
+  brand: string
+}
+
+const { local, global, brand } = Astro.props
+
+const withLocale = (path: string) =>
+  Astro.currentLocale ? `/${Astro.currentLocale}${path}` : path
+---
+
+<ul class={cn("menu min-h-screen w-56 bg-base-100", { "md:hidden": !local })}>
+  <div>
+    <a href={withLocale("/")} class="btn btn-ghost mb-2 text-xl">
+      {brand}
+    </a>
+  </div>
+  <div class="block md:hidden">
+    <li>
+      {
+        local ? (
+          <details>
+            <summary>Main menu</summary>
+            <SidebarElement entry={global} />
+          </details>
+        ) : (
+          <SidebarElement entry={global} />
+        )
+      }
+    </li>
+    <div class={cn("divider my-1 block md:hidden", { hidden: !local })}></div>
+  </div>
+  {local && <SidebarElement entry={local} />}
+</ul>

package/astro/components/TableOfContents.astro

@@ -0,0 +1,84 @@
+---
+import { cn } from '../../src/tools/cn'
+
+interface Link {
+  depth: number
+  text: string
+  slug: string
+}
+
+interface Props {
+  links: Link[]
+  label?: string
+  class?: string
+  desktopOnly?: boolean
+}
+
+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)
+---
+
+{
+  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

@@ -0,0 +1,7 @@
+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'
+export { default as SidebarElement } from './SidebarElement.astro'
+export { default as SidebarNavigation } from './SidebarNavigation.astro'
+export { default as TableOfContents } from './TableOfContents.astro'

package/astro/components/types.ts

@@ -0,0 +1,10 @@
+export type Entry = Record<
+  string,
+  {
+    label?: string
+    href?: string
+    subEntry?: Entry
+    active?: boolean
+    className?: string
+  }
+>

package/astro/layouts/Footer.astro

@@ -0,0 +1,15 @@
+---
+import { Footer as FooterComponent } from '../components'
+
+const withLocale = (path: string) =>
+  Astro.currentLocale ? `/${Astro.currentLocale}${path}` : path
+---
+
+<FooterComponent
+  links={[{ href: withLocale("/imprint"), label: "Impressum" }]}
+  copyright={{
+    href: "https://github.com/levino",
+    label: "Levin Keller",
+    year: 2025,
+  }}
+/>

package/astro/layouts/Page.astro

@@ -0,0 +1,103 @@
+---
+import Footer from './Footer.astro'
+import '../../src/globals.css'
+import { i18n } from 'astro:config/server'
+import config from 'virtual:shipyard/config'
+import { mapObjIndexed } from 'ramda'
+import type {
+  NavigationEntry,
+  NavigationTree,
+  Script,
+} from '../../src/schemas/config'
+import { getTitle } from '../../src/tools/title'
+import { GlobalDesktopNavigation, SidebarNavigation } from '../components'
+
+type Props = {
+  frontmatter?: {
+    title?: string
+    description?: string
+    sidebarNavigation?: NavigationTree
+  }
+} & {
+  title?: string
+  description?: string
+  sidebarNavigation?: NavigationTree
+}
+
+const currentPath = Astro.url.pathname
+const props = Astro.props.frontmatter || Astro.props
+
+const withLocale = (path: string) =>
+  i18n ? `/${Astro.currentLocale}${path}` : path
+const applyLocaleAndSetActive: (navigation: NavigationTree) => NavigationTree =
+  mapObjIndexed((entry: NavigationEntry) => ({
+    ...entry,
+    ...(entry.href ? { href: withLocale(entry.href) } : {}),
+    active: entry.href === currentPath,
+    ...(entry.subEntry
+      ? { subEntry: applyLocaleAndSetActive(entry.subEntry) }
+      : {}),
+  }))
+
+const navigation = applyLocaleAndSetActive(config.navigation)
+const title = getTitle(config.title, props.title)
+
+// Helper function to render script attributes
+const renderScriptAttributes = (script: Script) => {
+  if (typeof script === 'string') {
+    return { src: script }
+  }
+  return script
+}
+---
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <title>
+      {title}
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content={props.description} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={props.description} />
+    
+    {config.scripts?.map((script) => {
+      const attrs = renderScriptAttributes(script)
+      return <script is:inline {...attrs}></script>
+    })}
+  </head>
+  <body>
+    <div class="drawer lg:drawer-open">
+      <input id="drawer" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content">
+        <div class="flex min-h-screen flex-col">
+          <GlobalDesktopNavigation
+            showBrand={!props.sidebarNavigation}
+            brand={config.brand}
+            navigation={navigation}
+          />
+          <div class="grow">
+            <div class="mx-auto px-4">
+              <slot />
+            </div>
+          </div>
+          <Footer />
+        </div>
+      </div>
+
+      <div class="drawer-side z-40">
+        <label for="drawer" aria-label="close sidebar" class="drawer-overlay"
+        ></label>
+        <div>
+          <SidebarNavigation
+            brand={config.brand}
+            global={navigation}
+            local={props.sidebarNavigation}
+          />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/astro/layouts/Splash.astro

@@ -0,0 +1,18 @@
+---
+import type { NavigationTree } from '../../src/schemas/config'
+import Base from './Page.astro'
+
+type Props = {
+  frontmatter?: {
+    title?: string
+    description?: string
+    sidebarNavigation?: NavigationTree
+  }
+}
+
+const props = Astro.props
+---
+
+<Base {...props}>
+  <div class="prose mx-auto"><slot /></div>
+</Base>

package/astro/layouts/index.ts

@@ -0,0 +1,3 @@
+export { default as Footer } from './Footer.astro'
+export { default as Page } from './Page.astro'
+export { default as Splash } from './Splash.astro'

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@levino/shipyard-base",
+  "version": "0.0.0-rc-20251122114952",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./astro": "./src/astro.ts",
+    "./layouts": "./astro/layouts/index.ts",
+    "./layouts/*": "./astro/layouts/*",
+    "./components": "./astro/components/index.ts",
+    "./components/*": "./astro/components/*"
+  },
+  "peerDependencies": {
+    "astro": "^5.7",
+    "daisyui": "^4",
+    "tailwindcss": "^3",
+    "@tailwindcss/typography": "^0.5.10"
+  },
+  "files": [
+    "astro",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/levino/shipyard"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/ramda": "^0.31",
+    "daisyui": "^4.6.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "ramda": "^0.31",
+    "tailwind-merge": "^2.2.0"
+  }
+}

package/src/astro.ts

@@ -0,0 +1,2 @@
+export * as components from './astro/components'
+export * as layouts from './astro/layouts'

package/src/globals.css

@@ -0,0 +1,5 @@
+/* biome-ignore-all lint/suspicious/noUnknownAtRules: bug https://github.com/biomejs/biome/issues/7223 */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.ts

@@ -0,0 +1,37 @@
+import type { AstroIntegration } from 'astro'
+import type { Config } from './schemas/config'
+
+export type { Entry } from '../astro/components/types'
+export type * from './schemas/config'
+export { getTitle } from './tools/title'
+export * from './types'
+
+const shipyardConfigId = 'virtual:shipyard/config'
+
+const resolveId: Record<string, string | undefined> = {
+  [shipyardConfigId]: `${shipyardConfigId}`,
+}
+
+const load = (config: Config) =>
+  ({
+    [shipyardConfigId]: `export default ${JSON.stringify(config)}`,
+  }) as Record<string, string | undefined>
+
+export default (config: Config): AstroIntegration => ({
+  name: 'shipyard',
+  hooks: {
+    'astro:config:setup': ({ updateConfig }) => {
+      updateConfig({
+        vite: {
+          plugins: [
+            {
+              name: 'shipyard',
+              resolveId: (id: string) => resolveId[id],
+              load: (id: string) => load(config)[id],
+            },
+          ],
+        },
+      })
+    },
+  },
+})

package/src/schemas/config.ts

@@ -0,0 +1,18 @@
+export interface NavigationEntry {
+  label?: string
+  href?: string
+  subEntry?: NavigationTree
+  active?: boolean
+}
+
+export type NavigationTree = Record<string, NavigationEntry>
+
+export type Script = string | astroHTML.JSX.IntrinsicElements['script']
+
+export interface Config {
+  brand: string
+  navigation: NavigationTree
+  title: string
+  tagline: string
+  scripts?: Script[]
+}

package/src/tools/cn.ts

@@ -0,0 +1,4 @@
+import clsx, { type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes))

package/src/tools/title.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'vitest'
+import { getTitle } from './title'
+
+describe('getTitle', () => {
+  const siteTitle = 'Shipyard'
+
+  test('returns site title when page title is undefined', () => {
+    expect(getTitle(siteTitle, undefined)).toBe('Shipyard')
+  })
+
+  test('returns site title when page title is null', () => {
+    expect(getTitle(siteTitle, null)).toBe('Shipyard')
+  })
+
+  test('returns site title when page title is empty', () => {
+    expect(getTitle(siteTitle, '')).toBe('Shipyard')
+  })
+
+  test('returns site title when page title equals site title', () => {
+    expect(getTitle(siteTitle, 'Shipyard')).toBe('Shipyard')
+  })
+
+  test('returns combined title when page title differs', () => {
+    expect(getTitle(siteTitle, 'Blog')).toBe('Shipyard - Blog')
+    expect(getTitle(siteTitle, 'First Blog Post')).toBe(
+      'Shipyard - First Blog Post',
+    )
+  })
+
+  test('handles whitespace-only page titles', () => {
+    expect(getTitle(siteTitle, '   ')).toBe('Shipyard')
+  })
+
+  test('trims page title before comparison', () => {
+    expect(getTitle(siteTitle, '  Shipyard  ')).toBe('Shipyard')
+    expect(getTitle(siteTitle, '  Blog  ')).toBe('Shipyard - Blog')
+  })
+
+  test('is case sensitive', () => {
+    expect(getTitle(siteTitle, 'shipyard')).toBe('Shipyard - shipyard')
+  })
+
+  test('handles special characters', () => {
+    expect(getTitle(siteTitle, 'FAQ & Help')).toBe('Shipyard - FAQ & Help')
+  })
+})

package/src/tools/title.ts

@@ -0,0 +1,11 @@
+export const getTitle = (
+  siteTitle: string,
+  pageTitle?: string | null,
+): string => {
+  if (!pageTitle) return siteTitle
+
+  const trimmedPageTitle = pageTitle.trim()
+  if (!trimmedPageTitle || trimmedPageTitle === siteTitle) return siteTitle
+
+  return `${siteTitle} - ${trimmedPageTitle}`
+}

package/src/types.ts

@@ -0,0 +1,34 @@
+export interface LinkData {
+  href: string
+  label: string
+  active: boolean
+}
+export const MONTHS_EN = [
+  'january',
+  'february',
+  'march',
+  'april',
+  'may',
+  'june',
+  'july',
+  'august',
+  'september',
+  'october',
+  'november',
+  'december',
+] as const
+
+export const MONTHS_DE = [
+  'Januar',
+  'Februar',
+  'März',
+  'April',
+  'Mai',
+  'Juni',
+  'Juli',
+  'August',
+  'September',
+  'Oktober',
+  'November',
+  'Dezember',
+] as const