请问下,
- 本网站用的什么组件库?
- 侧边栏是写死在布局组件中的还是在需要侧边栏的组件中引入的?
- 评论树功能是怎么实现的?比如:
- 评论的子回复和孙子回复的缩进相同;
- 点击view x replies可以获取新回复并增量显示(就是避免显示时出现评论的重复或遗漏)。
- 评论组件是什么?就是这种可以插入Markdown格式的内容的评论组件。
- 向下滚动时,侧边栏不会随feed流无限滚动,这个是怎么实现的?
- 获取哪些内容时需要用缓存?帖子详情还是首页内容?
- 通知功能是怎么实现的?
谢谢。
请问下,
谢谢。
组件库基本是我自己写的,UI 相关只用到两个,一个是 @floating-ui/react,以前是 popperjs,用于浮动定位,@headlessui/react 用于弹窗(这个库我打算以后去掉自己写一个),框架是 remix
侧边栏在全局 Layout 中是可以随页面变化引入的。
评论树的存储数据抽象上多了一个 parentId 字段,具体实现也可以考虑用父子表
评论的 UI 组件是我自己实现的,没有库,输入区是用 prosemirror 实现的编辑器,具体实现比较复杂,简单说需要实现一个自定义的光标(动画)、markdown 和 prosemirror 的 data layer 的互相转换(需要学一些编辑器概念),这里需要针对不同的 markdown 语法做特定的 parse,比如代码高亮、表格组件、加粗斜体链接等。
用 js 实现的滚动锁定,这样设计的原因是侧边栏高度通常是有限的,但可能会超过 window 高度,feed 流的高度是一直增加的,有两个滚动需求,为了避免出现多个滚动条体验不好,就用 js + sticky position 实现侧边栏的滚动跟随,需要考虑的 position 变化如下图:
hackertalk 大部份数据从 API 获取后就以 dict + 索引的方式缓存在 zustand 中(内存),这样可以在客户端有数据的时候优先显示页面,再从 API 拉最新的数据刷新 dict,由于大部份数据都不会改变,所以加载 API 新数据后页面也不会有用户感知的抖动,避免用户看到太多加载等待过程,体验更加接近本地 APP。
这个比较复杂,简单说就是一个表存各种通知数据,用 aws 的 fifo SQS 传递通知事件,实现分布式一致性。