Dash Documentation Boilerplate — 2plot 네트워크의 템플릿
<p align="center">
<img src="https://cdn.2plot.ai/github_assets/dark_mode_2plot.png" alt="2plot" width="640">
</p>
dash-documentation-boilerplate — 모든 *.2plot.dev 컴포넌트 사이트가 포크하는 마크다운 기반 문서화 템플릿입니다. Pip Install Python에 의해 작성되었습니다.
<!-- One badge for both: cd.yml's first job `uses:` ci.yml, so this status IS
the full CI matrix plus the deploy — the deploy cannot start unless CI
passed. A standalone ci.yml badge would be frozen forever on the last
pre-1.2.2 run: ci.yml deliberately has no push trigger on main (see the
comment at the top of that file), and reusable-workflow calls count as
runs of the CALLER, so ci.yml never gets a new run on main again. -->
CI/CD
Dash
DMC
Backends
Python
License: MIT
실시간 데모: boilerplate.2plot.dev · 모든 2plot.dev 컴포넌트 문서 사이트가 구축되는 템플릿입니다.
Dash 컴포넌트, 데이터 과학 워크플로우 및 애플리케이션에 대한 아름답고 인터랙티브한 문서를 생성하기 위한 포괄적인 보일러플레이트입니다. 마크다운 기반 콘텐츠, 실시간 코드 예제, 자동 테마 지속성 기능을 제공합니다.
Documentation Preview
✨ 기능 (Features)
📝 마크다운 기반 문서화 (Markdown-Driven Documentation)
- Python 통합을 사용하여 마크다운으로 문서 작성
- 인터랙티브 예제, 코드 하이라이팅 및 컴포넌트 속성을 위한 사용자 지정 지시어(Custom directives)
- 프런트매터 메타데이터를 가진 마크다운 파일로부터 자동 페이지 생성
- 쉬운 탐색을 위한 목차(Table of contents) 생성
🎨 모던 UI/UX
- Dash Mantine Components로 구축됨
- 모바일, 태블릿, 데스크톱을 위한 반응형 디자인 — 모바일 버거 메뉴를 열면 헤더 아래에 고정된 전체 높이의 서랍(drawer)이 나타나며, 상단에는 스티키 페이지 검색창이 위치합니다 (네트워크 표준 모바일 탐색 방식이며, dash-mantine-components ≥ 2.8.0 필요).
- 자동 선호도 지속성을 갖춘 다크 및 라이트 테마 지원
- 아이콘 전용 컨트롤에
aria-label이 포함되어 있어 스크린 리더와 AI 에이전트가 모든 버튼의 이름을 지정할 수 있습니다 (Lighthouse Agentic-Browsing 3/3).
- 부드러운 전환 효과(Smooth transitions)와 전문적인 스타일링
- 사용자 정의 가능한 색상 구성표 및 테마 설정
🔐 접근 제어 및 실시간 페이지 관리
- 프론트매터(frontmatter)에 선언된 네 가지 페이지 계층(
public / auth / admin / hidden)이 있으며, PAGE_DEFAULT_TIER로 기본 설정됩니다.
/admin/control-board — 페이지의 계층이나 llms.txt 노출 여부를 재시작 없이 변경할 수 있습니다. 이는 프론트매터를 덮어쓰며 마운트된 디스크의 PAGE_VISIBILITY_FILE에 지속적으로 저장됩니다. 소유자/관리자 전용이며, ADMIN_EMAILS / ADMIN_USER_IDS를 통해 접근이 통제됩니다. Clerk가 없을 경우 안전하게 실패하며 (ALLOW_UNGATED_ADMIN=1은 로컬 작업용), 닫힌(fails closed) 상태로 유지됩니다.
- 선택적 실시간 데모 티저(
lib/auth_demos.py)가 포함된 로그인 게이트 카드 — 익명의 방문자는 "무료 계정 만들기" 카드 위에 작동하는 예시를 볼 수 있습니다.
- 선택적 Clerk 인증(vendored
dash-clerk-auth)을 지원하며, CLERK_* 환경 변수가 존재할 때까지 완전히 비활성화됩니다. 포크된 버전은 로그인 벽이 아닌 기능을 상속받습니다.
🔍 개발자 경험 (Developer Experience)
- 개발 중 핫 리로드(Hot reload) 기능 제공
- 검색 가능한 컴포넌트 탐색 기능
- 다중 언어에 대한 구문 강조 표시(Syntax highlighting)
- 실시간 콜백을 갖춘 대화형 코드 예제
- 컴포넌트 속성(props) 문서 자동 생성
🤖 AI/LLM 및 SEO 통합
LLMS_DOC 패턴: 페이지당 모듈 레벨의 산문 문자열을 작성하며, /<page>/llms.txt에서 그대로 제공됩니다.
- 다중 백엔드(Multi-backend):
add_llms_routes(app)가 Flask, FastAPI 또는 Quart를 자동으로 감지하고 일치하는 어댑터로 라우팅합니다.
- MCP 브릿지: 각 페이지의 산문은 Dash 4.3+에서
dash.mcp 리소스로 등록됩니다 (그 외 버전에서는 조용한 무시 처리).
- SEO: 지능형 우선순위 추론이 적용된
sitemap.xml; mark_hidden()을 존중합니다.
- 봇 관리(Bot management): 크롤러 훈련은 차단 가능(설정 가능), AI 검색 인용은 허용, 브라우저는 건드리지 않습니다.
- 개인 정보 보호 제어(Privacy controls):
mark_hidden()을 사용하여 페이지를 sitemap, robots, MCP 및 크롤러 프리렌더링에서 제외합니다.
- AI와 공유하기(Share with AI): 앱 URL을 ChatGPT/Claude/etc.에 붙여넣으면, 해당 서비스가 산문 문서를 직접 가져옵니다.
- 크로스 호스트 네트워크 디렉토리(Cross-host network directory):
lib/network_directory.py는 형제 사이트들을 게시하여 에이전트가 하나의 위성점에 착륙했을 때 나머지 사이트를 찾을 수 있게 합니다 (docs)
- dash-improve-my-llms로 구동됩니다 —
requirements.txt에 버전이 고정되어 있습니다 (2.6.0, 2plot 네트워크 표준 — 진실한 sitemap <lastmod>, 아이콘 자동 발견, JSON-LD 퍼블리셔 로고); 제공되는 페이지는 하드코딩된 값이 아닌 설치된 패키지에서 버전을 읽습니다.
🔌 플러그 가능한 백엔드(Dash 4.x)
- 동일한 앱을 Flask, FastAPI, 또는 Quart에서 실행할 수 있습니다 — 단일
DASH_BACKEND 환경 변수로 전환합니다.
- 백엔드 선택은
lib/backend.py에 중앙 집중화되어 있으며, 라이브 배지가 어떤 백엔드가 페이지를 제공하는지 보여줍니다.
- FastAPI/Quart (ASGI)는 비동기 콜백(async callbacks), 웹소켓 콜백(websocket callbacks), OpenAPI 문서, 네이티브 JSON API (
/api/backend, /api/pages, /healthz), 그리고 ASGI 미들웨어를 사용할 수 있게 합니다.
- 전용 문서: 플러그 가능한 백엔드, 백엔드 심층 분석, 그리고 FastAPI 쇼케이스
🐋 프로덕션 환경 지원 (Production Ready)
- Docker 및 docker-compose 지원
- Gunicorn (WSGI) 및 Uvicorn (ASGI) 프로덕션 서버
- 배포에 최적화됨
- 환경 기반 설정
🚀 최신 기술 스택으로 구축 (Built With Latest Technologies)
- Dash 4.2.0 - 플러그인 백엔드를 갖춘 현대적인 Plotly Dash 프레임워크
- DMC 2.7.0 - Dash Mantine Components
- Mantine 8.3.6 - 아름다운 React UI 라이브러리
- React 18 - 최신 React 기능
- Python 3.12+ - 현대적인 Python
📋 요구 사항 (Requirements)
시스템 요구 사항 (System Requirements)
- Python: 3.12 이상 (3.14가 플릿(fleet)용 Python — Docker 이미지, CI 매트릭스 main 및 render.yaml 모두 이를 인코딩하며,
tests/test_python_version.py에서 이들을 하나의 마이너 버전으로 유지함)
- Node.js: 14 이상 (npm 종속성용)
- npm: 6 이상
Python 의존성 (Python Dependencies)
- dash
~=4.4.1 — 아래 지원 매트릭스 참조; 4.3.0 아님
- dash-mantine-components >= 2.7.0
- dash-ag-grid
- dash-improve-my-llms >= 2.6.0 (2plot 네트워크 표준 — 아래 참조)
- flask >= 3.0.0 (기본 백엔드)
- plotly >= 5.0.0
- pandas >= 1.2.3
- pydantic >= 2.3.0
- python-frontmatter >= 1.0.0
- markdown2dash (설치 시
--no-deps 사용 — 아래 참조)
- gunicorn >= 23.0.0 (WSGI 프로덕션 서버; 21.x는 두 건의 요청 스머글링 CVE를 포함함)
선택적 백엔드 (Flask 비활성화를 위해 일치하는 extra 설치):
pip install
| Dash | Flask | FastAPI | Quart |
|---|---|---|---|
| 4.1.0 | ✅ | — pluggable backends 없음 | — |
... |
4.3.0에서는 `set_current_request`보다 *먼저* 반환하는 early-return path guard를 ASGI 미들웨어에 추가했습니다. 이로 인해 페이지 catch-all은 여전히 `get_current_request()`를 호출하지만, `RuntimeError: No active request in context`가 발생합니다. catch-all 부분 자체는 4.2.0과 4.3.0 사이에 바이트 단위로 동일하며, 미들웨어만 변경되었습니다. 4.4.0에서는 catch-all 내부에서도 컨텍스트를 설정하여 이를 수정했습니다.
이 차이는 pin에 중요합니다: 4.2.0은 단일 상위 코드 경로가 우연히 커버하기 때문에 작동하는 반면, 4.4.x는 두 곳 모두에서 컨텍스트를 설정하므로 미래의 미들웨어 guard가 버그를 재도입할 수 없습니다. **4.4.x는 단순히 현재 통과하는 것을 넘어 구조적으로 더 안전합니다.**
`~=4.4.1`은 20개의 pull request 없이 4.4.2 패치를 적용할 수 있게 하지만, 4.5.0은 차단하므로 마이너 버전 업그레이드가 의도적으로 매트릭스를 통과하게 합니다. 이 pin은 Flask 전용 앱을 포함하여 **네트워크 전체에서 가장 제약이 많은 백엔드**를 위한 것입니다 — `DASH_BACKEND`는 환경 변수이며 이 리포지토리는 공유 템플릿이므로, Flask 배포는 환경 변수 변경과 코드 변경 없이 FastAPI 배포가 됩니다.
**`dash-improve-my-llms`에 대한 참고 사항.** 현재 버전은 **2.6.0**입니다. 이는 2.5.1의 Tier-B SEO 표준에 정직성 계층(honesty layer)이 추가된 것입니다: 사이트맵 `<lastmod>`는 선언된 대로 그대로 방출되며, 설정되지 않은 경우 생략됩니다 (이전 패키지는 날짜를 조용히 무시하고 사이트맵은 거짓말을 하러 돌아갑니다). 아이콘 자동 발견(icon autodiscovery), JSON-LD publisher.logo가 포함됩니다. 그 아래에는 Tier-B SEO 표준이 있습니다: `configure_seo` (아이콘, 소셜 카드, 퍼블리셔/sameAs), 사이트 이름을 담는 크롤러 `<title>`, 페이지별 `title`/`image_url`/`schema_type`이 크롤러 문서에 도달하는 것, 앱 셸(app shell) 대신 리디렉트를 응답하는 `/favicon.ico`, 그리고 앱 자체의 페이지별 `<title>`을 절대 손상시키지 않는 프리렌더링(prerender)입니다. 이전 버전도 역사적으로 중요합니다: 2.3.4는 이 사이트의 게시된 정체성(`resolve_site_title`이 `Home`이나 Dash의 기본값인 `Dash` 같은 일반적인 후보를 건너뛰게 합니다 — 그 이전에는 이 호스트의 뷰어 칩이 단순히
**Node 패키지** (DMC 프론트엔드 컴포넌트용):**
```bash
npm install
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3. 개발 서버 실행하기
./scripts/dev.sh
./scripts/dev.sh fastapi
브라우저에서 **http://localhost:8559**로 접속하세요.
scripts/dev.sh는 자체 위치에서 인터프리터를 해결하므로 항상 이 프로젝트의 .venv를 사용합니다. python run.py도 작동하지만, 다른 프로젝트의 가상 환경을 가리키도록 IDE 실행 구성을 설정하면 해당 프로젝트의 의존성 버전에 맞춰 앱이 시작되는데, 이는 조용하고 비용이 많이 듭니다: dash-improve-my-llms 2.0.0에는 뷰어 모듈 자체가 없으므로, /<page>/llms.txt는 모두에게 일반 Markdown을 제공하며 아무것도 고장난 것처럼 보이지 않습니다. 이제 앱은 지정된 플로어를 아래로 부팅하는 것을 거부하고 sys.executable를 출력하지만, 이 런처는 아예 그 질문을 피합니다.
4. 문서화 시작하기!
docs 폴더에 문서를 생성하세요:
docs/
├── your-component/
│ ├── your-component.md
...
📁 프로젝트 구조
dash-documentation-boilerplate/
├── assets/ # 정적 자산 및 CSS
│ ├── m2d.css # Markdown-to-Dash 스타일링 (테마 인식)
...
📖 사용 가이드
문서 페이지 생성하기
docs/ 디렉터리에 새 폴더를 만드세요:
mkdir -p docs/my-component
2. 프런트매터(frontmatter)가 포함된 **마크다운 파일**을 생성하세요:
```markdown
---
name: My Component
description: 마이 컴포넌트에 대한 설명
...
- 대화형 예제를 추가하세요 (선택 사항):
docs/my-component/example.py
import dash_mantine_components as dmc
...
4. 마크다운에서 **지시어(directives)**를 사용하세요:
```markdown
.. toc::
.. exec::docs.my-component.example
...