@artfair/web-items

Das geteilte Web-Item-Regal der Art Düsseldorf. Ein Ort für die Anzeige-Bauteile, aus dem beide Apps laden — die Website (AD27) und der Editor (Webby) — damit sie garantiert dieselben Items im gleichen Look rendern (kein Nachbau, keine Drift).

Inhalt

• src/components/items/* — die Web-Items (Ticker, HeroSplit, FactsRow, CtaBand, TextCta, NumberedBlocks, CardTrio, Themen, Newsletter, …).
• src/components/SectionRenderer.tsx — mappt eine Abschnitts-Liste (sections[]) auf die Items; slots für feste Code-Riegel.
• src/lib/{sections,slugs}.ts — Section-Typen + loc(), localizeHref().
• tailwind-preset.js — das Design-Theme (artdus-Farben, Schriften, Animationen). Beide Apps binden es als Tailwind-Preset ein.
• src/styles/tokens.css — die Farb-Variablen (einzige Quelle).

Design-Regeln

• Eyebrows nur mit Text (seit v0.13.0, Annalena 14.8.2026): Die Eyebrow-Zeile (Lime-Quadrat + Versaltext) erscheint nur, wenn im CMS Text gepflegt ist — ein leeres Feld erzeugt keine Zeile und keinen einzelnen Punkt mehr. Impressum und Datenschutz bleiben so ohne Eyebrow (Feld leer lassen). Die Über-uns-Seite (aboutPage) ist grundsätzlich ohne Eyebrows, einschließlich der Zwischenheadline „Kontakt & Team" — dort sind die Felder @deprecated und werden ignoriert.
• FAQ ohne Suchfeld (seit v0.13.0, Annalena 14.8.2026): Die FAQ-Seite filtert nur über die Themen-Pills; searchPlaceholder/emptyText sind @deprecated.

Einbinden (Konsument)

// package.json
"@artfair/web-items": "git+https://github.com/Artfair/artfair-web-items.git#semver:^0.1.0"

// next.config.ts  → das Paket wird als Quelle transpiliert
transpilePackages: ['@artfair/web-items']

// tailwind.config.ts
import preset from '@artfair/web-items/tailwind-preset'
export default {
  presets: [preset],
  content: ['./…', './node_modules/@artfair/web-items/src/**/*.{ts,tsx}'],
}

import { SectionRenderer, localizeHref, type Section } from '@artfair/web-items'
import '@artfair/web-items/styles/tokens.css'

Zusätzlich müssen die Haus-Schriften (Weissenhof Grotesk, Cormorant) als --font-sans / --font-serif gesetzt sein.