Kicktemp Astro Starter

Erscheinungsbild

Architektur ​

Grundprinzipien des Starters.

Static-first ​

Die Ausgabe ist statisch. Es gibt keinen Server-Runtime-Pfad und kein SSR im Standardweg. Astro-Komponenten sind der Default; clientseitiges JavaScript wird nur geladen, wenn es einen konkreten Nutzen hat.

Aktueller Stand ​

  • Astro 7 (statische Ausgabe), TypeScript im Strict Mode
  • Tailwind 4 über das Vite-Plugin, Design Tokens CSS-first in src/styles/theme.css
  • Schriften über die Astro-Fonts-API, zur Bauzeit heruntergeladen und selbst ausgeliefert
  • Qualitätskette über pnpm verify, identisch in lokaler Umgebung und CI

Woher Komponenten ihre Werte bekommen ​

Es gibt genau einen Weg von der Konfiguration in eine Komponente:

text
project.config.ts
  └─ defineProject()          Schema- und Kombinationsprüfung beim Import
       └─ defineAstroConfig()  leitet site, Schriften und Integration ab
            └─ Integration     prüft Umgebung und Pakete zur Bauzeit
                 └─ virtual:project-config   ← das lesen Layout und Komponenten

Komponenten importieren nie project.config.ts direkt, sondern immer das virtuelle Modul:

astro
---
import project from 'virtual:project-config';
---

<html lang={project.site.locale}></html>

Der Grund steht in ADR 0003: Ein direkter Import würde die Fixture-Builds aushebeln. Sie werden mit einer anderen Konfigurationsdatei gestartet — die Seiten würden aber weiterhin die Werte aus dem Projektstamm rendern, und die Absicherung der Feature-Flags wäre wertlos.

Verzeichnisstruktur ​

text
src/
├── assets/            optimierbare Originalbilder (ab M3b)
├── components/
│   ├── navigation/    Header (mobil aufklappbar), Footer
│   └── ui/            Primitives: Section, Button, Card, Prose, Alert,
│                      Accordion, Badge, Input, Textarea, Select, Checkbox
├── layouts/
│   └── BaseLayout.astro
├── lib/
│   ├── config/        defineProject(), Schema, Prüfungen, virtuelles Modul
│   ├── forms/         fieldIds() — Verknüpfung Feld/Beschreibung/Fehler
│   ├── fonts.ts       Schriftfamilien und Performance-Budget
│   └── navigation.ts  externe Ziele, aktive Seite
├── pages/
│   ├── index.astro
│   ├── impressum.astro, datenschutz.astro   Platzhalter, Inhalt aus dem Briefing
│   ├── 404.astro      noindex
│   └── styleguide.astro   noindex, Prüffläche der a11y-Tests
└── styles/
    ├── theme.css      @theme Design Tokens
    └── global.css     Tailwind-Import, Plugin, Basis-Styles

Ordner, die in späteren Meilensteinen dazukommen (components/seo, components/consent, components/forms, content/, contracts/, server/), sind in den jeweiligen Bereichen dieser Dokumentation beschrieben.

Weiterführend ​