橘鸦 AI 日报前端 (juya-daily) 研究计划
notes/digests/juya-daily-research.md
Port 8777
# 橘鸦 AI 日报前端 (juya-daily) 研究计划
**创建时间:** 2026-03-15 晚上
**标签:** #项目研究 #Next.js #AI 日报 #开源项目
---
## 📌 项目信息
| 项目 | 内容 |
|------|------|
| **仓库** | [ViggoZ/juya-daily](https://github.com/ViggoZ/juya-daily) |
| **在线演示** | [viggoz.github.io/juya-daily](https://viggoz.github.io/juya-daily/) |
| **内容源** | [imjuya/juya-ai-daily](https://github.com/imjuya/juya-ai-daily) |
| **许可证** | ISC |
---
## 🎯 项目定位
**橘鸦 AI 日报的多主题阅读前端** — 提供更舒适的日报阅读体验
**核心特点:**
- 实时内容 — 通过 GitHub API 直接读取原仓库 Markdown，无需同步
- 6 套主题 — 每套独立排版风格
- 完全静态 — Next.js 静态导出，GitHub Pages 部署
---
## 🎨 6 套主题
| 主题 | 风格 | 特点 |
|------|------|------|
| **经典 (Editorial)** | 温暖纸张色调 | Playfair Display 衬线标题 |
| **极简 (Mono)** | 纯黑白 | 系统字体，零装饰 |
| **沙丘 (Dune)** | 沙漠金棕 | DM Sans 几何无衬线 |
| **蓝图 (Blueprint)** | 工程蓝白 | IBM Plex 等宽标题 |
| **墨夜 (Ink)** | 深色模式 | 大字号宽行距 |
| **霓虹 (Cyber)** | 赛博终端 | 等宽字体，霓虹色 |
---
## ✨ 功能特性
- [ ] **实时内容** — GitHub API 读取，原仓库更新后刷新即可
- [ ] **日历选择** — 弹窗日历切换往期日报
- [ ] **文章目录** — 浮动按钮快速跳转
- [ ] **阅读进度** — 顶部进度条实时显示
- [ ] **标题追踪** — 滚动时显示当前阅读文章标题
- [ ] **移动端适配** — 响应式布局
---
## 🛠️ 技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| **Next.js** | 16 | 静态导出 |
| **React** | 19 | UI 框架 |
| **Tailwind CSS** | 4 | 样式 |
| **react-markdown** | - | Markdown 渲染 |
| **remark-gfm** | - | GFM 扩展 |
| **next-themes** | - | 主题切换 |
| **部署** | GitHub Pages | 静态托管 |
---
## 📋 今晚研究计划
### 1. 代码结构分析
- [ ] 查看项目目录结构
- [ ] 理解 Next.js 16 静态导出配置
- [ ] 分析主题切换实现 (next-themes)
### 2. 核心功能研究
- [ ] GitHub API 实时读取 Markdown 的实现
- [ ] 6 套主题的样式隔离方案
- [ ] 日历组件与往期日报切换
- [ ] 阅读进度条实现
- [ ] 滚动标题追踪逻辑
### 3. 部署流程
- [ ] GitHub Actions 自动构建配置
- [ ] GitHub Pages 部署设置
- [ ] 静态文件输出 (`out/` 目录)
### 4. 可借鉴点
- [ ] 是否可用于其他日报/博客项目
- [ ] 主题系统设计思路
- [ ] 零内容存储的架构优势
---
## 🔧 本地运行
```bash
# 克隆项目
git clone https://github.com/ViggoZ/juya-daily.git
cd juya-daily
# 安装依赖
npm install
# 开发模式
npm run dev
# 访问 http://localhost:3000/juya-daily
# 构建
npm run build
# 静态文件输出到 out/
```
---
## 💡 研究问题
1. **内容获取:** 如何通过 GitHub API 读取远程 Markdown？有缓存策略吗？
2. **主题系统:** 6 套主题如何组织？CSS 变量还是独立样式文件？
3. **性能优化:** 静态导出后首屏加载速度如何？
4. **扩展性:** 如果要添加新主题，需要修改哪些文件？
5. **SEO:** 静态导出对 SEO 的影响？
---
## 📝 研究输出
- [ ] 项目架构分析笔记
- [ ] 核心实现代码片段整理
- [ ] 可复用的主题系统方案
- [ ] 部署配置模板
---
**备注:** 这是一个优雅的单页应用设计，零内容存储 + 实时读取 + 多主题，值得深入学习。