fe-weekly-creator

# 前端周刊创建器 (fe-weekly-creator) 帮助用户从多个技术周刊源自动抓取、筛选、生成中文前端周刊。 ## 工作流程概览 整个流程分为 4 个阶段：**抓取 → 合并 → 筛选 → 生成**。 --- ## 阶段一：抓取素材 从以下 6 个周刊源抓取最新一期内容（使用 `read_web_page/web_fetch` 工具）： ### 核心源（前端，每期必查） 1. **JavaScript Weekly** — `https://javascriptweekly.com/issues/latest` 2. **Frontend Focus** — `https://frontendfoc.us/issues/latest` 3. **Node Weekly** — `https://nodeweekly.com/issues/latest` 4. **React Status** — `https://react.statuscode.com/latest` ### AI 源（补充） 5. **TLDR AI** — `https://tldr.tech/ai` 6. **The Batch** — `https://www.deeplearning.ai/the-batch/` ### 扩展搜索（可选） 除以上固定源外，还可以通过 `web_search` 主动搜索以下渠道获取补充素材： - **Hacker News**：搜索本周热门前端相关帖子 - **Reddit**（r/javascript, r/reactjs 等）：本周热门讨论 - **GitHub Trending**：本周趋势项目 对每个源，提取以下信息： - 文章标题 + 原文链接 - 简短描述（如果源提供了的话） - 分类标签（技术文章 / 工具 / 版本发布 / 简讯） 抓取时用 `forceRefetch: true` 确保获取最新内容。 并行抓取所有源以提高效率。 --- ## 阶段二：合并用户链接 检查用户是否提供了额外的链接。如果有： - 使用 `read_web_page/web_fetch` 读取每个链接的内容 - 将其纳入素材池，标记为"用户提供" --- ## 阶段三：筛选展示 从所有抓取的素材中，根据「内容筛选偏好」**预筛选出约 15 条**最有价值的内容，去掉低质量和重复条目。每个分类不超过 15 条，总量控制在 15 条左右，减轻用户审核负担。 按以下分类展示给用户： ``` ## 📋 本期素材清单（已预筛选，共约 15 条） ### 技术文章（N 篇） 1. [文章标题](链接) — 一句话描述 [来源: JS Weekly] 2. ... ### 工具推荐（N 个） 1. [工具名](链接) — 一句话描述 [来源: Frontend Focus] 2. ... ### 版本发布（N 个） 1. [项目 vX.Y](链接) — 一句话描述 [来源: Node Weekly] 2. ... ### 本周快讯候选（N 条） 1. [关键词](链接) 一句话描述 2. ... ``` 然后询问用户： - 哪些需要保留、哪些删除 - 是否需要调整分类 - 是否需要补充遗漏的内容 --- ## 阶段四：生成周刊 ### 4.1 确定期号和日期 1. 读取项目目录 `src/content/blog/`，找到最大的 `weekly-N.md` 中的 N 2. 新期号 = N + 1 3. pubDate = 当周周一的日期（格式 `YYYY-MM-DD`） - 如果今天是周一，用今天 - 否则用下一个周一 ### 4.2 生成内容 对用户确认的每条素材，用 `read_web_page/web_fetch` 读取原文，生成中文摘要点评。 链接规范：写入文档的所有资源链接必须是**重定向后的最终 URL**。在生成前对每条素材的链接发起请求，跟随重定向（301/302 等）获取最终目标地址，再将最终地址写入周刊 Markdown；不要使用短链、追踪链接或中间跳转地址。确保读者点击后直达原文。 严格遵循以下格式规范（来自项目 AGENTS.md）： #### Frontmatter ```yaml --- title: "前端周刊 #N：关键词1，关键词2与关键词3" description: "关键词1，关键词2，关键词3" pubDate: YYYY-MM-DD --- ``` title 和 description 中的关键词从本期最亮眼的 2-3 个话题中提取，并遵循以下 SEO 约束（低投入，只改标题不改正文）： 1. **至少 1 个可搜索英文产品/版本名**（如 `TypeScript 7`、`Vite 8`、`Node 26`），放在冒号后最前 2. 优先选本期「版本发布」或「本周快讯」里 Google 可能有人搜的词；避免纯中文抽象词单独出现（如「工程化」「新特性」） 3. `description` 与 `title` 共享同一组关键词，便于 SERP 展示一致 4. 反例：`#34：使用 AI 练习英文对话`（难搜）；正例：`#53：TypeScript 7.0 GA、Vite+ Beta 与 ChatGPT 架构` #### 板块顺序 1. **本周快讯**（可选，`## 本周快讯`）— 独立的一周要闻，非下文的总结 2. **技术文章**（`## 技术文章`） 3. **工具推荐**（`## 工具推荐`） 4. **版本发布**（`## 版本发布`） #### 本周快讯格式 - **关键词使用中文**：`[关键词](链接)` 中的「关键词」用中文书写，便于读者扫读。 - 该板块为独立的一周要闻列表，与下方技术文章/工具/版本发布无总结关系。 ```markdown ## 本周快讯 - [关键词](链接) 一句话描述。 - [关键词](链接) 一句话描述。 ``` #### 卡片式格式（技术文章 / 工具推荐 / 版本发布通用） - **标题必须使用中文**：卡片标题 `### [标题](链接)` 中的「标题」一律用中文呈现。若原文为英文标题，需翻译或提炼为简洁的中文标题再写入，不要直接保留英文。 - **正文用 2-3 个短段落**：站点 CSS 将 `h3` 后连续 1-3 个 `<p>` 合并为一张内容卡片（见 `src/styles/global.css` 与 `design-system/MASTER.md`）。段落之间用空行分隔，代码块放在所有段落之后。 **段落分工：** | 段落 | 内容 | 字数上限 | |------|------|----------| | 第一段 | 来源 + 主题（这是什么） | ≤ 80 字 | | 第二段 | 核心亮点、关键数字或技术细节 | ≤ 100 字 | | 第三段（可选） | 对读者的实际价值或适用场景 | ≤ 60 字 | ```markdown ### [标题](链接) 第一段：来源与主题，1-2 句。 第二段：核心亮点、关键数字或技术细节，1-2 句。 第三段（可选）：对读者的实际价值或适用场景，1 句。 （可选）代码块放在所有段落之后 ``` **标准示例 — 技术文章（ChatGPT 架构）：** ```markdown ### [逆向工程 ChatGPT Web：十亿用户规模的 React 架构揭秘](https://performance.dev/chatgpt) Dennis Brotzky 花数天逆向 chatgpt.com 的 HTML、Bundle 与网络请求，还原服务约 10 亿用户的前端架构。 当前栈为 React 19 + React Router 7 + TanStack Query + Tailwind + Radix + ProseMirror，从 Next.js 12 经 Remix 实验迁移到 RR v7。首屏策略「Can you type yet?」——非关键脚本 defer，SSE 流式首 token、Statsig Feature Flag、零 WebFont，保证打开即可输入。 对做全球化 AI 产品的团队，这是「成熟库 + 极致首屏」的可复制样本。 ``` **标准示例 — 工程实践（Medal 瘦身）：** ```markdown ### [Medal 将 Electron 渲染包从 40MB 砍到 2.7MB 的完整路线图](https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product) Rick Zhang 复盘 Medal 2024 年以来的「W-Key」瘦身战役：从 monorepo + pnpm 起步，本地 Vite HMR 让 Electron 开发不再 stop-start。 关键数字：删除 barrel 文件 -2.6MB、外置 .wav -3.4MB、ESM tree-shake -4MB、i18n 动态 import -13MB、按路由 code split -5.4MB，最终 renderer 包 2.7MB。 对 Electron 或超大 SPA 团队，这是可复制的 bundle 治理 playbook。 ``` **标准示例 — 版本发布（TypeScript 7.0，含代码块）：** ```markdown ### [TypeScript 7.0 正式发布：Go 原生编译器 GA，构建约 10 倍提速](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/) 7 月 8 日 TypeScript 7.0 登陆 npm `latest`，Go 重写的 `tsc` 带来 8×–12× 全量构建加速。 7.0 尚无稳定 programmatic API，Vue/Svelte/Astro 模板类型检查器需等 7.1。纯 `tsc` 构建的 React/Node 项目可立即升级。 ```bash npm install -D typescript npx tsc --version # 7.x ``` ``` ### 4.3 摘要点评写作要求 - 使用中文撰写 - 每张卡片 **2-3 个短段落**，总信息量相当于原来的 4-5 句话，但**禁止挤进单个段落** - 突出「这是什么」、「为什么重要」和「对你有什么影响」，分别落在不同段落 - 如果是工具/库，说明解决什么问题、核心特性 - 如果是版本发布，说明主要变更和影响 - 适当附上关键代码片段帮助理解（不是每条都需要），代码块独立成 `pre` 块，放在段落后 - 避免空洞的赞美，提供具体的技术信息 - AI 相关内容要关联到前端开发者的实际使用场景 **可读性硬性规则（必须遵守）：** - 单段不超过 **150 字**；每段最多 **2 句话**，用句号断句 - 禁止用分号串联 3 个以上独立信息点 - 技术栈枚举、关键数字清单、因果链条 **拆到不同段落** - `**加粗**` 每段最多 2 处，只标注真正关键的词 - 禁止在一段内同时写完整技术栈 + 迁移历史 + 结论 **反模式示例（不要这样写）：** ```markdown ### [标题](链接) 作者写了很长一段话，把 React 19 + RR7 + TanStack Query 技术栈、从 Next.js 迁移的历史、首屏优化策略、Evan You 点评、以及对读者的建议全部用分号串在一个段落里，形成难以扫读的文字墙。（❌ 单段 300+ 字） ``` ### 4.4 内容排序 每个板块内的条目按以下优先级从高到低排序： 1. **影响面广**：涉及主流框架/工具、影响大量开发者的内容排最前 2. **技术深度高**：有独到见解、深入分析的内容优先于浅层资讯 3. **实用价值强**：能直接改善开发者工作流、解决真实痛点的内容靠前 4. **话题热度高**：社区讨论度高、本周热门话题的内容靠前 确保读者打开周刊时，第一眼看到的就是本期最值得关注的内容。 ### 4.5 输出文件 将生成的内容写入 `src/content/blog/weekly-{N}.md`（项目根目录为 fe-weekly 所在路径）。 --- ## 内容筛选偏好 在筛选阶段，优先选择以下类型的内容： 1. **有影响力的版本发布**：主流框架/工具的大版本更新（React、Vue、Next.js、Node.js、Vite、TypeScript 等） 2. **实用的技术文章**：性能优化、架构设计、最佳实践，而非纯新闻报道 3. **值得关注的新工具**：解决真实痛点的工具和库 4. **AI + 前端交叉内容**：AI 辅助开发、AI 在前端的应用、LLM 相关的前端工具 5. **有深度的工程实践**：大厂工程实践、大规模项目经验分享 避免选入： - 纯广告/赞助商内容 - 过于小众的项目（除非特别有趣） - 重复出现在多个源中的同一条目（去重） --- ## 注意事项 - 链接必须使用最终重定向后的 URL：使用项目内置脚本或 `curl` 命令解析最终地址，确保周刊中的所有链接都是直达原文的真实地址 ### 解析重定向 URL 使用项目内置脚本 `.agents/scripts/resolve-url.sh`： ```bash # 批量解析 .agents/scripts/resolve-url.sh 'https://link1' 'https://link2' 'https://link3' # 输出: https://link1 -> https://final-url1 ``` - 如果某个周刊源无法访问，跳过它并告知用户，继续处理其他源 - 去重：同一个链接/项目如果出现在多个源中，只保留一次 - 如果用户只说"写周刊"而没提供额外链接，直接进入抓取阶段 - 如果用户直接给了一组链接说"用这些写周刊"，可以跳过抓取阶段，直接用用户的链接生成