feat: add two slash and update deps

.vitepress/config.ts

@@ -1,5 +1,7 @@
 import { getPosts, getPostLength } from "./theme/serverUtils";
 import { buildBlogRSS } from "./theme/rss";
+import { transformerTwoslash } from "vitepress-plugin-twoslash";
+import mathjax3 from "markdown-it-mathjax3";
 
 async function config() {
   return {
@@ -88,8 +90,13 @@ async function config() {
     },
     buildEnd: buildBlogRSS,
     markdown: {
+      theme: {
+        light: "vitesse-light",
+        dark: "vitesse-dark",
+      },
+      codeTransformers: [transformerTwoslash()],
       config: (md) => {
-        md.use(require("markdown-it-mathjax3"));
+        md.use(mathjax3);
       },
     },
   };

.vitepress/theme/components/Comments.vue

@@ -7,8 +7,7 @@ import Gitalk from "gitalk";
 import { onContentUpdated, useRouter } from "vitepress";
 
 // const { route, go } = useRouter();
-function deleteChild() {
-  const element = document.querySelector("#gitalk-container");
+function deleteChild(element: HTMLDivElement | null) {
   let child = element?.lastElementChild;
   while (child) {
     element?.removeChild(child);
@@ -17,7 +16,11 @@ function deleteChild() {
 }
 onContentUpdated(() => {
   // reset gittalk element for update
-  deleteChild();
+  const element = document.querySelector("#gitalk-container");
+  if (!element) {
+    return;
+  }
+  deleteChild(element);
   const gitalk = new Gitalk({
     clientID: "a8430bf8a0464113ee24",
     clientSecret: "df4cbf03c4ceca8a39076e6b7a0fb878e55534e2",

.vitepress/theme/index.ts

@@ -1,17 +1,18 @@
-import DefaultTheme from "vitepress/theme";
+import Theme from "vitepress/theme";
 import Archives from "./components/Archives.vue";
 import Tags from "./components/Tags.vue";
 import MyLayout from "./components/MyLayout.vue";
+import TwoSlashFloatingVue from "vitepress-plugin-twoslash/client";
+
 import "./custom.css";
 
 export default {
-  ...DefaultTheme,
+  extends: Theme,
   Layout: MyLayout,
-  enhanceApp(ctx) {
-    DefaultTheme.enhanceApp(ctx);
-    const { app } = ctx;
+  enhanceApp({ app }) {
     // register global components
     app.component("Archives", Archives);
     app.component("Tags", Tags);
+    app.use(TwoSlashFloatingVue);
   },
 };

.vitepress/theme/serverUtils.ts

@@ -1,4 +1,4 @@
-import globby from "globby";
+import {globby} from 'globby';
 import matter from "gray-matter";
 import fs from "fs-extra";
 import path from "path";

README.md

@@ -16,6 +16,8 @@ This is a blog theme used vitepress to build. You could [click here](https://vis
 - [x] RSS
 - [x] Local Search
 - [x] Math Equation(markdown-it-mathjax3)
+- [x] type information with jsdoc on code snippets (by https://shikiji.netlify.app/packages/markdown-it )
+
 ## Start
 
 ```shell

package.json

@@ -4,23 +4,25 @@
   "main": "index.js",
   "author": "clark-cui <cuirongchuan@163.com>",
   "license": "MIT",
+  "type": "module",
   "devDependencies": {
-    "fast-glob": "^3.2.12",
+    "dayjs": "^1.11.10",
+    "fast-glob": "^3.3.2",
     "feed": "^4.2.2",
-    "fs-extra": "^11.1.0",
-    "globby": "11.0.4",
+    "fs-extra": "^11.2.0",
+    "globby": "14.0.0",
     "gray-matter": "^4.0.3",
-    "markdown-it": "^13.0.1",
+    "markdown-it": "^14.0.0",
     "markdown-it-mathjax3": "^4.3.2",
-    "vitepress": "1.0.0-rc.14"
+    "vitepress": "1.0.0-rc.36",
+    "vitepress-plugin-twoslash": "^0.9.18"
   },
   "scripts": {
     "dev": "vitepress dev ",
     "build": "vitepress build ",
     "serve": "vitepress serve "
   },
   "dependencies": {
-    "dayjs": "^1.11.7",
     "gitalk": "^1.8.0"
   }
 }