@levino/shipyard-base 0.6.1 → 0.6.2

package/astro/components/Footer.astro

@@ -1,26 +1,180 @@
 ---
+import { i18n } from 'astro:config/server'
+import type {
+  FooterConfig,
+  FooterLink,
+  FooterLinkColumn,
+} from '../../src/schemas/config'
+
 interface FooterProps {
-  links: {
-    label: string
-    href: string
-  }[]
-  copyright: {
-    label: string
-    href: string
-    year: number
-  }
+  config?: FooterConfig
+  hideBranding?: boolean
+}
+
+const { config, hideBranding = false } = Astro.props as FooterProps
+
+const withLocale = (path: string) => {
+  if (!i18n || !Astro.currentLocale) return path
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+  return `/${Astro.currentLocale}${normalizedPath}`
+}
+
+// Type guard to check if a link item is a column
+function isColumn(
+  item: FooterLink | FooterLinkColumn,
+): item is FooterLinkColumn {
+  return 'items' in item && Array.isArray(item.items)
+}
+
+// Check if we have multi-column layout
+const hasColumns = config?.links?.some(isColumn) ?? false
+
+// Get link href with locale support
+function getLinkHref(link: FooterLink): string {
+  if (link.href) return link.href
+  if (link.to) return withLocale(link.to)
+  return '#'
 }
 
-const { links, copyright } = Astro.props as FooterProps
+// Check if link is external
+function isExternal(link: FooterLink): boolean {
+  return (
+    !!link.href &&
+    (link.href.startsWith('http://') || link.href.startsWith('https://'))
+  )
+}
+
+// Check if a URL is external
+function isExternalUrl(url: string): boolean {
+  return url.startsWith('http://') || url.startsWith('https://')
+}
+
+// Get logo href with locale support for internal links
+function getLogoHref(href: string): string {
+  if (isExternalUrl(href)) return href
+  return withLocale(href)
+}
+
+const isDark = config?.style === 'dark'
 ---
 
-<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
+  class:list={[
+    'w-full px-6 py-8 text-sm',
+    isDark ? 'bg-neutral text-neutral-content' : 'bg-base-200 text-base-content',
+  ]}
+>
+  <div class="mx-auto max-w-7xl">
+    {/* Logo */}
+    {config?.logo && (
+      <div class="mb-6">
+        {config.logo.href ? (
+          <a
+            href={getLogoHref(config.logo.href)}
+            {...(isExternalUrl(config.logo.href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+          >
+            {config.logo.srcDark ? (
+              <picture>
+                <source srcset={config.logo.srcDark} media="(prefers-color-scheme: dark)" />
+                <img
+                  src={config.logo.src}
+                  alt={config.logo.alt}
+                  width={config.logo.width}
+                  height={config.logo.height}
+                  class="h-10 w-auto"
+                />
+              </picture>
+            ) : (
+              <img
+                src={config.logo.src}
+                alt={config.logo.alt}
+                width={config.logo.width}
+                height={config.logo.height}
+                class="h-10 w-auto"
+              />
+            )}
+          </a>
+        ) : config.logo.srcDark ? (
+          <picture>
+            <source srcset={config.logo.srcDark} media="(prefers-color-scheme: dark)" />
+            <img
+              src={config.logo.src}
+              alt={config.logo.alt}
+              width={config.logo.width}
+              height={config.logo.height}
+              class="h-10 w-auto"
+            />
+          </picture>
+        ) : (
+          <img
+            src={config.logo.src}
+            alt={config.logo.alt}
+            width={config.logo.width}
+            height={config.logo.height}
+            class="h-10 w-auto"
+          />
+        )}
+      </div>
+    )}
+
+    {/* Links */}
+    {config?.links && config.links.length > 0 && (
+      hasColumns ? (
+        <div class="mb-8 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-4">
+          {config.links.filter(isColumn).map((item) => (
+            <div>
+              <h3 class="mb-4 font-semibold">{item.title}</h3>
+              <ul class="space-y-2">
+                {item.items.map((link) => (
+                  <li>
+                    <a
+                      href={getLinkHref(link)}
+                      class="opacity-80 transition-opacity hover:opacity-100"
+                      {...(isExternal(link) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div class="mb-6 flex flex-wrap gap-x-6 gap-y-2">
+          {config.links.map((item) =>
+            !isColumn(item) && (
+              <a
+                href={getLinkHref(item)}
+                class="opacity-80 transition-opacity hover:opacity-100"
+                {...(isExternal(item) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+              >
+                {item.label}
+              </a>
+            )
+          )}
+        </div>
+      )
+    )}
+
+    {/* Bottom bar: copyright and branding */}
+    <div class="flex flex-wrap items-center justify-between gap-4 border-t border-current/10 pt-6">
+      {config?.copyright ? (
+        <div set:html={config.copyright} />
+      ) : (
+        <div>&copy; {new Date().getFullYear()}</div>
+      )}
+
+      {!hideBranding && (
+        <a
+          href="https://github.com/levino/shipyard"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="opacity-60 transition-opacity hover:opacity-100"
+        >
+          Built with Shipyard
+        </a>
+      )}
+    </div>
+  </div>
 </footer>

package/astro/layouts/Footer.astro

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levino/shipyard-base",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Core layouts, components, and configuration for shipyard - a composable page builder for Astro",
   "keywords": [
     "astro",

package/src/schemas/config.ts

@@ -14,6 +14,105 @@ export type NavigationTree = Record<string, NavigationEntry>
 
 export type Script = string | astroHTML.JSX.IntrinsicElements['script']
 
+/**
+ * A single footer link.
+ * Exactly one of `to` (internal link) or `href` (external link) must be provided.
+ */
+export type FooterLink =
+  | {
+      /**
+       * Display text for the link.
+       */
+      label: string
+      /**
+       * Client-side routing path. Use for internal links.
+       */
+      to: string
+      href?: never
+    }
+  | {
+      /**
+       * Display text for the link.
+       */
+      label: string
+      /**
+       * Full URL for external links.
+       */
+      href: string
+      to?: never
+    }
+
+/**
+ * A column of footer links with a title.
+ * Used for multi-column footer layouts.
+ */
+export interface FooterLinkColumn {
+  /**
+   * Column title displayed above the links.
+   */
+  title: string
+  /**
+   * Links within this column.
+   */
+  items: FooterLink[]
+}
+
+/**
+ * Footer logo configuration.
+ */
+export interface FooterLogo {
+  /**
+   * Alt text for the logo image.
+   */
+  alt: string
+  /**
+   * Logo image source URL.
+   */
+  src: string
+  /**
+   * Optional dark mode logo source.
+   */
+  srcDark?: string
+  /**
+   * Link URL when clicking the logo.
+   */
+  href?: string
+  /**
+   * Logo width in pixels.
+   */
+  width?: number
+  /**
+   * Logo height in pixels.
+   */
+  height?: number
+}
+
+/**
+ * Footer configuration.
+ * Supports both simple (single row of links) and multi-column layouts.
+ */
+export interface FooterConfig {
+  /**
+   * Footer color theme.
+   * @default 'light'
+   */
+  style?: 'light' | 'dark'
+  /**
+   * Footer links. Can be a flat array of links (simple footer)
+   * or an array of columns with titles (multi-column footer).
+   */
+  links?: (FooterLink | FooterLinkColumn)[]
+  /**
+   * Copyright notice displayed at the bottom of the footer.
+   * Supports HTML for links and formatting.
+   */
+  copyright?: string
+  /**
+   * Optional footer logo.
+   */
+  logo?: FooterLogo
+}
+
 /**
  * Announcement bar configuration.
  * Displays a dismissible banner above the navbar.
@@ -89,6 +188,17 @@ export interface Config {
    * Shows a dismissible banner at the top of the page.
    */
   announcementBar?: AnnouncementBar
+  /**
+   * Footer configuration.
+   * Customize footer links, copyright notice, and styling.
+   */
+  footer?: FooterConfig
+  /**
+   * Hide the "Built with Shipyard" branding in the footer.
+   * Set to true to remove the branding link.
+   * @default false
+   */
+  hideBranding?: boolean
   /**
    * The behavior of Shipyard when it detects any broken internal link.
    * By default, it logs a warning. Set to 'throw' to fail the build on broken links.