Skip to content

feat(showcase): URL 등록만으로 OG 자동 추출하는 쇼케이스 페이지 구현#98

Draft
hyoseong1994 wants to merge 3 commits into
mainfrom
29-showcase
Draft

feat(showcase): URL 등록만으로 OG 자동 추출하는 쇼케이스 페이지 구현#98
hyoseong1994 wants to merge 3 commits into
mainfrom
29-showcase

Conversation

@hyoseong1994

@hyoseong1994 hyoseong1994 commented Jul 9, 2026

Copy link
Copy Markdown
Collaborator

쇼케이스 페이지를 빌드 타임 OG 자동 추출 방식으로 구현합니다 (#29). 기여자는 src/content/showcase/entries.ts에 프로젝트 { url } 한 줄만 등록하면, 빌드 타임에 그 URL의 Open Graph 메타데이터를 추출·병합해 카드로 렌더링합니다. 기여 진입 장벽을 낮추는 것이 핵심입니다.

데이터 흐름 (런타임 외부 fetch 없음)

기여자: entries.ts에 { url } 등록 (PR)
   ↓  (predev/prebuild)
generate-showcase.mts: url fetch → OG 파싱 → 병합 → showcase.generated.json
   ↓
loader: 생성 JSON만 읽어 카드 그리드 렌더링

주요 변경

  • OG 파싱: open-graph-scraper 도입 (상대 이미지 URL 절대화, twitter 카드 fallback)
  • 빌드 스크립트 scripts/generate-showcase.mts: 수동 오버라이드 ?? OG 추출값 ?? fallback 순 병합, generate-og.mts의 해시 캐시 패턴 차용
  • 회복력: fetch 실패·OG 누락 시 이전 카드 보존 → 없으면 호스트명·플레이스홀더 카드로 대체 (빌드가 깨지지 않음)
  • 스키마 src/content/showcase/schema.ts: zod 2층 (기여자 입력 / 병합 카드), 스크립트·loader가 공유
  • 라우트 showcase._index.tsx: UnderConstruction → 반응형 카드 그리드(1→2→3열)
  • 카드 ShowcaseCard.tsx: 썸네일·제목·설명·외부 링크, stretched-link, 이미지 onError fallback
  • SEO: SeoMeta 재사용 + showcase 정적 OG 이미지 추가

테스팅

  • 프리렌더된 dist/client/showcase/index.html에 실제 카드(OG 추출 제목·이미지·외부 링크)가 포함됨을 확인
  • 도달 불가 URL로 fetch 실패 fallback 경로를 별도 검증 (호스트명 title + 플레이스홀더 이미지 카드 생성, 빌드 정상)

체크 리스트

  • 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
  • Cloudflare Preview URL에서 수정한 내용이 의도대로 잘 동작하는지 확인해 주세요.

@hyoseong1994 hyoseong1994 linked an issue Jul 9, 2026 that may be closed by this pull request
8 tasks
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Ready
View logs
daleui 15098fb Commit Preview URL Jul 10 2026, 07:31 AM

@hyoseong1994 hyoseong1994 force-pushed the 29-showcase branch 2 times, most recently from 4b47ae3 to 62d4e86 Compare July 9, 2026 05:53
- fall back to hostname/default image when OG fetch fails or returns empty
- retry transient OG fetch failures
- avoid caching fallback cards so they are retried on the next build
- reject duplicate showcase URLs and restrict entries to http(s) pages
- track showcase.generated.json so the cache survives CI clean builds
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

쇼케이스 페이지 구현 (DS-02 시안 기반)

1 participant