index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NoteTree — 노트가 달린 마인드맵</title>
    <meta name="description" content="공부한 내용을 마인드맵으로 정리하고, 노드마다 노트를 달고, 주소 하나로 공개하세요. 노드 개수 제한이 없습니다." />
    <!-- 링크를 메신저에 붙였을 때 보이는 미리보기. 모든 주소가 같은 내용으로 나온다
         (화면을 브라우저에서 그리는 구조라 맵마다 다르게 하려면 서버 쪽 작업이 필요하다). -->
    <meta property="og:site_name" content="NoteTree" />
    <meta property="og:title" content="NoteTree — 노트가 달린 마인드맵" />
    <meta property="og:description" content="공부한 내용을 마인드맵으로 정리하고, 노드마다 노트를 달고, 주소 하나로 공개하세요." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://notetree-app.vercel.app/og.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- 색 모드를 첫 그림 전에 붙인다. 앱 스크립트(1MB)는 스타일시트보다 늦게 실행돼서, 그 사이
         라이트 사용자에게 어두운 화면이 번쩍인다. 규칙은 src/utils/colorMode.ts와 같아야 한다. -->
    <script>
      (function () {
        var mode = null;
        try { mode = localStorage.getItem('color-mode'); } catch (e) {}
        if (mode !== 'dark' && mode !== 'light') {
          mode = window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches ? 'light' : 'dark';
        }
        document.documentElement.dataset.theme = mode;
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>