doc-repo 0.1.0-alpha.0

package/templates/app.js

@@ -0,0 +1,236 @@
+const treeEl = document.getElementById("tree");
+const articleEl = document.getElementById("article");
+
+const uiState = {
+  expandedDirs: new Set(),
+  selectedId: null,
+};
+
+const readPageIdFromHash = () => {
+  const raw = window.location.hash.replace(/^#/, "");
+  if (!raw) {
+    return null;
+  }
+
+  const encoded = raw.startsWith("doc=") ? raw.slice(4) : raw;
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    return encoded;
+  }
+};
+
+const parseDocHashToId = (rawHash) => {
+  if (!rawHash) {
+    return null;
+  }
+
+  const raw = rawHash.replace(/^#/, "");
+  const encoded = raw.startsWith("doc=") ? raw.slice(4) : raw;
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    return encoded;
+  }
+};
+
+const writePageIdToHash = (id) => {
+  const nextHash = `#doc=${encodeURIComponent(id)}`;
+  if (window.location.hash !== nextHash) {
+    window.location.hash = nextHash;
+  }
+};
+
+const hasPage = (id) => state.pages.some((page) => page.id === id);
+
+const expandDirsForPageId = (id) => {
+  const segments = id.split("/");
+  segments.pop();
+
+  let key = "";
+  for (const segment of segments) {
+    key = key ? `${key}/${segment}` : segment;
+    uiState.expandedDirs.add(key);
+  }
+};
+
+const selectPage = (id, options = {}) => {
+  const { syncHash = false } = options;
+  if (!hasPage(id)) {
+    return;
+  }
+
+  uiState.selectedId = id;
+  expandDirsForPageId(id);
+  renderTree(state.tree);
+  renderArticle(id);
+
+  if (syncHash) {
+    writePageIdToHash(id);
+  }
+};
+
+const collectDirKeys = (nodes, parentKey = "", out = new Set()) => {
+  for (const node of nodes) {
+    if (node.type !== "dir") {
+      continue;
+    }
+
+    const key = parentKey ? `${parentKey}/${node.name}` : node.name;
+    out.add(key);
+    collectDirKeys(node.children || [], key, out);
+  }
+
+  return out;
+};
+
+const renderTree = (nodes) => {
+  const createList = (items, parentKey = "") => {
+    const ul = document.createElement("ul");
+
+    for (const item of items) {
+      const li = document.createElement("li");
+      const row = document.createElement("div");
+      row.className = "tree-row";
+
+      const marker = document.createElement("span");
+      marker.className = "tree-marker";
+      marker.textContent = "•";
+      row.appendChild(marker);
+
+      if (item.type === "dir") {
+        const dirKey = parentKey ? `${parentKey}/${item.name}` : item.name;
+        const isExpanded = uiState.expandedDirs.has(dirKey);
+
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "dir-toggle";
+        button.textContent = `${isExpanded ? "▾" : "▸"} ${item.name}`;
+        button.setAttribute("aria-expanded", String(isExpanded));
+        button.addEventListener("click", () => {
+          if (uiState.expandedDirs.has(dirKey)) {
+            uiState.expandedDirs.delete(dirKey);
+          } else {
+            uiState.expandedDirs.add(dirKey);
+          }
+          renderTree(state.tree);
+        });
+
+        const children = createList(item.children || [], dirKey);
+        children.hidden = !isExpanded;
+
+        row.appendChild(button);
+        li.appendChild(row);
+        li.appendChild(children);
+      } else {
+        const link = document.createElement("a");
+        link.href = "#";
+        link.textContent = item.name;
+        if (item.id === uiState.selectedId) {
+          link.classList.add("selected");
+          link.setAttribute("aria-current", "page");
+        }
+        link.addEventListener("click", (event) => {
+          event.preventDefault();
+          selectPage(item.id, { syncHash: true });
+        });
+        row.appendChild(link);
+        li.appendChild(row);
+      }
+
+      ul.appendChild(li);
+    }
+
+    return ul;
+  };
+
+  treeEl.replaceChildren(createList(nodes));
+};
+
+let state = { pages: [], tree: [] };
+
+const loadEmbeddedState = () => {
+  const dataEl = document.getElementById("doc-repo-data");
+  if (!dataEl || !dataEl.textContent) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(dataEl.textContent);
+  } catch {
+    return null;
+  }
+};
+
+const renderArticle = (id) => {
+  const page = state.pages.find((value) => value.id === id);
+  if (!page) {
+    articleEl.innerHTML = '<p class="muted">Document not found.</p>';
+    return;
+  }
+
+  articleEl.innerHTML = page.html;
+};
+
+const bindArticleInternalLinks = () => {
+  articleEl.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const anchor = target.closest("a");
+    if (!(anchor instanceof HTMLAnchorElement)) {
+      return;
+    }
+
+    const href = anchor.getAttribute("href");
+    if (!href?.startsWith("#doc=")) {
+      return;
+    }
+
+    // 生成時に実在ページと突き合わせ済みの #doc= リンクのみを内部遷移として扱う。
+    const docId = parseDocHashToId(href);
+    if (!docId || !hasPage(docId)) {
+      return;
+    }
+
+    event.preventDefault();
+    selectPage(docId, { syncHash: true });
+  });
+};
+
+const bootstrap = async () => {
+  const embedded = loadEmbeddedState();
+  if (embedded) {
+    state = embedded;
+  } else {
+    const response = await fetch("./content.json");
+    state = await response.json();
+  }
+
+  if (state.pages[0]) {
+    bindArticleInternalLinks();
+    uiState.expandedDirs = collectDirKeys(state.tree);
+    const hashPageId = readPageIdFromHash();
+    if (hashPageId && hasPage(hashPageId)) {
+      selectPage(hashPageId);
+    } else {
+      selectPage(state.pages[0].id, { syncHash: true });
+    }
+
+    window.addEventListener("hashchange", () => {
+      const nextId = readPageIdFromHash();
+      if (!nextId || nextId === uiState.selectedId || !hasPage(nextId)) {
+        return;
+      }
+      selectPage(nextId);
+    });
+  } else {
+    articleEl.innerHTML = '<p class="muted">No Markdown files found.</p>';
+  }
+};
+
+bootstrap().catch((error) => {
+  articleEl.innerHTML = `<p class="muted">Failed to load site data: ${String(error)}</p>`;
+});

package/templates/page.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="ja">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__TITLE__</title>
+    <link rel="stylesheet" href="__STYLES_HREF__" />
+</head>
+
+<body>
+    <div class="layout">
+        <aside class="sidebar">
+            <h1><a href="__HOME_HREF__">Doc Repo</a></h1>
+            <nav id="tree">__SIDEBAR__</nav>
+        </aside>
+        <main class="content">
+            <article id="article">__ARTICLE__</article>
+        </main>
+    </div>
+</body>
+
+</html>

package/templates/styles.css

@@ -0,0 +1,157 @@
+:root {
+  --bg: #f4f7f2;
+  --panel: #ffffff;
+  --line: #d8dfd2;
+  --ink: #1f2a1f;
+  --muted: #5a6758;
+  --accent: #2f6f4f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
+  background: linear-gradient(135deg, #f4f7f2 0%, #edf3ea 100%);
+  color: var(--ink);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  min-height: 100vh;
+}
+
+.sidebar {
+  border-right: 1px solid var(--line);
+  padding: 20px;
+  background: var(--panel);
+}
+
+.sidebar h1 {
+  margin: 0 0 16px;
+  font-size: 18px;
+}
+
+.sidebar h1 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.sidebar a {
+  color: var(--accent);
+  text-decoration: none;
+  display: block;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.sidebar a.selected {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.sidebar summary {
+  cursor: pointer;
+  color: var(--ink);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.sidebar summary:hover {
+  color: var(--accent);
+}
+
+.sidebar ul {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.sidebar ul ul {
+  padding-left: 1.15rem;
+}
+
+.sidebar details > ul {
+  padding-left: 1.15rem;
+}
+
+.sidebar li {
+  margin: 0.2rem 0;
+}
+
+.content {
+  padding: 24px;
+}
+
+.content article {
+  max-width: 1120px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 24px;
+}
+
+.content article img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem 0;
+  border-radius: 8px;
+  border: 1px solid #dbe3d6;
+}
+
+.content article blockquote {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 4px solid var(--accent);
+  background: #f3f7f2;
+  color: #324233;
+}
+
+.content article blockquote p {
+  margin: 0.25rem 0;
+}
+
+.content article pre {
+  margin: 1rem 0;
+  padding: 1rem;
+  overflow-x: auto;
+  border-radius: 10px;
+  border: 1px solid #2d3a31;
+  background: #1f2823;
+}
+
+.content article pre code {
+  color: #e9f2ec;
+  background: transparent;
+  padding: 0;
+}
+
+.content article :not(pre) > code {
+  background: #edf2ed;
+  border: 1px solid #d8e1d8;
+  border-radius: 6px;
+  padding: 0.12rem 0.35rem;
+  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
+  font-size: 0.92em;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--line);
+  }
+}