深入解析基于 Next.js 14 和 Bun 构建的暗黑阅读空间
开发者热衷于重写博客。这已经成了一个梗：我们不是写文章，而是每六个月就拆掉旧技术栈、从头重建界面。这个过程几乎总是导致一个千篇一律的模板。但有时候你会遇到一些源代码，作者在细节上花了更多心思。
前几天我在浏览 woosal13/37/blog 仓库——这是开发者 Ege Celebi 的个人网站。该项目在 GitHub 上获得了刚刚超过 300 颗星。其中隐藏着几个有趣的解决方案，涵盖图形生成、排版和 MDX 处理。
引擎盖下
这里没有 Ghost 或 Strapi 这样的重型 CMS。作者选择了静态生成和高加载速度。
构建基于三个要素：
- Next.js 14 配合 App Router 和 React 18。
- Bun 作为包管理器和运行时。
- Biome 用于代码检查和格式化。
Bun 节省了依赖安装的时间，而 Biome 则取代了经典的 ESLint 和 Prettier 组合。要运行带有自动修复的 linter，项目使用了 bun run check 命令。
样式使用 Tailwind CSS。颜色和 token 设置被提取到 app/globals.css 中。Geist Sans 负责文章阅读，Geist Mono 用于代码块。
无需设计师和 Midjourney 的封面
这个仓库的主要亮点是文章横幅生成。通常作者会在 Unsplash 上搜索合适的图片、用神经网络生成图像，或在 Figma 中制作卡片。
Ege 用不同的方式解决了这个问题。在 lib/contour.ts 文件中，有一个算法接收文章标题并将其转换为轮廓图案。你会得到一个确定性的 SVG 横幅。每个标题对应自己独特的图案，而且无需调用外部服务。
相同的轮廓标记被用作 logo 和 favicon，保持了统一的身份标识。
液态玻璃和 ASCII 动画
视觉上，网站看起来像一个暗黑风格的编辑页面。设计使用了超细边框（发丝线边框）和统一的动画曲线来实现过渡效果。
界面包含几个视觉亮点：
- 带有液态玻璃效果的圆形控件。
- 毛玻璃质感的分类和标签。
- 左侧文章目录带有导航标记，可平滑滚动跟随。标记的行为参考了 LineNav 组件。
- 实时 ASCII 动态效果。在
components/blocks/ascii/文件夹中，你可以找到动画圆环（著名的 ASCII 甜甜圈）、数字雨、等离子和隧道效果。作者从 soft-club-ui 库移植过来，并重新着色以匹配网站的黑白配色。
项目结构和 MDX
所有文章直接存储在 App Router 页面树中：app/(website)/blog/(post)/[slug]/page.mdx。
这种方法将路由逻辑和内容本身结合在一起。UI 组件被清晰地分离：
components/ds/包含可复用的基础设计系统元素。components/blocks/存储复杂的领域逻辑和动画。
本地运行方法
你需要 Node.js 20 或更高版本以及已安装的 Bun。不需要配置环境变量。
克隆仓库并启动本地服务器：
bun install
bun dev
要使用 linter 检查并格式化代码：
bun run check
为什么要研究这些源码
如果你计划构建自己的网站或寻找前端架构的简洁示例，这个仓库值得打开。在代码中，你可以学到：
- Next.js 项目中的 Biome 配置。
- 基于文本的矢量卡片生成实现。
- 将 Canvas 和 ASCII 效果集成到 React 组件中。
- 在单个 CSS 文件中组织 Tailwind token。
代码采用 MIT 许可，但文本内容和图片受版权保护。复制文章不是好主意，但研究架构并将想法应用到你自己的项目中是个很棒的计划。
相关项目