chore: revert verison and debugging slots

Author: codebender828

package.json

@@ -52,6 +52,7 @@
     "@cypress/snapshot": "^2.1.7",
     "@cypress/vite-dev-server": "^1.2.6",
     "@cypress/vue": "^3.0.1",
+    "@docusaurus/utils": "^2.0.0-beta.3",
     "@emotion/css": "^11.1.3",
     "@emotion/server": "^11.0.0",
     "@manypkg/cli": "^0.17.0",
@@ -67,7 +68,9 @@
     "@types/lodash.kebabcase": "^4.1.6",
     "@types/lodash.mergewith": "^4.6.6",
     "@types/recursive-readdir": "^2.2.0",
+    "@types/shelljs": "^0.8.9",
     "@types/tinycolor2": "^1.4.2",
+    "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "4.0.1",
     "@vitejs/plugin-vue": "^1.2.1",
@@ -130,13 +133,14 @@
     "pretty": "^2.0.0",
     "react": "^17.0.1",
     "recursive-readdir": "^2.2.2",
+    "shelljs": "^0.8.4",
     "tinycolor2": "^1.4.2",
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.3",
     "vite": "^2.4.0",
     "vite-plugin-components": "^0.8.3",
-    "vite-plugin-mdx-vue": "^1.6.0",
+    "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.9.2",
     "vite-ssg": "^0.11.4",
     "vitepress": "^0.12.0",

scripts/generate-search-meta.ts

@@ -0,0 +1,97 @@
+import { parseMarkdownFile, fileToPath, removePrefix } from '@docusaurus/utils'
+import path from 'path'
+//@ts-ignore
+import toc from 'markdown-toc'
+import { v4 as uuid } from 'uuid'
+import shell from 'shelljs'
+import fs from 'graceful-fs'
+import prettier from 'prettier'
+
+interface ResultType {
+  content: string
+  id: string
+  url: string
+  type: 'lvl1' | 'lvl2' | 'lvl3'
+  hierarchy: {
+    lvl1: string | null
+    lvl2?: string | null
+    lvl3?: string | null
+  }
+}
+
+interface TOCResultItem {
+  content: string
+  slug: string
+  lvl: 1 | 2 | 3
+  i: number
+  seen: number
+}
+
+const websiteRoot = 'website/src/pages'
+
+async function getMDXMeta(file: string) {
+  const { content, frontMatter } = await parseMarkdownFile(file)
+  const tableOfContent = toc(content)
+  const json = tableOfContent.json as TOCResultItem[]
+  const slug = fileToPath(file)
+    .replace(`/${websiteRoot}`, '')
+    .replace(process.cwd(), '')
+
+  const result: ResultType[] = []
+
+  result.push({
+    content: frontMatter.title as string,
+    id: uuid(),
+    type: 'lvl1',
+    url: removePrefix(slug, '/'),
+    hierarchy: {
+      lvl1: frontMatter.title as string,
+    },
+  })
+
+  json.forEach((item, index) => {
+    result.push({
+      content: item.content,
+      id: uuid(),
+      type: `lvl${item.lvl}` as any,
+      url: `${removePrefix(slug, '/')}#${item.slug}`,
+      hierarchy: {
+        lvl1: frontMatter.title as string,
+        lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null,
+        lvl3: item.lvl === 3 ? item.content : null,
+      },
+    })
+  })
+
+  return result
+}
+
+async function getSearchMeta() {
+  let json: any = []
+
+  const files = shell
+    .ls('-R', websiteRoot)
+    .map((file) => path.join(process.cwd(), websiteRoot, file))
+    .filter((file) => file.endsWith('.mdx'))
+
+  files.forEach(async (file) => {
+    let result: any[] = []
+    try {
+      result = await getMDXMeta(file)
+      json.push(...result)
+    } catch (error) {
+      /** do nothing */
+    }
+  })
+
+  json = prettier.format(JSON.stringify(json), { parser: 'json' })
+  const outPath = path.join(
+    process.cwd(),
+    'website/src/config',
+    'search-meta.json'
+  )
+  fs.writeFileSync(outPath, json)
+  console.log('Search meta is ready ✅')
+}
+
+getSearchMeta()

website/package.json

@@ -42,7 +42,7 @@
     "vite-plugin-components": "^0.8.3",
     "vite-plugin-icons": "^0.3.3",
     "vite-plugin-md": "^0.6.0",
-    "vite-plugin-mdx-vue": "^1.6.0",
+    "vite-plugin-mdx-vue": "^1.1.3",
     "vite-plugin-pages": "^0.9.2",
     "vite-ssg": "^0.11.4"
   }

website/src/App.vue

@@ -1,12 +1,13 @@
 <template>
   <c-reset />
-  <router-view v-slot="{ Component, route }">
+  <!-- <router-view v-slot="{ Component, route }">
     <c-container px="0" :max-w="route.path === '/' ? 'auto' : '1440px'">
-      <!-- <c-animate-presence type="scale"> -->
+      <c-animate-presence type="scale">
       <component :is="Component" />
-      <!-- </c-animate-presence> -->
+      </c-animate-presence>
     </c-container>
-  </router-view>
+  </router-view> -->
+  <router-view />
 </template>
 
 <script setup lang="ts">

website/src/config/guides-sidebar.json

@@ -30,20 +30,12 @@
           "open": true,
           "routes": [
             {
-              "title": "Create React App",
-              "path": "/guides/integrations/with-cra"
+              "title": "Vite",
+              "path": "/guides/integrations/with-vite"
             },
             {
-              "title": "Framer Motion",
-              "path": "/guides/integrations/with-framer"
-            },
-            {
-              "title": "React Hook Form",
-              "path": "/guides/integrations/with-hook-form"
-            },
-            {
-              "title": "React Table",
-              "path": "/guides/integrations/with-react-table"
+              "title": "Vue CLI",
+              "path": "/guides/integrations/with-vue-cli"
             }
           ]
         }