docs: use new vuepress plugin api

docs/src/.vuepress/theme/clientAppEnhance.ts

@@ -1,6 +1,10 @@
-import { defineClientAppEnhance } from '@vuepress/client'
+import { defineClientConfig } from '@vuepress/client'
 import VueAnimXyz from '@animxyz/vue3'
 
-export default defineClientAppEnhance(({ app }) => {
-  app.use(VueAnimXyz)
+export default defineClientConfig({
+  enhance({ app, router, siteData }){
+    app.use(VueAnimXyz)
+  },
+  setup(){},
+  rootComponents: [],
 })

docs/src/.vuepress/theme/index.ts

@@ -1,12 +1,80 @@
 import { resolve } from 'path'
-import { Theme } from 'vuepress'
+import { defaultTheme, Theme } from 'vuepress'
 import { path } from '@vuepress/utils'
+import { useVueFlow } from '@braks/vue-flow'
+
+const { vueFlowVersion } = useVueFlow()
 
 export default {
   name: 'vuepress-theme-local',
-  extends: '@vuepress/theme-default',
+  extends: defaultTheme({
+    repo: 'bcakmakoglu/vue-flow',
+    docsDir: 'docs/src/',
+    docsBranch: 'master',
+    lastUpdated: true,
+    contributors: true,
+    darkMode: true,
+    logo: '/favicons/android-chrome-512x512.png',
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          children: [
+            '/guide/',
+            '/guide/getting-started',
+            '/guide/theming',
+            '/guide/config',
+            '/guide/state',
+            '/guide/node',
+            '/guide/edge',
+            '/guide/composables',
+            { text: 'Utilities', children: ['/guide/utils/graph', '/guide/utils/instance', '/guide/utils/edge'] },
+            {
+              text: 'Additional Components',
+              children: ['/guide/components/background', '/guide/components/minimap', '/guide/components/controls'],
+            },
+          ],
+        },
+      ],
+      '/examples/': [
+        {
+          text: 'Examples',
+          children: [
+            '/examples/',
+            '/examples/custom-node',
+            '/examples/edges',
+            '/examples/nesting',
+            '/examples/connectionline',
+            '/examples/updatable-edge',
+            '/examples/update-node',
+            '/examples/validation',
+            '/examples/save',
+            '/examples/dnd',
+            '/examples/empty',
+            '/examples/hidden',
+            '/examples/interaction',
+            '/examples/multi',
+            '/examples/horizontal',
+            '/examples/teleport',
+            '/examples/pinia',
+            '/examples/stress',
+          ],
+        },
+      ],
+    },
+    navbar: [
+      { text: `v${vueFlowVersion.value}`, link: '' },
+      { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
+      {
+        text: 'Examples',
+        link: '/examples/',
+        activeMatch: '^/examples/',
+      },
+      { text: 'TypeDocs', link: 'https://types.vueflow.dev/' },
+    ],
+  }),
   layouts: {
     Layout: resolve(__dirname, 'layouts/default.vue'),
   },
-  clientAppEnhanceFiles: path.resolve(__dirname, './clientAppEnhance.ts'),
+  clientConfigFile: path.resolve(__dirname, './clientAppEnhance.ts'),
 } as Theme