archive-bookshelf

Community@yuanzi/archive-bookshelf
Community skill — not reviewed. It was shared by 元子 and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: archive-bookshelf. Run `npx -y @neta-art/neta-search-cli@latest skills use @yuanzi/archive-bookshelf --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @yuanzi/archive-bookshelf
Summary

Turn stories and chapters into a 3D bookshelf site with a paper-style reading app.

  • Drag to browse books shown as 3D spines on a shelf; the centered book pulls forward showing its full cover.
  • Each book opens to a reader with table of contents, night mode, font controls, and reading progress that syncs back to the shelf.
  • Works best with novels, serials, or forum threads split into chapters; single-page works can link out instead.
  • The site is a standalone web page you can publish directly, with archive-style typography and paper tones.
  • Automatically generates covers for books without images, in rotating colors with the title printed on paper.
SKILL.md
# archive-bookshelf · 档案式立体书柜

把「一本一本的内容」做成一个可以拖动挑书的立体书架首页，加上每本书的纸面阅读器。产物是纯静态网页（HTML/CSS/JS，无依赖），手机和桌面都能用，可以直接发布成 Web Work。

视觉：奶白纸面 + 黑白档案排版（`01 / CATALOG`、`NO.001`、`WK-00001` 编号），书架是斜投影书盒——书脊竖排书名、顶盖、侧面封面；拖动时书沿弧形书道滑动，居中那本向前抽出升起，露出整张封面。

## 你会得到

- `index.html` 书柜首页
  - 立体书架：手指/鼠标拖动、甩动带惯性并吸附，滚轮、方向键、‹ › 按钮；点旁边的书会滑到中间，点中间那本打开
  - 书本首尾循环成一整排；进场时书从后往前依次入架
  - 选中那本的详情：封面、简介、进度、开始/继续阅读、额外链接、章节直达（宽屏在右侧，手机在下方）
  - 「继续阅读」行、索引列表、搜索、外观（跟随系统/纸白/夜间）、减少动效
- `<slug>/index.html` 每本书的阅读器
  - 顶栏书名 + 档案编号、目录抽屉（含每章楼层区间）、上一/下一章、字号滑杆、行距、宋体/黑体、纸白/米黄/护眼绿/夜间
  - 阅读位置记忆，进度同步回书柜
  - 普通正文排成首行缩进书页；论坛体（`### 3楼｜楼主`）自动变成楼层，楼主有黑色书脊线和徽标，可「只看楼主」
- `covers/`：用户给的封面图；没有封面就自动生成档案风纸面封面（黑/赭/靛/墨绿…轮换）

## 步骤

1. **收集书目**。和用户确认要上架哪些书。每本书至少要有书名；最好有作者、状态（连载中/已完结…）、分组、一句话简介、封面、章节。没有章节的书也能上架，点开会跳到 `href`。
2. **写章节 Markdown**（每章一个文件）：
   - 第一行 `# 章节标题`
   - 普通段落一行一段；`## 小标题` 可分节
   - `> 说明` 会折叠进「说明」小框（适合放来源、转写说明）
   - 论坛体：`### 主楼｜楼主`、`### 1楼`、`### 3楼｜楼主`……（`｜楼主`、`|OP` 标记楼主）
3. **写 `books.json`**，格式见 `examples/books.example.json`：

   ```json
   {
     "site": {"title": "我的书柜", "subtitle": "READING ARCHIVE", "mark": "书", "heading": "最近更新", "footer": "页脚一句话"},
     "books": [
       {"slug": "moon-route", "title": "月光航线", "author": "林见舟", "status": "连载中", "group": "长篇连载",
        "desc": "一句话简介", "cover": "covers/moon.jpg",
        "chapters": ["chapters/moon-01.md", {"file": "chapters/moon-02.md", "title": "可覆盖标题", "meta": "副标题"}],
        "links": [{"label": "原图对照", "href": "https://..."}]},
       {"title": "没有章节的书", "href": "https://..."}
     ]
   }
   ```

   - `slug` 可省（自动生成）；`short` 是书脊上的短书名（书脊只显示约 7 个字，长书名建议给 short）
   - `cover` 是相对 `books.json` 的路径或 http(s) 链接；留空就生成纸面封面
   - 书的顺序就是书架顺序和 `NO.` 编号
4. **构建**（只需 Python 3 标准库）：

   ```bash
   python3 <本 skill 目录>/scripts/build.py path/to/books.json -o path/to/site
   ```

   本 skill 目录可用 `npx -y @neta-art/neta-search-cli@latest skills use archive-bookshelf` 查到。
5. **检查**：用浏览器（或 `python3 -m http.server`）打开 `site/index.html`，手机宽度（390px）和桌面宽度各看一次：拖动书架、点书居中、点中间那本打开、目录、翻章、夜间。
6. **发布**（在 Cohub 里）：`cohub apps publish <slug> --dir path/to/site --json`。公开还是仅空间可见，先问用户。

## 自定义

- 配色、字号：`template/shelf.css`（书柜）、`template/reader.css`（阅读器）开头的 CSS 变量
- 书架几何：`template/shelf.js` 里的 `geometry()`、`DX/DY`（投影角度）、`RADIUS`（抽出波峰宽度）
- 首页结构：`template/index.html`（`{{...}}` 由 build.py 填入）
- 进度存在浏览器 `localStorage`：`archive-shelf-progress`（书柜）、`archive-reader:<slug>`（阅读器）

## 注意

- 只上架用户有权展示的内容。转载别人的作品时，在简介、`> 说明` 或 `links` 里保留来源署名；AI 续写要在章节里明确标注。
- 封面图如果是 AI 生成的，提醒用户在页脚写明「封面为示意」。
- 书多时（几十本）书架照样能用；没有封面的书会用生成封面，不会出现空白。
- 立体书架的视觉与交互参考开源项目 mikufoxxx/Wenku8_Flutter（轻小说文库 Flutter 客户端），本 skill 的网页代码为独立实现，见 `NOTICE.md`。