2022/4/16

目前为止大的框架已经搭建完成，包括数据获取，路由，布局，调试组件，还有一些基本组件的样式。记录几个学到很多的点。

css 用的 tailwindcss ，不包含 js 运行时，也就是说不能对类名做字符串拼接。遇到一个很普通的场景，组件要依靠 prop 改变自己的样式，而这个 prop 是枚举，而不是 boolean 的。要咋实现动态样式呢？总不能用三元表达式吧。从https://github.com/tailwindlabs/tailwindcss/discussions/3461学到，用一个对象来做映射就可以了。prop 的 category 做键，样式类名做值，在这个对象上面用方框操作符 [] 就可以映射过来啦。这篇帖子中也提到一个包 classnames 应对这种情形。

一个小细节：API 给我的 text 里面有用 \n 表示换行符，如果直接塞到 span 里面会变成一个空格。React 框架下不能把换行标签直接用字符串插进去，怎样让它正确换行呢，分享一下我的做法：

const plain_text_formatter = (plain_text) => {
  const divided_text = plain_text.split('\n');
  const res = [];
  divided_text.slice(0, divided_text.length - 1).forEach((item, index) => {
    res.push(...[item, <br key={index} />]);
  });
  res.push(divided_text[divided_text.length - 1]);
  res.filter((item) => item !== '');
  return res;
};

这个函数接受字符串，先从 \n 的地方切分掉得到一个字符串的数列，在数列每两项之间插入一 <br key={index} /> 元素，最后筛掉空字符串，把返回结果拿去渲染即可。

使用 vercel 构建的时候遇到诡异的错误：

本该从 getStaticProps 获取的数据竟然报 undefined，而且这个错误在开发模式下无法复现。折腾一通，在map函数前加上小问号解决问题，猜测可能是触发了 vercel 构建过程中的类型检查机制：

function post({ page, pageBlock, childrenBlocks }) {
  return (
    <div>
      <PostHead {...page} />
      {childrenBlocks?.map((block) => blockMapper(block))}
    </div>
  );
};
export default post

尝试处理 nested children blocks。这种层层嵌套的数据结构很不友好，加上 API 有每秒请求数量的限制，要好好研究一下怎么写 data fetching。

在导航栏上尝试了毛玻璃拟物效果，两句代码 bg-background/80 backdrop-blur-md 能出效果。backdrop 基本是和蒙版相关。

待办

2022/4/18

重写datafetching相关的函数，用了令牌桶整流，请求失败重新请求。

2022/4/20

写好了两种列表，code block。语法高亮用到 react-syntax-highlighter ，仍然有待优化。

2022/4/21

用 flex 布局重写嵌套块。

解决了 flex item 中 text wrap 的问题。

解决了嵌套块颜色一致性的问题。

写了好几种文本块。

写了 Image Block，有待增强。

增加 Video Block, Youtube only for now. Using react-lite-youtube-embed

Use Embed Block to support bilibili H5 player.

待办

2022/4/22

😅搞了一天的 WSL2，可能是我的网卡有问题，虚拟机下无法使用 ssh。这样远程开发也可能遇到问题。放弃。

意外收获：升级 clash 到 0.19.16，新增 TUN 模式，发请求终于不卡了。

2022/4/23

增加可复用的 model，现在仅用于查看图片。

增加了配置文件，有待增强。

重写了 footer。

增加 property _Date 用于覆盖 page 创建日期，用来迁移老笔记。

迁移了小部分笔记。

Production deployed。

待办

2022/4/27

搞定了 WSL2，电脑好卡

书签可以渲染了

声明式的网站结构,site.config.js

bling bling 的新拟态小卡片

增加黑暗模式 好耶！。用 tailwind支持的 dark: 加上 context 实现

待办

2022/4/28

content table，支持页内跳转。flex item + sticky 布局。

页内跳转的攻略：How to scroll to an element inside a div using javascript?

2022/4/29

支持了基于 notion database 的 comment 系统。逻辑就是把用户输入文本框的数据经过边缘函数提交到到 notion 数据库，一条留言对应一个 page。因为跨域限制，notion API 不可以直接从浏览器发请求，一定要通过服务器转发。这样是对的，毕竟数据库增删改权限很敏感。

page 的 properties 有很多可玩性，可以拓展实现非常多的功能。甚至可以用来做鉴权？

comment 之前有身份认证的过程，这里直接套用了 NextAuth 的解决方案，用 JWT。目前只支持了 GitHub，后面再更新其他。

如何在静态网页上保证互动的及时性？Nextjs 的 ISR 再快也比不上动态网页的更新速度。比如用户提交一条留言，这时候必须有人去访问才会 purge，这个用户如果不刷新只是在 app 内跳转的话就看不到自己提交的东西。我现在的解决方法是响应成功，就把新提交的留言存到 state 里面。这样带来的问题就是，如果用户来回跳转或者刷新，那么会发现之前的留言不见了，刷新几次后才重新出现，因为服务端文件终于刷新了。

怎样在服务端更新之际保证体验的连续性，我觉得可以尝试一下本地存储。