Skip to content

passionfruit

Funktionen

Alles, was passionfruit aus der Box mitbringt.

Zweisprachig ab Tag eins

Deutsch und Englisch sind kein Aufpreis-Feature, sondern die Grundannahme. Jede Seite, jeder Blogbeitrag, jeder Footer-Eintrag existiert in beiden Sprachen — und ein Pre-Build-Check verhindert, dass eine halbübersetzte Version live geht.

  • Lokalisierte Slugs (/leistungen ↔ /en/services)
  • Hreflang und zweisprachige Sitemap automatisch
  • Sprachenumschalter zeigt nur Gegenstücke an, die wirklich existieren
  • check-bilingual.mjs bricht den Build ab, wenn Übersetzungen fehlen

Blog und Inhaltsverwaltung

Markdown-Sammlungen für Blog und langformatige Seiten. Frontmatter-Schemas erzwingen die Bilingual-Symmetrie über einen `translationKey`. Keine externen CMS, keine API-Calls — der Inhalt lebt im Repo neben dem Code.

  • Astro-Content-Collections mit Zod-Schemas
  • /new-post-Skill scaffoldet beide Sprachen auf einmal
  • Reading-Time, RSS-Feed, OG-Bilder pro Beitrag
  • Spell-Check mit deutschen und englischen Wörterbüchern

Modernes Design ohne Kompromisse

Scroll-getriebene Animationen über `animation-timeline`, Glassmorphism, fluide Typografie via `clamp()`. Tailwind v4 mit Design-Tokens in einer einzigen `@theme`-Direktive. Eine Akzentfarbe ändern bedeutet eine Zeile.

  • Astro 6, statische Builds, null JS standardmäßig
  • Tailwind v4 mit @theme-Tokens
  • View Transitions zwischen Seiten
  • Performance: < 1 s First Contentful Paint

DSGVO-konform per Default

Cookie-Consent ist eingebaut, Analytics sind über Umgebungsvariablen gesteuert. PostHog läuft auf EU-Servern (Frankfurt), Google Analytics 4 nutzt Consent Mode v2. Beide bleiben stumm, bis der Nutzer zustimmt.

  • vanilla-cookieconsent mit eigenem Branding
  • PostHog EU (Ingest auf eu.i.posthog.com)
  • GA4 mit analytics_storage: granted erst nach Consent
  • Datenschutzseite mit echten Provider-Disclosures

Qualitätschecks aus der Box

Jede passionfruit-Seite kommt mit einem vollständigen CI-Setup: ESLint, TypeScript strict, Astro-A11y-Linter, Prettier, cspell für Markdown, linkinator für tote Links. Pre-Commit-Hooks halten den Hauptbranch sauber.

  • lefthook für Pre-Commit-Hooks
  • commitlint mit Conventional-Commits-Regeln
  • Pre-Build-Bilingual-Check
  • TypeScript strict, any verboten

SEO ernst genommen

Strukturierte Daten als JSON-LD, hreflang-Annotationen für jede Seite, kanonische URLs mit Trailing-Slash-Konsistenz. Sitemap.xml und robots.txt werden zur Build-Zeit generiert. Open-Graph-Bilder pro Seite überschreibbar.

  • Organisation und WebSite JSON-LD
  • hreflang de, en und x-default pro Seite
  • Open-Graph- und Twitter-Card-Tags
  • Zweisprachige sitemap.xml mit Alternate-Links

Barrierefrei nach WCAG AA

Semantisches HTML, sichtbare Fokus-Ringe auf jedem interaktiven Element, alt-Text-Pflicht für Bilder (als ESLint-Fehler, nicht Warnung), 44 px Mindest-Touchziele auf Mobilgeräten.

  • jsx-a11y/alt-text als error
  • Skip-Link für Tastaturnutzer
  • Reduzierte Animationen via prefers-reduced-motion
  • Hoher Kontrast in beiden Farbschemata

Selbstlernende Codebasis

`CLAUDE.md` ist das Projekt-Gedächtnis. Wenn du eine Präferenz äußerst, wird sie ergänzt. Wenn ein Bug behoben wird, wandert die Erkenntnis in die Quality-Checkliste. Jede neue Session beginnt schlauer als die letzte.

  • STYLE_GUIDE.md für visuelle Konventionen
  • CONTRIBUTING.md für Content-Workflows
  • Skills im .claude/skills/-Verzeichnis
  • Git-Workflow mit Vorschau-Deployments

Bereit für deine eigene Website?

Ein Befehl, ein paar Antworten, fertig. Kostenloses Hosting, kostenlose Vorlage, MIT-Lizenz.

$ pnpm create passionfruit my-site
Auf GitHub ansehen