@levino/shipyard-base 0.5.9 → 0.5.10

package/README.md

@@ -1,6 +1,6 @@
 # @levino/shipyard-base
 
-Core package for [Shipyard](https://shipyard.levinkeller.de), a general-purpose page builder for Astro.
+Core package for [shipyard](https://shipyard.levinkeller.de), a general-purpose page builder for Astro.
 
 ## Installation
 

package/astro/components/GlobalDesktopNavigation.astro

@@ -1,6 +1,7 @@
 ---
 import type { Config } from '../../src/schemas/config'
 import { cn } from '../../src/tools/cn'
+import LanguageSwitcher from './LanguageSwitcher.astro'
 
 type Props = Pick<Config, 'brand' | 'navigation'> & { showBrand: boolean }
 
@@ -68,5 +69,6 @@ const { brand, navigation, showBrand = false } = Astro.props as Props
         )
       }
     </ul>
+    <LanguageSwitcher variant="dropdown" />
   </div>
 </div>

package/astro/components/LanguageSwitcher.astro

@@ -0,0 +1,96 @@
+---
+/**
+ * Language switcher component that displays available locales.
+ * Reads locales from Astro's i18n config via virtual module.
+ */
+import { locales } from 'virtual:shipyard/locales'
+
+interface Props {
+  /** Additional CSS classes */
+  class?: string
+  /** Variant: 'dropdown' for navbar, 'list' for sidebar */
+  variant?: 'dropdown' | 'list'
+}
+
+const { class: className, variant = 'dropdown' } = Astro.props
+
+const currentLocale = Astro.currentLocale ?? locales[0]
+const currentPath = Astro.url.pathname
+
+// Build the path for other locales by replacing the current locale
+const getLocalePath = (locale: string) => {
+  if (!Astro.currentLocale) {
+    return `/${locale}${currentPath}`
+  }
+  return currentPath.replace(`/${currentLocale}`, `/${locale}`)
+}
+
+// Locale display names
+const localeNames: Record<string, string> = {
+  en: 'English',
+  de: 'Deutsch',
+  fr: 'Français',
+  es: 'Español',
+  it: 'Italiano',
+  pt: 'Português',
+  nl: 'Nederlands',
+  pl: 'Polski',
+  ru: 'Русский',
+  ja: '日本語',
+  zh: '中文',
+  ko: '한국어',
+}
+
+const hasMultipleLocales = locales.length > 1
+---
+
+{hasMultipleLocales && variant === 'dropdown' && (
+  <div class:list={["dropdown dropdown-end", className]} data-testid="language-switcher">
+    <div tabindex="0" role="button" class="btn btn-ghost gap-1">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+      </svg>
+      <span class="hidden sm:inline">{localeNames[currentLocale] ?? currentLocale}</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </div>
+    <ul tabindex="0" class="dropdown-content menu rounded-box z-50 mt-3 w-40 bg-base-100 p-2 shadow">
+      {locales.map((locale) => (
+        <li>
+          <a
+            href={getLocalePath(locale)}
+            class:list={[{ "active": locale === currentLocale }]}
+          >
+            {localeNames[locale] ?? locale}
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+)}
+
+{hasMultipleLocales && variant === 'list' && (
+  <li class={className} data-testid="language-switcher">
+    <details>
+      <summary class="gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+        </svg>
+        {localeNames[currentLocale] ?? currentLocale}
+      </summary>
+      <ul>
+        {locales.map((locale) => (
+          <li>
+            <a
+              href={getLocalePath(locale)}
+              class:list={[{ "active": locale === currentLocale }]}
+            >
+              {localeNames[locale] ?? locale}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </details>
+  </li>
+)}

package/astro/components/SidebarNavigation.astro

@@ -1,5 +1,6 @@
 ---
 import { cn } from '../../src/tools/cn'
+import LanguageSwitcher from './LanguageSwitcher.astro'
 import SidebarElement from './SidebarElement.astro'
 import type { Entry } from './types'
 
@@ -15,13 +16,13 @@ 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 })}>
+<ul class={cn("menu min-h-screen w-56 bg-base-100", { "md:hidden": !local })} data-testid="sidebar-navigation">
   <div>
     <a href={withLocale("/")} class="btn btn-ghost mb-2 text-xl">
       {brand}
     </a>
   </div>
-  <div class="block md:hidden">
+  <div class="block md:hidden" data-testid="sidebar-global-nav">
     <li>
       {
         local ? (
@@ -34,7 +35,8 @@ const withLocale = (path: string) =>
         )
       }
     </li>
+    <LanguageSwitcher variant="list" />
     <div class={cn("divider my-1 block md:hidden", { hidden: !local })}></div>
   </div>
-  {local && <SidebarElement entry={local} />}
+  {local && <div data-testid="sidebar-local-nav"><SidebarElement entry={local} /></div>}
 </ul>

package/astro/layouts/Markdown.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/Splash.astro

@@ -14,5 +14,5 @@ const props = Astro.props
 ---
 
 <Base {...props}>
-  <div class="prose mx-auto"><slot /></div>
+  <div class="mx-auto max-w-4xl px-4"><slot /></div>
 </Base>

package/astro/layouts/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levino/shipyard-base",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "type": "module",
   "main": "src/index.ts",
   "scripts": {

package/src/index.ts

@@ -7,27 +7,35 @@ export { getTitle } from './tools/title'
 export * from './types'
 
 const shipyardConfigId = 'virtual:shipyard/config'
+const shipyardLocalesId = 'virtual:shipyard/locales'
 
 const resolveId: Record<string, string | undefined> = {
   [shipyardConfigId]: `${shipyardConfigId}`,
+  [shipyardLocalesId]: `${shipyardLocalesId}`,
 }
 
-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 }) => {
+    'astro:config:setup': ({ updateConfig, config: astroConfig }) => {
+      // Extract locales from Astro's i18n config
+      const locales = astroConfig.i18n?.locales ?? []
+      const localeList = locales.map((locale) =>
+        typeof locale === 'string' ? locale : locale.path,
+      )
+
+      const load = {
+        [shipyardConfigId]: `export default ${JSON.stringify(config)}`,
+        [shipyardLocalesId]: `export const locales = ${JSON.stringify(localeList)}; export default ${JSON.stringify(localeList)};`,
+      } as Record<string, string | undefined>
+
       updateConfig({
         vite: {
           plugins: [
             {
               name: 'shipyard',
               resolveId: (id: string) => resolveId[id],
-              load: (id: string) => load(config)[id],
+              load: (id: string) => load[id],
             },
           ],
         },

package/src/tools/title.test.ts

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

package/src/virtual.d.ts

@@ -0,0 +1,10 @@
+declare module 'virtual:shipyard/config' {
+  import type { Config } from './schemas/config'
+  const config: Config
+  export default config
+}
+
+declare module 'virtual:shipyard/locales' {
+  export const locales: string[]
+  export default locales
+}