Illia-sanzh/greenclaw-agent

Gestion de Site Astro — Connaissances de l'Agent

Capacités

Vous pouvez gérer un site statique Astro grâce à ces opérations :

• Créer, modifier et supprimer des articles de blog (Markdown/MDX dans les collections de contenu)
• Importer des documents (.docx, .pdf) et les convertir en Markdown
• Télécharger et organiser des images dans src/assets/
• Modifier des composants (.astro), des layouts et des pages
• Modifier des fichiers MDX avec des composants interactifs
• Modifier les styles globaux et par composant
• Pousser les modifications vers Git pour un déploiement automatique sur Cloudflare Workers (ou exécuter npx wrangler deploy)
• Exécuter des commandes npm (build, dev, ajout de packages)

Collections de Contenu

Les collections de contenu utilisent src/content/ avec un schéma défini dans src/content/config.ts.

Articles de Blog

Emplacement : src/content/blog/*.md ou *.mdx

Frontmatter requis :

---
title: "Titre de l'article"
description: "Description SEO"
pubDate: 2024-01-15
---

Champs optionnels : updatedDate, heroImage, draft, tags

Créer un Article

1. Écrire le fichier Markdown avec le frontmatter dans src/content/blog/<slug>.md
2. Placer les images dans src/assets/<slug>/
3. Référencer les images : ![alt](~/assets/<slug>/image.jpg)
4. Git add, commit, push pour déployer

Interroger les Collections

Dans les pages .astro :

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

Modèles de Composants

Composant .astro de base

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

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

Modèle de Layout

---
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="fr">
<head><BaseHead title={title} description={description} /></head>
<body>
  <Header />
  <main><slot /></main>
  <Footer />
</body>
</html>

Routes Dynamiques

Fichier : 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 />

Règles de Sécurité

• NE JAMAIS supprimer le répertoire .git
• NE JAMAIS supprimer node_modules/ ou package-lock.json sauf pour une réinstallation
• NE JAMAIS forcer un push (git push --force)
• NE JAMAIS pousser vers des branches autres que la branche de déploiement configurée
• Ne PAS modifier astro.config.mjs ou wrangler.toml sans demande explicite de l'utilisateur
• NE JAMAIS exécuter rm -rf sur la racine du projet
• Demander confirmation avant de supprimer un fichier de composant ou de page

Tâches Courantes

Ajouter un article de blog

1. write_file pour créer src/content/blog/<slug>.md avec frontmatter + contenu
2. git_operations status → add → commit → push

Importer un document

1. convert_document avec le chemin du fichier téléchargé
2. read_file le Markdown généré pour le réviser
3. Modifier le frontmatter si nécessaire avec write_file
4. git_operations add → commit → push

Modifier un composant

1. read_file le composant pour comprendre le code actuel
2. write_file avec le composant mis à jour
3. git_operations add → commit → push

Changer le style du site

1. read_file le fichier CSS ou le composant concerné
2. write_file avec les styles mis à jour
3. git_operations add → commit → push

Télécharger une image

1. Enregistrer l'image dans src/assets/<dossier>/ avec write_file ou run_command
2. Référencer en Markdown : ![alt](~/assets/<dossier>/image.jpg)
3. Ou en .astro : import img from "~/assets/<dossier>/image.jpg"