docker-ko.github.io/src/scripts/load_md.ts at 4d2b354610cba9547beec24a7b59603a0ec6eaf8 · g1nya2/docker-ko.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import { marked } from 'marked';

// marked 옵션 설정 (브레이크, GFM 지원 등)
marked.setOptions({
  gfm: true,
  breaks: true,
});

// card-component를 블록 태그 및 셀프 클로징 태그로 처리하는 커스텀 토크나이저 추가
// 템플릿 리터럴에서 역참조(\1) 사용 불가하므로 정규식 리터럴로 하드코딩
const blockTagRegex =
  /^<(card-component)([\s\S]*?)(?:>([\s\S]*?)<\/card-component>|\s*\/)>/i;

const customBlockTokenizer = {
  name: 'custom-block-tag',
  level: 'block',
  start(src: string) {
    return src.match(blockTagRegex)?.index;
  },
  tokenizer(src: string) {
    const match = blockTagRegex.exec(src);
    if (match) {
      return {
        type: 'html',
        raw: match[0],
        text: match[0],
      };
    }
    return;
  },
} as const;

marked.use({ extensions: [customBlockTokenizer] });

/**
 * 커스텀 파서: <div ...>...</div> 블록을 마크다운 파싱 없이 그대로 삽입
 * 나머지 마크다운만 기존 파서로 처리
 */
export async function renderMarkdownWithComponents(
  mdText: string,
  contentElement: HTMLElement
) {
  // <div ...>...</div> 블록 추출 (빈 줄 포함, 중첩 X)
  const divBlockRegex = /(<div[\s\S]*?>[\s\S]*?<\/div>)/gi;
  const tokens = mdText.split(divBlockRegex).filter(Boolean);

  for (const token of tokens) {
    if (/^<div[\s\S]*?>[\s\S]*?<\/div>$/.test(token)) {
      // div 블록은 그대로 삽입
      contentElement.innerHTML += token;
    } else if (token.trim()) {
      // 나머지는 기존 방식대로 웹 컴포넌트 분리 후 마크다운 파싱
      const innerTokens = token
        .split(
          /(<card-component[\s\S]*?<\/card-component>|<card-component[\s\S]*?\/>|<button-component[\s\S]*?<\/button-component>|<button-component[\s\S]*?\/>)/gi
        )
        .filter(Boolean);
      for (const innerToken of innerTokens) {
        if (
          /^<\/?(card-component|button-component)[^>]*?>.*?<\/(card-component|button-component)>$/.test(
            innerToken
          ) ||
          /^<(card-component|button-component)[^>]*?\/>$/.test(innerToken)
        ) {
          contentElement.innerHTML += innerToken;
        } else if (innerToken.trim()) {
          const html = await marked.parse(innerToken);
          contentElement.innerHTML += html;
        }
      }
    }
  }
}

async function loadMarkdown(page: string) {
  try {
    const response = await fetch(`/docs/${page}.md?cache=${Date.now()}`);
    if (!response.ok) throw new Error(`❌ 페이지를 찾을 수 없습니다: ${page}`);
    const mdText = await response.text();

    if (
      mdText.trim().startsWith('<!DOCTYPE html>') ||
      mdText.includes('<html>')
    ) {
      throw new Error(
        `❌ 요청된 경로가 Markdown이 아닌 HTML을 반환합니다: ${page}`
      );
    }

    const contentElement = document.getElementById('content')!;
    contentElement.innerHTML = '';
    await renderMarkdownWithComponents(mdText, contentElement);
  } catch {
    document.getElementById('content')!.innerHTML = `
      <div id="not-found" class="w-full">
        <p>페이지를 찾을 수 없습니다.</p>
        <a href="#/home" class="back-home">홈으로 돌아가기</a>
      </div>
    `;
  }
}

export async function initializeMarkdownLoader() {
  const page = location.hash ? location.hash.substring(2) : 'home';
  await loadMarkdown(page);
}