@bbki.ng/site 0.0.17

package/src/articles/img.mdx

@@ -0,0 +1,104 @@
+---
+title: 图片展示
+tags:
+  - bbki.ng
+  - web
+  - 图片
+---
+
+import { ImgDemo } from "@/demo/ImgDemo";
+
+图片是 BBKi.ng 的主要内容之一，友好地展示图片是必须考虑的问题。
+
+先写下第一行代码：
+
+```html
+<img src="my-awesome-picture.jpg" />
+```
+
+这样就完成了图片展示。但是这种极简的做法存在一些问题，还谈不上友好。比如：
+
+1. 布局偏移问题。我们没有为 `img` 标签设定尺寸，导致图片加载期间，浏览器没有在文档中为其分配正确的空间。加载完成后，图片突然撑开。
+2. 性能问题。没有惰性渲染、惰性加载，多图页面会有潜在性能问题。
+3. 逐行渲染问题。标准 JPEG 格式压缩的图片，下载时基线 JPEG 算法会逐行渲染图片，影响体验。
+
+## 布局偏移
+
+对于问题 1. 我们为图片设置好宽高即可：
+
+```html
+<style>
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+</style>
+<img height="853" width="1280" … />
+```
+
+## 性能相关
+
+### `content-visibility: auto`
+
+该 CSS 属性会告知浏览器，在图片接近屏幕前，先不要为其布局。浏览器也不会去解码用户暂时看不见的图片，节省 CPU。
+
+### `loading="lazy"`
+
+该属性会告知浏览器，在图片接近屏幕前，先不要去请求图片资源。
+
+### `decoding="async"`
+
+该属性会给浏览器脱离主线程解码图片的权限，避免用来解码图片的 CPU 时间影响用户。
+
+## 呈现相关
+
+### 渐进加载
+
+直观体验：
+
+- [Medium](https://medium.com/cucumbertown-magazine/the-beginners-guide-to-composition-in-food-photography-how-to-transform-your-food-photos-from-good-39613ab78bf2)
+- [Polymer shop project](https://shop.polymer-project.org/)
+
+上边两个例子在加载大图时，都用到了低质量图片占位（Low Quality Image Placeholder, LQIP）。在大图加载时，展示模糊的低质量图片，在加载低质量图片时，展示背景色。图片加载成功时，配合 transition 效果，整个过程显得顺滑流畅。
+[José M. Pérez](https://jmperezperez.com/about-me/) 在 2015 年写了[一篇文章](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)详细分析了 Medium 图片渐进加载细节。
+
+了解基本思路后，实现方式可以有很多种。其中关键，需要准备高清图对应的低质量图片，以及对低质量图片进行模糊处理。
+
+### 低质量图片
+
+BBKi.ng 所有图片均存放在阿里云 OSS 中。OSS 数据处理下的图片处理功能可以创建样式。不同样式对应不同的图片处理细节，如图片格式转换、图片质量、缩略等。我们可以新建名为 `LQIP` 的样式，将原图压缩为低质量图片。假设上传原图后得到的地址为：`url/to/my-awesome-picture.jpg`, 那么通过地址 `url/to/my-awesome-picture.jpg?x-oss-process=style/LQIP` 即能获取低质量图片。
+
+### 模糊效果
+
+实现图片模糊有很多种方式。比如
+
+1. CSS [滤镜](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+2. CSS [背景滤镜](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop)
+3. Canvas 渲染（[blurhash](https://blurha.sh/)）
+
+```
+img {
+  filter: blur(2px)
+}
+
+.cover {
+  backdrop-filter: blur(2px);
+}
+```
+
+以上几种方式都各有优缺点。CSS 滤镜优点是写法比较简单，也无需引入新的元素。缺点是，边缘也会模糊掉。可以增加一个包裹元素，设置 `overflow: hidden` 解决，但是模糊半径较大时，图片边缘的模糊效果始终不是很理想（[效果对比](https://codepen.io/z-j-h/pen/ZEJPEWq)）；用 CSS 背景滤镜可以得到锐利清晰的边缘，同时图片内容区域模糊效果也很好，缺点是效果是应用在元素背后的区域，因此我们需要引入额外的元素，同时该样式会影响图层合成时间、默认不兼容火狐浏览器；Blurhash 方法的优点是模糊图片只需要用简洁哈希字符串表示，节省空间。缺点是编码解码过程稍显繁琐。同时客户端解码大尺寸图片时也存在性能问题。
+
+综合考虑后，最终使用背景滤镜对图片进行模糊处理。
+
+**示例**
+
+<ImgDemo />
+
+## 参考链接
+
+- https://web.dev/optimize-cls/
+- https://medium.com/hd-pro/jpeg-formats-progressive-vs-baseline-73b3938c2339
+- https://www.industrialempathy.com/posts/image-optimizations/
+- https://www.guypo.com/introducing-lqip-low-quality-image-placeholders
+- https://jmperezperez.com/medium-image-progressive-loading-placeholder/
+- https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx

package/src/articles/index.ts

@@ -0,0 +1,35 @@
+import * as 说明书 from "./bbking-manual.mdx";
+import * as 加载动画 from "./loading.mdx";
+import * as 回暖 from "./warming-up.mdx";
+import * as 可以攻玉 from "./quote.mdx";
+import * as 离开 from "./travel.mdx";
+import * as 降温 from "./cooldown.mdx";
+import * as 与或非禁区 from "./anti-logic.mdx";
+import * as 没有女人的男人们 from "./men-without-women.mdx";
+import * as 一天计划 from "./movie-day.mdx";
+import * as 网站图片展示 from "./img.mdx";
+import * as 大雪 from "./fall.mdx";
+import * as 大寒 from "./major-cold.mdx";
+import * as 春雨 from "./spring-rain.mdx";
+import * as 春寒 from "./spring-cooldown.mdx";
+import * as 入夏 from "./web-burnning.mdx";
+import * as 六月 from "./black-river.mdx";
+
+export const MdxArticleList = [
+  说明书,
+  网站图片展示,
+  // 加载动画,
+  与或非禁区,
+  可以攻玉,
+  离开,
+  降温,
+  没有女人的男人们,
+  一天计划,
+  大雪,
+  大寒,
+  回暖,
+  春雨,
+  春寒,
+  入夏,
+  六月,
+];

package/src/articles/loading.mdx

@@ -0,0 +1,129 @@
+---
+title: 加载动画
+tags:
+  - bbki.ng
+  - loading
+  - WebGL
+---
+
+import { SpinnerDemo } from "@/demo/SpinnerDemo";
+import { DemoBox } from "@/demo/DemoBox";
+
+<SpinnerDemo />
+## 前言
+>《她》是讲述在不远的未来人与人工智能相爱的科幻爱情电影。主人公西奥多（杰昆·菲尼克斯 Joaquin Phoenix 饰）是一位信件撰写人，心思细腻而深邃，能写出最感人肺腑的信件。他刚结束与妻子凯瑟琳（鲁妮·玛拉 Rooney Mara 饰）的婚姻，还没走出心碎的阴影。一次偶然机会让他接触到最新的人工智能系统 OS1 ……
+
+相信大多数人，在看这部电影的时候，不仅仅会被剧情打动，也会被电影的镜头美学吸引。《她》呈现出一个没有被冷酷金属主导的科幻世界，那里光线柔和，色调温暖。人们的着装跟我们并没有太大区别，但是人工智能操作系统能完成的事情以及普及程度，现在看来很难想象。有意思的是，技术的发展并没有消灭「加载时间」，OS1 在安装的时候，西奥多依然需要等待。屏幕上精美的加载动画给我留下深刻的印象，从那时候起，就希望动画能出现在我的网站上。
+
+## 灵感
+根据 Atwood's Law
+
+> Any application that _can_ be written in JavaScript, _will_ eventually be written in JavaScript.
+
+肯定有人已经用 JS 实现 OS1 系统的加载动画。没错，这个人是 [@psyonline](https://codepen.io/psyonline)，他的[在线示例](https://codepen.io/psyonline/pen/yayYWg)也非常惊艳。
+那么，直接复制粘贴过来可以吗？该示例使用 Three.js 实现，写这篇文章的时候，根据 [bundlephobia](https://bundlephobia.com/package/three@0.142.0) 显示，`three@142.0` 压缩后仍然有 `596.9kB`。对于个人网站，仅仅用来实现一个加载动画，无疑很不划算。
+
+[@shuding](https://twitter.com/shuding_)发布过一[系列推文](https://twitter.com/shuding_/status/1475916082875666441)介绍他如何制作一个轻量级的 [WebGL 地球库](https://github.com/shuding/cobe)，十分精彩。开篇提及两个轻量级 WebGL 库：
+
+- [phenomenon](https://github.com/vaneenige/phenomenon)
+- [W](https://xem.github.io/W/)
+
+前者压缩后，只有 `5.4KB`。正是我想找的工具。接下来，只需要 3 步就能实现文首的动画：
+1. 熟悉 phenomenon 的 API
+2. 用 phenomenon 绘制曲线
+3. 让曲线动起来
+
+## 行动
+### WebGL
+进行第一步时，发现自己还完全不了解 WebGL。看完 [The Book of Shaders](https://thebookofshaders.com/) 后，能基本理解 phenomenon 的[示例](https://codepen.io/collection/AOpMrm/)。至此，已经可以复制粘贴示例并修修改改，验证书中的概念和自己的理解。直到手痒痒想绘制自己想要的曲线，就进行到下一步。
+
+### Curve
+@psyonline [示例](https://codepen.io/psyonline/pen/yayYWg)中不难找到绘制曲线的代码：
+```
+function(percent) {
+  var x = length*Math.sin(pi2*percent)
+    , y = radius*Math.cos(pi2*3*percent)
+    , z
+    , t;
+
+  t = percent%0.25/0.25;
+  t = percent%0.25-(2*(1-t)*t* -0.0185 +t*t*0.25);
+
+  if (Math.floor(percent/0.25) == 0
+    || Math.floor(percent/0.25) == 2) {
+    t *= -1;
+  }
+
+  z = radius*Math.sin(pi2*2* (percent-t));
+
+  return new THREE.Vector3(x, y, z);
+}
+```
+
+我的主要目标变成移植这段代码，其中 `pi2`, `length` 和 `radius` 均为常量，原文取值:
+```
+const length = 30;
+const radius = 5.6;
+const pi2 = Math.PI * 2;
+```
+
+还有一个比较重要的参数 `percent`，打印发现取值范围为 0 到 1。有了这些，我愉快的写好 phenomenon 的 attributes:
+```
+const attributes = [
+  {
+    name: 'pos',
+    data: (index: number, total: number) => {
+      const percent = index / total;
+      // ...
+      // 复制粘贴 :)
+      // 此处省略
+
+      return [x, y, z];
+    },
+    size: 3,
+  },
+]
+```
+然后得到一个空白的画布
+<DemoBox />
+
+因为对 WebGL 的了解依然接近于 0 在胡乱猜测并修改一通后，画布依然一片空白，于是沮丧放弃。直到晚上，突然想着将半径和长度都降低两个数量级，画布中终于出现一个扭曲的麻花。上次这么开心还是上一次。
+
+### Matrix
+现在可以回想一下大学课堂线性代数中矩阵运算的知识。回想不起来也没关系，如果有一个正在念大学的弟弟的话，他会帮助写出 `rotate` 方法。
+```
+export const VERTEX_SHADER = `
+  attribute vec3 pos;
+  uniform mat4 uProjectionMatrix;
+  uniform mat4 uModelMatrix;
+  uniform mat4 uViewMatrix;
+  uniform float uProgress;
+  mat4 rotate(float _angle){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, cos(_angle), -sin(_angle), 0.0,
+      0.0, sin(_angle), cos(_angle), 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+  void main(){
+    gl_Position = uProjectionMatrix
+      * uModelMatrix
+      * uViewMatrix
+      * rotate(uProgress)
+      * vec4(pos, 1.0);
+    gl_PointSize = 1.0;
+  }
+`;
+
+```
+
+这些碎片代码，和碎片想法，最终组装出心心念念的动画。
+
+## 参考链接
+1. https://codepen.io/psyonline/pen/yayYWg
+2. https://twitter.com/shuding_/status/1475916082875666441
+3. https://thebookofshaders.com/
+4. https://shud.in/posts/metaballs-1
+5. https://codepen.io/cvaneenige/pen/MGBZpB
+6. https://movie.douban.com/subject/6722879/

package/src/articles/major-cold.mdx

@@ -0,0 +1,14 @@
+---
+title: 大寒
+tags:
+  - 随笔
+  - 天气
+---
+
+冬天下半场，更冷了，而且多雨。新闻开始有暴雪预警，更南边的同学，春节返乡将经受疫和天气双重影响。
+
+小区的地面，被雨水浇成黑色，香樟的树干也是。傍晚的时候，这种黑色像是从地面沿着树干伸向天空。黑色路面上的车辆，总是会压出一片黏腻的声音，比以往更吵。
+
+上次雪停后，没再穿过厚羽绒服。身体在一点点适应湿寒。某天中午大雾，绕湖散步途中，被过于湿润的空气包裹着，有种安心的感觉。换城市工作后，一直在经历的不仅仅是环境温度持续下降，内心的一部分也在慢慢冷却。
+
+和四季一同起伏，不当暴躁的怪物。

package/src/articles/men-without-women.mdx

@@ -0,0 +1,19 @@
+---
+title: 没有女人的男人们
+tags:
+  - 随笔
+  - 阅读
+  - 一天计划
+---
+
+《没有女人的男人们》是村上春树的短篇小说集，书本介绍写的是：「村上返回原点之作，《东京奇谭集》之后时隔九年又一短篇小说集」。「返回原点」也多少有点像在说自己，时隔三年又回到之前离开的城市。一天刚好看完。
+
+| 上午 | 下午 | 晚上 |
+|:----|:-----|:----|
+| 驾驶我的车 <br /> 昨天  | 独立器官 <br /> 山鲁左德 <br /> 木野 | 恋爱的萨姆沙 |
+
+故事中的男人们，有人妻子过世，有人想满世界流浪，有人是坚定的不婚主义，有人被戴上有颜色的帽子……男男女女，来来去去。短篇小说比起电影好像更任性一点，结局戛然而止也让人也觉得情理之中，根据交代过的信息想象一下男女主接下来的境遇也是一件很有意思的事情。我最喜欢的两篇是《山鲁佐德》和《木野》。前者作为一个故事，故事中又穿插了女主讲述的故事，很有层次感，也很容易被带入女主的玄妙变态、虚实莫辨的回忆或者说是想象中。甚至阅读完都不太想深究她和男主到底是什么关系。此外文中有一段关于胡子的描述，觉得挺好玩，感觉也可以尝试一下：
+
+> 他之所以开始蓄胡子，主要是因为没有什么事情可做。如果有了胡子，他便可以经常把手放在下颔、鼻子下边或者鬓角，享受触摸的感觉。用剪刀和锑须刀修剪胡子的形状，也可以消磨时间。他这才发现，原来仅仅留个胡子，便能打发无聊。
+
+《木野》直到结尾才对自己说，没错，我受伤了。一开始，故事男主好像都不是他一样，快结尾情节也开始有点莫名奇妙，就像拍摄过程中相机一直没有对焦。直到最后，木野对自己说，没错，我受伤了。读者可能才会和木野一起恍然而悟，是啊，他一开始就是个受伤的人啊。木野落跑逃避，沉默冷静，毫不在意。但最终他还是要正面盯着自己的创伤。

package/src/articles/movie-day.mdx

@@ -0,0 +1,15 @@
+---
+title: 个人电影节
+tags:
+  - 随笔
+  - 电影
+  - 一天计划
+---
+
+**一天计划**，用一天时间在同一个地点做同一件事情。比如写一天代码、看一天书。个人电影节也是「一天计划」的一部分。从之前标记想看的电影清单中随机挑选出五部电影，用一天时间看完。
+
+| 上午 | 下午 | 晚上 |
+|:----|:-----|:----|
+| 花火 <br /> 数电影的人 | 不能说的游戏 <br /> 蜂蜜之地 | 尽情游戏 |
+
+《花火》整部电影都很沉默冷静，甚至连剧中的枪响也是。可能是浓烈的情感需要大面积的留白去稀释，主角台词不多，却好像什么都已说尽。《数电影的人》是一部记录片，介绍了一群修复电影胶片的人，为电影延续生命。他们有枯燥的工作，有来自同事间互相鼓励和安慰。有意义危机，也有使命感和成就感。我更羡慕的是他们的工作周期，能花很长很长的一段时间慢慢把事情做好，也紧迫也从容。《不能说的游戏》讲述小女孩被熟人性侵后，整个人生受到的影响。电影配乐很欢快，大部分剪辑也是，但看似轻松欢快的节奏，却能让人感受到背后的压抑与主角内心困兽般的反应。这部电影，比起犯人，我更讨厌女主的母亲。《蜂蜜之地》是一部很美的记录片，贫瘠的土地，满眼只能看到岩石灌木和沙砾。相依为命的母女，贪婪的邻居。能够看到一种截然不同的生活方式，已经很心满意足。《尽情游戏》则是一部轻松的喜剧，可能包含了对战争的反思，我更愿意就把它当成一部普通的喜剧。最后其实还有一部德国电影《奇迹》，已经无法看下去，就像很久没有运动，跑完三公里已经到了极限，无法跑完最后一圈。

package/src/articles/now.mdx

@@ -0,0 +1,15 @@
+---
+title: 在干嘛？
+---
+
+import { MovieList } from "@/components/movie_list";
+import { BookList } from "@/components/book_list";
+
+## 编码
+- [github](https://github.com/zjhou)
+
+## 阅读
+<BookList />
+
+## 电影
+<MovieList />

package/src/articles/projects.mdx

@@ -0,0 +1,9 @@
+---
+title: 图片
+headless: True
+---
+
+import Png from "@/pages/extensions/png";
+
+<Png />
+

package/src/articles/quote.mdx

@@ -0,0 +1,27 @@
+---
+title: 可以攻玉
+tags:
+  - quote
+---
+
+“生活曾经如此像游戏，在安谧甜美的气氛中，那些器具，都是玩具”
+
+“（眼泪）不掉下来也没有关系，她其实是一个情绪。这就是电影，看的是微妙的神态，并不是结果。”
+
+\- “我很悲惨，要是你知道我有多悲惨就好了。” \
+\- “我们能做什么？我们必须过好自己的生活。”
+
+
+“河流紀事 · 鄧獻誌
+
+河流用一生梳理 \
+地球的表情 \
+沿岸收集人類的喜怒哀樂 \
+檔案堆滿了海底的家”
+
+"No, you can’t force other people to change. You can, however, change just about everything else. And usually, that’s enough."
+[Aaron Swartz](http://www.aaronsw.com/weblog/nummi#:~:text=No%2C%20you%20can%E2%80%99t%20force%20other%20people%20to%20change.%20You%20can%2C%20however%2C%20change%20just%20about%20everything%20else.%20And%20usually%2C%20that%E2%80%99s%20enough.)
+
+"The [hedonic treadmill](https://en.wikipedia.org/wiki/Hedonic_treadmill), also known as hedonic adaptation, is the observed tendency of humans to quickly return to a relatively stable level of happiness despite major positive or negative events or life changes."
+
+"When people look at my pictures I want them to feel the way they do when they want to read a line of a poem twice."

package/src/articles/spring-cooldown.mdx

@@ -0,0 +1,7 @@
+---
+title: 春寒
+tags:
+  - 随笔
+  - 天气
+---
+最开始只是刮风。重庆刮完台风的第二天，长沙，办公室窗外大风呼号，其声呜咽。工作群登出通告，提醒下班关窗。后边几天气温就回到冬季，并且有断断续续的小雨，不得不再次翻出羽绒服。小河涨水后，关注的钓鱼区 UP 主视频也随之陆续更新。

package/src/articles/spring-rain.mdx

@@ -0,0 +1,9 @@
+---
+title: 春雨
+tags:
+  - 随笔
+  - 天气
+---
+在正式进入夏天之前，这里的气温曾突然跌到冬天的水平。然后伴随着清明时节的雨水，慢慢回升。我的作息，已经提前向去年夏末的节奏靠近。要不是疫情，早起后就能很悠闲地去那家粉店。要不是疫情，每个人都能多出很多选择。
+
+春天的雨在窗外滴滴答答，好像永远不会停下，雨声比冬天欢快，也许是整体气温让人先放松了下来。

package/src/articles/travel.mdx

@@ -0,0 +1,21 @@
+---
+title: 离开
+tags:
+  - 随笔
+---
+
+“人和事儿都在命运的秩序里展开，让我猝不及防，目瞪口呆。也就是这个时候，才发现自己已经长大成人，我觉得我必须离开。”
+
+虽然还没过完，二零二一年已经可以总结成：重大决定最密集的一年。这些决定既不慎重也不轻率，就像迷宫中的老鼠，有个角落放着它喜欢的奶酪，循味靠近的过程中不觉就走过很多需要左右抉择的路口。
+
+妈妈发消息说车库里的行李可能被水泡了，家里下大雨。寄回家的行李让弟弟就近堆在车库里，那天他要去考科目二。晚上，表弟特意过去把完好纸箱子都摞到凳子上。几天后，我回到家把行李都整理出来，一个路过的老婆婆问我纸箱子还要不要，我给了她。
+
+回家第一次见到侄子，他刚过两岁生日没多久。可爱是可爱，顽皮也顽皮。会口齿不清说一些很短词语，只有在举着酸奶喊干杯的时候，如银瓶乍破同时字正腔圆。她奶奶说他长大绝对是个酒鬼，你们看吧。表弟则惯着他，吃饭时把他抱在腿上，任由他用食指和拇指去酒杯里捏着酒往嘴里送。隔天把他从客厅的小天地带去水上乐园玩，一路吹着风特别乖巧，不声不响。很久之后这段经历会在他两岁的的记忆里发酵成什么样子呢？他是不是会在某天，跟朋友喊着干杯想起两岁的时候，他赖在浅水区不肯上岸回家的情景。他是否还记得飘在泳池上方的彩带，是否还记得他爸抱着他冲下水滑梯重力失常的感觉。
+
+小电驴跟县城很配。和弟弟每天骑着它，在外婆家和自己家穿梭。鼎山脚下的路上上下下，我自己脚下的路也是。早上穿着拖鞋去马路对面吃浇头喧宾夺主的三鲜粉，中午和带娃的表弟喝酒，晚上回家和弟弟一起看电影。如果不是前途未卜，现在的生活何尝不是向往的生活。空闲时间刷着省会城市的工作机会和房源，在踏实的当下和虚无的未来不断切换。生活有时候好像一成不变，有时候如梦似幻。一成不变的时候，如陷囹圄。瞬息破灭的时候，如坠深渊。聚散之后，定睛细看，有些碎片一直没有离开过，比如大学里买的帆布包和键盘。
+
+一些云端存储应用保留着过去的照片。一直觉得照片是回忆的快捷键，它们又像一个个虫洞通往过去的时空。这些虫洞中，有几个反复在脑海涌现。湘江护栏边坐着靠椅钓鱼喝茶的大叔，我记得那天傍晚有风，江面粼粼。小洲前的红色帆船，水天被一线小洲和绿树隔断。那是一个秋天，烟霏云敛。凭着这些清晰又模糊的印象，我在找房应用上不断重组筛选条件。动身前一晚，终于确定下来收藏房源和看房次序。
+
+动身回老家前，还有过一段过渡时间。房子到期感情也到期，工作即使辞职也需要临时的落脚地。终于明白为什么即使身处战争，士兵也需要营地。我也需要一个休息和思考的营地，同时因为仓促搬家，无比厌恶对一个地方产生依赖。室友听说我的处境后，在生日那天打车赶过来，在他之前住过的地方为我找到住处。行李被货车拉到楼下，很难不想起三年前只背着一个包就来到这座城市的场景。在营地休整了好一阵，最终还是决定离开这座城市离开这里，这座迷宫没有老鼠喜欢的奶酪。营地附近，有个正在备孕的同学，约好隔天慢跑。百忧撼心的营地生活，养成慢跑习惯成了为数不多的意外收获。
+
+找房的过程比想象顺利，事实上只看完第一家就已经决定签订合同。在小区穿行的感觉很对，我需要这种老旧的氛围平复内心的戾气。后来朋友告诉我说，这是河西最老的小区。等房东和中介离开，我开始对附近进行简单的探索，走出小区门口竟然就到了江边。往东偏北望去，我看到了回忆快捷键中的小洲！住进了自己的回忆里。蓦然回首的感觉大抵如此了。在地图应用中得知小洲叫傅家洲。

package/src/articles/warming-up.mdx

@@ -0,0 +1,10 @@
+---
+title: 回暖
+tags:
+  - 随笔
+  - 天气
+---
+
+最高温度已经到二十七度。阴冷的冬天刚过去没多久，如果不是柳枝才冒出新芽，春天就好像没有存在过一样。
+
+《爱乐之城》上映的那一年，开始喜欢春天。一个人看完电影，吹着晚风往回走的时候突然意识到，只有春天才有这样的风，现在是春天。城市四季有长青的绿植，视觉上的花红柳绿，并不能明显地标示春天。相比之下，温度刚好的微风，在这里，是很稀有的存在。风，更能在一瞬间，全面唤醒身体关于春天的记忆。

package/src/articles/web-burnning.mdx

@@ -0,0 +1,10 @@
+---
+title: 入夏
+tags:
+  - 随笔
+  - 天气
+---
+
+很长一段时间，断断续续都有雨。最近出现一个明显的转折点，之前的凉爽舒适，被闷热潮湿代替。电梯里湿度计读数百分之一百，房间的墙壁、天花板、地面，布满细密的水珠。人像住进深水里。霉菌在不起眼的角落和物件上疯长。
+
+第一次使用空调除湿模式，并感谢科技的力量。

package/src/auth_required.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+
+export const AuthRequired = (props: {
+  children: any;
+  shouldRedirect?: boolean;
+  shouldBeKing?: boolean;
+}) => {
+  const { access_token: token, isKing } = useSupabaseSession() || {};
+
+  if (!token || (props.shouldBeKing && !isKing)) {
+    return props.shouldRedirect ? <Navigate to={"/login"} /> : null;
+  }
+
+  return props.children;
+};

package/src/components/Spinner.tsx

@@ -0,0 +1,33 @@
+import React, { useContext, useEffect } from "react";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { LoadingSpiral } from "@bbki.ng/components";
+
+export const Spinner = (props: any) => {
+  const {
+    disableDotIndicator,
+    multiplier = 10000,
+    color = [209, 213, 219, 1],
+    offset = -0.3,
+    length = 0.3,
+  } = props;
+  const { setIsLoading } = useContext(GlobalLoadingContext);
+
+  useEffect(() => {
+    if (disableDotIndicator) {
+      return;
+    }
+    setIsLoading(true);
+    return () => {
+      setIsLoading(false);
+    };
+  }, []);
+
+  return (
+    <LoadingSpiral
+      multiplier={multiplier}
+      color={color}
+      offset={offset}
+      length={length}
+    />
+  );
+};

package/src/components/article/index.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from "react";
+import { Tags, Article } from "@bbki.ng/components";
+import { ROUTES } from "@/constants";
+
+type ArticlePageProps = {
+  tags?: string[];
+  title: string;
+  description?: any;
+  headless?: boolean;
+  children: ReactElement;
+};
+
+export const ArticlePage = (props: ArticlePageProps) => {
+  const { tags: tagNames, title, description, headless } = props;
+  const tags = tagNames
+    ? tagNames.map((t) => ({ children: t, to: `${ROUTES.TAGS}/${t}` }))
+    : [];
+
+  if (headless) {
+    return props.children;
+  }
+
+  return (
+    <>
+      <Article title={title} description={description}>
+        <article className="prose mb-20">{props.children}</article>
+      </Article>
+      {tagNames && <Tags tags={tags} />}
+    </>
+  );
+};

package/src/components/aspect_ratio_box/index.tsx

@@ -0,0 +1,29 @@
+import classnames from "classnames";
+import React from "react";
+
+type aspectRatioBoxProps = {
+  width: number | string;
+  hwRatio: number;
+  className?: string;
+  children?: any;
+};
+
+export const AspectRatioBox = (props: aspectRatioBoxProps) => {
+  const { className, width, hwRatio, children } = props;
+  const innerStyle = {
+    width: "100%",
+    paddingTop: `${hwRatio * 100}%`,
+  };
+
+  return (
+    <div
+      style={{ width, maxWidth: "100%" }}
+      className={classnames(className, "relative")}
+    >
+      <div style={innerStyle} />
+      {children && (
+        <div className="absolute top-0 bottom-0 left-0 right-0">{children}</div>
+      )}
+    </div>
+  );
+};

package/src/components/blur_cover/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import classnames from "classnames";
+import { TextColors } from "@/types/color";
+
+type blurCoverProps = {
+  textColor?: TextColors;
+  className?: string;
+  children: any;
+  height?: number;
+  visibleOnHover?: boolean;
+};
+
+export const BlurCover = (props: blurCoverProps) => {
+  const { textColor, children, className, height = 50, visibleOnHover } = props;
+  const cls = classnames(
+    className,
+    textColor,
+    "blur-cover",
+    "absolute",
+    "w-full",
+    "flex items-center justify-center"
+  );
+  return (
+    <div className={cls} style={{ height }}>
+      {children}
+    </div>
+  );
+};

package/src/components/book_list/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Table, Link, Error } from "@bbki.ng/components";
+import { useBooks } from "@/hooks";
+import { TableSkeleton } from "@/components/table_skeleton";
+
+const CELL_STYLE = {
+  width: 100,
+  maxWidth: 100,
+};
+
+export const BookList = () => {
+  const { books, isLoading, isError } = useBooks();
+  if (isError) {
+    return <Error error={isError} />;
+  }
+
+  if (isLoading) {
+    return <TableSkeleton headers={["书名", "状态"]} />;
+  }
+
+  const renderHeader = () => {
+    return (
+      <>
+        <Table.HCell style={CELL_STYLE}>书名</Table.HCell>
+        <Table.HCell style={CELL_STYLE}>状态</Table.HCell>
+      </>
+    );
+  };
+
+  const renderRow = (index: number) => {
+    const { name: title, link, status } = books[index];
+    return (
+      <>
+        <Table.Cell style={CELL_STYLE}>
+          <Link to={link} external>
+            {title}
+          </Link>
+        </Table.Cell>
+        <Table.Cell style={CELL_STYLE}>{status}</Table.Cell>
+      </>
+    );
+  };
+  return (
+    <Table
+      rowCount={books.length}
+      rowRenderer={renderRow}
+      headerRenderer={renderHeader}
+    />
+  );
+};