PhantomWP PhantomWP Cheat Sheet Dieses Cheat Sheet basiert auf den bereitgestellten Docs aus Docs_small.pdf und ist so aufgebaut, dass du möglichst schnell produktiv mit PhantomWP arbeiten kannst. 1. Was ist PhantomWP? PhantomWP ist ein headless Site Builder, der deine WordPress-Seite in eine schnelle statische Astro-Seite verwandelt. Du behältst: WordPress für Content Management die gewohnte Redaktion bestehende Inhalte Du bekommst zusätzlich: Astro-Frontend statische HTML-Ausgabe mehr Performance mehr Sicherheit weniger Wartung günstiges oder kostenloses Hosting Kurz gesagt WordPress bleibt dein CMS. PhantomWP baut daraus eine moderne statische Website. 2. Warum PhantomWP statt klassischem WordPress-Frontend? Die Probleme von normalem WordPress Laut Doku bringt klassisches WordPress oft diese Nachteile: langsame Seitenladezeiten PHP-Verarbeitung Datenbankqueries auf jedem Page Load höhere Hosting-Kosten PHP-Hosting Datenbank oft zusätzlich Caching laufende Wartung Core-Updates Theme-Updates Plugin-Updates Sicherheitsrisiken Plugins PHP-Angriffsfläche Datenbank-Angriffsfläche Was PhantomWP dagegen macht PhantomWP generiert statische HTML-Dateien aus deinen WordPress-Inhalten. Vorteile: lädt sofort kein PHP zur Laufzeit keine DB zur Laufzeit inhärent sicherer minimaler Wartungsaufwand kostenlos hostbar auf z. B.: Vercel Netlify anderen Static Hosts 3. Für wen ist PhantomWP gedacht? PhantomWP ist laut Doku ideal für: WordPress-Site-Owner, die bessere Performance wollen Content Creators, die weiter mit WordPress schreiben möchten Agenturen, die mehrere WordPress-Seiten betreuen Entwickler, die modernen Stack wollen ohne Migrationshölle alle, die WordPress-Sicherheitsupdates und langsame Ladezeiten satt haben 4. Das Grundprinzip / der Workflow Der Kern-Workflow ist extrem einfach: Content in WordPress schreiben Design und Frontend in PhantomWP/Astro bauen statisch deployen Formel: WordPress (Content) → PhantomWP (Build) → Astro Site (Deploy) 5. Was du in PhantomWP bekommst 5.1 Flexible Development Environments Du kannst Projekte in drei Modi laufen lassen: GitHub Codespaces Cloud-Entwicklungsumgebung im Browser nutzbar nichts lokal installieren Docker Local Development lokal auf deinem Rechner ideal für Offline-Arbeit gleicher IDE-Flow wie in der Cloud Fly.io Remote Containers eigener immer laufender Cloud-Container Wichtig Alle drei Modi teilen sich laut Doku: gleiche IDE gleicher AI Assistant gleiche WordPress-Integration gleiche Deployment-Flows 5.2 Web-Based IDE Die IDE enthält: Monaco Editor Syntax Highlighting IntelliSense Live Preview Visual Editor AI Assistant Git Integration 5.3 WordPress Integration Du kannst dein bestehendes WordPress nutzen zum: Inhalte durchsuchen Inhalte importieren WordPress als Headless CMS verwenden 5.4 Pre-Built Components Component Library mit fertigen Sektionen, z. B.: Hero Sections Feature Grids Testimonials Pricing Tables Contact Forms 5.5 One-Click Deployment Deployment auf Vercel mit: automatischen Builds globalem CDN HTTPS Preview Deployments pro Branch 6. Schnellstart in 5 Minuten Voraussetzungen Du brauchst nur: einen GitHub-Account eine E-Mail-Adresse etwa 5 Minuten keine lokale Installation keine CLI-Kenntnisse Schritt 1: Account erstellen Zu PhantomWP gehen Get Started klicken Mit E-Mail registrieren Mail bestätigen Schritt 2: GitHub verbinden Im Dashboard Connect GitHub Account GitHub-Zugriff autorisieren Zurück ins Dashboard Wichtig PhantomWP braucht GitHub-Zugriff, um: Repositories zu erstellen Codespaces zu verwalten Schritt 3: Erstes Projekt erstellen Create New Project Repo-Name eingeben, z. B. my-astro-site Public oder Private wählen Laufzeit wählen: GitHub Codespace Docker Fly.io Starten: Create & Launch Codespace oder lokal / Fly.io PhantomWP macht dann automatisch: neues GitHub-Repo Astro-Template einrichten Codespace starten IDE öffnen Dauer: ca. 3–4 Minuten Schritt 4: IDE verstehen Die wichtigsten Bereiche: Bereich Zweck File Tree (links) Dateien durchsuchen/verwalten Code Editor (Mitte) Code bearbeiten Live Preview (rechts) Änderungen sofort sehen Header Bar (oben) Tools und Einstellungen Schritt 5: Erste Änderung src/pages/index.astro öffnen

suchen Text ändern Cmd/Ctrl + S Die Preview aktualisiert sich sofort. Schritt 6: Komponente einfügen Sections-Icon im Header klicken Sektion auswählen Vorschau ansehen Insert Schritt 7: Deployen Änderungen committen Git-Icon klicken Änderungen prüfen Commit-Message schreiben Commit & Push Vercel einrichten Im Dashboard Projekt finden Setup Deployment Vercel-Token eingeben Repo verbinden Danach wird jeder Push automatisch deployed. 7. Das Wichtigste zuerst: dein praktischer Minimal-Workflow Wenn du sofort loslegen willst, dann arbeite erstmal nur so: Workflow A: Neue Marketing-Seite bauen Projekt erstellen src/pages/index.astro anpassen Component Library öffnen Hero + Features + CTA einfügen Theme Studio öffnen Farben + Fonts setzen Git committen Vercel deployen Workflow B: WordPress-Content headless nutzen WordPress verbinden Content-Typen auswählen Generate Pages src/lib/wordpress.ts nutzen Blog-Listing + Detailseiten bauen Media runterladen Deployen 8. IDE Cheat Sheet 8.1 Header Bar – was ist wo? Die Toolbar ist laut Doku in Bereiche gegliedert: Context & Status aktuelle Datei Verbindungsstatus Services Layout Panels File Tree ein-/ausblenden Editor Preview Structure AI Chat Design Tools Sections Library Icons Fonts Tokens / Theme WordPress SEO Menus Media Git & Deploy File History Änderungen Commit Deploy Navigation More Help Dashboard 8.2 File Tree – wichtigste Ordner Ordner Zweck src/pages/ Seiten / Routen src/content/ Content / Blog-Inhalte src/components/ wiederverwendbare Komponenten src/layouts/ Layouts public/ statische Assets src/media/ optimierte Bilder 8.3 Editor-Funktionen Der Editor bietet: Syntax Highlighting IntelliSense Fehlerdiagnosen inline Multiple Tabs Code Folding Find/Replace Regex-Suche 8.4 Wichtige Shortcuts Speichern / Suchen / Formatieren Aktion Mac Windows Save Cmd+S Ctrl+S Find Cmd+F Ctrl+F Replace Cmd+H Ctrl+H Go to Line Cmd+G Ctrl+G Toggle Comment Cmd+/ Ctrl+/ Format Document Shift+Option+F Shift+Alt+F Weitere wichtige Aktion Mac Windows Quick Open Cmd+P Ctrl+P New File Cmd+N Ctrl+N Save All Cmd+Option+S Ctrl+Alt+S Close Tab Cmd+W Ctrl+W Go to Symbol Cmd+Shift+O Ctrl+Shift+O 8.5 Preview Die Preview: refresht automatisch beim Speichern erlaubt responsive Testing hat manuellen Refresh-Button zeigt die Seite wie für Besucher 9. Working with Files – Seiten, Komponenten, Blogposts, Layouts 9.1 Seiten erstellen Wege + Page Button Hover auf src/pages → + Rechtsklick → New Page Templates Blank Page Contact Page About Page FAQ Page 404 Error Page Formate .astro → volle Kontrolle .mdx → Markdown + Komponenten Layouts BaseLayout PageLayout ContentLayout 9.2 URL-Mapping verstehen Dateipfad URL src/pages/index.astro / src/pages/about.astro /about src/pages/services/design.astro /services/design src/pages/blog/my-post.mdx /blog/my-post 9.3 Komponenten erstellen Ort: src/components/ Wege + Component Hover auf src/components Rechtsklick → New Component Templates Simple Component Component with Props Card Component Button Component Hero Section Props-Beispiel --- interface Props { title: string; description?: string; } const { title, description } = Astro.props; ---

{title}

{description &&

{description}

}
Verwendung --- import Card from '../components/Card.astro'; --- 9.4 Komponenten extrahieren Im HTML Tree View: Element auswählen Rechtsklick Extract Component Namen eingeben PhantomWP macht automatisch: neuen File in src/components/ Originalcode ersetzen durch Import hinzufügen 9.5 Blogposts erstellen Ort: src/pages/blog/ Format: MDX Frontmatter-Beispiel --- title: "My Blog Post" description: "A short description" pubDate: 2024-01-15 author: "Your Name" tags: ["tutorial", "astro"] --- # Introduction Write your content in Markdown... Typische Frontmatter-Felder Feld Zweck title Titel description SEO-Text pubDate Veröffentlichungsdatum author Autor tags Tags image Featured Image draft true, um Post zu verstecken 9.6 Layouts erstellen Ort: src/layouts Beispiel --- interface Props { title: string; description?: string; } const { title, description } = Astro.props; --- {title}
Nutzung --- import BaseLayout from '../layouts/BaseLayout.astro'; ---
9.7 Dateien verwalten Umbenennen Rechtsklick → Rename oder Pencil-Icon Doppeln Rechtsklick → Duplicate Verschieben Drag & Drop Löschen Rechtsklick → Delete Ordner anlegen Rechtsklick auf Parent → New Folder Suchen / drücken oder Suchsymbol 10. Visual Editor / HTML Tree View Der Visual Editor ist extrem nützlich, wenn du nicht alles direkt im Code suchen willst. 10.1 Öffnen Rechts im Panel den Tree-Tab öffnen 10.2 Was du dort siehst Die Baumansicht zeigt: HTML-Tags Astro-Komponenten Loops Conditionals Klassen IDs Textinhalt Section Names via HTML-Kommentare 10.3 Drei-Wege-Sync Wenn du ein Element im Tree auswählst: Element wird in der Preview hervorgehoben Editor springt zur Code-Stelle Properties Panel zeigt bearbeitbare Eigenschaften Das ist super zum Debuggen. 10.4 Eigenschaften bearbeiten Classes Klassen bearbeiten Tailwind-Autocomplete Klasse temporär deaktivieren Klasse kopieren Klasse löschen ID direkt ändern Component Props definierte Props sehen Werte anpassen Booleans toggeln neue Props hinzufügen 10.5 Drag & Drop Du kannst HTML-Elemente und Komponenten umsortieren. Nicht verschiebbar: Loop-Elemente Conditional-Elemente Beim Drop siehst du Indikatoren: blaue Linie oben → davor blaue Linie unten → danach blauer Hintergrund → als Kind 10.6 Context Menu im Tree Mögliche Aktionen: Insert Before Insert After Insert Child Add/Edit Section Name Extract Component Rename Component Delete Element 10.7 Beste Anwendung Nutze den Tree besonders für: Styling-Fehler finden DOM-Struktur verstehen komplexe Seiten durchblicken richtige Stelle im Code finden Tailwind-Klassen testen 11. Menu Builder Mit dem Menu Builder erzeugst du wiederverwendbare Astro-Menü-Komponenten. 11.1 Öffnen Menu-Icon in der Toolbar 11.2 Layout des Builders Bereich Zweck links Menüliste + WordPress-Import Mitte Quellen für Menüpunkte rechts Menüstruktur + Einstellungen 11.3 Neues Menü erstellen New Menu Namen eingeben, z. B. Main Dann entsteht z. B.: Komponente: Datei: src/components/menus/MainMenu.astro 11.4 Zwei Betriebsmodi Auto-sync Mode Empfohlen. entdeckt automatisch Seiten aus src/pages/ aktualisiert sich bei neuen/gelöschten Seiten Seiten können ausgeschlossen werden Reihenfolge per Drag & Drop Manual Mode du fügst alle Items manuell hinzu volle Kontrolle nichts aktualisiert sich automatisch 11.5 Menüpunkte hinzufügen Aus lokalen Seiten einzelne Seiten oder Add All Pages Aus WordPress wenn verbunden published WP-Seiten werden gezeigt Custom Links Label + URL für externe Links oder Spezialseiten 11.6 Dropdowns bauen Im Manual Mode: Parent-Item anlegen Child-Items darunter mit Indent einrücken 11.7 Menüstile Horizontal Vertical Dropdown Optional: Hamburger-Menü aktivieren 11.8 WordPress-Menüs importieren Wenn WordPress verbunden ist und dort Menüs definiert sind: unten links unter „Import from WordPress“ Menü anklicken Struktur wird in Astro-Menü kopiert 11.9 Speichern und nutzen Beim Speichern passiert: Astro-Komponente wird erzeugt/aktualisiert Konfiguration wird in src/config/menus.json gespeichert Nutzung im Layout --- import MainMenu from '../components/menus/MainMenu.astro'; ---
12. Component Library Die Component Library ist dein Beschleuniger für schnelles Bauen. 12.1 Öffnen Sections-Icon in der Toolbar 12.2 Tabs Tab Zweck Sections einzelne Sektionen nach Kategorie Quick Start fertige Bundles für Seitentypen 12.3 Kategorien Hero Features Testimonials Pricing CTA Contact Navigation Footer Content Gallery Stats Team FAQ Logos 12.4 Vorschau Du kannst Sektionen ansehen mit: Live Preview Theme Colors Code View Copy Code Verfügbare Theme-Farben: Indigo Blue Emerald Rose Amber Violet 12.5 Einfügen Einzelne Sektion auswählen previewen Insert Component Mehrere Sektionen Checkboxen aktivieren Page View anschauen Insert All Einfüge-Reihenfolge = Auswahl-Reihenfolge. 12.6 Quick Start Templates Vorgefertigte Seiten-Bundles, z. B.: Landing Page SaaS Landing Portfolio About Page Pricing Page Freelancer Product Landing Agency Website Perfekt, wenn du in Minuten eine komplette Startseite brauchst. 12.7 Nach dem Einfügen anpassen Typische Anpassungen: Texte ändern Bilder austauschen Farben anpassen Karten/Testimonials duplizieren oder entfernen 12.8 AI dafür nutzen Beispielprompts: „Change the background to a gradient“ „Add a fourth pricing tier“ „Make this section full-width“ 13. Media Manager Bilder werden in PhantomWP sehr komfortabel verwaltet. 13.1 Zwei Wege Media Library Visuelle Galerie File Tree Dateibasierte Verwaltung 13.2 Optimierte und statische Medien Pfad Zweck src/media/ optimierte Bilder via Astro public/ statische Dateien ohne Optimierung src/media/ – empfohlen für Bilder Vorteile: Formatkonvertierung responsive Größen lazy loading blur placeholders public/ für z. B.: favicon robots.txt Open Graph Defaults Dateien, die exakt so bleiben müssen 13.3 Unterstützte Formate JPG JPEG PNG GIF WebP SVG AVIF 13.4 Bilder einfügen Hover auf Bild → Aktionen: Insert at Cursor Copy Import Copy Full Code Delete Eingefügter Code --- import { Image } from 'astro:assets'; import heroImage from '../media/hero.jpg'; --- hero 13.5 Drag & Drop in den Editor Du kannst Bilder aus src/media/ direkt in den Code ziehen. PhantomWP fügt dann Import + Image-Komponente automatisch ein. 13.6 Best Practices für Medien Dateinamen Gut: team-photo-2024.jpg product-dashboard.png Schlecht: IMG_2847.jpg Screenshot 2024-01-15.png Ordnerstruktur z. B. src/media/blog/ src/media/products/ src/media/team/ src/media/icons/ Bildgrößen Hero: max. 1920px Content: 800–1200px Thumbnails: ca. 400px Icons: idealerweise SVG Alt-Texte beschreibend kurz nicht mit „Bild von …“ anfangen 14. Font Manager Mit dem Font Manager installierst du Schriften aus Fontsource. 14.1 Öffnen Type-Icon (T) 14.2 Kategorien All Fonts Sans Serif Serif Monospace Display Handwriting 14.3 Features Suche Preview variable Fonts filtern Gewichte auswählen Fontsource-Link direkte Installation ins Projekt 14.4 Gewichte Standardmäßig ausgewählt: 400 700 14.5 Installation Add to Project installiert: @fontsource/{font-id} Wichtig: Dev Server startet dabei neu Preview kann kurz leer sein 14.6 Aktivierung Nach Installation musst du die Schrift in Theme Studio auswählen: Theme Studio öffnen Typography-Bereich Font auswählen Apply Theme PhantomWP macht dann automatisch: theme.css updaten Font-Import in BaseLayout.astro einfügen 14.7 Direkte Nutzung

Welcome

Body text uses the sans font.

14.8 Best Practices max. 1–2 Fontfamilien nur benötigte Weights installieren möglichst variable Fonts nutzen 15. Theme Studio Hier definierst du das visuelle System deiner Seite. 15.1 Öffnen Palette-Icon 15.2 Zweck Theme Studio erstellt ein Tailwind-v4- theme.css mit Tokens für: Farben Typografie Spacing Border Radius Shadows 15.3 Aufbau Panel Inhalt links Editor rechts Live Preview 15.4 AI Theme Generation Du kannst ein Theme mit Prompt erzeugen, z. B.: „Modern SaaS theme with teal and coral accents“ AI erzeugt dann: Farbpalette Light/Dark Font-Pairing Wenn kein API-Key da ist, gibt es einen Fallback. 15.5 Presets Es gibt 18 Preset-Themes, darunter: Dark PhantomWP Default Midnight Dracula Nord Monokai Obsidian Light Ocean Blue Forest Sunset Purple Haze Rose Gold Coral Reef Mint Fresh Lavender Amber Glow Steel Cherry Electric 15.6 Farbgruppen Token-Gruppen: Primary Secondary Accent Surface Content Outline Status Jede Farbe hat zugehörige Tailwind-Utilities wie: bg-primary text-primary 15.7 Light / Dark Mode Jede Mode hat eigenes Token-Set. Dark-Mode-Strategien None → nur Light Class-based → .dark Media query → prefers-color-scheme 15.8 Typography Verfügbare Font-Token: --font-sans --font-heading --font-mono Installierte Fonts erscheinen oben in den Dropdowns. Standardfonts u. a.: Inter Space Grotesk Plus Jakarta Sans DM Sans Outfit Sora Manrope JetBrains Mono Fira Code 15.9 Spacing & Radius Werden hauptsächlich als Referenz angezeigt. Du nutzt im Code normale Tailwind-Klassen wie: p-4 gap-6 rounded-lg 15.10 Gespeicherte Themes / Import / Export Du kannst: Theme lokal im Browser speichern Farben als JSON exportieren JSON oder CSS importieren Wichtig: gespeicherte Themes liegen im Browser Local Storage nicht im Codespace nicht geräteübergreifend 15.11 Apply Theme Beim Klick auf Apply Theme passiert: src/styles/theme.css wird geschrieben Font-Imports in BaseLayout.astro werden aktualisiert 15.12 Beispiel für Token-Nutzung

Welcome

Body text with lighter color.

16. Icon Manager Für Lucide-Icons direkt in Astro-Komponenten. 16.1 Öffnen Shapes-Icon 16.2 Vorteile 280+ Icons konsistenter Stil SVG-basiert tree-shakeable @lucide/astro ist bereits integriert 16.3 Kategorien z. B.: Arrows & Navigation UI & Interface Actions Communication Media & Files Social Users & People Commerce Status & Feedback Security Time & Calendar Location & Maps Tech & Development Weather Objects Charts & Documents Text & Formatting Layout Shapes 16.4 Größen Größe Klassen Pixel Small w-4 h-4 16x16 Medium w-6 h-6 24x24 Large w-8 h-8 32x32 16.5 Farben Optionen z. B.: currentColor text-primary text-white text-gray-400 text-blue-500 text-green-500 text-red-500 text-amber-500 text-violet-500 16.6 Import + Verwendung Import import ArrowRight from '@lucide/astro/icons/arrow-right'; Verwendung 16.7 Beispiele Basic --- import Mail from '@lucide/astro/icons/mail'; --- Mit Farbe Icon Button 16.8 Accessibility Bei Icon-only Buttons: 17. AI Assistant Eines der stärksten Features in PhantomWP. 17.1 Zwei Modi AI Chat Panel für Gespräche, große Aufgaben, Projektänderungen Inline AI für schnelle lokale Code-Edits direkt im Editor 17.2 Modelle Laut Doku u. a.: Claude Sonnet Claude Opus Claude Haiku GPT-5.2 Pro GPT-5.2 Gemini 2.5 Pro Gemini 2.5 Flash Gemini 3 Pro Gemini 3 Flash Wichtig Du musst eigene API-Keys hinterlegen für: Anthropic OpenAI Google 17.3 Extended Thinking Für komplexe Aufgaben: Brain-Icon aktivieren. 17.4 Was die AI tun kann Tools: Create File Modify File Read File List Files Read Lines Search in File Get File Outline Restart Services Install Package Navigate Preview Get Documentation Approval Diese brauchen Freigabe: Create File Modify File Install Package Optional: Auto-approve 17.5 Gute Beispielprompts „Create a testimonial card component with image and quote“ „Add a navigation menu to the header“ „Fix the mobile layout on this page“ „Explain how this WordPress integration works“ „Install the Astro sitemap integration“ 17.6 Eigene AI-Instruktionen Datei: docs/ai-instructions.md Beispiel: # AI Instructions ## Preferences - Use TypeScript for all new files - Follow the existing component patterns - Use Tailwind CSS for styling - Keep components small and focused ## Project Context - This is a marketing site for a SaaS product - The main colors are blue-600 and gray-900 - We use the Inter font family 17.7 Inline AI AI Modify Ausgewählten Code ändern Shortcut: Cmd/Ctrl + Shift + M AI Generate Neuen Code am Cursor erzeugen Shortcut: Cmd/Ctrl + Shift + G Submit Cmd/Ctrl + Enter Close Escape 17.8 Tipps für bessere Resultate Sei präzise Schlecht: „Make a component“ Besser: „Create a Card component with an image at the top, a title, description, and a Learn More link. Use Tailwind CSS with rounded corners and a shadow.“ Kontext geben Schlecht: „Fix this“ Besser: „The navigation menu doesn't show on mobile. The hamburger button appears but clicking it does nothing. How do I make it toggle?“ Fehlertext mitgeben z. B. vollständige Fehlermeldung kopieren 18. Claude Code CLI Wenn du lieber im Terminal mit Claude arbeitest. 18.1 Vorteile terminal-native voller Projektkontext agentisches Coding im Codespace nutzbar mit Claude-Abo inklusive 18.2 Terminal öffnen Terminal-Icon oben 18.3 Installation Wenn nicht installiert: Install Claude im Terminal-Header 18.4 Starten claude 18.5 Typische Nutzungen Code verstehen „What files make up the homepage?“ „Explain how the navigation component works“ Änderungen „Add a dark mode toggle to the header“ „Fix the mobile layout on the footer“ Commands „Install the Astro sitemap integration“ „Update all npm packages“ 18.6 Wichtige Commands Command Zweck /help Hilfe /clear Verlauf leeren /compact Gespräch komprimieren /cost Token-Kosten /plugin Plugins verwalten /quit beenden 18.7 Ohne Permission Prompts claude --dangerously-skip-permissions Nur nutzen, wenn du wirklich bewusst volle Freigabe geben willst. 19. WordPress verbinden Einer der wichtigsten Bereiche. 19.1 Öffnen WordPress-Icon in der IDE 19.2 Verbindung herstellen WordPress-URL eingeben, z. B. https://yoursite.com Fetch PhantomWP erkennt /wp-json automatisch 19.3 Was danach sichtbar wird Site Name Description Link zur WP-Seite verfügbare Content-Typen 19.4 Unterstützte Content-Typen Posts Pages Media Categories Tags Authors Custom Post Types 19.5 Search Index Optional: FuseJS-Suchindex für Client-Side Search generieren 19.6 Media Download Du kannst WordPress-Medien herunterladen nach: src/media/cms/ Vorteile: schnellere Auslieferung Astro-Optimierung keine Abhängigkeit von Online-WP 19.7 Generate Pages Beim Klick auf Generate Pages entstehen u. a.: Typ Generierte Dateien Posts src/pages/blog/[slug].astro, src/pages/blog/index.astro Pages src/pages/[slug].astro Categories src/pages/category/[slug].astro, src/pages/category/index.astro Tags src/pages/tag/[slug].astro, src/pages/tag/index.astro Authors src/pages/author/[slug].astro, src/pages/author/index.astro CPTs src/pages/{type}/[slug].astro, src/pages/{type}/index.astro Zusätzlich: src/lib/wordpress.ts src/components/FeaturedImage.astro astro.config.mjs mit Bilddomains 20. WordPress Data Browser Sehr hilfreich zum schnellen Arbeiten mit WP-Daten. 20.1 Öffnen WordPress-Icon → Browse Content 20.2 Tabs Posts Pages Media Categories Tags Users CPTs Code Examples 20.3 Was du tun kannst Inhalte durchsuchen Einträge aufklappen Felder ansehen Astro-Snippets kopieren komplette Beispieltemplates kopieren 20.4 Typische Snippets Feld Snippet ID {post.id} Title {post.title.rendered} Slug {post.slug} Content
Excerpt {post.excerpt.rendered} Date {new Date(post.date).toLocaleDateString()} Link {post.link} Featured Image {getFeaturedImageUrl(post)} Author {getAuthor(post)?.name} 20.5 Code Examples Es gibt komplette Beispiele für: Blog Post List Single Post Page Navigation Menu Category Archive Sidebar Widget Author Page Search Results Static Pages 21. WordPress Content in Astro fetchen 21.1 Grundidee WordPress bleibt das CMS. Astro zieht Inhalte via REST API. 21.2 Der Client PhantomWP generiert: src/lib/wordpress.ts Typische Funktionen: const posts = await getPosts(); const post = await getPost('my-post-slug'); const pages = await getPages(); const categories = await getCategories(); 21.3 Blog-Index-Beispiel --- import { getPosts } from '../lib/wordpress'; import Layout from '../layouts/Layout.astro'; const posts = await getPosts({ perPage: 10 }); ---

Latest Posts

 21.4 Single-Post-Beispiel --- import { getPost, getAllPosts } from '../lib/wordpress'; import Layout from '../layouts/Layout.astro'; export async function getStaticPaths() { const posts = await getAllPosts(); return posts.map(post => ({ params: { slug: post.slug }, })); } const { slug } = Astro.params; const post = await getPost(slug); ---

21.5 REST API liefert u. a. Posts Titel Content Excerpt Datum Autor Featured Image Categories Tags Custom Fields SEO-Daten Pages Titel Content Template Parent Menu Order Custom Fields Media Bildgrößen Alt-Texte Captions URLs Taxonomies Categories Tags Custom Taxonomies Custom Post Types wenn show_in_rest: true 21.6 Featured Images Mit _embed verfügbar. Beispiel: const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]; Helper: import { getFeaturedImageUrl } from '../lib/wordpress'; const imageUrl = getFeaturedImageUrl(post, 'large'); 21.7 SEO-Daten Wenn WordPress Yoast oder Rank Math nutzt: Yoast const seoData = post.yoast_head_json; Rank Math const title = post.rank_math_title; const description = post.rank_math_description; 21.8 Build-Time vs Runtime Static Generation empfohlen --- const posts = await getPosts(); --- SSR für sehr häufig aktualisierte Inhalte --- // astro.config.mjs: output: 'server' const posts = await getPosts(); --- 21.9 Performance-Tipps _fields nutzen große Collections paginieren Responses cachen _embed nutzen Beispiel: const posts = await getPosts({ perPage: 10, fields: ['id', 'slug', 'title', 'excerpt', 'date'], embed: true, }); 22. Bild-Optimierung für WordPress-Medien PhantomWP hat einen zweistufigen Bild-Workflow. 22.1 Stage 1: IDE Download Wenn du in den WP-Settings auf Download Media klickst: Bilder werden aus WordPress geladen Originale landen in src/media/cms/ WebP-Versionen landen in public/media/cms/ URL-Mapping wird aktualisiert Das gibt dir sofort lauffähige Bilder in der Dev Preview. 22.2 Stage 2: Build-Time Sync Vor jedem Production-Build läuft sync-media. Er macht: Posts und Pages fetchen alle genutzten Bilder finden neue/geänderte Bilder laden responsive WebP-Varianten erzeugen Blur Placeholders erzeugen Mappings updaten 22.3 Responsive Größen Typische Varianten: 320w 640w 960w 1200w Full size 22.4 Blur Placeholders Für Featured Images werden kleine, unscharfe Vorschaubilder erzeugt. Vorteil schöneres Lazy Loading schneller wahrgenommener Seitenaufbau Nicht für Priority Images ( priority={true}) 22.5 Wichtige Dateien src/lib/media-map.json src/lib/responsive-map.json src/lib/image-placeholders.json public/media/cms/... 22.6 Manuell ausführen node scripts/sync-media.mjs 23. CDN Mode Wenn WordPress bereits Bilder über CDN ausliefert. Verwenden wenn: deine WP-Seite schon CDN-URLs nutzt du Bilder nicht lokal ins Repo ziehen willst schnellere Builds / kleineres Repo wichtiger sind Local Mode behalten wenn: du Bilder committen willst du die lokale Image-Mapping-Strategie willst kein CDN vorhanden ist 24. PhantomWP Connect Plugin Sehr wichtig, wenn du mehr als read-only willst. 24.1 Wann brauchst du das Plugin? Nicht zwingend, wenn du nur lesen willst. Ja, wenn du willst: Schreibzugriffe auf WordPress agentische AI-Scaffolds JWT Visitor Auth WooCommerce Customer Flows signierte Zwei-Wege-Kommunikation 24.2 Was das Plugin bringt Self-Pairing signierte Kommunikation JWT-Authentifizierung AI-Write-Access verschlüsselte Speicherung WooCommerce-Flows 24.3 Installation Empfohlen: aus der PhantomWP IDE WordPress-Icon Site-URL eingeben Install PhantomWP Connect plugin ZIP herunterladen in WP hochladen aktivieren einmal WP-Admin besuchen Beim ersten Admin-Aufruf paart sich das Plugin automatisch. 24.4 Woran erkennst du, dass es klappt? In WordPress Admin Status: Paired Project ID Last check-in timestamp In PhantomWP IDE Access Level: Full Access nicht nur Read-only 24.5 Was Full Access freischaltet AI kann WordPress direkt ändern Beispiele: CPTs anlegen Taxonomien anlegen Field Groups anlegen Draft-Posts erzeugen Seiten in WP anlegen Visitor JWT Authentication für Frontend-Routen wie: /account/login /account/register /account/forgot-password /account/reset-password Signed Writes Jede schreibende Anfrage ist signiert. 24.6 Wichtige Endpunkte Unter: /wp-json/phantomwp/v1/ Auth POST /auth/token POST /auth/validate GET /auth/me POST /auth/forgot-password POST /auth/reset-password Scaffolding GET /scaffold/capabilities POST /scaffold/post-type POST /scaffold/taxonomy POST /scaffold/field-group GET /scaffold/managed Pairing POST /pair/bootstrap POST /pair/disconnect 25. WooCommerce Setup Die WooCommerce-Integration ist laut Doku alpha, aber funktional. 25.1 Voraussetzungen PhantomWP Connect Plugin installiert und gepairt WooCommerce aktiv auf derselben WP-Seite 25.2 Verbindung testen Token-Endpunkt: curl -X POST https://yoursite.com/wp-json/phantomwp/v1/auth/token \ -H "Content-Type: application/json" \ -d '{"username": "your-wp-username", "password": "your-wp-password"}' Erwartet wird ein JSON mit: success token user_email Rollen 25.3 In PhantomWP verbinden Beim Erstellen: WooCommerce Store als Template wählen Dann: Cart-Icon in der IDE WooCommerce Settings öffnen Felder konfigurieren: WooCommerce URL Access Secret Payment Keys optional Danach Test Connection Save Configuration 25.4 Produkte und Bilder synchronisieren Sync Products & Images macht: Produktdaten downloaden Produktbilder lokal speichern Media Map erzeugen Dateien: src/data/products.json src/media/products/ 25.5 Payments Stripe Secret Key Publishable Key Webhook Secret PayPal Client ID Client Secret Sandbox oder Live Ohne Stripe/PayPal testen In WooCommerce: Direct bank transfer (BACS) aktivieren Dann kannst du den kompletten Checkout testen, ohne externe Zahlungsanbieter. 25.6 Relevante Env-Variablen Automatisch in .env: WP_API_URL WC_API_URL WP_ACCESS_SECRET JWT_SECRET PUBLIC_SITE_URL ggf. Stripe/PayPal-Keys 26. WooCommerce Store Features Generierte Seiten / /shop /shop/product/[slug] /shop/category/[slug] /cart /checkout /order-complete /search /login /register /forgot-password /reset-password /account /account/orders /account/addresses /account/settings Architektur Produktseiten Store API Daten bei Dev/Build-Zeit Cart client-side mit nanostores localStorage Checkout / Orders / Auth serverseitige API-Routes Verbindung via PhantomWP Connect Wichtige Daten-Dateien src/data/products.json src/data/categories.json src/media/products/ src/lib/product-media-map.json Wichtige Helper Produktdaten getLocalProducts getLocalProduct getLocalCategories getLocalVisibleCategories getLocalProductsByCategory getLocalFeaturedProducts getLocalRelatedProducts WooCommerce Utilities formatPrice isInStock getDiscountPercentage stripHtml Cart $cart $cartCount $cartTotal addToCart removeFromCart updateQuantity clearCart Auth $isLoggedIn $user $token login register logout getToken initAuth requestPasswordReset 27. Docker Local Development Wenn du lokal statt in Codespaces arbeiten willst. 27.1 Vorteile keine Codespace-Kosten offline nutzbar, sobald Projekt lokal ist gleiche IDE Dateien optional direkt lokal im Dateisystem gut für VS Code / Cursor / Claude Code 27.2 Architektur Im Browser läuft weiter phantomwp.com, aber lokal laufen im Container: Astro Dev Server WebSocket Server 27.3 Voraussetzungen Docker Desktop PhantomWP Account moderner Browser 27.4 Erster Start Im Dashboard: Run Locally / Start Locally Dann bekommst du einen docker run Befehl. Beispiel: docker run --name phantomwp-my-site \ -p 14321:4321 \ -p 14322:8080 \ -v phantomwp-my-site:/app \ -e PHANTOMWP_TOKEN= \ ghcr.io/phantomwp/local-dev: 27.5 Was der Container dann macht Image ziehen Projekt holen Git-Remote konfigurieren Abhängigkeiten installieren Astro + WebSocket starten 27.6 Danach Im Browser: Open Editor Die IDE verbindet sich auf: ws://localhost: Preview via http://localhost: 27.7 Nützliche Docker-Kommandos Start docker start phantomwp-my-site Stop docker stop phantomwp-my-site Logs docker logs -f phantomwp-my-site Kompletter Reset docker stop phantomwp-my-site docker rm phantomwp-my-site docker volume rm phantomwp-my-site 27.8 Mit lokalem Ordner statt Volume Optional kannst du /app auf einen echten lokalen Ordner mounten, damit du mit anderen Tools direkt auf Dateien zugreifen kannst. 27.9 Healthcheck curl http://localhost:14322/health 28. Deployment zu Vercel Der empfohlene Standard-Host. 28.1 Vorteile Free Tier automatische Deployments HTTPS globales CDN Preview Deployments Custom Domains 28.2 Vercel verbinden Token holen bei Vercel einloggen Settings Tokens Create Token kopieren In PhantomWP Dashboard Projekt finden Setup Deployment Token einfügen Connect 28.3 Importieren GitHub-Repo wählen Team oder Personal Account Einstellungen prüfen Deploy 28.4 Standard Build Settings Build Command: npm run build Output Directory: dist Install Command: npm install 28.5 Deploy auslösen Wichtig: Deployment passiert nicht automatisch beim Editieren. Du musst: Änderungen machen Git-Icon Commit-Message Commit & Push Dann baut Vercel automatisch. 28.6 Custom Domain In Vercel: Settings Domains Domain hinzufügen DNS: Nameserver auf Vercel oder A/CNAME Records SSL: automatisch 28.7 Rollback In Vercel Dashboard: Deployments altes funktionierendes Deployment wählen Promote to Production 29. Deployment zu Cloudflare Workers Alternative zu Vercel, besonders für server-mode Astro / API-Routes. 29.1 Voraussetzungen Cloudflare API Token mit: Account Settings read Workers Scripts edit Workers KV Storage edit 29.2 Ablauf Token erstellen Dashboard öffnen Cloudflare verbinden ggf. Account ID eintragen Projekt deployen PhantomWP konfiguriert dabei: @astrojs/cloudflare wrangler.jsonc GitHub Actions Workflow GitHub Secrets für Deploy 29.3 Domains Custom Domain aktuell über Cloudflare Dashboard verwalten. 30. WordPress Security / WordPress „offline“ nehmen Extrem starkes Sicherheitsfeature. 30.1 Idee Du blockierst öffentliche Zugriffe auf WordPress komplett, erlaubst aber Requests mit dem Header: X-PhantomWP-Secret Dann kann: PhantomWP weiterhin Inhalte abrufen du mit Browser-Extension weiter ins WP-Admin Bots und Öffentlichkeit werden blockiert 30.2 Ablauf Schritt 1 Secret Key in PhantomWP holen Schritt 2 ModHeader im Browser installieren Header setzen: Name: X-PhantomWP-Secret Value: dein Secret Schritt 3 Auf Server Requests ohne Header blockieren 30.3 Optionen Cloudflare Worker empfohlen Cloudflare Access nginx Apache .htaccess 30.4 Testen Ohne Header: curl -I https://your-wordpress-site.com Erwartet: 403 Forbidden Mit Header: curl -I -H "X-PhantomWP-Secret: YOUR_SECRET_KEY" https://your-wordpress-site.com Erwartet: 200 OK 30.5 Best Practices immer HTTPS WP trotzdem up-to-date halten starke Passwörter regelmäßige Backups Access Logs prüfen 31. Updating to RC.6 Falls du ein älteres PhantomWP-Projekt hast. 31.1 Wann relevant? Nur für bestehende Projekte auf älteren Runtime-/Workspace-Versionen. 31.2 Codespace-Projekt updaten Projekt öffnen warten bis Codespace verbunden ist Toolbar: More → Infrastructure Update warten Tab reloaden 31.3 Docker-Projekt updaten Projekt öffnen Local run/start Dialog öffnen generierten Update-Command kopieren im Terminal ausführen Container neu starten lassen Editor neu öffnen Wichtig: Projektdateien bleiben im Volume / lokalen Ordner erhalten 31.4 Wenn altes Projekt instabil ist Empfehlung: neues RC.6-Projekt erstellen nur Site-Files kopieren: pages layouts components styles public assets content/data bewusst geänderte Configs Nicht kopieren: alte PhantomWP Runtime-/Workspace-Ordner 32. Troubleshooting – ultrakompakt 32.1 Codespace startet nicht Dashboard → Codespace entfernen neuen Codespace erstellen alternativ Docker lokal nutzen 32.2 Preview bleibt leer Codespace/Container läuft? 10–15 Sekunden warten Preview refreshen Services neu starten 32.3 Änderungen speichern nicht Status „Saved“ prüfen manuell Cmd/Ctrl + S unsaved dot auf Tab prüfen 32.4 WordPress verbindet nicht URL korrekt? https:// keine /wp-admin REST API testen: https://yoursite.com/wp-json/wp/v2/posts Security Plugins prüfen 32.5 AI funktioniert nicht API-Key eingetragen? Credits vorhanden? anderes Modell probieren Seite refreshen 32.6 Media Upload schlägt fehl Verbindung prüfen Dateityp prüfen Dateigröße prüfen ggf. einzeln hochladen 32.7 Menü erscheint nicht Menü gespeichert? Komponente importiert? Preview refreshed? 32.8 Component Library insert funktioniert nicht Datei geöffnet? geeigneter Dateityp? Cursor an sinnvoller Stelle? richtige Zieldatei im Header? 32.9 Vercel Deploy-Problem: „Login Connection“ Wenn Vercel meldet, dass eine GitHub Login Connection fehlt: in Vercel die GitHub Authentication Connection hinzufügen danach erneut deployen 32.10 Docker lokal wird nicht erkannt docker ps Healthcheck testen Browser-Erlaubnis für localhost geben Logs prüfen Token ggf. neu erzeugen 33. Die 10 wichtigsten Tastenkombinationen / Sofort-Merker Save → Cmd/Ctrl + S Quick Open → Cmd/Ctrl + P Find → Cmd/Ctrl + F Replace → Cmd/Ctrl + H Go to Line → Cmd/Ctrl + G Format Document → Shift+Option+F / Shift+Alt+F AI Modify → Cmd/Ctrl + Shift + M AI Generate → Cmd/Ctrl + Shift + G Inline AI Submit → Cmd/Ctrl + Enter File Tree Search → / 34. Die 15 wichtigsten Dateien/Ordner, die du kennen solltest Pfad Zweck src/pages/ alle Seiten / Routen src/pages/index.astro Startseite src/pages/blog/ Blogposts src/components/ wiederverwendbare Komponenten src/components/menus/ Menüs src/layouts/ Layouts src/media/ optimierte Bilder src/media/cms/ heruntergeladene WordPress-Bilder public/ statische Dateien src/lib/wordpress.ts WordPress-Client src/styles/theme.css Theme Studio Output src/config/menus.json Menü-Konfiguration src/data/products.json WooCommerce Produktdaten .env Verbindungs-/Secret-Konfiguration astro.config.mjs Astro-Konfiguration 35. Meine empfohlene Lernreihenfolge für PhantomWP Wenn du schnell fit werden willst, arbeite in dieser Reihenfolge: Phase 1: Grundlagen Quick Start IDE Overview Working with Files Component Library Deploying to Vercel Phase 2: Design-Workflow Visual Editor Media Manager Theme Studio Font Manager Icon Manager Menu Builder Phase 3: AI-gestütztes Arbeiten AI Assistant Claude Code CLI Phase 4: WordPress-Headless Connecting WordPress Browsing WordPress Data Fetching Content Image Optimization WordPress Security Phase 5: E-Commerce / Advanced PhantomWP Connect Plugin WooCommerce Setup Store Features Docker Local Development Cloudflare Deployment 36. Mein empfohlenes „Sofort produktiv“-Setup Wenn du heute damit starten willst, würde ich dir diesen Weg empfehlen: Für einfache Unternehmens- oder Marketing-Site GitHub verbinden Projekt via Codespace erstellen index.astro öffnen Quick Start Template aus Component Library einfügen Theme Studio anwenden Menü im Menu Builder bauen Bilder via Media Manager hochladen Texte anpassen Commit & Push Vercel deployen Für bestehende WordPress-Seite WordPress verbinden Content-Typen auswählen Generate Pages Media downloaden Blog-/Page-Templates prüfen Theme Studio anwenden Navigation bauen Deployen optional: WordPress Security aktivieren Für WooCommerce-Shop WooCommerce Store Template wählen PhantomWP Connect Plugin installieren Pairing prüfen WooCommerce verbinden Produkte + Bilder syncen BACS aktivieren für Tests Cart/Checkout prüfen Deployen später Stripe/PayPal ergänzen 37. Ultrakurze „Merke dir das“-Zusammenfassung Wenn du dir nur das Wichtigste merken willst: PhantomWP = WordPress als CMS + Astro als statisches Frontend schnell, sicher, wenig Wartung Projekt läuft in Codespaces, Docker lokal oder Fly.io wichtigste Dateien: src/pages, src/components, src/layouts, src/lib/wordpress.ts WordPress Connect = read-only PhantomWP Connect Plugin = Full Access, Writes, Auth, Woo Component Library + Theme Studio = schnellster Weg zur fertigen Seite AI Assistant hilft beim Bauen, Refactoren, Debuggen Vercel = Standard-Deployment Commit & Push nötig, damit Deployment passiert WordPress optional komplett abschirmbar mit X-PhantomWP-Secret Astro Cheat Sheet Astro ist ein Web-Framework für content-driven websites, also vor allem: Blogs Marketing-Websites Dokumentationsseiten Portfolios Landing Pages Community-Seiten E-Commerce-Seiten Astro ist besonders bekannt für: sehr schnelle Ladezeiten gute SEO wenig JavaScript im Browser Server-first Architektur Islands Architecture Kurz gesagt: Wenn du eine Website willst, die viel Content anzeigt, schnell lädt und standardmäßig performant ist, ist Astro dafür gemacht. 2. Warum Astro? Die Docs nennen als Grundideen: Content-driven Astro wurde gebaut, um Inhalte schnell zum Leser zu bringen. Server-first HTML wird bevorzugt auf dem Server gerendert. Fast by default Es soll möglichst schwer sein, mit Astro eine langsame Website zu bauen. Easy to use Wenn du HTML kannst, kannst du schon sehr viel mit Astro. Developer-focused Gute CLI, VS Code Support, TypeScript, Community, Doku. 3. Die wichtigsten Features auf einen Blick Kern-Features Islands Architecture UI-agnostisch React Preact Svelte Vue Solid HTMX Web Components Server-first Zero JS by default Content Collections viele Integrationen API Hooks 4. Astro mental model: So musst du Astro denken Wenn du Astro schnell lernen willst, merke dir dieses Modell: Astro ist standardmäßig: HTML-first Server-rendered ohne Client-JS für Content optimiert Das heißt: Du schreibst Seiten und Komponenten. Astro rendert daraus HTML. Nur wenn du explizit willst, kommt JavaScript in den Browser. 5. Astro vs typische SPA-Frameworks Astro grenzt sich von klassischen SPA-Ansätzen ab. SPA-Ansatz Frameworks wie: Next.js Nuxt SvelteKit Remix wurden laut Docs stark aus Richtung client-side rendering gedacht. Astro-Ansatz Astro setzt stärker auf: Multi-Page App (MPA) Server-first selektive Hydration nur dort Interaktivität, wo nötig Das bedeutet in der Praxis: deine Seite lädt schneller weniger JS muss im Browser verarbeitet werden besser für Content-Seiten 6. Islands Architecture verstehen Das ist eines der wichtigsten Konzepte in Astro. Grundidee Die meisten Teile der Seite werden als statisches HTML gerendert. Nur kleine interaktive Bereiche werden als Islands geladen. Beispiel: Header mit Dropdown → interaktive Island Sidebar → statisches HTML Text/Bilder → statisches HTML Bildkarussell → interaktive Island Footer → statisches HTML Vorteile weniger JavaScript bessere Performance Komponenten laden unabhängig voneinander mehrere Frameworks auf einer Seite möglich 7. Was ist eine Island? In Astro ist eine Island eine verbesserte UI-Komponente auf einer sonst statischen HTML-Seite. Es gibt zwei Arten: 7.1 Client Island Eine interaktive Komponente, die im Browser hydratisiert wird. 7.2 Server Island Eine Komponente, deren serverseitige Berechnung separat und verzögert passiert. 8. Client Islands Standardmäßig rendert Astro UI-Komponenten nur zu: HTML CSS und entfernt Client-JS automatisch. Interaktiv machen Nutze eine client:* Direktive: Wichtige Client-Direktiven client:load lädt sofort beim Laden der Seite client:idle lädt, wenn der Browser idle ist client:visible lädt erst, wenn die Komponente im Viewport sichtbar wird client:media={QUERY} lädt nur bei passender Media Query client:only="react" / "svelte" etc. rendert nur im Client, nicht auf dem Server Merksatz Nur Komponenten mit client:* laufen im Browser. 9. Server Islands Mit server:defer kannst du teure oder langsame serverseitige Komponenten aus dem Haupt-Renderprozess auslagern. Beispiel: --- import Avatar from "../components/Avatar.astro"; --- Typische Anwendungsfälle Benutzer-Avatar personalisierte Header-Bereiche Reviews Deals / Rabattinfos dynamische, aber kleine Teilbereiche Vorteile statischer Hauptinhalt rendert sofort kleinere dynamische Teile kommen parallel nach bessere Cachebarkeit bessere UX Fallback-Inhalt Du kannst Fallback-Inhalte mit Slot "fallback" angeben: 10. Installation Voraussetzungen Node.js v22.12.0 oder höher ungerade Versionen wie v23 werden nicht unterstützt Editor, empfohlen: VS Code Terminal Schnellstart per CLI npm create astro@latest Danach: cd dein-projekt npm install npm run dev Mit Integrationen direkt beim Erstellen npm create astro@latest -- --add react --add partytown Mit Template npm create astro@latest -- --template oder npm create astro@latest -- --template / 11. Manuelle Installation 1. Projektordner erstellen mkdir my-astro-project cd my-astro-project 2. package.json anlegen npm init --yes 3. Astro installieren npm install astro 4. Scripts in package.json { "scripts": { "dev": "astro dev", "build": "astro build", "preview": "astro preview" } } 5. Erste Seite erstellen Pfad: src/pages/index.astro Beispiel: --- console.log('This runs in your terminal, not the browser!'); ---

Hello, World!

6. public/robots.txt User-agent: * Allow: / 7. astro.config.mjs import { defineConfig } from "astro/config"; export default defineConfig({}); 8. tsconfig.json { "extends": "astro/tsconfigs/base" } 12. Projektstruktur Empfohlene Struktur: src/ public/ package.json astro.config.mjs tsconfig.json Wichtige Ordner src/ Hier liegt dein Quellcode: Pages Layouts Astro-Komponenten Framework-Komponenten Styles Markdown Bilder src/pages/ Pflichtordner. Hier entstehen deine Routen. src/components/ Wiederverwendbare Komponenten. src/layouts/ Layouts für Seitenstrukturen. src/styles/ CSS / Sass etc. public/ Unverarbeitete Assets: Fonts Icons robots.txt manifest.webmanifest Wichtig: Dateien in public/ werden nicht von Astro optimiert oder gebundelt. 13. Entwickeln und Build Dev-Server starten npm run dev Standardmäßig unter: http://localhost:4321/ Build npm run build Output standardmäßig in: dist/ Preview des Builds npm run preview 14. Astro-Komponenten Astro-Komponenten sind die Grundbausteine. Dateiendung: .astro kein Client-Runtime-Overhead rendern zu HTML Aufbau einer Astro-Komponente --- // Component Script --- Component Script Im Frontmatter ( ---) kannst du: importieren Daten laden Variablen definieren APIs fetchen Props auslesen Beispiel: --- import SomeAstroComponent from '../components/SomeAstroComponent.astro'; import SomeReactComponent from '../components/SomeReactComponent.jsx'; import someData from '../data/pokemon.json'; const { title } = Astro.props; const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json()); --- Component Template Darunter kommt dein HTML + Astro-Syntax. 15. Props in Astro-Komponenten Beispiel: --- const { greeting, name } = Astro.props; ---

{greeting}, {name}!

Verwendung: Mit TypeScript --- interface Props { name: string; greeting?: string; } const { greeting = "Hello", name } = Astro.props; ---

{greeting}, {name}!

16. Slots Slots sind Platzhalter für Kind-Inhalte. Default Slot Wrapper.astro
Verwendung:

Inhalt

 Named Slots Komponente:
Verwendung:

Hauptinhalt

Footer-Text

 Fallback Content

Fallback, wenn kein Inhalt übergeben wurde

 17. Layouts Layouts sind normale Astro-Komponenten für gemeinsame Seitenstruktur. Typischer Inhalt: Beispiel: --- const { title } = Astro.props; --- {title}
Nutzung: --- import MySiteLayout from '../layouts/MySiteLayout.astro'; ---

Mein Inhalt

 18. Routing Astro verwendet file-based routing. Beispiele src/pages/index.astro -> / src/pages/about.astro -> /about src/pages/about/index.astro -> /about src/pages/about/me.astro -> /about/me src/pages/posts/1.md -> /posts/1 Linking Du nutzt normale HTML-Links: About Keine spezielle Link-Komponente nötig. 19. Dynamische Routen Beispiel: src/pages/dogs/[dog].astro Dann brauchst du in statischem Modus getStaticPaths(): --- export function getStaticPaths() { return [ { params: { dog: "clifford" } }, { params: { dog: "rover" } }, { params: { dog: "spot" } }, ]; } const { dog } = Astro.params; ---
Good dog, {dog}!
Mehrere Parameter src/pages/[lang]-[version]/info.astro Rest-Parameter src/pages/sequences/[...path].astro Beispiel: --- export function getStaticPaths() { return [ { params: { path: "one/two/three" } }, { params: { path: "four" } }, { params: { path: undefined } } ] } const { path } = Astro.params; --- 20. Redirects und Rewrites Config-Redirects In astro.config.mjs: import { defineConfig } from "astro/config"; export default defineConfig({ redirects: { "/old-page": "/new-page", "/blog": "https://example.com/blog" } }); Mit Statuscode: redirects: { "/old-page": { status: 302, destination: "/new-page" } } Dynamische Redirects --- if (!isLoggedIn(cookie)) { return Astro.redirect("/login"); } --- Rewrites Mit Rewrite bleibt URL sichtbar, aber anderer Inhalt wird gezeigt. --- return Astro.rewrite("/es/articles/introduction"); --- 21. Page Partials Partials sind Seiten in src/pages/, die keine vollständige HTML-Seite rendern. Wichtig: --- export const partial = true; ---
  • I'm a partial!
    • Geeignet für Libraries wie: htmx Stimulus jQuery Unpoly 22. Pagination Astro hat eingebaute Pagination. Beispiel: --- export function getStaticPaths({ paginate }) { const astronautPages = [ { astronaut: "Neil Armstrong" }, { astronaut: "Buzz Aldrin" }, { astronaut: "Sally Ride" }, { astronaut: "John Glenn" }, ]; return paginate(astronautPages, { pageSize: 2 }); } const { page } = Astro.props; ---

    Page {page.currentPage}

      {page.data.map(({ astronaut }) =>
    • {astronaut}
      • )}
    Wichtige page-Properties page.data page.start page.end page.total page.currentPage page.size page.lastPage page.url.current page.url.prev page.url.next page.url.first page.url.last 23. Endpoints / API-Routen Dateien in src/pages/ mit .js oder .ts können Endpoints sein. Beispiel: src/pages/builtwith.json.ts export function GET() { return new Response( JSON.stringify({ name: "Astro", url: "https://astro.build/", }), ); } Dynamische Endpoints src/pages/api/[id].json.ts import type { APIRoute } from "astro"; const usernames = ["Sarah", "Chris", "Yan", "Elian"]; export const GET = (({ params }) => { const id = params.id; return new Response(JSON.stringify({ name: usernames[id], })); }) satisfies APIRoute; HTTP-Methoden Unterstützt: GET POST DELETE ALL usw. 24. Middleware Mit Middleware kannst du Requests/Responses abfangen. Datei: src/middleware.ts Beispiel: export function onRequest(context, next) { context.locals.title = "New title"; context.locals.property = "information"; return next(); } In Astro-Komponente: --- const data = Astro.locals; ---

    {data.title}

    {data.property}

    locals context.locals dient zum Weitergeben request-spezifischer Daten. Typische Verwendung: aktueller User Session Orders Funktionen Auth-Daten Middleware typisieren import { defineMiddleware } from "astro:middleware"; export const onRequest = defineMiddleware((context, next) => { return next(); }); Middleware chainen import { sequence } from "astro:middleware"; export const onRequest = sequence(validation, auth, greeting); 25. Pages Unterstützte Dateitypen in src/pages/: .astro .md .mdx (mit MDX-Integration) .html .js / .ts (Endpoints) 404-Seite src/pages/404.astro 500-Seite src/pages/500.astro 500.astro erhält automatisch ein error-Prop. 26. HTML-Komponenten .html-Dateien können importiert und benutzt werden. Einschränkungen: kein Frontmatter keine serverseitigen Imports keine dynamischen Expressions Was Astro mit 41. Typische Script-Muster Event Handling In Astro kein React- onClick={}. Stattdessen: Frontmatter-Werte an Script übergeben Über data-* Attribute: --- const { message = 'Welcome, world!' } = Astro.props; --- 42. Markdown Astro unterstützt Markdown nativ. .md in src/pages/ wird automatisch zu einer Seite. Markdown-Layout über Frontmatter --- layout: ../layouts/BlogPostLayout.astro title: My Markdown page --- # Title This is my page, written in **Markdown.** Wichtig Wenn du ein Layout nutzt, musst du in diesem Layout selbst setzen: 43. Content Collections Für strukturierte Inhalte ist das eine der wichtigsten Astro-Funktionen. Ideal für: Blogposts Produktdaten Autorenprofile Dokus Rezepte CMS-Daten Vorteile Struktur Validation mit Zod Type-Safety Intellisense gute Query-API skalierbar 44. Content Collections definieren Datei: src/content.config.ts Beispiel: import { defineCollection } from 'astro:content'; import { glob } from 'astro/loaders'; import { z } from 'astro/zod'; const blog = defineCollection({ loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }), schema: z.object({ title: z.string(), description: z.string(), pubDate: z.coerce.date(), updatedDate: z.coerce.date().optional(), }), }); export const collections = { blog }; 45. Collections abfragen Ganze Collection --- import { getCollection } from 'astro:content'; const posts = await getCollection('blog'); --- Einzelnen Entry --- import { getEntry } from 'astro:content'; const post = await getEntry('blog', 'post-1'); --- Sortieren --- const posts = (await getCollection('blog')).sort( (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf() ); --- Filtern --- const publishedBlogEntries = await getCollection('blog', ({ data }) => { return data.draft !== true; }); --- 46. Content rendern Nach dem Query: --- import { getEntry, render } from "astro:content"; const entry = await getEntry("blog", "post-1"); if (!entry) throw new Error("Entry not found"); const { Content } = await render(entry); ---

    {entry.data.title}

    47. Referenzen in Collections Beispiel: Blogpost referenziert Autor. import { defineCollection, reference } from "astro:content"; import { z } from "astro/zod"; const blog = defineCollection({ schema: z.object({ title: z.string(), author: reference("authors"), relatedPosts: z.array(reference("blog")), }), }); 48. Dynamische Seiten aus Collections generieren Static Build mit getStaticPaths() --- import { getCollection, render } from 'astro:content'; export async function getStaticPaths() { const posts = await getCollection('blog'); return posts.map(post => ({ params: { id: post.id }, props: { post }, })); } const { post } = Astro.props; const { Content } = await render(post); ---

    {post.data.title}

    49. Daten fetchen Direkt in Astro --- const response = await fetch("https://randomuser.me/api/"); const data = await response.json(); const randomUser = data.results[0]; ---

    {randomUser.name.first} {randomUser.name.last}

    In Framework-Komponenten Geht auch, aber beachte Server/Client-Kontext. GraphQL Auch via fetch(). 50. On-demand Rendering / SSR Standardmäßig baut Astro statische Seiten. Wenn du SSR brauchst: Adapter installieren bei einzelner Route: --- export const prerender = false; --- Dann wird die Route on demand gerendert. Komplettes Projekt server-first In Config: output: "server" Dann sind standardmäßig alle Seiten SSR. Einzelne Seiten kannst du statisch machen mit: --- export const prerender = true; --- 51. Cookies, Request, Response im SSR Cookies --- let counter = 0 if (Astro.cookies.has('counter')) { const cookie = Astro.cookies.get('counter') const value = cookie?.number() if (value !== undefined && !isNaN(value)) counter = value + 1 } Astro.cookies.set('counter', String(counter)) ---

    Counter = {counter}

    Response --- Astro.response.status = 404; Astro.response.statusText = 'Not found'; --- Headers setzen --- Astro.response.headers.set('Cache-Control', 'public, max-age=3600'); --- Request auslesen --- const cookie = Astro.request.headers.get('cookie'); console.log(Astro.request.method); --- 52. Sessions Sessions sind für serverseitig gespeicherten Request-/User-State. Typische Use-Cases: Userdaten Warenkorb Formularstatus Beispiel --- const cart = await Astro.session?.get('cart'); --- 🛒 {cart?.length ?? 0} items Session setzen in API oder Middleware Geht über context.session. 53. Actions Actions sind type-safe Backend-Funktionen für Client-Server-Kommunikation. Sie reduzieren Boilerplate gegenüber klassischen API-Routes. Definieren Datei: src/actions/index.ts Beispiel: import { defineAction } from 'astro:actions'; import { z } from 'astro/zod'; export const server = { getGreeting: defineAction({ input: z.object({ name: z.string(), }), handler: async (input) => { return `Hello, ${input.name}!` } }) } Aufrufen Form-Daten akzeptieren comment: defineAction({ accept: 'form', input: z.object({...}), handler: async (input) => { ... } }) Fehlerbehandlung mit ActionError import { ActionError } from "astro:actions"; throw new ActionError({ code: "UNAUTHORIZED", message: "User must be logged in." }); 54. Prefetch Astro kann Seiten vorladen. Aktivieren import { defineConfig } from 'astro/config'; export default defineConfig({ prefetch: true }); Pro Link aktivieren About Strategien hover tap viewport load Beispiel: About Alle Links prefetchen prefetch: { prefetchAll: true } Opt-out pro Link: About 55. View Transitions Mit Astro kannst du Übergänge zwischen Seiten animieren. Aktivieren --- import { ClientRouter } from "astro:transitions"; --- Meist in einem gemeinsamen Layout/Head. Wichtige Direktiven transition:name transition:animate transition:persist transition:persist-props Built-in Animationen fade initial slide none Beispiel:
    ...
    Persistente Elemente