now-reading-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

You are generating a beautiful standalone HTML page showing what the user is currently reading and has recently read. The output is a single HTML file they can open in a browser or host on their personal site.

你要生成一个美观的独立HTML页面，展示用户当前正在阅读以及近期已阅读的内容。输出结果是一个单独的HTML文件，用户可以在浏览器中打开，也可以部署到个人网站上。

Readwise Access

Readwise 访问权限

Check if Readwise MCP tools are available (e.g.

mcp__readwise__reader_list_documents

). If they are, use them throughout (and pass this context to the subagent). If not, use the equivalent

readwise

CLI commands instead (e.g.

readwise list

readwise read <id>

). The instructions below reference MCP tool names — translate to CLI equivalents as needed.

检查Readwise MCP工具是否可用（例如

mcp__readwise__reader_list_documents

）。如果可用，则全程使用这些工具（并将此上下文传递给子代理）。如果不可用，则使用等效的

readwise

CLI命令替代（例如

readwise list

、

readwise read <id>

）。以下说明中引用的是MCP工具名称——必要时请转换为对应的CLI命令。

Process

流程

Launch a Task subagent to fetch all the data and generate the HTML file. The subagent should:

启动一个任务子代理来获取所有数据并生成HTML文件。子代理应执行以下操作：

1. Fetch Data

1. 获取数据

Run ALL of these in parallel:

Shortlist:

mcp__readwise__reader_list_documents

with

location="shortlist"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

Later:

mcp__readwise__reader_list_documents

with

location="later"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

Inbox:

mcp__readwise__reader_list_documents

with

location="new"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

Archive page 1:

mcp__readwise__reader_list_documents

with

location="archive"

limit=50

response_fields=["title", "author", "category", "reading_progress", "last_opened_at", "image", "url", "site_name", "saved_at", "word_count"]

并行运行以下所有操作：

当前阅读候选列表（Shortlist）： 使用

mcp__readwise__reader_list_documents

，参数为

location="shortlist"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

稍后阅读（Later）： 使用

mcp__readwise__reader_list_documents

，参数为

location="later"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

收件箱（Inbox）： 使用

mcp__readwise__reader_list_documents

，参数为

location="new"

limit=50

response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"]

归档第一页： 使用

mcp__readwise__reader_list_documents

，参数为

location="archive"

limit=50

response_fields=["title", "author", "category", "reading_progress", "last_opened_at", "image", "url", "site_name", "saved_at", "word_count"]

2. Paginate Archive Deeply

2. 深度分页获取归档内容

After the first archive fetch, use

nextPageCursor

to keep fetching more pages (limit=50 each). Fetch at least 6 more pages (~350 total docs) so the heatmap covers 6 months of reading activity. Keep paginating until the oldest

last_opened_at

is 6+ months ago OR pages are exhausted.

首次获取归档内容后，使用

nextPageCursor

继续获取更多页面（每页限制50条）。至少再获取6页（总计约350条文档），以便热力图可以覆盖6个月的阅读活动。持续分页，直到最早的

last_opened_at

日期距今超过6个月，或者没有更多页面为止。

3. Categorize

3. 分类整理

From the fetched data, build two lists:

Currently Reading: Items from shortlist, later, or inbox where
```
reading_progress
```
is between 0.05 and 0.99 (started but not finished). Sort by
```
last_opened_at
```
descending.
Recently Read: Items from archive where
```
reading_progress
```
> 0.9 (actually finished). Sort by
```
last_opened_at
```
descending. Group by month. Show as many months as the data covers.

Also collect ALL

last_opened_at

dates from archive items with

reading_progress > 0.9

for the heatmap.

There is no "Up Next" section. Only show things the user is reading or has read.

从获取的数据中构建两个列表：

当前阅读中： 来自候选列表、稍后阅读或收件箱的条目，其中
```
reading_progress
```
介于0.05到0.99之间（已开始但未完成）。按
```
last_opened_at
```
降序排序。
近期已阅读： 来自归档的条目，其中
```
reading_progress
```
>0.9（已实际完成）。按
```
last_opened_at
```
降序排序。按月份分组，展示数据覆盖的所有月份。

另外，收集归档条目中所有

reading_progress

>0.9的

last_opened_at

日期，用于生成热力图。

不设置「待读下一项（Up Next）」板块，仅展示用户正在阅读或已阅读的内容。

4. Generate HTML

4. 生成HTML

Create a

now-reading/

directory in the current working directory (if it doesn't exist) and write the HTML file to

now-reading/index.html

Design direction: Warm, sepia-toned, editorial. Think personal reading log, not media dashboard.

Fonts: Google Fonts — Newsreader (serif, for headings) + DM Sans (sans, for body). Include via

<link>

tag.

Color palette (CSS variables):

--bg: #f6f1eb          (warm parchment background)
--surface: #ede6dc     (card/heatmap empty cell background)
--surface-hover: #e4dbd0
--border: #d9d0c4
--text: #4a4239        (main body text)
--text-muted: #8a7e72
--text-dim: #b0a597
--heading: #2c251e
--accent: #a0724a      (warm brown — progress bars, active states)
--accent-dim: rgba(160, 114, 74, 0.12)

Layout: Max-width 760px, centered. Responsive.

Sections in order:

Header: "What I'm reading" in Newsreader, light weight, large. Subtitle: "Powered by Readwise Reader" with accent-colored link.
Currently Reading — section label in small caps. Gallery of cards using CSS grid (
```
repeat(auto-fill, minmax(160px, 1fr))
```
) so they fill the container. Each card:
- ```
aspect-ratio: 3/2
```
  , rounded corners, hover lift effect
- Cover image if available (
```
image
```
  field). Gradient placeholder if not (hash title → hue).
- Dark gradient overlay at bottom with white title + author
- Progress bar at card bottom: 5px tall track (dark semi-transparent) with accent-colored fill
- Cards link to the Reader URL
Reading Activity — GitHub-style heatmap filling full container width. Use CSS flex with
```
flex: 1
```
on weeks and cells so it stretches. Warm amber color scale (
```
rgba(160, 114, 74, 0.2/0.4/0.65/1.0)
```
). Month labels above, day-of-week labels (Mon/Wed/Fri) on left. Show 6 months.
Recently Read — Category filter pills (All, Articles, Books, Tweets, RSS, Email) with JS toggle. Then entries grouped by month (e.g., "FEBRUARY 2026" in small caps). Each entry as a row:
- Date on left (tabular nums, muted)
- Category emoji (📄 article, 📚 book, 🐦 tweet, 📰 rss, ✉️ email, 🎬 video, 🎙 podcast, 📑 pdf)
- Title (linked, medium weight) + author/source (dim, smaller)

Styling notes:

All CSS in a
```
<style>
```
tag with CSS variables
Subtle page-load fade-up animation on sections
Divider lines between sections (
```
1px solid var(--border)
```
)
Responsive: 2-column card grid on mobile

在当前工作目录中创建

now-reading/

目录（如果不存在），并将HTML文件写入

now-reading/index.html

。

设计方向： 温暖的深褐色调，编辑风格。打造个人阅读日志，而非媒体控制面板。

字体： 使用Google Fonts——Newsreader（衬线字体，用于标题）+ DM Sans（无衬线字体，用于正文）。通过

<link>

标签引入。

配色方案（CSS变量）：

--bg: #f6f1eb          (温暖的羊皮纸背景色)
--surface: #ede6dc     (卡片/热力图空单元格背景色)
--surface-hover: #e4dbd0
--border: #d9d0c4
--text: #4a4239        (正文主文本色)
--text-muted: #8a7e72
--text-dim: #b0a597
--heading: #2c251e
--accent: #a0724a      (温暖棕色——进度条、激活状态)
--accent-dim: rgba(160, 114, 74, 0.12)

布局： 最大宽度760px，居中对齐，响应式设计。

板块顺序：

页头： 标题使用Newsreader字体，轻量字重，大字号，内容为「我正在阅读的内容」。副标题：「由Readwise Reader提供支持」，并附带强调色的链接。
当前阅读中 —— 板块标签使用小型大写字母。使用CSS网格（
```
repeat(auto-fill, minmax(160px, 1fr))
```
）实现卡片画廊布局，使其填满容器。每张卡片：
- 宽高比3/2，圆角，hover时的抬起效果
- 若有封面图则使用
```
image
```
  字段的图片；若无则使用渐变占位符（根据标题哈希值生成色调）
- 底部添加深色渐变遮罩，搭配白色标题和作者名
- 卡片底部的进度条：5px高的轨道（半透明深色），填充色为强调色
- 卡片链接到Reader的对应URL
阅读活动 —— GitHub风格的热力图，填满容器宽度。使用CSS Flex布局，给周和单元格设置
```
flex: 1
```
以实现拉伸效果。采用温暖的琥珀色渐变（
```
rgba(160, 114, 74, 0.2/0.4/0.65/1.0)
```
）。上方显示月份标签，左侧显示星期标签（周一/周三/周五）。展示6个月的数据。
近期已阅读 —— 带有JS切换功能的分类筛选按钮（全部、文章、书籍、推文、RSS、邮件）。然后按月份分组展示条目（例如，「2026年2月」使用小型大写字母）。每个条目为一行：
- 左侧显示日期（等宽数字，弱化显示）
- 分类表情符号（📄 文章、📚 书籍、🐦 推文、📰 RSS、✉️ 邮件、🎬 视频、🎙 播客、📑 PDF）
- 标题（带链接，中等字重）+ 作者/来源（弱化显示，字号更小）

样式说明：

所有CSS样式写在
```
<style>
```
标签内，使用CSS变量
板块添加页面加载时的淡入上移动画
板块之间添加分隔线（
```
1px solid var(--border)
```
）
响应式设计：移动端使用2列卡片网格

5. Return

5. 返回结果

Return the absolute path to the generated HTML file and a summary: how many currently reading, how many recently read, date range of activity data.

返回生成的HTML文件的绝对路径，以及一份摘要：当前阅读中的条目数量、近期已阅读的条目数量、活动数据的日期范围。

After Subagent Returns

子代理返回结果后

Tell the user the file was generated and where it is
Offer to open it in their browser:
```
open now-reading/index.html
```
Ask if they want to adjust anything

告知用户文件已生成，并说明文件位置
主动提出帮用户在浏览器中打开文件：
```
open now-reading/index.html
```
询问用户是否需要调整任何内容