@easy-web/content-blocks 1.0.0

package/src/components/LanguageNotice.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * LanguageNotice – subtle info box for language/binding disclaimers.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  message: string;
+}
+
+const { message } = Astro.props;
+---
+
+<div class="ew-language-notice">
+  <p class="ew-language-notice__text">{message}</p>
+</div>
+
+<style>
+  .ew-language-notice {
+    background: var(--ew-surface-muted);
+    border: 1px solid var(--ew-border);
+    border-radius: var(--ew-radius-md);
+    padding: var(--ew-space-3) var(--ew-space-4);
+    margin: 0 0 var(--ew-space-5);
+  }
+  .ew-language-notice__text {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    color: var(--ew-muted);
+    margin: 0;
+    line-height: var(--ew-leading-normal);
+  }
+</style>

package/src/components/LanguageSwitch.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * LanguageSwitch – links to the alternate locale version of the current page.
+ * Convention: default locale (e.g. "de") lives at `/`, non-default (e.g. "en") at `/en/…`.
+ */
+interface Props {
+  /** Current page language, e.g. "de" or "en". */
+  currentLang: string;
+  /** Current page pathname, e.g. "/" or "/en/about". */
+  pathname: string;
+  /** The default locale that uses bare paths (no prefix). Defaults to "de". */
+  defaultLocale?: string;
+  /** Explicit alternate URL for translated slugs (e.g. /en/privacy/ for /datenschutz/). Bypasses automatic derivation. */
+  alternateHref?: string;
+  /** Accessible label override. */
+  ariaLabel?: string;
+}
+
+const { currentLang, pathname, defaultLocale = 'de', alternateHref: explicitHref, ariaLabel } = Astro.props;
+
+const isDefault = currentLang === defaultLocale;
+const alternateLang = isDefault ? 'en' : defaultLocale;
+const label = alternateLang.toUpperCase();
+
+function deriveAlternateHref(): string {
+  if (isDefault) {
+    return `/en${pathname === '/' ? '/' : pathname}`;
+  }
+  const stripped = pathname.replace(/^\/en\/?/, '/');
+  return stripped || '/';
+}
+
+const resolvedHref = explicitHref ?? deriveAlternateHref();
+const resolvedAriaLabel = ariaLabel ?? `Switch to ${alternateLang}`;
+---
+
+<a href={resolvedHref} class="ew-lang-switch" aria-label={resolvedAriaLabel} hreflang={alternateLang}>
+  {label}
+</a>
+
+<style>
+  .ew-lang-switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Same shared header-control height as ThemeToggle for a consistent utility row. */
+    height: 2.25rem;
+    min-width: 2.5rem;
+    padding: 0 var(--ew-space-2);
+    border: 1px solid var(--ew-border);
+    border-radius: var(--ew-radius-md);
+    color: var(--ew-on-surface);
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    font-weight: 600;
+    text-decoration: none;
+    letter-spacing: 0.04em;
+  }
+  .ew-lang-switch:hover {
+    background: var(--ew-surface-muted);
+  }
+  .ew-lang-switch:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+</style>

package/src/components/LegalLayout.astro

@@ -0,0 +1,53 @@
+---
+/**
+ * LegalLayout – narrow content wrapper for legal pages (privacy, imprint, etc.).
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  title: string;
+  lastUpdated?: string;
+}
+
+const { title, lastUpdated } = Astro.props;
+---
+
+<article class="ew-legal">
+  <div class="ew-legal__inner">
+    <h1 class="ew-legal__title">{title}</h1>
+    {lastUpdated && <p class="ew-legal__updated">{lastUpdated}</p>}
+    <div class="ew-legal__content">
+      <slot />
+    </div>
+  </div>
+</article>
+
+<style>
+  .ew-legal {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-legal__inner {
+    max-width: 45rem;
+    margin: 0 auto;
+  }
+  .ew-legal__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-3xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-4);
+    line-height: var(--ew-leading-tight);
+  }
+  .ew-legal__updated {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-sm);
+    color: var(--ew-muted);
+    margin: 0 0 var(--ew-space-6);
+    line-height: var(--ew-leading-normal);
+  }
+  .ew-legal__content {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    color: var(--ew-on-surface);
+    line-height: var(--ew-leading-loose);
+  }
+</style>

package/src/components/NotFound.astro

@@ -0,0 +1,124 @@
+---
+/**
+ * NotFound – shared brand-conform 404 content block.
+ *
+ * Slotted body component (no `<html>`/`<head>`/`<body>`): consumers wrap it in
+ * their own layout. Public by design (never auth-gated per ADR 0010), so no
+ * `client:*` directives, `<script>` tags, or auth imports.
+ *
+ * `heading` / `message` are CMS overrides; when absent, the inline LABELS
+ * dictionary supplies DE/EN fallback copy (`easy-web-i18n` intentionally does
+ * not ship a UI-string dictionary — inline LABELS is the source of truth for
+ * uncustomised sites).
+ */
+
+interface Props {
+  /** Current page locale (e.g. `"de"`, `"en"`). */
+  currentLang: string;
+  /** Site default locale — used for `rootHref` auto-compute and LABELS fallback. */
+  defaultLocale: string;
+  /** Explicit back-home link. Auto-computed from `currentLang` vs `defaultLocale` when omitted. */
+  rootHref?: string;
+  /** Alternate locale URL. When present, renders a language switcher link. */
+  alternateHref?: string;
+  /** CMS override for the `<h1>` heading (falls back to LABELS). */
+  heading?: string;
+  /** CMS override for the paragraph message (falls back to LABELS). */
+  message?: string;
+  /** Optional illustration URL. When present, renders `<img>` above the heading. */
+  image?: string;
+}
+
+const LABELS: Record<
+  string,
+  { backHome: string; notFoundHeading: string; notFoundMessage: string; switchLanguage: string }
+> = {
+  de: {
+    backHome: 'Zur Startseite',
+    notFoundHeading: 'Seite nicht gefunden',
+    notFoundMessage: 'Die aufgerufene Seite existiert nicht.',
+    switchLanguage: 'English',
+  },
+  en: {
+    backHome: 'Home',
+    notFoundHeading: 'Page not found',
+    notFoundMessage: 'The requested page does not exist.',
+    switchLanguage: 'Deutsch',
+  },
+};
+
+const { currentLang, defaultLocale, rootHref, alternateHref, heading, message, image } = Astro.props;
+
+const t = LABELS[currentLang] ?? LABELS[defaultLocale] ?? LABELS.en;
+const resolvedRootHref = rootHref ?? (currentLang === defaultLocale ? '/' : `/${currentLang}/`);
+const resolvedHeading = heading ?? t.notFoundHeading;
+const resolvedMessage = message ?? t.notFoundMessage;
+---
+
+<section class="ew-not-found" data-testid="not-found">
+  {image ? <img src={image} alt="" class="ew-not-found__image" loading="lazy" /> : null}
+  <h1 class="ew-not-found__heading">{resolvedHeading}</h1>
+  <p class="ew-not-found__message">{resolvedMessage}</p>
+  <p class="ew-not-found__actions">
+    <a href={resolvedRootHref} class="ew-not-found__link">{t.backHome}</a>
+  </p>
+  {alternateHref ? (
+    <p class="ew-not-found__alt">
+      <a href={alternateHref} class="ew-not-found__alt-link">{t.switchLanguage}</a>
+    </p>
+  ) : null}
+</section>
+
+<style>
+  .ew-not-found {
+    max-width: 40rem;
+    margin: var(--ew-space-12) auto;
+    padding: 0 var(--ew-space-5);
+    text-align: center;
+    color: var(--ew-on-surface);
+  }
+  .ew-not-found__image {
+    display: block;
+    max-width: 12rem;
+    height: auto;
+    margin: 0 auto var(--ew-space-5);
+  }
+  .ew-not-found__heading {
+    font-family: var(--ew-font-sans);
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-3);
+    letter-spacing: -0.01em;
+  }
+  .ew-not-found__message {
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-5);
+  }
+  .ew-not-found__actions {
+    margin: 0 0 var(--ew-space-3);
+  }
+  .ew-not-found__link {
+    display: inline-block;
+    padding: var(--ew-space-2) var(--ew-space-5);
+    background: var(--ew-primary);
+    color: var(--ew-on-primary);
+    border-radius: var(--ew-radius-md);
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .ew-not-found__link:hover {
+    filter: brightness(0.95);
+  }
+  .ew-not-found__link:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+  .ew-not-found__alt {
+    margin: 0;
+  }
+  .ew-not-found__alt-link {
+    color: var(--ew-primary);
+    text-decoration: underline;
+    font-size: var(--ew-text-sm);
+  }
+</style>

package/src/components/Prose.astro

@@ -0,0 +1,156 @@
+---
+---
+
+<div class="ew-prose">
+  <div class="ew-prose__inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ew-prose {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-prose__inner {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-base);
+    line-height: var(--ew-leading-loose);
+    color: var(--ew-on-surface);
+    max-width: 45rem;
+    margin: 0 auto;
+  }
+
+  .ew-prose__inner :global(h1) {
+    font-size: var(--ew-text-3xl);
+    font-weight: 700;
+    line-height: var(--ew-leading-tight);
+    margin: var(--ew-space-7) 0 var(--ew-space-4);
+  }
+
+  .ew-prose__inner :global(h2) {
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    line-height: var(--ew-leading-tight);
+    margin: var(--ew-space-7) 0 var(--ew-space-3);
+  }
+
+  .ew-prose__inner :global(h3) {
+    font-size: var(--ew-text-lg);
+    font-weight: 600;
+    line-height: var(--ew-leading-tight);
+    margin: var(--ew-space-6) 0 var(--ew-space-3);
+  }
+
+  .ew-prose__inner :global(h4),
+  .ew-prose__inner :global(h5),
+  .ew-prose__inner :global(h6) {
+    font-size: var(--ew-text-base);
+    font-weight: 600;
+    line-height: var(--ew-leading-tight);
+    margin: var(--ew-space-5) 0 var(--ew-space-2);
+  }
+
+  .ew-prose__inner :global(p) {
+    margin: 0 0 var(--ew-space-4);
+  }
+
+  .ew-prose__inner :global(a) {
+    color: var(--ew-primary);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  .ew-prose__inner :global(a:hover) {
+    text-decoration-thickness: 2px;
+  }
+
+  .ew-prose__inner :global(ul),
+  .ew-prose__inner :global(ol) {
+    margin: 0 0 var(--ew-space-4);
+    padding-left: var(--ew-space-5);
+  }
+
+  .ew-prose__inner :global(li) {
+    margin-bottom: var(--ew-space-1);
+  }
+
+  .ew-prose__inner :global(li > ul),
+  .ew-prose__inner :global(li > ol) {
+    margin-top: var(--ew-space-1);
+    margin-bottom: 0;
+  }
+
+  .ew-prose__inner :global(blockquote) {
+    border-left: 3px solid var(--ew-primary);
+    margin: 0 0 var(--ew-space-4);
+    padding: var(--ew-space-2) var(--ew-space-4);
+    color: var(--ew-muted);
+    font-style: italic;
+  }
+
+  .ew-prose__inner :global(blockquote p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .ew-prose__inner :global(code) {
+    font-family: var(--ew-font-mono);
+    font-size: 0.9em;
+    background: var(--ew-surface-muted);
+    border-radius: var(--ew-radius-sm);
+    padding: 0.15em 0.35em;
+  }
+
+  .ew-prose__inner :global(pre) {
+    margin: 0 0 var(--ew-space-4);
+    padding: var(--ew-space-4);
+    background: var(--ew-surface-muted);
+    border-radius: var(--ew-radius-md);
+    overflow-x: auto;
+  }
+
+  .ew-prose__inner :global(pre code) {
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    font-size: var(--ew-text-sm);
+  }
+
+  .ew-prose__inner :global(hr) {
+    border: none;
+    border-top: 1px solid var(--ew-border);
+    margin: var(--ew-space-6) 0;
+  }
+
+  .ew-prose__inner :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--ew-radius-md);
+  }
+
+  .ew-prose__inner :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0 0 var(--ew-space-4);
+    font-size: var(--ew-text-sm);
+  }
+
+  .ew-prose__inner :global(th),
+  .ew-prose__inner :global(td) {
+    border: 1px solid var(--ew-border);
+    padding: var(--ew-space-2) var(--ew-space-3);
+    text-align: left;
+  }
+
+  .ew-prose__inner :global(th) {
+    font-weight: 600;
+    background: var(--ew-surface-muted);
+  }
+
+  .ew-prose__inner :global(:first-child) {
+    margin-top: 0;
+  }
+
+  .ew-prose__inner :global(:last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/src/components/Section.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * Section – semantic wrapper with optional heading, constrained width, and slot.
+ * Pure Astro component using --ew-* design tokens.
+ */
+interface Props {
+  title?: string;
+  id?: string;
+}
+
+const { title, id } = Astro.props;
+---
+
+<section class="ew-section" id={id}>
+  <div class="ew-section__inner">
+    {title && <h2 class="ew-section__title">{title}</h2>}
+    <slot />
+  </div>
+</section>
+
+<style>
+  .ew-section {
+    padding: var(--ew-space-8) var(--ew-space-5);
+  }
+  .ew-section__inner {
+    max-width: 72rem;
+    margin: 0 auto;
+  }
+  .ew-section__title {
+    font-family: var(--ew-font-sans);
+    font-size: var(--ew-text-xl);
+    font-weight: 700;
+    color: var(--ew-on-surface);
+    margin: 0 0 var(--ew-space-5);
+    line-height: var(--ew-leading-tight);
+  }
+</style>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,82 @@
+---
+/**
+ * ThemeToggle – switches between light and dark themes using @easy-web/theme-core.
+ * Pure Astro component with inline vanilla JS. No framework dependency.
+ */
+interface Props {
+  /** Accessible label for the toggle button. */
+  label?: string;
+}
+
+const { label = 'Toggle color theme (Darkmode)' } = Astro.props;
+---
+
+<button
+  type="button"
+  class="ew-theme-toggle"
+  aria-label={label}
+  title={label}
+>
+  <svg class="ew-theme-toggle__icon ew-theme-toggle__icon--sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg class="ew-theme-toggle__icon ew-theme-toggle__icon--moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+
+<style>
+  .ew-theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    /* Shared header-control height. Icon-only → same value for width for a square button. */
+    width: 2.25rem;
+    height: 2.25rem;
+    background: transparent;
+    border: 1px solid var(--ew-border);
+    border-radius: var(--ew-radius-md);
+    color: var(--ew-on-surface);
+    cursor: pointer;
+    padding: 0;
+  }
+  .ew-theme-toggle:hover {
+    background: var(--ew-surface-muted);
+  }
+  .ew-theme-toggle:focus-visible {
+    outline: 2px solid var(--ew-primary);
+    outline-offset: 2px;
+  }
+
+  /* Default: show sun, hide moon (light mode) */
+  .ew-theme-toggle__icon--moon { display: none; }
+  .ew-theme-toggle__icon--sun  { display: block; }
+
+  :global([data-theme="dark"]) .ew-theme-toggle__icon--sun  { display: none; }
+  :global([data-theme="dark"]) .ew-theme-toggle__icon--moon { display: block; }
+
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme="light"])) .ew-theme-toggle__icon--sun  { display: none; }
+    :global(:root:not([data-theme="light"])) .ew-theme-toggle__icon--moon { display: block; }
+  }
+</style>
+
+<script>
+  import { applyTheme, getPreferredTheme } from '@easy-web/theme-core';
+
+  const btn = document.querySelector('.ew-theme-toggle') as HTMLButtonElement | null;
+  btn?.addEventListener('click', () => {
+    const current = getPreferredTheme();
+    const next = current === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+  });
+</script>

package/src/components/UniversalMedia.astro

@@ -0,0 +1,102 @@
+---
+/**
+ * UniversalMedia — renders an image from any source type.
+ *
+ * @remarks
+ * Supported image formats: JPEG, PNG, WebP, AVIF, SVG, GIF.
+ * Unsupported formats (upload rejected at CMS level): HEIC, JXL.
+ *
+ * 4-case dispatch:
+ *   1. ImageMetadata object → <Image> (Astro-optimised, with srcset)
+ *   2. "/src/assets/..." string → glob lookup via `images` prop → <Image> (fallback to fallbackSrc)
+ *   3. External URL ("http..." or "https...") → <Image inferSize>
+ *   4. Everything else (public-folder path "/foo/bar.png") → plain <img>
+ */
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+interface Props {
+  /** The image source: an Astro ImageMetadata object or a URL/path string. */
+  src: ImageMetadata | string;
+  /** Alt text for the image (required). */
+  alt: string;
+  /**
+   * Consumer-supplied glob result mapping paths to lazy image loaders.
+   * Consumer generates this via Vite's glob-import helper (see Astro/Vite docs)
+   * matching `/src/assets/**` with `{ import: 'default' }` so entries yield
+   * `() => Promise<{ default: ImageMetadata }>`.
+   * The component does NOT resolve the glob itself.
+   */
+  images: Record<string, () => Promise<{ default: ImageMetadata }>>;
+  /** Fallback image path to use when a /src/assets/... glob lookup misses. Defaults to empty (renders nothing gracefully). */
+  fallbackSrc?: string;
+  /** Fallback alt text used when fallbackSrc is rendered. Defaults to alt. */
+  fallbackAlt?: string;
+  width?: number;
+  height?: number;
+  class?: string;
+  decoding?: 'async' | 'auto' | 'sync';
+}
+
+const {
+  src,
+  alt,
+  images,
+  fallbackSrc,
+  fallbackAlt,
+  width = 800,
+  height = 600,
+  class: cssClass = '',
+  decoding = 'async',
+} = Astro.props;
+
+// Case 1: already a resolved ImageMetadata object
+const isImageMetadata = typeof src !== 'string';
+
+// Normalise string to check against known patterns
+const srcStr = isImageMetadata ? '' : (src as string);
+
+// Case 2: /src/assets/... path — must be resolved via consumer-supplied glob
+const isInternalSrcAssets = srcStr.startsWith('/src/assets/');
+
+// Case 3: external URL
+const isExternalUrl = srcStr.startsWith('http://') || srcStr.startsWith('https://');
+
+// Resolve ImageMetadata for cases 1 & 2
+let resolvedSrc: ImageMetadata | null = null;
+let resolvedAlt = alt;
+
+if (isImageMetadata) {
+  resolvedSrc = src as ImageMetadata;
+} else if (isInternalSrcAssets) {
+  const loader = images[srcStr];
+  if (typeof loader === 'function') {
+    const mod = await loader();
+    resolvedSrc = mod.default ?? (mod as unknown as ImageMetadata);
+  }
+  if (!resolvedSrc && fallbackSrc) {
+    const fallbackLoader = images[fallbackSrc];
+    if (typeof fallbackLoader === 'function') {
+      const mod = await fallbackLoader();
+      resolvedSrc = mod.default ?? (mod as unknown as ImageMetadata);
+      resolvedAlt = fallbackAlt ?? alt;
+    } else {
+      console.warn(
+        `UniversalMedia: "${srcStr}" not found in glob, and fallbackSrc "${fallbackSrc}" is also missing. Rendering as plain <img>.`
+      );
+    }
+  }
+}
+---
+
+{isImageMetadata || isInternalSrcAssets ? (
+  resolvedSrc ? (
+    <Image class={cssClass} src={resolvedSrc} alt={resolvedAlt} width={width} height={height} decoding={decoding} />
+  ) : (
+    <img class={cssClass} src={srcStr} alt={alt} width={width} height={height} decoding={decoding} />
+  )
+) : isExternalUrl ? (
+  <Image class={cssClass} src={srcStr} alt={alt} inferSize decoding={decoding} />
+) : (
+  <img class={cssClass} src={srcStr} alt={alt} width={width} height={height} decoding={decoding} />
+)}