Illia-sanzh/greenclaw-agent

Astro 사이트 관리 — 에이전트 지식

기능

다음 작업을 통해 Astro 정적 사이트를 관리할 수 있습니다:

• 블로그 포스트 생성, 편집 및 삭제 (콘텐츠 컬렉션 내 마크다운/MDX)
• 문서(.docx, .pdf) 가져오기 및 마크다운으로 변환
• src/assets/에 이미지 업로드 및 정리
• 컴포넌트(.astro), 레이아웃 및 페이지 편집
• 대화형 컴포넌트가 포함된 MDX 파일 편집
• 전역 및 컴포넌트 범위 스타일 수정
• 자동 Cloudflare Workers 배포를 위해 Git에 푸시 (또는 npx wrangler deploy 실행)
• npm 명령어 실행 (빌드, 개발 서버, 패키지 추가)

콘텐츠 컬렉션

콘텐츠 컬렉션은 src/content/ 디렉터리를 사용하며, src/content/config.ts에 정의된 스키마를 따릅니다.

블로그 포스트

위치: src/content/blog/*.md 또는 *.mdx

필수 frontmatter:

---
title: "포스트 제목"
description: "SEO 설명"
pubDate: 2024-01-15
---

선택 필드: updatedDate, heroImage, draft, tags

포스트 생성하기

1. src/content/blog/<slug>.md에 frontmatter와 함께 마크다운 파일 작성
2. 이미지는 src/assets/<slug>/에 배치
3. 이미지 참조: ![alt](~/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={title} description={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 생성 (frontmatter + 내용 포함)
2. git_operations status → add → commit → push

문서 가져오기

1. 업로드된 파일 경로로 convert_document 실행
2. 생성된 마크다운을 read_file로 검토
3. 필요한 경우 write_file로 frontmatter 편집
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/<folder>/에 저장
2. 마크다운에서 참조: ![alt](~/assets/<folder>/image.jpg)
3. 또는 .astro에서: import img from "~/assets/<folder>/image.jpg"