# Medium Scraper Skill

## 목적
Playwright를 사용하여 Medium 페이지를 스크래핑하고 콘텐츠를 추출합니다.

## 입력
- 대상 URL (태그, 작성자, 개별 글)
- 수집할 글 개수 (기본: 10)
- 이미지 다운로드 여부 (기본: true)

## 처리 과정

### 1. 페이지 접근
```javascript
// Playwright 명령
1. 브라우저 시작
2. URL 이동
3. 페이지 로드 대기
4. 무한 스크롤 처리 (필요시)
```

### 2. 목록 페이지 처리 (태그/작성자 페이지)

```javascript
// 글 링크 추출
const articles = await page.evaluate(() => {
  const links = Array.from(document.querySelectorAll('article a[data-post-id]'));
  return links.map(link => ({
    url: link.href,
    title: link.querySelector('h2')?.textContent,
    preview: link.querySelector('p')?.textContent,
    author: link.querySelector('[data-author]')?.textContent,
    date: link.querySelector('time')?.getAttribute('datetime')
  }));
});
```

### 3. 개별 글 추출

```javascript
// 본문 콘텐츠 추출
const content = await page.evaluate(() => {
  const article = document.querySelector('article');
  
  return {
    title: article.querySelector('h1')?.textContent,
    subtitle: article.querySelector('h2.subtitle')?.textContent,
    author: document.querySelector('[data-author-name]')?.textContent,
    publishDate: document.querySelector('time')?.getAttribute('datetime'),
    readTime: document.querySelector('[data-read-time]')?.textContent,
    tags: Array.from(article.querySelectorAll('a[href^="/tag/"]'))
      .map(a => a.textContent),
    content: article.querySelector('.article-content')?.innerHTML,
    images: Array.from(article.querySelectorAll('img'))
      .map(img => ({
        src: img.src,
        alt: img.alt,
        caption: img.parentElement.querySelector('figcaption')?.textContent
      })),
    claps: document.querySelector('[data-claps]')?.textContent,
    responses: document.querySelector('[data-responses]')?.textContent
  };
});
```

### 4. 이미지 다운로드

로컬에 이미지를 저장하고 상대 경로로 변경:

```javascript
// 각 이미지에 대해
for (const img of content.images) {
  const filename = generateImageFilename(img.src);
  const localPath = `images/${filename}`;
  
  // 다운로드
  await downloadImage(img.src, localPath);
  
  // 경로 업데이트
  img.localPath = localPath;
}
```

## 출력 형식

```json
{
  "url": "https://medium.com/@author/article-slug",
  "metadata": {
    "title": "...",
    "subtitle": "...",
    "author": "...",
    "publishDate": "2024-12-24",
    "readTime": "5 min read",
    "tags": ["ai", "programming"],
    "claps": "234",
    "responses": "12"
  },
  "content": {
    "html": "...",
    "images": [
      {
        "original": "https://...",
        "local": "images/img-001.png",
        "alt": "...",
        "caption": "..."
      }
    ]
  }
}
```

## 주의사항

1. **Rate Limiting**: 요청 사이 2-3초 대기
2. **로그인**: 비공개 글 접근 시 필요
3. **Paywall**: Member-only 글은 제한적 접근
4. **동적 로딩**: 스크롤하여 모든 콘텐츠 로드 확인

# Medium to Markdown Converter Skill

## 목적
Medium의 HTML 콘텐츠를 깔끔한 Markdown으로 변환합니다.

## 변환 규칙

### 1. 제목 처리
```
H1 → # 제목
H2 → ## 부제목
```

### 2. 텍스트 포맷
```
<strong> → **굵게**
<em> → *기울임*
<code> → `코드`
<pre> → ```코드블록```
```

### 3. 링크
```
<a href="...">text</a> → [text](...)
```

### 4. 이미지
```
<img src="remote-url"> → ![alt](images/local-filename.png)
*caption* (별도 처리)
```

### 5. 인용문
```
<blockquote> → > 인용문
```

### 6. 리스트
```
<ul> → - 항목
<ol> → 1. 항목
```

### 7. 코드 블록
Medium의 GitHub Gist 임베드를 코드 블록으로 변환:
```
<script src="gist..."></script> 
→ 
```javascript
// 코드 내용
```
```

### 8. 특수 처리

**Medium의 특수 요소**:
- 강조 박스 → Markdown 인용문
- 구분선 → `---`
- 이미지 갤러리 → 개별 이미지로 분리

## YAML 프론트매터 생성

```yaml
---
title: "원본 제목"
subtitle: "부제목 (있는 경우)"
author: "작성자명"
author_url: "https://medium.com/@author"
publish_date: "2024-12-24"
read_time: "5 min"
source_url: "https://medium.com/..."
tags: [ai, programming, tutorial]
collected_date: "2024-12-24"
claps: 234
responses: 12
---
```

## 출력 형식

완전한 Markdown 문서:

```markdown
---
[YAML 프론트매터]
---

# 제목

> 부제목

![커버 이미지](images/cover.png)

**작성자**: [Author Name](https://medium.com/@author) • **발행일**: 2024-12-24 • **읽는 시간**: 5분

---

[본문 내용...]

## 섹션 1

[...]

---

## 메타정보

- **원본**: [Medium 링크](https://...)
- **수집일**: 2024-12-24
- **태그**: #ai, #programming
```

## 품질 체크

변환 후 다음 사항 확인:
1. 모든 이미지 로컬 경로로 변경됨
2. 코드 블록 올바르게 변환
3. 링크 정상 작동
4. 특수 문자 이스케이프 처리
5. Markdown 문법 유효성

# GitHub Publisher Skill

## 목적
수집된 콘텐츠를 GitHub 저장소에 커밋하고 푸시합니다.

## 입력
- 저장할 파일들의 경로 리스트
- 커밋 메시지
- 브랜치 (기본: main)

## 처리 과정

### 1. 변경사항 확인
```bash
# Git MCP 명령
git_status
```

### 2. 파일 추가
```bash
# 새 글 추가
git_add articles/2024/12/new-article.md
git_add articles/2024/12/images/*.png

# 메타데이터 업데이트
git_add metadata/index.json
```

### 3. 커밋 생성
```bash
git_commit -m "Add: [글 제목] from Medium

- Author: [작성자]
- Tags: [태그들]
- Date: [발행일]
- Images: [이미지 개수]개
"
```

### 4. 푸시
```bash
git_push origin main
```

## 자동 커밋 메시지 생성

포맷:
```
[Action]: [Article Title]

- Author: @username
- Published: YYYY-MM-DD
- Tags: #tag1, #tag2, #tag3
- Read time: X min
- Images: N
- Source: [Medium URL]

Automated collection via Claude Code
```

Actions:
- `Add`: 새 글 추가
- `Update`: 기존 글 수정
- `Fix`: 오류 수정
- `Sync`: 메타데이터 동기화

## 충돌 처리

1. 리모트 변경사항 확인
```bash
git_fetch
git_status
```

2. 충돌 발생 시
```bash
git_pull --rebase
# 수동 해결 필요 시 사용자에게 알림
```

## 메타데이터 인덱스 관리

`metadata/index.json` 업데이트:

```json
{
  "last_updated": "2024-12-24T10:30:00Z",
  "total_articles": 42,
  "articles": [
    {
      "id": "abc123",
      "title": "...",
      "author": "...",
      "date": "2024-12-24",
      "path": "articles/2024/12/article-name.md",
      "tags": ["ai", "programming"],
      "images_count": 3
    }
  ],
  "tags": {
    "ai": 15,
    "programming": 20,
    "tutorial": 10
  }
}
```

# Medium Archive Project

당신은 Medium 콘텐츠 수집 및 GitHub 아카이빙 전문 에이전트입니다.

## 역할

Medium에서 글을 수집하고, 정리하여, GitHub 저장소에 체계적으로 저장합니다.

## 작업 프로세스

### 1. 수집 단계
1. `scripts/targets.json`에서 수집 대상 확인
2. Playwright로 각 대상 페이지 방문
3. `medium_scraper` 스킬로 콘텐츠 추출
4. 이미지 다운로드 및 로컬 저장

### 2. 변환 단계
1. `medium_to_markdown` 스킬로 HTML → Markdown 변환
2. 이미지 경로를 로컬 경로로 변경
3. YAML 프론트매터 추가
4. 파일명 생성: `YYYY-MM-DD-{slug}.md`

### 3. 저장 단계
1. 날짜별 폴더에 파일 저장: `articles/YYYY/MM/`
2. 이미지를 `articles/YYYY/MM/images/`에 저장
3. `metadata/index.json` 업데이트

### 4. 발행 단계
1. Git MCP로 변경사항 스테이징
2. 적절한 커밋 메시지 생성
3. GitHub에 푸시
4. 로그 파일 업데이트

## 스킬 사용 순서

```
targets.json 읽기
  ↓
FOR EACH target:
  medium_scraper (URL → JSON)
    ↓
  medium_to_markdown (JSON → MD)
    ↓
  저장 (MD + images)
    ↓
  metadata 업데이트
  ↓
github_publisher (Git commit & push)
  ↓
로그 기록
```

## 중복 방지

수집 전 확인:
1. `metadata/index.json`에서 URL 존재 여부 체크
2. 이미 있으면 스킵 또는 업데이트 여부 확인
3. 새 글만 처리

## 에러 처리

- 접근 불가 URL: 로그 기록 후 계속
- 이미지 다운로드 실패: 원본 URL 유지
- Git 충돌: 사용자에게 알림 후 중단
- Playwright 타임아웃: 재시도 (최대 3회)

## 파일 명명 규칙

```
articles/YYYY/MM/YYYY-MM-DD-article-slug.md
articles/YYYY/MM/images/article-slug-img-001.png
```

# Image Optimizer Skill

## 목적
다운로드한 이미지를 최적화하여 저장소 크기 감소

## 처리
1. WebP 변환 (PNG/JPG → WebP)
2. 리사이즈 (max width: 1200px)
3. 압축 (quality: 85%)
4. 썸네일 생성 (선택)

## 도구
- Sharp 라이브러리 사용

# README Generator Skill

## 목적
저장소의 README.md를 메타데이터 기반으로 자동 생성/업데이트

## 포함 내용
- 총 수집 글 개수
- 최신 글 10개
- 태그별 통계
- 작성자별 통계
- 월별 아카이브 링크

# My Medium Archive

자동으로 수집된 Medium 글 아카이브

## 📊 통계

- **총 글 개수**: 156
- **총 작성자**: 42
- **수집 기간**: 2024-01-01 ~ 2024-12-24
- **마지막 업데이트**: 2024-12-24 09:00:00

## 📝 최신 글

1. [Understanding GPT-4 Architecture](articles/2024/12/2024-12-15-understanding-gpt4.md) - @author1
2. [Fine-tuning LLMs for Production](articles/2024/12/2024-12-18-finetuning-llms.md) - @author2
...

## 🏷️ 태그별 분류

- [AI & Machine Learning](tags/ai.md) (45)
- [Programming](tags/programming.md) (38)
- [Web Development](tags/webdev.md) (29)
...

## 📅 월별 아카이브

- [2024년 12월](articles/2024/12/) (23 글)
- [2024년 11월](articles/2024/11/) (31 글)
...

## 🔍 검색

전체 글 인덱스: [index.md](metadata/index.md)

## 🤖 자동화

이 저장소는 Claude Code를 통해 자동으로 관리됩니다.

# Duplicate Detector Skill

## 목적
동일 글의 중복 수집 방지 및 업데이트 탐지

## 판별 기준
1. URL 일치 (정확한 중복)
2. 제목 유사도 > 90% (잠재적 중복)
3. 본문 해시 비교 (내용 변경 탐지)

## 처리
- 신규: 새로 추가
- 중복: 스킵
- 업데이트: 버전 번호 증가 (v1, v2, ...)