个人网站

个人博客 The Key of Urala 用的 design system，包括 design token、由它生成的 CSS，以及文章和页面用的 Astro 组件。源码在 systems/personal-website。

标志由彩色图形和 500 字重无衬线体的名字组成，放在画布或深色底上。图形从不反色。

安装

每个版本是一个 GitHub Release，附带打包好的文件。从 Release 的网址安装：

pnpm add https://github.com/RottenSea/design-system/releases/download/personal-website-v1.0.0/rottensea-ds-personal-website-1.0.0.tgz

使用

在网站的布局里加载一次 CSS。index.css 带重置样式，给用打包工具构建的网站用；styles.css 不带重置样式，给普通 HTML 页面用。

---
import "@rottensea/ds-personal-website/index.css";
---

CSS 里不加载字体：用 CSS 引入的字体样式表会让整页等 Google Fonts 或 jsDelivr 响应。改为在布局的 <head> 里放 Fonts 组件，它不阻塞地加载同样的样式表，字体到之前先用备用字体显示。普通 HTML 页面可以直接链接 fonts.css，用阻塞的方式加载。

---
import { Fonts } from "@rottensea/ds-personal-website/components";
---
<head>
  <Fonts />
</head>

组件是 Astro 组件。可以按名字单独引入，也可以一次全部传给 MDX 页面，文章里就不用写 import。同一张对照表还会把文章里的代码块、表格和图片换成 CodeBlock、TableScroll 和 Figure：

---
import { components } from "@rottensea/ds-personal-website/components";
const { Content } = await render(post);
---
<Content components={components} />

Figure 用 sharp 生成模糊占位图，Astro 处理图片用的也是它。用 pnpm 的网站要把 sharp 加进自己的依赖，因为 pnpm 不会把 Astro 装的那份暴露给网站。

文章用 :::tip 这类指令写组件。把这个系统的 remark 插件加到 unified 处理器里，指令才会变成组件；加上它的 rehype 插件，标题才有锚点、外部链接才有标记；再加上它的 Shiki 转换器，代码块才能写标题和高亮行：

import { unified } from "@astrojs/markdown-remark";
import {
  rehypeDsExternalLinks,
  rehypeDsHeadingAnchors,
  remarkDsDirectives,
  shikiTransformers
} from "@rottensea/ds-personal-website/markdown";

export default defineConfig({
  markdown: {
    processor: unified({
      remarkPlugins: [remarkDsDirectives],
      rehypePlugins: [rehypeDsHeadingAnchors, [rehypeDsExternalLinks, { site: "https://example.com" }]]
    }),
    shikiConfig: {
      themes: { light: "github-light", dark: "github-dark" },
      defaultColor: false,
      transformers: shikiTransformers()
    }
  }
});

基础

颜色：底色、文字、珊瑚色、点缀色和细线
文字：三种字体和字号阶梯
间距与圆角：间距阶梯、页面宽度、断点和圆角
阴影与边框：底色、细线和两种阴影
动效：时长、曲线和三种基本动效
主题：浅色和深色主题，以及页面怎样切换
无障碍：对比度和其他规则

主题

token 有浅色和深色两套主题。CSS 只看 data-theme 属性，所以页面要在绘制前给 <html> 设好 data-theme="light" 或 data-theme="dark"。见主题。

版本

每个版本改了什么，见更新日志。