@open330/kiwimu 0.4.1 → 0.7.1

package/bin/kiwimu

@@ -1,2 +1,2 @@
 #!/usr/bin/env bun
-await import("../src/index.ts");
+import "../src/index.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open330/kiwimu",
-  "version": "0.4.1",
+  "version": "0.7.1",
   "description": "Turn textbooks, PDFs, and web content into your own interlinked learning wiki powered by LLM",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "files": [
     "bin/**/*",
     "src/**/*",
+    "personas/**/*",
     "assets/**/*",
     "README.md",
     "LICENSE"
@@ -48,6 +49,7 @@
     "mammoth": "^1.12.0",
     "marked": "^15.0.0",
     "pdf-parse": "1.1.1",
+    "sanitize-html": "^2.17.2",
     "smol-toml": "^1.3.1",
     "turndown": "^7.2.0"
   },
@@ -58,6 +60,7 @@
   "devDependencies": {
     "@types/bun": "latest",
     "@types/pdf-parse": "^1.1.5",
+    "@types/sanitize-html": "^2.16.1",
     "@types/turndown": "^5.0.5"
   }
 }

package/personas/namuwiki.json

@@ -0,0 +1,6 @@
+{
+  "name": "나무위키",
+  "description": "나무위키 특유의 문체와 스타일로 문서를 작성합니다",
+  "system_prompt": "당신은 나무위키 스타일의 위키 편집자입니다. 다음 특징을 반드시 지켜주세요:\n\n1. **문체**: 해요체(~입니다/~합니다)를 기본으로 하되, 가끔 반말(~이다/~한다)을 섞어 사용\n2. **유머**: 적절한 곳에 ~~취소선 드립~~, (괄호 안의 부연설명), [1] 각주 스타일의 코멘트를 삽입\n3. **강조**: 중요한 키워드는 **굵게** 처리하고, 핵심 개념은 반복 강조\n4. **서술 톤**: 백과사전적이면서도 친근한 톤. \"~라고 한다\", \"~라고 카더라\" 등의 표현 활용\n5. **구조**: 목차가 잘 정리된 체계적 구조. 소제목을 적극 활용\n6. **부가 정보**: \"여담으로~\", \"참고로~\", \"사실~\" 등의 표현으로 부가 정보 추가\n7. **링크**: 관련 개념에 적극적으로 [[위키 링크]]를 사용\n\n절대 딱딱한 교과서 문체로 쓰지 마세요. 읽는 사람이 재미있게 학습할 수 있도록 작성해주세요.",
+  "content_style": "Write in Korean 나무위키 style:\n- Use 해요체 with occasional 반말 mix\n- Add ~~strikethrough humor~~ and (parenthetical asides)\n- Bold **key terms** generously\n- Use phrases like \"~라고 한다\", \"여담으로~\", \"참고로~\"\n- Be encyclopedic yet friendly and entertaining\n- Structure with clear subsections\n- Use [[wiki links]] actively for related concepts"
+}

package/src/build/renderer.ts

@@ -1,10 +1,11 @@
 import { mkdirSync, rmSync, cpSync, existsSync } from "fs";
 import { join, dirname } from "path";
 import { marked } from "marked";
+import sanitizeHtml from "sanitize-html";
 import type { KiwiConfig } from "../config";
 import type { Store } from "../store";
 import { buildGraphData } from "../pipeline/graph";
-import { renderPage, renderIndex, renderGraph } from "./templates";
+import { renderPage, renderIndex, renderGraph, renderQuizPage } from "./templates";
 
 // Fix internal wiki links: /wiki/slug → /wiki/slug.html
 function fixWikiLinks(html: string): string {
@@ -68,14 +69,28 @@ export async function buildSite(store: Store, config: KiwiConfig, projectRoot: s
   const sourcePages = store.listSourcePages();
   const conceptPages = store.listConceptPages();
   const wikiName = config.project.name;
+  const backlinksMap = store.getAllBacklinksGrouped();
 
   for (const page of pages) {
     let htmlContent = await marked(page.content);
+    htmlContent = sanitizeHtml(htmlContent, {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+        'img', 'details', 'summary', 'kbd', 'del', 's', 'sup', 'sub',
+        'span', 'div', 'section', 'figure', 'figcaption', 'mark'
+      ]),
+      allowedAttributes: {
+        ...sanitizeHtml.defaults.allowedAttributes,
+        '*': ['id', 'class', 'style'],
+        'img': ['src', 'alt', 'title', 'width', 'height'],
+        'a': ['href', 'title', 'target', 'rel'],
+      },
+      allowedSchemes: ['http', 'https', 'mailto'],
+    });
     htmlContent = fixWikiLinks(htmlContent);
 
     const { body, externalRefs } = extractExternalRefs(htmlContent);
     const toc = generateToc(page.content);
-    const backlinks = store.getBacklinks(page.id).map((bl) => ({
+    const backlinks = (backlinksMap.get(page.id) || []).map((bl) => ({
       slug: bl.slug,
       title: bl.title,
       pageType: bl.page_type,
@@ -116,6 +131,38 @@ export async function buildSite(store: Store, config: KiwiConfig, projectRoot: s
     })
   );
 
+  // Quiz page
+  const quizzes = store.getAllQuizzes();
+  await Bun.write(
+    join(outputDir, "quiz.html"),
+    renderQuizPage({
+      wikiName,
+      quizzes: quizzes.map((q) => ({
+        id: q.id,
+        question: q.question,
+        answer: q.answer,
+        quiz_type: q.quiz_type,
+        page_title: q.page_title,
+        page_slug: q.page_slug,
+      })),
+      sourcePages: sourcePages.map((p) => ({ slug: p.slug, title: p.title })),
+      conceptPages: conceptPages.map((p) => ({ slug: p.slug, title: p.title })),
+    })
+  );
+
+  // Random page redirect
+  mkdirSync(join(wikiDir), { recursive: true });
+  await Bun.write(
+    join(wikiDir, "random.html"),
+    `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>임의 문서</title></head><body><script>
+fetch('/search-index.json').then(r=>r.json()).then(pages=>{
+  const p = pages[Math.floor(Math.random()*pages.length)];
+  if(p) location.href='/wiki/'+p.slug+'.html';
+  else location.href='/';
+});
+</script></body></html>`
+  );
+
   const searchData = pages.map((p) => ({
     slug: p.slug,
     title: p.title,

package/src/build/static/search.js

@@ -5,6 +5,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (!input || !dropdown) return;
 
     let searchData = [];
+    let selectedIndex = -1;
     try {
         const resp = await fetch("/search-index.json");
         searchData = await resp.json();
@@ -12,6 +13,12 @@ document.addEventListener("DOMContentLoaded", async () => {
         return;
     }
 
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
     function fuzzyMatch(query, text) {
         query = query.toLowerCase();
         text = text.toLowerCase();
@@ -31,6 +38,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
 
     input.addEventListener("input", () => {
+        selectedIndex = -1;
         const results = search(input.value);
         if (results.length === 0) {
             dropdown.classList.remove("active");
@@ -39,8 +47,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         dropdown.innerHTML = results.map(r =>
             `<a href="/wiki/${r.slug}.html">
-                <strong>${r.title}</strong>
-                <div style="font-size:12px;color:#6c757d;margin-top:2px;">${r.preview.slice(0, 80)}...</div>
+                <strong>${escapeHtml(r.title)}</strong>
+                <div style="font-size:12px;color:#6c757d;margin-top:2px;">${escapeHtml(r.preview.slice(0, 80))}...</div>
             </a>`
         ).join("");
         dropdown.classList.add("active");
@@ -61,6 +69,29 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (e.key === "Escape") {
             dropdown.classList.remove("active");
             input.blur();
+        } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            const items = dropdown.querySelectorAll("a");
+            selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
+            items.forEach((a, i) => a.classList.toggle("selected", i === selectedIndex));
+            items[selectedIndex]?.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            const items = dropdown.querySelectorAll("a");
+            selectedIndex = Math.max(selectedIndex - 1, 0);
+            items.forEach((a, i) => a.classList.toggle("selected", i === selectedIndex));
+        } else if (e.key === "Enter" && selectedIndex >= 0) {
+            e.preventDefault();
+            dropdown.querySelectorAll("a")[selectedIndex]?.click();
+        }
+    });
+
+    // Global "/" shortcut to focus search
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+        if (e.key === '/') {
+            e.preventDefault();
+            input.focus();
         }
     });
 });

package/src/build/static/style.css

@@ -24,10 +24,18 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    border-radius: 0; /* Enforce sharp flat edges everywhere */
     box-shadow: none; /* Enforce no shadows */
 }
 
+/* Targeted border-radius reset for kiwimu elements only */
+.topbar, .sidebar, .content, .page-card, .toc-box,
+.search-dropdown, .backlinks li a, .stat-card, .quick-link,
+.file-drop, .add-form input, .add-form button,
+.config-card, .badge, .page-type-badge, .page-body table,
+.page-body blockquote, .page-body pre {
+    border-radius: 0;
+}
+
 body {
     font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
     color: var(--text);
@@ -137,6 +145,10 @@ a:hover {
     text-decoration: none;
 }
 
+.search-dropdown a.selected {
+    background: var(--accent-light);
+}
+
 .search-dropdown .search-highlight {
     color: var(--namu-green);
     font-weight: 600;
@@ -527,6 +539,16 @@ a:hover {
     margin-bottom: 28px;
 }
 
+.empty-state {
+    grid-column: 1 / -1;
+    padding: 32px;
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 14px;
+    border: 2px dashed var(--border);
+    margin: 8px 0;
+}
+
 .page-card {
     display: block;
     padding: 10px 14px;
@@ -946,11 +968,49 @@ h4 .headerlink {
     background: var(--namu-green);
 }
 
+/* Hamburger menu button */
+.topbar-menu-btn {
+    display: none;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 22px;
+    cursor: pointer;
+    padding: 0 8px;
+}
+
+/* Sidebar overlay */
+.sidebar-overlay {
+    display: none;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
+    .topbar-menu-btn { display: flex; align-items: center; }
+
     .sidebar {
+        position: fixed;
+        left: -260px;
+        top: 46px;
+        bottom: 0;
+        width: 260px;
+        z-index: 99;
+        transition: left 0.25s ease;
+        background: var(--bg);
+        display: block !important;
+    }
+    .sidebar.open { left: 0; }
+
+    .sidebar-overlay {
         display: none;
+        position: fixed;
+        inset: 0;
+        top: 46px;
+        background: rgba(0,0,0,0.4);
+        z-index: 98;
     }
+    .sidebar-overlay.active { display: block; }
+
     .content {
         margin-left: 0;
         padding: 16px 14px;
@@ -958,4 +1018,27 @@ h4 .headerlink {
     .topbar-search {
         max-width: 180px;
     }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #1a1a2e;
+        --bg-alt: #16213e;
+        --bg-hover: #0f3460;
+        --text: #e0e0e0;
+        --text-muted: #8e8e8e;
+        --text-dark: #ffffff;
+        --border: #2a2a4a;
+        --accent-light: #1a3a3a;
+        --namu-green: #00b4a6;
+        --namu-green-dark: #008c7e;
+    }
+
+    .topbar { background: #004d40; }
+    .page-body h2 { background: #006050; }
+    .page-card { background: var(--bg-alt); }
+    .toc-box { background: var(--bg-alt); }
+    .sidebar { background: var(--bg); border-right-color: var(--border); }
+    img { opacity: 0.9; }
 }