This Site这个站
A portfolio where code, music and video are one content type with three presentations, written as MDX files in git.一个作品集:代码、音乐和影像是同一种内容类型的三种呈现,全部写成 git 里的 MDX 文件。
- Stack技术栈
- TypeScript · Next.js · MDX · Tailwind CSS
The premise: a repo and a beat are the same kind of object. Both are things I finished and want to show. What differs is presentation — a beat wants a play button, a repo wants a link and a stack list, a film wants an embed.
So there's one type with a discriminator:
export type Work = CodeWork | MusicWork | VideoWork;
and one card component that keeps the frame identical and swaps only the media block. A track and a repository sit in the same grid, at the same size, filtered by the same control — because on this site they rank the same.
Content is files
Every work and every note is an .mdx file under content/, with frontmatter
validated at build time. Publishing is a git push. No database, no admin
login, no CMS to keep upgrading, and the whole archive is greppable and
diffable. If a frontmatter field is wrong, the build fails with the filename
and the field — better to break in CI than to render a card with a blank title.
What the rebuild replaced
The previous version was a Vite single-page app that had grown into a
browser DAW with a portfolio bolted to the front. Two thirds of the code was
audio tooling, works were stored in IndexedDB so visitors saw an empty page,
and nothing was server-rendered so nothing was indexable. The rewrite keeps the
monochrome editorial look and throws out everything else.
前提是这样的:一个仓库和一段 beat 是同一类东西。都是我做完了、想拿出来给人看的东西。 不同的只是呈现方式——beat 需要一个播放按钮,仓库需要一个链接和技术栈列表,影片需要一个嵌入播放器。
所以只有一个类型,外加一个判别字段:
export type Work = CodeWork | MusicWork | VideoWork;
再配一个卡片组件,外框完全一致,只替换中间的媒体块。一首曲子和一个仓库待在同一个网格里、 同样的尺寸、被同一个控件筛选——因为在这个站上它们的地位是一样的。
内容就是文件
每一件作品、每一篇笔记都是 content/ 下的一个 .mdx 文件,frontmatter 在构建时校验。
发布就是一次 git push。没有数据库,没有后台登录,没有需要一直升级的 CMS,
整个存档都能 grep、能 diff。frontmatter 有字段写错,构建就会带着文件名和字段名失败——
在 CI 里炸掉,好过渲染出一张标题空白的卡片。
这次重构替换掉了什么
上一版是一个 Vite 单页应用,长着长着变成了一个浏览器 DAW,前面勉强挂了个作品集。
三分之二的代码是音频工具,作品存在 IndexedDB 里所以访客看到的是空页面,
什么都没有服务端渲染所以什么都没法被索引。这次重写保留了那套黑白编辑排版的外观,
其余全部扔掉。