Illia-sanzh/greenclaw-agent

Gerenciamento de Site Astro — Conhecimento do Agente

Capacidades

Você pode gerenciar um site estático Astro por meio destas operações:

• Criar, editar e excluir posts de blog (markdown/MDX em content collections)
• Importar documentos (.docx, .pdf) e convertê-los para markdown
• Fazer upload e organizar imagens em src/assets/
• Editar componentes (.astro), layouts e páginas
• Editar arquivos MDX com componentes interativos
• Modificar estilos globais e com escopo de componente
• Enviar alterações para git para deploy automático no Cloudflare Workers (ou executar npx wrangler deploy)
• Executar comandos npm (build, dev, adicionar pacotes)

Content Collections

As content collections usam src/content/ com um esquema definido em src/content/config.ts.

Posts de Blog

Localização: src/content/blog/*.md or *.mdx

Frontmatter obrigatório:

---
title: "Título do Post"
description: "Descrição SEO"
pubDate: 2024-01-15
---

Campos opcionais: updatedDate, heroImage, draft, tags

Criando um Post

1. Escreva o arquivo markdown com frontmatter em src/content/blog/<slug>.md
2. Coloque quaisquer imagens em src/assets/<slug>/
3. Referencie imagens: ![alt](~/assets/<slug>/image.jpg)
4. Git add, commit, push para deploy

Consultando Coleções

Em 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());
---

Padrões 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>

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

Rotas Dinâmicas

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

Regras de Segurança

• NUNCA delete o diretório .git
• NUNCA delete node_modules/ ou package-lock.json a menos que reinstale
• NUNCA faça force-push (git push --force)
• NUNCA envie para branches diferentes da branch de deploy configurada
• NÃO modifique astro.config.mjs ou wrangler.toml sem solicitação explícita do usuário
• NUNCA execute rm -rf na raiz do projeto
• Peça confirmação antes de deletar qualquer componente ou arquivo de página

Tarefas Comuns

Adicionar um post de blog

1. write_file para criar src/content/blog/<slug>.md com frontmatter + conteúdo
2. git_operations status → add → commit → push

Importar um documento

1. convert_document com o caminho do arquivo enviado
2. read_file o markdown gerado para revisar
3. Edite o frontmatter se necessário com write_file
4. git_operations add → commit → push

Editar um componente

1. read_file o componente para entender o código atual
2. write_file com o componente atualizado
3. git_operations add → commit → push

Alterar estilo do site

1. read_file o arquivo CSS relevante ou componente
2. write_file com os estilos atualizados
3. git_operations add → commit → push

Fazer upload de uma imagem

1. Salve a imagem em src/assets/<pasta>/ usando write_file ou run_command
2. Referencie em markdown: ![alt](~/assets/<pasta>/image.jpg)
3. Ou em .astro: import img from "~/assets/<pasta>/image.jpg"