원문: https://github.com/facebook/astryx/wiki/Docsite-Architecture · 번역 기준: 2026-09-03

Astryx docsite는 astryx.atmeta.com에 있으며(xds-sandbox.vercel.app의 Vercel 배포도 같은 사이트를 서빙합니다), 생성된 registry로부터 문서를 렌더링하는 Next.js 15 앱입니다. 모든 콘텐츠는 소스 코드와 같은 위치(colocated)에 있는 .doc.mjs 파일에서 비롯됩니다 — 별도의 CMS나 markdown 콘텐츠 디렉토리는 없습니다.

Quick Reference

무엇 어디
Docsite 앱 apps/docsite/
데이터 생성 스크립트 apps/docsite/scripts/generate-data.mjs
생성된 registry apps/docsite/src/generated/ (gitignore됨, dev/build 시점에 빌드)
컴포넌트 문서 소스 packages/core/src/<Component>/<Name>.doc.mjs
레퍼런스 문서 소스 packages/cli/assets/docs/<topic>.doc.mjs
예제 블록 소스 packages/cli/assets/templates/blocks/components/<Name>/
페이지 템플릿 소스 packages/cli/templates/pages/<slug>/
Doc 타입 정의 @astryxdesign/cli/authoring (packages/cli/authoring/)
Shell / sidebar nav apps/docsite/src/components/DocsShell.tsx
배포 Vercel (main push 시 자동 배포)

Page Types

1. Home / Overview

URL: /

보여주는 것: Hero 섹션, 패키지 그리드(라이브러리 + 테마), foundations 카드 그리드.

데이터 소스: packageRegistry, componentRegistry(개수), docsRegistry(foundations 토픽), themeRegistry(라이브 테마 프리뷰).

코드: apps/docsite/src/app/(docs)/page.tsx

2. Component Detail

URL 패턴: /components/[name]

보여주는 것: 두 개의 탭 — Overview(showcase 프리뷰, 사용법 설명, import 경로, best practices, 예제)와 Playground(라이브 prop 컨트롤이 있는 인터랙티브 프리뷰).

데이터 소스: