字数:1k 字
预计:5 分钟
阅读量:4
实现 codeBlock folder
作者:winches
更新于:4 个月前
类似:
- https://github.com/codesandbox/sandpack/issues/392
- Tailwindcss ui component docs
实现方法:
- 通过
prism-react-renderer
获取到token
- 自定义实现一个
transformTokens
方法,将用于渲染的token
数据转换为期望的格式,注意:大于xxx行、哪些需要默认展开、哪些需要默认折叠,高亮行数问题等 - 最后注入到
codeBlock
组件中,然后再添加上folder
的样式即可
ts
nextui-cli 的同步文档脚本
yml
Item 组件
DropdownItem
组件实际就是 import {BaseItem} from "@nextui-org/aria-utils";
Menu
组件里会获取 state.collection
组件然后遍历来添加 Item
并通过 useMenuItem/useAriaMenuItem
来获取 Item
的属性
useSelectableItem
控制可选列表的属性/状态,包括是否可以跳转import {useSelectableItem} from "@react-aria/selection";
- 跳转用的
navigate
在Provider
里传入
Link
组件的核心在 import {useLink as useAriaLink} from "@react-aria/link";
的 useLink
里,自己实现的onClick
逻辑,与useSelectableItem
不同
useSelectableItem
用在 Tabs
,Menu
等组件上
打开 Code
src/utils/tiers.ts
文件
添加 supabase table
- 添加 supabase 的
sql
文件 - 运行初始化命令
- supabase 运行在 docker 中
官网示例:https://supabase.com/docs/guides/local-development/overview
登录账号
任意输入邮箱,然后在 Inbucket
中接码
Docker 操作
查看docker 占用空间
bash
docker system df
清理docker占用空间
删除未使用的镜像,不加-a就删除从未使用过的镜像
bash
docker image prune -a
删除未使用的docker volume
bash
docker volume prune
删除每个未使用的容器、镜像、volumes和networks
bash
docker system prune -a --volumes