@levino/shipyard-base 0.1.0

package/lib/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/lib/components/GlobalDesktopNavigation.astro

@@ -0,0 +1,71 @@
+---
+import type { Config } from '../schemas/config';
+import { cn } from '../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/lib/components/LocalNavigation.astro

@@ -0,0 +1,20 @@
+---
+import SidebarElement from './SidebarElement.astro';
+
+export type Entry = Record<
+  string,
+  {
+    label?: string;
+    href?: string;
+    subEntry?: Entry;
+  }
+>;
+
+interface SidebarProps {
+  entry: Entry;
+}
+
+const { entry } = Astro.props as SidebarProps;
+---
+
+<SidebarElement entry={entry} />

package/lib/components/SidebarElement.astro

@@ -0,0 +1,26 @@
+---
+import type { Entry } from './types';
+
+
+interface Props {
+  entry: Entry;
+}
+
+const { entry } = Astro.props;
+---
+
+{Object.entries(entry).map(([key, entry]) => {
+  const label = entry.label ?? key;
+  return (
+    <li>
+      {entry.href
+        ? <a href={entry.href}>{label}</a>
+        : <span class='menu-title'>{label}</span>}
+      {entry.subEntry ? (
+        <ul>
+          <Astro.self entry={entry.subEntry} />
+        </ul>
+      ) : null}
+    </li>
+  )
+})}

package/lib/components/SidebarNavigation.astro

@@ -0,0 +1,36 @@
+---
+import { cn } from '../tools/cn';
+import SidebarElement from './SidebarElement.astro';
+import type { Entry } from './types';
+
+interface Props {
+  local?: Entry;
+  global: Entry;
+  brand: string;
+}
+
+
+const { local, global, brand } = Astro.props;
+---
+
+<ul class={cn('menu min-h-screen w-56 bg-base-100', { 'md:hidden': !local })}>
+  <div>
+    <a href="/" 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>
+  {local && <SidebarElement entry={local} />}
+</ul>

package/lib/components/TableOfContents.astro

@@ -0,0 +1,23 @@
+---
+interface Link {
+  depth: number;
+  text: string;
+  slug: string;
+}
+
+interface TableOfContentsProps {
+  links: Link[];
+}
+
+const { links } = Astro.props as TableOfContentsProps;
+---
+
+<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, key) => (
+      <a href={`#${link.slug}`}>
+        {link.text}
+      </a>
+    ))}
+  </div>
+</div>

package/lib/components/types.d.ts

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

package/lib/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import type { AstroIntegration } from 'astro';
+import type { Config } from './schemas/config.ts';
+declare const _default: (config: Config) => AstroIntegration;
+export default _default;

package/lib/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const shipyardConfigId = 'virtual:shipyard/config';
+const resolveId = {
+    [shipyardConfigId]: `${shipyardConfigId}`,
+};
+const load = (config) => ({
+    [shipyardConfigId]: `export default ${JSON.stringify(config)}`,
+});
+exports.default = (config) => ({
+    name: 'shipyard',
+    hooks: {
+        'astro:config:setup': ({ updateConfig }) => {
+            updateConfig({
+                vite: {
+                    plugins: [
+                        {
+                            name: 'shipyard',
+                            resolveId: (id) => resolveId[id],
+                            load: (id) => load(config)[id],
+                        },
+                    ],
+                },
+            });
+        },
+    },
+});

package/lib/layouts/Footer.astro

@@ -0,0 +1,14 @@
+---
+import FooterComponent from '@levino/shipyard-base/components/Footer.astro'
+
+const locale = Astro.currentLocale
+---
+
+<FooterComponent
+  links={[{ href: `/${locale}/imprint`, label: 'Impressum' }]}
+  copyright={{
+    href: 'https://github.com/levino',
+    label: 'Levin Keller',
+    year: 2023,
+  }}
+/>

package/lib/layouts/Page.astro

@@ -0,0 +1,86 @@
+---
+import Footer from './Footer.astro'
+import '../globals.css'
+import config from 'virtual:shipyard/config'
+import GlobalDesktopNavigation from '../components/GlobalDesktopNavigation.astro'
+import type { NavigationTree, NavigationEntry } from '@/schemas/config'
+import { mapObjIndexed } from 'ramda'
+import SidebarNavigation from '../components/SidebarNavigation.astro'
+
+type Props = {
+  frontmatter?: {
+    title?: string
+    description?: string
+    sidebarNavigation?: NavigationTree
+  }
+} & {
+  title?: string
+  description?: string
+  sidebarNavigation?: NavigationTree
+}
+
+const locale = Astro.currentLocale || 'de'
+const currentPath = Astro.url.pathname
+const props = Astro.props.frontmatter || Astro.props
+
+const withLocale = (locale: string) => (path: string) => `/${locale}${path}`
+const withCurrentLocale = withLocale(locale)
+const applyLocaleAndSetActive: (navigation: NavigationTree) => NavigationTree =
+  mapObjIndexed((entry: NavigationEntry) => ({
+    ...entry,
+    ...(entry.href ? { href: withCurrentLocale(entry.href) } : {}),
+    active: entry.href === currentPath,
+    ...(entry.subEntry
+      ? { subEntry: applyLocaleAndSetActive(entry.subEntry) }
+      : {}),
+  }))
+
+const navigation = applyLocaleAndSetActive(config.navigation)
+---
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="sitemap" href="/sitemap-index.xml" />
+    <title>
+      {
+        config.meta.title
+          ? `Levin Keller - ${config.meta.title}`
+          : 'Levin Keller'
+      }
+    </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </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/lib/layouts/Splash.astro

@@ -0,0 +1,7 @@
+---
+import Base from './Page.astro'
+---
+
+<Base>
+  <div class="prose mx-auto"><slot /></div>
+</Base>

package/lib/schemas/config.d.ts

@@ -0,0 +1,15 @@
+export interface NavigationEntry {
+    label?: string;
+    href?: string;
+    subEntry?: NavigationTree;
+    active?: boolean;
+}
+export type NavigationTree = Record<string, NavigationEntry>;
+export type Config = {
+    brand: string;
+    navigation: NavigationTree;
+    meta: {
+        title: string;
+        description: string;
+    };
+};

package/lib/schemas/config.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/tools/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare const cn: (...classes: ClassValue[]) => string;

package/lib/tools/cn.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const tailwind_merge_1 = require("tailwind-merge");
+const cn = (...classes) => (0, tailwind_merge_1.twMerge)((0, clsx_1.default)(...classes));
+exports.cn = cn;

package/lib/types.d.ts

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

package/lib/types.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MONTHS_DE = exports.MONTHS_EN = void 0;
+exports.MONTHS_EN = [
+    'january',
+    'february',
+    'march',
+    'april',
+    'may',
+    'june',
+    'july',
+    'august',
+    'september',
+    'october',
+    'november',
+    'december',
+];
+exports.MONTHS_DE = [
+    'Januar',
+    'Februar',
+    'März',
+    'April',
+    'Mai',
+    'Juni',
+    'Juli',
+    'August',
+    'September',
+    'Oktober',
+    'November',
+    'Dezember',
+];

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@levino/shipyard-base",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "lib/index.js",
+  "peerDependencies": {
+    "astro": "^5",
+    "daisyui": "^4",
+    "tailwindcss": "^3",
+    "@tailwindcss/typography": "^0.5.10"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && rsync -avm --include='*/' --include='*.astro' --exclude='*' ./src/ ./lib/"
+  },
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/ramda": "^0.29.9",
+    "daisyui": "^4.6.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "ramda": "^0.29.1",
+    "tailwind-merge": "^2.2.0"
+  }
+}