Erste Schritte mit easy-web
Richte dein erstes easy-web-Projekt in 5 Minuten ein.
1. Voraussetzungen
Bevor du beginnst, stelle sicher, dass Folgendes auf deinem System installiert ist:
- Node.js 18 oder höher
- pnpm (empfohlener Paketmanager)
- Ein bestehendes Astro-Projekt (oder erstelle ein neues)
Überprüfe deine Installation mit diesen Befehlen im Terminal:
node --version
pnpm --versionFalls du ganz neu starten möchtest, führe diesen Befehl aus:
pnpm create astro@latest my-site2. Pakete installieren
Installiere die Kernpakete von easy-web in deinem Projekt. Diese bieten Design-Tokens, i18n-Helfer und UI-Komponenten.
pnpm add @easy-web/theme-core
pnpm add @easy-web/i18n
pnpm add @easy-web/content-blocks- theme-core: CSS-Variablen, Dark-Mode-Logik und Typografie.
- i18n: Bilinguales Routing und Übersetzungs-Utilities.
- content-blocks: Barrierefreie, thematisierte Astro-Komponenten.
3. Design Tokens hinzufügen
Importiere die globalen Design-Tokens in deinem Haupt-Layout und füge das noFlashScript hinzu, um ein Flackern des Dark-Modes beim Laden der Seite zu verhindern.
// Tokens importieren
import '@easy-web/theme-core/tokens.css';
import { noFlashScript } from '@easy-web/theme-core';
<html>
<head>
<script is:inline set:html={noFlashScript}></script>
</head>
</html>4. Komponenten nutzen
Beginne damit, deine Seiten mit den bereitgestellten Inhaltsblöcken aufzubauen. Diese Komponenten nutzen automatisch deine Theme-Tokens.
// Komponenten nutzen
import Hero from '@easy-web/content-blocks/components/Hero';
import ThemeToggle from '@easy-web/content-blocks/components/ThemeToggle';
<Hero
title="Meine Seite"
subtitle="Erstellt mit easy-web"
ctaLabel="Mehr erfahren"
ctaHref="/ueber-uns"
/>
<ThemeToggle />5. Nächste Schritte
Jetzt, wo alles eingerichtet ist, kannst du das restliche Ökosystem erkunden, um noch schneller zu entwickeln.