fix: 修改博客toc

blog/2022-10-29-IntersectionObserver用法.md

@@ -169,7 +169,7 @@ interface IntersectionObserverEntry {
 
 :::
 
-## 元素是否可见的判断
+## 判断元素是否可见
 
 通过`IntersectionObserver`我们可以判断元素是否可见的两种情况：
 
@@ -195,13 +195,9 @@ interface IntersectionObserverEntry {
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
      loading="lazy"
    ></iframe>
+## IntersectionObserver用例
 
-
-
-
-# IntersectionObserver用例
-
-## Image Lazyload
+### Image Lazyload
 
 <iframe src="https://codesandbox.io/embed/hopeful-poincare-uuhiob?fontsize=14&hidenavigation=1&theme=dark"
           width="100%"
@@ -211,9 +207,7 @@ interface IntersectionObserverEntry {
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
      loading="lazy"
    ></iframe>
-
-
-## Sticky Header BoxShadow
+### Sticky Header BoxShadow
 
 <iframe src="https://codesandbox.io/embed/angry-taussig-e07ysx?fontsize=14&hidenavigation=1&theme=dark"
           width="100%"
@@ -223,8 +217,7 @@ interface IntersectionObserverEntry {
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
      loading="lazy"
    ></iframe>
-
-## Infinite Scroll
+### Infinite Scroll
 
 <iframe src="https://codesandbox.io/embed/intelligent-albattani-yrujgn?fontsize=14&hidenavigation=1&theme=dark"
           width="100%"

blog/2024-04-01-TS全局类型定义.md

@@ -8,7 +8,7 @@ TypeScript 全局类型定义或者覆盖在日常开发中经常使用，本文
 
 <!--truncate-->
 
-# 使用declare global命名空间
+## 使用declare global命名空间
 
 在包含在 TypeScript 类型检测文件目录内的任意位置新建`xxx.d.ts`文件，并使用`declare global`全局命名空间语法来定义覆盖类型，例如：
 
@@ -66,7 +66,7 @@ export {}
 
 :::
 
-# 使用declare module命名空间
+## 使用declare module命名空间
 
 如果要对一个第三方的包覆盖其类型定义，可以使用`import <module>`和`declare module`语法，例如覆盖`axios`的类型定义。
 
@@ -103,9 +103,7 @@ declare module 'axios' {
 }
 ```
 
-
-
-# 使用全局模块类型声明
+## 使用全局模块类型声明
 
 在包含在 TypeScript 类型检测文件目录内的任意位置新建`xxx.d.ts`文件，内部可以随意定义任何类型，但是不能包含任何`export`和`import`语句，例如：
 

blog/2024-04-28-shadcnui.md

@@ -10,11 +10,11 @@ Shadcn ui 是最近比较火的一个 React 组件库，官方介绍其并非组
 
 <!--truncate-->
 
-# 使用
+## 使用
 
-## 初始化
+### 初始化
 
-shadcn ui 依赖于 tailwindcss，来实现，所以使用 shadcn ui 的组件需要安装和配置 tailwindcss，这里就不细说了。
+shadcn ui 依赖于 tailwindcss，所以使用 shadcn ui 的组件需要安装和配置 tailwindcss，这里就不细说了。
 
 tailwindcss 安装完就可以使用 shadcn ui 提供的 cli 工具来初始化一些配置了：
 
@@ -26,9 +26,8 @@ npx shadcn-ui@latest init
 
 ![image-20240428212404577](./../public/images/image-20240428212404577.png)
 
-执行这一步主要会生成一个`components.json`的配置文件，后续添加的时候需要读取这个配置文件的内容。
-
 ```json
+// components.json
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   // 组件样式
@@ -53,7 +52,7 @@ npx shadcn-ui@latest init
 }
 ```
 
-## 添加组件
+### 添加组件
 
 使用 cli 命令添加 shadcn ui 具有的组件，比如添加一个`button`组件
 
@@ -65,17 +64,17 @@ npx shadcn-ui@latest add button
 
 ![shadcn-code](./../public/images/shadcn-code.png)
 
-## 更新组件
+### 更新组件
 
 shadcn 的 cli 还有一个`diff`命令用于显示组件更新，执行`diff button`可以看到其会在终端显示远端和本地存在不同的代码行，通过蓝绿色区分开，说实话，这功能感觉比较鸡肋。
 
 ![image-20240428214650945](./../public/images/image-20240428214650945.png)
 
-## monorepo
+## monorepo 支持
 
 shadcn ui提供的三个 cli 命令都支持通过`--cwd`来指定项目的根目录，也算是支持`monorepo`吧。
 
-# cli解析
+## cli解析
 
 shadcn 的 cli 代码基于 pnpm workspace 的结构，虽然是 monorepo 项目，但 workspace 下只有一个 cli 项目，代码目录结构还是很简洁清晰的。
 
@@ -122,7 +121,7 @@ async function main() {
 main()
 ```
 
-## init
+### init
 
 `init`方法如下，正如`init`命令定义的描述那样`initialize your project and install dependencies`，其主要工作其实就两步：
 
@@ -179,7 +178,7 @@ export const init = new Command()
   })
 ```
 
-### promptForConfig
+#### promptForConfig
 
 `promptForConfig`方法源码如下，其主要工作就是三步：
 
@@ -254,7 +253,7 @@ export async function getRegistryBaseColors() {
 }
 ```
 
-### fetchRegistry
+#### fetchRegistry
 
 `promptForConfig`内部使用的`fetchRegistry`方法，默认从`https://ui.shadcn.com`域名拉取配置，这个域名也就是shadcn ui 官方文档的域名地址。`https://ui.shadcn.com/registry/styles/index.json`获取一份主题配置，对应`components.json`的`style`
 
@@ -280,7 +279,7 @@ async function fetchRegistry(paths: string[]) {
 }
 ```
 
-### resolveConfigPaths
+#### resolveConfigPaths
 
 `resolveConfigPaths`内部使用`tsconfig-paths`的`createMatchPath`方法来对`tconfig.json`中定义的`paths`字段进行解析，可以得到一个绝对路径。
 
@@ -390,7 +389,7 @@ export declare function createMatchPath(absoluteBaseUrl: string, paths: {
 
 所以上面的`resolveImport`方法对`@/components`，`@/lib/utils`这样的相对路径，解析可以得到其绝对路径如`D:\code\tsconfig-path-test\src\components`。
 
-### runInit
+#### runInit
 
 `runInit`方法负责生成`components`，`utils`等目录，以及替换`tailwind.config.ts`配置，并安装 shadcn ui 需要的第三方组件库依赖`tailwindcss-animate`，`class-variance-authority`，`clsx`等。
 
@@ -479,7 +478,7 @@ export async function runInit(cwd: string, config: Config) {
 }
 ```
 
-### getPackageManager
+#### getPackageManager
 
 `getPackageManager`方法获取项目使用的依赖管理工具，这个方法非常实用，万能！
 
@@ -518,7 +517,7 @@ export async function getPackageManager(
 }
 ```
 
-## add
+### add
 
 `add`命令的实现也比较简单，其主要实现部分的源码如下，可拆解为以下四步：
 
@@ -614,7 +613,7 @@ const add = new Command()
   })
 ```
 
-### getRegistryIndex
+#### getRegistryIndex
 
 `getRegistryIndex`会默认从远端地址——https://ui.shadcn.com/registry/index.json加载一个组件`json`，这个`json`包含了 shadcn ui 所有支持的组件信息。
 
@@ -665,7 +664,7 @@ export const registryItemSchema = z.object({
 export const registryIndexSchema = z.array(registryItemSchema)
 ```
 
-### resolveTree
+#### resolveTree
 
 在获取到远端注册的所有 shadcn ui 内部组件的信息后，`resolveTree`会对用户选择添加的组件进行依赖解析，得到所有需要添加到项目内部的组件信息。
 
@@ -708,7 +707,7 @@ export async function resolveTree(
 }
 ```
 
-### fetchTree
+#### fetchTree
 
 在获取所有要添加的组件后，使用`fetchTree`从远端加载其源码。
 
@@ -753,7 +752,7 @@ export async function fetchTree(
 }
 ```
 
-### transform
+#### transform
 
 在得到组件源码以后，从`components.json`中解析配置项`aliases.components`，得到项目存放组件的目录路径，然后使用`transform`方法对组件源码进行解析，并最终生成组件文件。
 
@@ -826,7 +825,7 @@ export async function transform(opts: TransformOpts) {
 }
 ```
 
-## diff
+### diff
 
 `diff`命令内部主要使用了[`diff`](https://github.com/kpdecker/jsdiff)对项目的组件代码和远端组件代码进行对比，然后输出到 shell 内，具体实现就不细说了，比较简单。
 
@@ -961,40 +960,40 @@ async function buildStyles(registry: Registry) {
 }
 ```
 
-# shadcn 用到的一些 nodejs 工具
+## shadcn 用到的一些 nodejs 工具
 
-## commander
+### commander
 
 注册 nodejs cli 命令以及 cli 参数，以及获取 cli 输入，执行操作等。
 
-## prompts
+### prompts
 
 cli 输入交互
 
-## zod
+### zod
 
 `zod` 是一个用于 TypeScript 和 JavaScript 的数据验证库。它允许开发者定义一个模式（schema），这个模式描述了数据应该如何结构化，以及每个字段的类型是什么。可以在 node 和 web 环境下使用。
 
-## cosmiconfig
+### cosmiconfig
 
 查找或读取`json`，`yml`等配置文件
 
-## tsconfig-paths
+### tsconfig-paths
 
 解析`tsconfig.json`中定义的`paths`的模块路径。
 
-## chalk
+### chalk
 
 cli 打印颜色文字
 
-## ora
+### ora
 
 cli loading 交互效果
 
-## node-fetch
+### node-fetch
 
 nodejs 中使用 fetch
 
-## tsx
+### tsx
 
 支持直接在 node 命令行中执行 typescript 文件。