Illia-sanzh/greenclaw-agent

Gestión de Sitios Astro — Conocimiento del Agente

Capacidades

Puedes gestionar un sitio estático Astro mediante estas operaciones:

• Crear, editar y eliminar entradas de blog (markdown/MDX en colecciones de contenido)
• Importar documentos (.docx, .pdf) y convertirlos a markdown
• Subir y organizar imágenes en src/assets/
• Editar componentes (.astro), layouts y páginas
• Editar archivos MDX con componentes interactivos
• Modificar estilos globales y de ámbito de componente
• Enviar cambios a Git para el despliegue automatizado en Cloudflare Workers (o ejecutar npx wrangler deploy)
• Ejecutar comandos npm (build, dev, add packages)

Colecciones de Contenido

Las colecciones de contenido usan src/content/ con un esquema definido en src/content/config.ts.

Entradas de Blog

Ubicación: src/content/blog/*.md o *.mdx

Frontmatter requerido:

---
title: "Título de la Entrada"
description: "Descripción SEO"
pubDate: 2024-01-15
---

Campos opcionales: updatedDate, heroImage, draft, tags

Crear una Entrada

1. Escribe el archivo markdown con frontmatter en src/content/blog/<slug>.md
2. Coloca las imágenes en src/assets/<slug>/
3. Referencia las imágenes: ![alt](~/assets/<slug>/image.jpg)
4. Git add, commit, push para desplegar

Consultar Colecciones

En páginas .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());
---

Patrones de Componentes

Componente .astro Básico

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

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

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

Rutas Dinámicas

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

Reglas de Seguridad

• NUNCA borrar el directorio .git
• NUNCA borrar node_modules/ o package-lock.json a menos que se reinstale
• NUNCA hacer push forzado (git push --force)
• NUNCA hacer push a ramas distintas a la rama de despliegue configurada
• NO modificar astro.config.mjs o wrangler.toml sin una solicitud explícita del usuario
• NUNCA ejecutar rm -rf en la raíz del proyecto
• Preguntar confirmación antes de borrar cualquier archivo de componente o página

Tareas Comunes

Añadir una entrada de blog

1. write_file para crear src/content/blog/<slug>.md con frontmatter + contenido
2. git_operations status → add → commit → push

Importar un documento

1. convert_document con la ruta del archivo subido
2. read_file el markdown generado para revisarlo
3. Editar el frontmatter si es necesario con write_file
4. git_operations add → commit → push

Editar un componente

1. read_file el componente para entender el código actual
2. write_file con el componente actualizado
3. git_operations add → commit → push

Cambiar el estilo del sitio

1. read_file el archivo CSS relevante o el componente
2. write_file con los estilos actualizados
3. git_operations add → commit → push

Subir una imagen

1. Guardar la imagen en src/assets/<carpeta>/ usando write_file o run_command
2. Referencia en markdown: ![alt](~/assets/<carpeta>/image.jpg)
3. O en .astro: import img from "~/assets/<carpeta>/image.jpg"