Skip to content

Commit 2e1b324

Browse files
ChenZiHong-GavinChenZiHong-Gavin
committed
fix: fix paper2novel
1 parent 7c6ca6a commit 2e1b324

File tree

7 files changed

+755
-255
lines changed

7 files changed

+755
-255
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
<img width="400" alt="image" src="https://github.com/user-attachments/assets/f31b65ec-d6db-40aa-b0d0-bb3f24053559" />
7777

7878

79-
6. **[PaperNovel](https://chenzihong-gavin.github.io/weekly-vibe-coding/arxiv-to-novel/)** (`apps/arxiv-to-novel`)
79+
6. **[Paper2Novel](https://chenzihong-gavin.github.io/weekly-vibe-coding/arxiv-to-novel/)** (`apps/arxiv-to-novel`)
8080
- 将任意 arXiv 学术论文转化为引人入胜的小说，支持 10 种文学风格。
8181

8282
### 专题二：手势交互

‎apps/arxiv-to-novel/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 📖 PaperNovel — 将 arXiv 论文变成小说
1+
# 📖 Paper2Novel — 将 arXiv 论文变成小说
22

33
将任意 arXiv 学术论文转化为引人入胜的小说，支持 10 种文学风格。**纯前端实现，无需后端服务器。**
44

‎apps/arxiv-to-novel/app.js‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* PaperNovel – Pure Frontend
2+
* Paper2Novel – Pure Frontend
33
* No backend needed. All logic runs in the browser:
44
* 1. Fetch paper from ar5iv (HTML) or arXiv API (metadata)
55
* 2. Chunk text by character/paragraph boundaries
@@ -635,18 +635,42 @@ function renderNovelText(text) {
635635
.replace(/\n/g, "<br>");
636636

637637
const noteHtml = note ? `<div class="novel-note">${note}</div>` : "";
638-
const blockClass = note ? "novel-block" : "novel-block no-note";
638+
639+
// Add toggle button if note exists
640+
const toggleBtn = note ? `<button class="note-toggle" aria-label="查看注释">💡</button>` : "";
639641

640642
html += `
641-
<div class="${blockClass}">
642-
<div class="novel-text">${content}</div>
643+
<div class="novel-block">
644+
<div class="novel-text">${content}${toggleBtn}</div>
643645
${noteHtml}
644646
</div>`;
645647
}
646648

647649
return html;
648650
}
649651

652+
// ── Event Delegation for Notes ─────────────────────────
653+
document.addEventListener("click", (e) => {
654+
const btn = e.target.closest(".note-toggle");
655+
if (!btn) return;
656+
657+
// Prevent default button behavior
658+
e.preventDefault();
659+
e.stopPropagation();
660+
661+
// Toggle active state on button
662+
btn.classList.toggle("active");
663+
664+
// Find the note (it should be in the parent .novel-block, next to .novel-text)
665+
const block = btn.closest(".novel-block");
666+
if (block) {
667+
const note = block.querySelector(".novel-note");
668+
if (note) {
669+
note.classList.toggle("visible");
670+
}
671+
}
672+
});
673+
650674
function copyNovel() {
651675
const content = document.getElementById("novelContent");
652676
const text = content.innerText;
@@ -714,7 +738,7 @@ function renderDemoChapter(index) {
714738

715739
// Check for special formatting
716740
if (text.startsWith("<strong")) {
717-
html += `<div class="novel-block no-note"><div class="novel-text" style="text-indent:0">${text}</div></div>`;
741+
html += `<div class="novel-block"><div class="novel-text" style="text-indent:0">${text}</div></div>`;
718742
} else if (text.startsWith("——")) {
719743
html += `<div class="demo-separator">${text}</div>`;
720744
} else {
@@ -724,11 +748,11 @@ function renderDemoChapter(index) {
724748
.replace(/\*(.+?)\*/g, "<em>$1</em>");
725749

726750
const noteHtml = note ? `<div class="novel-note">${note}</div>` : "";
727-
const blockClass = note ? "novel-block" : "novel-block no-note";
751+
const toggleBtn = note ? `<button class="note-toggle" aria-label="查看注释">💡</button>` : "";
728752

729753
html += `
730-
<div class="${blockClass}">
731-
<div class="novel-text">${processed}</div>
754+
<div class="novel-block">
755+
<div class="novel-text">${processed}${toggleBtn}</div>
732756
${noteHtml}
733757
</div>`;
734758
}

‎apps/arxiv-to-novel/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>PaperNovel — 将 arXiv 论文变成小说</title>
6+
<title>Paper2Novel — 将 arXiv 论文变成小说</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
99
<link rel="stylesheet" href="style.css">
@@ -14,7 +14,7 @@
1414
<div class="nav-inner">
1515
<a href="#" class="logo">
1616
<span class="logo-icon">📖</span>
17-
<span class="logo-text">PaperNovel</span>
17+
<span class="logo-text">Paper2Novel</span>
1818
</a>
1919
<div class="nav-links">
2020
<a href="#how">工作原理</a>
@@ -59,7 +59,7 @@ <h3>⚙️ API 设置</h3>
5959

6060
<!-- ═══════ HERO ═══════ -->
6161
<header class="hero">
62-
<div class="hero-badge">✨ 纯前端 · 无需后端 · AI 驱动的论文小说化</div>
62+
<div class="hero-badge">✨ AI 驱动的论文小说化</div>
6363
<h1>把枯燥的 <span class="gradient-text">arXiv 论文</span><br>变成引人入胜的小说</h1>
6464
<p class="hero-sub">粘贴一个 arXiv 链接，选择你喜欢的文学风格，AI 会将学术论文改写为一部完整的小说 —— 保留所有知识点，但妙趣横生。全程运行在你的浏览器中，数据不经过任何中间服务器。</p>
6565
<div class="hero-actions">
@@ -179,7 +179,7 @@ <h3 class="demo-book-title">注意力法则</h3>
179179
<div class="demo-book-divider"></div>
180180
<p class="demo-book-meta">🚀 科幻 · 6 章 · 约 8000 字</p>
181181
<p class="demo-book-author">原作：Vaswani, Shazeer, Parmar et al.</p>
182-
<p class="demo-book-author">AI 改写 · PaperNovel</p>
182+
<p class="demo-book-author">AI 改写 · Paper2Novel</p>
183183
</div>
184184
<div class="demo-toc">
185185
<h4>目录</h4>
@@ -303,7 +303,7 @@ <h2>准备好让论文活起来了吗？</h2>
303303
<div class="footer-inner">
304304
<div class="footer-brand">
305305
<span class="logo-icon">📖</span>
306-
<span class="logo-text">PaperNovel</span>
306+
<span class="logo-text">Paper2Novel</span>
307307
<p>让每一篇论文都值得睡前阅读。</p>
308308
</div>
309309
<div class="footer-links">
@@ -321,7 +321,7 @@ <h4>资源</h4>
321321
</div>
322322
</div>
323323
<div class="footer-bottom">
324-
<p>© 2024 PaperNovel · Made with ❤️ and AI · 纯前端，无需后端</p>
324+
<p>© 2024 Paper2Novel · Made with ❤️ and AI · 纯前端，无需后端</p>
325325
</div>
326326
</footer>
327327

0 commit comments

Comments
 (0)
⚡