Illia-sanzh/greenclaw-agent

Astro Site Management – Agentenwissen

Fähigkeiten

Du kannst eine Astro-Statikseite über diese Operationen verwalten:

• Blogbeiträge erstellen, bearbeiten und löschen (Markdown/MDX in Content Collections)
• Dokumente (.docx, .pdf) importieren und in Markdown konvertieren
• Bilder in src/assets/ hochladen und organisieren
• Komponenten (.astro), Layouts und Seiten bearbeiten
• MDX-Dateien mit interaktiven Komponenten bearbeiten
• Globale und komponentenbezogene Stile ändern
• Änderungen per Git für die automatische Cloudflare Workers-Bereitstellung pushen (oder npx wrangler deploy ausführen)
• npm-Befehle ausführen (build, dev, Pakete hinzufügen)

Content Collections

Content Collections verwenden src/content/ mit einem Schema, das in src/content/config.ts definiert ist.

Blogbeiträge

Ort: src/content/blog/*.md oder *.mdx

Erforderliches Frontmatter:

---
title: "Beitragstitel"
description: "SEO-Beschreibung"
pubDate: 2024-01-15
---

Optionale Felder: updatedDate, heroImage, draft, tags

Beitrag erstellen

1. Schreibe die Markdown-Datei mit Frontmatter nach src/content/blog/<slug>.md
2. Platziere Bilder in src/assets/<slug>/
3. Bilder referenzieren: ![alt](~/assets/<slug>/image.jpg)
4. Git add, commit, push zur Bereitstellung

Collections abfragen

In .astro-Seiten:

---
import { getCollection } from "astro:content";
const posts = await getCollection("blog");
const sorted = posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

Komponentenmuster

Einfache .astro-Komponente

---
const { title, class: className } = Astro.props;
---
<section class:list={["section", className]}>
  <h2>{title}</h2>
  <slot />
</section>

<style>
  .section { padding: 2rem; }
</style>

Layout-Muster

---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
const { title, description } = Astro.props;
---
<html lang="de">
<head><BaseHead title={title} description={description} /></head>
<body>
  <Header />
  <main><slot /></main>
  <Footer />
</body>
</html>

Dynamische Routen

Datei: src/pages/blog/[...slug].astro

---
import { getCollection } from "astro:content";
export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((post) => ({ params: { slug: post.slug }, props: post }));
}
const post = Astro.props;
const { Content } = await post.render();
---
<Content />

Sicherheitsregeln

• NIEMALS das .git-Verzeichnis löschen
• NIEMALS node_modules/ oder package-lock.json löschen, es sei denn, es wird neu installiert
• NIEMALS Force-Push (git push --force) durchführen
• NIEMALS in andere Branches pushen als den konfigurierten Bereitstellungsbranch
• astro.config.mjs oder wrangler.toml NICHT ohne explizite Benutzeranfrage ändern
• NIEMALS rm -rf auf dem Projektstamm ausführen
• Vor dem Löschen einer Komponenten- oder Seitendatei um Bestätigung fragen

Häufige Aufgaben

Blogbeitrag hinzufügen

1. write_file zum Erstellen von src/content/blog/<slug>.md mit Frontmatter + Inhalt
2. git_operations status → add → commit → push

Dokument importieren

1. convert_document mit dem hochgeladenen Dateipfad
2. read_file des generierten Markdowns zur Überprüfung
3. Frontmatter bei Bedarf mit write_file bearbeiten
4. git_operations add → commit → push

Komponente bearbeiten

1. read_file der Komponente, um den aktuellen Code zu verstehen
2. write_file mit der aktualisierten Komponente
3. git_operations add → commit → push

Seitenstyling ändern

1. read_file der relevanten CSS-Datei oder Komponente
2. write_file mit aktualisierten Stilen
3. git_operations add → commit → push

Bild hochladen

1. Bild mit write_file oder run_command in src/assets/<ordner>/ speichern
2. Im Markdown referenzieren: ![alt](~/assets/<ordner>/image.jpg)
3. Oder in .astro: import img from "~/assets/<ordner>/image.jpg"