th3-br41n/elements-release

# Nimbus 更新日志 —— 一款基于 Elements 构建的版本说明邮件 一个精美且**数据驱动的产品更新日志 / 版本说明邮件**，使用 [Unlayer Elements](https://github.com/unlayer/elements) 构建。你只需编辑一个具有类型定义的 data 文件，运行一行命令，即可获得渲染为四种格式的**同一份**更新日志： | 输出格式 | 文件 | 用途 | | --- | --- | --- | | ✉️ 邮件兼容 HTML | `dist/changelog.email.html` | 基于表格，包含 MSO/Outlook 条件注释 —— 可直接发送 | | 🌐 响应式网页 | `dist/changelog.web.html` | `div`/flexbox “在浏览器中查看”页面 | | 📝 纯文本 | `dist/changelog.txt` | 纯文本 multipart 备选内容 | | 🧩 Unlayer 设计 JSON | `dist/changelog.json` | 导回 Unlayer 编辑器 |  _{专为 **#BuiltWithElements** 挑战赛而构建。} ## 为什么选择此模板 每一款开发工具都会发布版本说明，而这些说明几乎总是要么变成一堵毫无样式的文字墙，要么其设计仅仅存在于拖放式编辑器中，从而无法进行版本控制或实现自动化。本项目将更新日志视为**代码**： - **内容即数据。** 整个版本信息以类型化对象的形式存放在 [`src/release.ts`](src/release.ts) 中 —— 包含版本号、核心亮点、变更列表、贡献者以及链接。 产品/营销团队只需编辑该文件；布局永远不会改变。 - **设计是一个系统。** 颜色、字体、间距以及变更类型标签的配色都统一定义在 [`src/theme.ts`](src/theme.ts) 中。只需通过一个文件即可重塑所有主题。 - **零外部图片。** 功能配图以内联 SVG 的形式生成 （[`src/graphics.ts`](src/graphics.ts)），因此预览永远不会破损，也无需管理 CDN。 - **对 CI 友好。** `npm run build` 是确定性的 —— 将其接入发布 pipeline，每个打标签的版本都能自动发送邮件。 ## 在 Elements 中展示的功能 该模板是对组件库的一次真实体验 —— 所有元素均由纯 JSX 组合，并由 Elements 的导出器进行渲染： `Email` · `Page` · `Row` / `Column`（支持 `OneColumn`, `TwoEqual`, `TwoWideNarrow`, `FourEqual` 布局） · `Heading` · `Paragraph` · `Button` · `Image` · `Divider` · `Menu` · `Social` · `Html` —— 此外还使用了 `renderToHtml`, `renderToPlainText` 和 `renderToJson`。 值得一提的设计细节： - 深色主视觉区域，包含一个代号 pill 标签和一个四列式的**统计数据条**。 - **亮点卡片**交替展示图片和文案，以营造视觉节奏感。 - 数据驱动的**“其他所有更新”**列表，带有彩色的变更类型 pill 标签 （`NEW` / `IMPROVED` / `FIXED` / `SECURITY`）以及代码样式的范围标签。 - 贡献者头像标签、`Menu` 页脚和 `Social` 图标。 ## 渲染预览 | 网页版 (`Page`) | 邮件版 (`Email`) | | --- | --- | |  |  | 这两张图片都是**实际渲染输出的效果**，直接从 `dist/` 下的文件中截取。 ## 运行说明 需要 Node 18+（在 Node 24+ 上构建并测试）。 ``` git clone https://github.com/th3-br41n/elements-release.git cd elements-release npm install npm run build ``` 随后打开任意一个生成的文件： ``` open dist/changelog.web.html # or changelog.email.html ``` 使用以下命令对源码进行类型检查： ``` npm run typecheck ``` ## 发布你自己的版本 你几乎不需要修改模板。要发布下一份更新日志，只需编辑 [`release`](src/release.ts) 对象并重新运行 `npm run build`： ``` export const release: Release = { product: "Nimbus", version: "3.2", codename: "Cirrus", date: "July 23, 2026", highlights: [ { tag: "New", title: "Sub-second preview deploys", body: "…", image: deploys, imageAlt: "…" }, // … ], changes: [ { type: "New", scope: "cli", text: "nimbus deploy --watch redeploys on every save." }, // … ], // … }; ``` 变更类型（`New` / `Improved` / `Fixed` / `Security`）会自动从 `theme.ts` 中获取 匹配的 pill 标签颜色。如需添加新类型，只需在 `tagStyle` 中添加一条记录即可。 ## 项目结构 ``` src/ theme.ts Design tokens: colors, fonts, tag palette, layout graphics.ts Inline-SVG feature artwork (data URIs) release.ts ← the only file you edit to ship a new changelog Changelog.tsx The template: changelogRows() → an array of s build.tsx Renders the tree to HTML / text / JSON in dist/ dist/ Generated output (email + web + text + json) docs/ Screenshots used in this README ``` ## 工作原理 `Changelog.tsx` 导出了 `changelogRows()` —— 一个扁平化的 `` 元素 数组，且与**根节点无关**。`build.tsx` 会将相同的数组放入每个根 wrapper 中，然后 Elements 会根据不同的模式选择对应的导出器： ``` renderToHtml({changelogRows()}, { title, fonts }); // tables + MSO renderToHtml({changelogRows()}, { title, fonts }); // div/flexbox renderToPlainText({changelogRows()}); // text fallback renderToJson({changelogRows()}); // editor JSON ``` ## 构建工具 - [`@unlayer/react-elements`](https://github.com/unlayer/elements) —— 绝对的明星组件 ⭐ - React 19 · TypeScript · [`tsx`](https://github.com/privatenumber/tsx)，用于实现零 bundler 配置的构建步骤 ## 许可证 MIT —— 详见 [LICENSE](LICENSE)。专为 Build with Elements 挑战赛而构建。 **#BuiltWithElements**

标签：MITM代理, Unlayer Elements, 产品更新日志, 自动化攻击, 邮件模板, 静态网站生成器