문서 규격

01폴더 구조

게임 폴더 하나 = 탭 세 개(개요 · 규칙 · 변경 이력).

02페이지 규칙

• <!doctype html>, <html lang>, <meta charset="utf-8">, viewport.
• <title>은 게임 이름 · 페이지 이름. 헤더의 경로 표시가 이 값을 쓴다.
• 게임 페이지는 <meta name="docs-game" content="<slug>">.
• <body data-docs-page="…">는 파일 위치와 일치해야 한다(위 표).
• _theme/docs.css를 상대 경로로 링크하고, _theme/docs.js를 <head>에서 defer 없이 불러온다. 테마가 첫 렌더 전에 적용된다.
• 링크는 상대 경로만(file://로 열어도 같아야 한다). 다른 게임 폴더로 링크하지 않는다. 폴더 링크는 index.html까지 쓴다.
• 게임 색은 tokens.css의 변수로만 쓴다. 공통 크롬은 --wf-*.

03공통 컴포넌트

옛 와이어프레임 셸의 wf-* 클래스를 그대로 쓴다.

하단 step-nav · 상태 전환

docs.js보다 먼저 window.WF = { prev, next, states }를 선언하면 하단 바가 생긴다. 옛 셸과 같은 계약이라 페이지 수정 없이 옮겨진다.

변경 이력 항목

04페이지 뼈대

wireframe/03-screen.html 예시. 다른 페이지는 경로 깊이와 data-docs-page만 다르다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="docs-game" content="run-horses">
    <title>말달리자 · 03 화면</title>
    <link rel="stylesheet" href="../../_theme/docs.css">
    <link rel="stylesheet" href="../tokens.css">
    <script src="../../_theme/docs.js"></script>
  </head>
  <body data-docs-page="wireframe">
    <main class="wf-main">…</main>
  </body>
</html>

05게시