update: 修改文件 🥳

Author: godwei123

.idea/.gitignore

@@ -9,29 +9,29 @@ const nav: DefaultTheme.NavItem[] = [
     text: "CSS",
     link: "/css/introduction",
   },
+  // {
+  //   text: "前端",
+  //   items: [
+  // {
+  //   text: "html",
+  //   link: "/basic/html/introduction",
+  // },
+  //   ],
+  // },
   {
-    text: "前端",
-    items: [
-      {
-        text: "html",
-        link: "/basic/html/introduction",
-      },
-      {
-        text: "浏览器 & 网络",
-        link: "/basic/browser/introduction",
-      },
-      {
-        text: "Coding",
-        link: "/basic/code/introduction",
-      },
-    ],
+    text: "network",
+    link: "/basic/browser/introduction",
+  },
+  {
+    text: "coding",
+    link: "/basic/code/introduction",
   },
   {
     text: "blog",
     link: "/blog/introduction",
   },
   {
-    text: "About",
+    text: "about",
     link: "/about",
   },
 ];

docs/.vitepress/nav/index.ts

@@ -1,58 +1,61 @@
 import fg from "fast-glob";
 
-const javaScriptIntroduction = { text: "Introduction", link: "/javascript/introduction" };
-const blogIntroduction = { text: "Introduction", link: "/blog/introduction" };
-const cssIntroduction = { text: "Introduction", link: "/css/introduction" };
+const javaScriptIntroduction = { text: "Introduction", link: "/javascript/introduction", order: 0 };
+const blogIntroduction = { text: "Introduction", link: "/blog/introduction", order: 0 };
+const cssIntroduction = { text: "Introduction", link: "/css/introduction", order: 0 };
 
-const javaScriptOptions: Record<string, string> = {
-  type: "类型和语法",
-  "array-string": "Array & String",
-  object: "Object",
-  "type-conversion": "类型转换",
-  prototype: "原型和原型链",
-  this: "this",
-  closure: "闭包",
-  "throttle-debounce": "节流和防抖",
-  async: "同步和异步",
-  regexp: "正则",
-  "ES5+": "ES6+",
-  "proxy-reflect": "代理和反射",
-  "broadcast-channel": "Broadcast Channel API",
-  "web-speech-api": "Web Speech API",
-  observer: "Observer API",
-  other: "其他",
-  eventloop: "Event Loop",
+const javaScriptOptions: Record<string, { text: string; order: number }> = {
+  type: { text: "类型和语法", order: 1 },
+  "array-string": { text: "Array & String", order: 2 },
+  object: { text: "Object", order: 3 },
+  "type-conversion": { text: "类型转换", order: 4 },
+  prototype: { text: "原型和原型链", order: 5 },
+  this: { text: "this", order: 6 },
+  closure: { text: "闭包", order: 7 },
+  "throttle-debounce": { text: "节流和防抖", order: 8 },
+  async: { text: "同步和异步", order: 9 },
+  regexp: { text: "正则", order: 10 },
+  "ES5+": { text: "ES6+", order: 11 },
+  "proxy-reflect": { text: "代理和反射", order: 12 },
+  "broadcast-channel": { text: "Broadcast Channel API", order: 13 },
+  "web-speech-api": { text: "Web Speech API", order: 14 },
+  observer: { text: "Observer API", order: 15 },
+  other: { text: "其他", order: 16 },
+  eventloop: { text: "Event Loop", order: 17 },
 };
 
-const CSSOptions = {
-  "@font-face": "@font-face",
-  center: "居中",
-  flex: "flex布局",
-  layout: "常见布局",
-  grid: "grid布局",
-  "text-hidden-overflow": "文本溢出",
-  bfc: "BFC",
-  position: "层叠与定位",
-  "pseudo-classes-element": "伪类与伪元素",
-  selectors: "CSS选择器",
+const CSSOptions: Record<string, { text: string; order: number }> = {
+  center: { text: "居中", order: 1 },
+  flex: { text: "flex布局", order: 2 },
+  layout: { text: "常见布局", order: 3 },
+  grid: { text: "grid布局", order: 4 },
+  "@font-face": { text: "@font-face", order: 5 },
+  "text-hidden-overflow": { text: "文本溢出", order: 6 },
+  bfc: { text: "BFC", order: 7 },
+  position: { text: "层叠与定位", order: 8 },
+  "pseudo-classes-element": { text: "伪类与伪元素", order: 9 },
+  selectors: { text: "CSS选择器", order: 10 },
 };
-
 /**
  * @description: 生成侧边栏
  */
 const generateSidebar = (
   cwd: string,
-  introduction: Record<string, string>,
-  options: Record<string, string>,
+  introduction: { text: string; link: string; order: number },
+  options: Record<string, { text: string; order: number }>,
   prefix: string
 ) => {
   const files = fg.sync(["./*.md"], { cwd: cwd, ignore: ["./introduction.md"] });
   const result = files.map((file) => {
     const path = file.replace(/(\/index)?\.md$/, "");
-    const text = path.replace(/\/$/, "").split("/").pop();
-    return { text: options[text] || text, link: `/${prefix}/${path}` };
+    const key = path.replace(/\/$/, "").split("/").pop();
+    return {
+      text: (options[key] && options[key].text) || key,
+      link: `/${prefix}/${path}`,
+      order: (options[key] && options[key].order) || 0,
+    };
   });
-  return [introduction, ...result];
+  return [introduction, ...result].sort((a, b) => a.order - b.order);
 };
 
 export const generateJavaScriptSidebar = () => {

docs/.vitepress/scripts/sidebar.ts

@@ -0,0 +1,3 @@
+setTimeout(() => {
+  console.log("Hello from the service worker");
+}, 1000);

docs/.vitepress/serviceWorker.ts

@@ -15,11 +15,6 @@
   --vp-home-hero-image-filter: blur(60px);
 }
 
-html,
-body {
-  /*font-size: 14px !important;*/
-}
-
 .components-container {
   margin: 20px 0;
 }

docs/.vitepress/theme/custom.css

@@ -7,15 +7,15 @@ import Layout from "./Layout.vue";
 export default {
   ...DefaultTheme,
   Layout: Layout,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: { app: any; router: any }) {
     // console.log(ctx);
     const { app, router } = ctx;
-    router.onBeforeRouteChange = (to: string) => {
-      console.log("before", to);
-    };
-    router.onAfterRouteChanged = (to: string) => {
-      console.log("after", to);
-    };
+    // router.onBeforeRouteChange = (to: string) => {
+    //   console.log("before", to);
+    // };
+    // router.onAfterRouteChanged = (to: string) => {
+    //   console.log("after", to);
+    // };
     app.use(naive);
   },
 };

docs/.vitepress/theme/index.ts

@@ -14,9 +14,6 @@ hero:
     - theme: alt
       text: View on GitHub
       link: https://github.com/godwei123/javascript-guide
-#    - theme: alt
-#      text: View on GitHub
-#      link: https://github.com/godwei123/javascript-guide
 
 features:
   - title: HTML

docs/index.md

@@ -1,3 +1,19 @@
 # JavaScriptGuide dev
 
 ![img.png](./public/javascript-guide-logo.svg)
+
+```text
+canvas
+requestAnimationFrame
+innerWidth/Height...
+style="--i: 2; --j: 0"
+transform-style: preserve-3d;
+perspective: 1000px;
+scroll-snap-type
+scroll-snap-align: start;
+textShadow
+shape-outside: circle();
+background-clip: text;
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+```