refactor: 使用 vitepress 打包文档

.gitignore

@@ -1,2 +1,6 @@
 node_modules
 .DS_Store
+docs/.vitepress/cache
+docs/.vitepress/dist
+.temp
+.pnpm-lock.yaml

docs/.vitepress/config.mts

@@ -0,0 +1,35 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "frontend-interview",
+  description: "宇宙最强的前端面试指南",
+  themeConfig: {
+    search: {
+      provider: "local"
+    },
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: "Home", link: "/README" },
+      { text: "每日一题", link: "/daily/README", activeMatch: "/topics/" },
+      { text: "模拟面试", link: "/mock-interview/", activeMatch: "/topics/" },
+
+
+    ],
+
+    sidebar: [
+      // {
+      //   text: "Examples",
+      //   items: [
+      //     { text: "Markdown Examples", link: "./docs/" },
+      //     { text: "Runtime API Examples", link: "/api-examples" },
+      //   ],
+      // },
+    ],
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/azl397985856/fe-interview" },
+    ],
+    outline: [2, 4],
+  },
+});

docs/.vitepress/theme/cover.less

@@ -0,0 +1,23 @@
+.Layout.fe-interview-layout {
+  .VPDocAsideOutline {
+    a.outline-link {
+      display: inline-block;
+      &.active {
+        color: var(--vp-c-brand-1);
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .VPContent {
+    .VPHome {
+      @media (min-width: 640px) {
+        .container .name {
+          max-width: 666px;
+        }
+      }
+    }
+  }
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,18 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import Theme from 'vitepress/theme'
+import './style.css'
+import './cover.less'
+
+
+export default {
+  extends: Theme,
+  Layout: () => {
+    return h(Theme.Layout, {class:'fe-interview-layout'}, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+}

docs/.vitepress/theme/style.css

@@ -0,0 +1,155 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ * 
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-green: #10b981;
+  --vp-c-green-light: #34d399;
+  --vp-c-green-lighter: #6ee7b7;
+  --vp-c-green-dark: #059669;
+  --vp-c-green-darker: #047857;
+
+  --vp-c-brand-1: var(--vp-c-green);
+  --vp-c-brand-2: var(--vp-c-green-light);
+  --vp-c-brand-3: var(--vp-c-green-lighter);
+  --vp-c-brand-soft: rgba(110, 231, 183, 0.22);
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  /* --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3); */
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+:root.dark {
+  --vp-c-brand-1: var(--vp-c-green);
+  --vp-c-brand-2: var(--vp-c-green-dark);
+  --vp-c-brand-3: var(--vp-c-green-darker);
+  --vp-c-brand-soft: rgba(4, 120, 87, 0.25);
+}

docs/README.md

@@ -42,7 +42,7 @@
 
 ## 每日一题
 
-[每日一题汇总](./daily/)
+[每日一题汇总](./daily/README)
 
 ## 模拟面试记录
 
@@ -175,7 +175,7 @@ JavaScript 是前端基础中的基础了，这里的面试题目层出不穷，
 - [引用和操作符优先级](./topics/js/reference&priority.md)
 - [原型和继承](./topics/js/prototype.md)
 - [this](./topics/js/this.md)
-  <!-- - [执行上下文（EC）](./topics/js/EC.md)（施工中）
+ <!-- - [执行上下文（EC）](./topics/js/EC.md)（施工中） -->
 <!-- - [ES6+](es6+.md)（施工中) -->
 
 如果上面的专题你都看过了，那么来回答几个问题看你是否真的掌握了。
@@ -991,7 +991,7 @@ Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建
 - 项目刚刚创建，个人精力有限。再加上有些东西我本人也不是很精通，因此邀请各路仙友加入到这个项目中来，欢迎大家认领相应的模块，当然也可以添加新的模块。
 - 如果有想法和创意，请提 [issue](https://github.com/azl397985856/fe-interview/issues) 或者进群提
 - 如果想贡献代码，请提 [PR](https://github.com/azl397985856/fe-interview/pulls)
-- 如果需要修改项目中图片，[这里](./assets/drawio/) 存放了项目中绘制图的源代码， 大家可以用 [draw.io](https://www.draw.io/) 打开进行编辑。
+- 如果需要修改项目中图片，[这里](https://github.com/azl397985856/fe-interview/tree/master/docs/assets/drawio/topics) 存放了项目中绘制图的源代码， 大家可以用 [draw.io](https://www.draw.io/) 打开进行编辑。
 
 ## License
 

docs/daily/2019-11-25.md

@@ -84,7 +84,7 @@ describe('debounce:', () => {
 ```
 
 执行结果
-![](assets/2019-11-25 - 写一个debounce的装饰器-unit-test.png)
+![](https://lucifer.ren/fe-interview/daily/assets/2019-11-25%20-%20%E5%86%99%E4%B8%80%E4%B8%AAdebounce%E7%9A%84%E8%A3%85%E9%A5%B0%E5%99%A8-unit-test.png)
 
 
 ### 扩展

docs/index.md

@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "大前端面试宝典 - 图解前端"
+#   text: "宇宙最强的前端面试指南"
+  tagline: 宇宙最强的前端面试指南
+  actions:
+    - theme: brand
+      text: 面试指南
+      link: /README
+    - theme: alt
+      text: 每日一题
+      link: /daily/README
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+

docs/mock-interview/index.md

@@ -0,0 +1,4 @@
+# 模拟面试
+
+- [大前端模拟面试 - 2019-12-14](./2019-12-14.md)
+- [大前端模拟面试 - 2019-12-14](./2020-02-20.md)

docs/topics/ts/ts-generics.md

@@ -164,7 +164,7 @@ id(null).toString(); // ok
 
 为了解决上面的这些问题，我们**使用泛型对上面的代码进行重构**。和我们的定义不同，这里用了一个 类型 T，这个 **T 是一个抽象类型，只有在调用的时候才确定它的值**，这就不用我们复制粘贴无数份代码了。
 
-```js
+```ts
 function id<T>(arg: T): T {
   return arg;
 }
@@ -266,7 +266,7 @@ interface Person {
 
 > 功能和上面新建一个新的 interface 一样，但是更优雅。
 
-最后来看下泛型 Partial<Type> 的具体实现，可以看出其没有直接使用 JS 的语法，而是自己定义了一套语法，比如这里的 `keyof`，至此完全应证了我上面的观点。
+最后来看下泛型 `Partial<Type>` 的具体实现，可以看出其没有直接使用 JS 的语法，而是自己定义了一套语法，比如这里的 `keyof`，至此完全应证了我上面的观点。
 
 ```ts
 type Partial<T> = { [P in keyof T]?: T[P] };
@@ -351,7 +351,7 @@ type Lucifer<T> = LeetCode<T>;
 
 ## 泛型为什么使用尖括号
 
-为什么泛型要用尖括号（<>），而不是别的？ 我猜是因为它和 () 长得最像，且在现在的 JS 中不会有语法歧义。但是，它和 JSX 不兼容！比如：
+为什么泛型要用尖括号（`<>`），而不是别的？ 我猜是因为它和 () 长得最像，且在现在的 JS 中不会有语法歧义。但是，它和 JSX 不兼容！比如：
 
 ```tsx
 function Form() {
@@ -386,7 +386,7 @@ class MyComponent extends React.Component<Props, State> {
 
 (类泛型)
 
-总结下就是： 泛型的写法就是在标志符后面添加尖括号（<>），然后在尖括号里写形参，并在 body（函数体， 接口体或类体） 里用这些形参做一些逻辑处理。
+总结下就是： 泛型的写法就是在标志符后面添加尖括号（`<>`），然后在尖括号里写形参，并在 body（函数体， 接口体或类体） 里用这些形参做一些逻辑处理。
 
 ## 泛型的参数类型 - “泛型约束”
 
@@ -418,7 +418,7 @@ function trace<T>(arg: T): T {
 
 > 注意：不同 TS 版本可能提示信息不完全一致，我的版本是 3.9.5。下文的所有测试结果均是使用该版本，不再赘述。
 
-```js
+```ts
 function trace<T>(arg: T): T {
   console.log(arg.size); // Error: Property 'size doesn't exist on type 'T'
   return arg;
@@ -464,7 +464,7 @@ const a: Array = ["1"];
 
 如上代码会被错：`Generic type 'Array<T>' requires 1 type argument(s).ts` 。 有没有觉得和函数调用没传递参数报错很像？像就对了。
 
-这个时候你再去看 Set<number>， Promise<string>，是不是很快就知道啥意思了？它们本质上都是包装类型，并且支持多种参数类型，因此可以用泛型来约束。
+这个时候你再去看 `Set<number>`， `Promise<string>`，是不是很快就知道啥意思了？它们本质上都是包装类型，并且支持多种参数类型，因此可以用泛型来约束。
 
 ### React.FC
 
@@ -554,15 +554,15 @@ const bb: A = ["1"]; // ok
 const cc: A<number> = [1]; // ok
 ```
 
-上面的 A 类型默认是 string 类型的数组。你可以不指定，等价于 Array<string>，当然你也可以显式指定数组类型。有一点需要注意：在 JS 中，函数也是值的一种，因此:
+上面的 A 类型默认是 string 类型的数组。你可以不指定，等价于 `Array<string>`，当然你也可以显式指定数组类型。有一点需要注意：在 JS 中，函数也是值的一种，因此:
 
 ```js
 const fn = () => null; // ok
 ```
 
 但是泛型这样是不行的，这是和函数不一样的地方（设计缺陷？Maybe）：
 
-```js
+```ts
 type A = Array; // error: Generic type 'Array<T>' requires 1 type argument(s).
 ```