Illia-sanzh/greenclaw-agent

Astro サイト管理 — エージェント知識

機能

以下の操作で Astro 静的サイトを管理できます。

• ブログ記事（コンテンツコレクション内の Markdown/MDX）の作成、編集、削除
• ドキュメント（.docx, .pdf）のインポートと Markdown への変換
• src/assets/ への画像のアップロードと整理
• コンポーネント（.astro）、レイアウト、ページの編集
• インタラクティブコンポーネントを含む MDX ファイルの編集
• グローバルおよびコンポーネントスコープのスタイル変更
• Git への変更プッシュによる Cloudflare Workers への自動デプロイ（または npx wrangler deploy の実行）
• npm コマンドの実行（ビルド、開発サーバー起動、パッケージ追加）

コンテンツコレクション

コンテンツコレクションは src/content/ を使用し、スキーマは src/content/config.ts で定義されます。

ブログ記事

場所: src/content/blog/*.md または *.mdx

必須フロントマター:

---
title: "記事のタイトル"
description: "SEO 向け説明"
pubDate: 2024-01-15
---

オプションフィールド: updatedDate, heroImage, draft, tags

記事の作成

1. src/content/blog/<slug>.md にフロントマターを含むマークダウンファイルを作成
2. 画像は src/assets/<slug>/ に配置
3. 画像の参照: ![代替テキスト](~/assets/<slug>/image.jpg)
4. Git で add、commit、push してデプロイ

コレクションのクエリ

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

コンポーネントパターン

基本的な .astro コンポーネント

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

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

レイアウトパターン

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

動的ルート

ファイル: 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 />

安全ルール

• .git ディレクトリを決して削除しない
• 再インストールする場合以外は node_modules/ や package-lock.json を決して削除しない
• 強制プッシュ（git push --force）を決して実行しない
• 設定されたデプロイブランチ以外のブランチにプッシュしない
• ユーザーからの明示的な要求なしに astro.config.mjs や wrangler.toml を変更しない
• プロジェクトルートで rm -rf を決して実行しない
• コンポーネントやページファイルを削除する前に確認を求める

一般的なタスク

ブログ記事の追加

1. write_file を使用して src/content/blog/<slug>.md をフロントマターとコンテンツ付きで作成
2. git_operations status → add → commit → push

ドキュメントのインポート

1. アップロードされたファイルパスを指定して convert_document を実行
2. 生成されたマークダウンを read_file で確認
3. 必要に応じて write_file でフロントマターを編集
4. git_operations add → commit → push

コンポーネントの編集

1. read_file でコンポーネントの現在のコードを理解
2. write_file で更新されたコンポーネントを書き込み
3. git_operations add → commit → push

サイトのスタイル変更

1. 関連する CSS ファイルまたはコンポーネントを read_file で読み取り
2. 更新されたスタイルを write_file で書き込み
3. git_operations add → commit → push

画像のアップロード

1. write_file または run_command を使用して画像を src/assets/<フォルダ>/ に保存
2. マークダウン内で参照: ![代替テキスト](~/assets/<フォルダ>/image.jpg)
3. または .astro 内: import img from "~/assets/<フォルダ>/image.jpg"