Skip to content

passionfruit

Features

Everything passionfruit ships with — and why it matters.

Bilingual from day one

German and English aren't a paid add-on — they're the baseline. Every page, every blog post, every footer entry exists in both languages, and a pre-build check refuses to ship a half-translated site.

  • Localized slugs (/leistungen ↔ /en/services)
  • hreflang and bilingual sitemap generated automatically
  • Language switcher only links to counterparts that actually exist
  • check-bilingual.mjs aborts the build when translations are missing

Blog and content management

Markdown collections for blog posts and long-form pages. Frontmatter schemas enforce bilingual symmetry via a `translationKey`. No external CMS, no API calls — content lives in the repo next to the code.

  • Astro content collections with Zod schemas
  • /new-post skill scaffolds both languages at once
  • Reading time, RSS feed, per-post OG images
  • Spell-check with German and English dictionaries

Modern design without compromise

Scroll-driven animations via `animation-timeline`, glassmorphism, fluid typography via `clamp()`. Tailwind v4 with design tokens in a single `@theme` directive. Changing an accent color is one line.

  • Astro 6, static builds, zero JS by default
  • Tailwind v4 with @theme tokens
  • View transitions between pages
  • Performance: under 1 s first contentful paint

GDPR-ready by default

Cookie consent is built in; analytics are gated by environment variables. PostHog runs on EU servers (Frankfurt), Google Analytics 4 uses Consent Mode v2. Both stay silent until the user opts in.

  • vanilla-cookieconsent with custom branding
  • PostHog EU (ingest on eu.i.posthog.com)
  • GA4 with analytics_storage: granted only after consent
  • Privacy page with real provider disclosures

Quality gates out of the box

Every passionfruit site ships with a full CI setup: ESLint, TypeScript strict, Astro a11y linter, Prettier, cspell for Markdown, linkinator for dead links. Pre-commit hooks keep main clean.

  • lefthook for pre-commit hooks
  • commitlint enforcing conventional commits
  • pre-build bilingual check
  • TypeScript strict, any forbidden

SEO taken seriously

Structured data as JSON-LD, hreflang annotations on every page, canonical URLs with trailing-slash consistency. `sitemap.xml` and `robots.txt` generated at build time. Per-page Open Graph image overrides.

  • Organization and WebSite JSON-LD
  • hreflang de, en, and x-default per page
  • Open Graph and Twitter Card meta tags
  • Bilingual sitemap.xml with alternate links

Accessible to WCAG AA

Semantic HTML, visible focus rings on every interactive element, alt-text required on images (as an ESLint error, not a warning), 44 px minimum touch targets on mobile.

  • jsx-a11y/alt-text set to error
  • Skip-link for keyboard users
  • Reduced animations honored via prefers-reduced-motion
  • High contrast in both color schemes

Self-improving codebase

`CLAUDE.md` is the project's memory. State a preference and it gets recorded. Fix a bug and the lesson moves into the quality checklist. Every new session starts smarter than the last.

  • STYLE_GUIDE.md for visual conventions
  • CONTRIBUTING.md for content workflows
  • Skills in the .claude/skills/ directory
  • Git workflow with preview deploys

Ready to build your own site?

One command, a few answers, done. Free hosting, free template, MIT-licensed.

$ pnpm create passionfruit my-site
View on GitHub