feat(docs): replace vitepress with vuepress

* vitepress too limited

.yarnrc.yaml

@@ -0,0 +1 @@
+nodeLinker: 'node-modules'

docs/.gitignore

@@ -1 +1,2 @@
 .data.json
+.temp

docs/.vitepress/config.ts

@@ -1,74 +0,0 @@
-import { config } from 'dotenv'
-import { resolve } from 'path'
-import { defineConfig, HeadConfig } from 'vitepress'
-import WindiCSS from 'vite-plugin-windicss'
-import Icons from 'unplugin-icons/vite'
-import Components from 'unplugin-vue-components/vite'
-import svgLoader from 'vite-svg-loader'
-import { demoPlugin } from './plugins/demo'
-import head from './head'
-
-config({ path: resolve(__dirname, '.env') })
-
-export default defineConfig({
-  title: 'Vue Flow',
-  lastUpdated: true,
-  srcDir: './src',
-  head: head as HeadConfig[],
-
-  vite: {
-    resolve: {
-      alias: {
-        '~': resolve('../../package/src'),
-      },
-    },
-    plugins: [
-      svgLoader(),
-      WindiCSS({
-        config: resolve(__dirname, './windi.config.ts'),
-      }) as any,
-      Components({
-        dirs: [resolve(__dirname, './components')],
-        deep: true,
-        // allow auto load markdown components under `./src/components/`
-        extensions: ['vue', 'md'],
-        // allow auto import and register components used in markdown
-        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-        dts: false,
-      }),
-      Icons({
-        // expiremental
-        autoInstall: true,
-      }),
-    ],
-  },
-
-  themeConfig: {
-    repo: 'bcakmakoglu/vue-flow',
-    docsDir: 'docs',
-    docsBranch: 'master',
-    lastUpdated: 'Last Updated',
-
-    algolia: {
-      appId: 'YCY25RSLA8',
-      apiKey: process.env.ALGOLIA_API_KEY,
-      indexName: (process.env.NODE_ENV !== 'production' ? 'dev_' : 'prod_') + 'VUE-FLOW',
-    },
-
-    nav: [
-      { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
-      {
-        text: 'Examples',
-        link: '/examples/basic',
-        activeMatch: '^/examples/',
-      },
-    ],
-  },
-
-  markdown: {
-    config(md) {
-      md.use(demoPlugin)
-      return md
-    },
-  },
-})

docs/.vitepress/plugins/demo.ts

@@ -1,70 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import MarkdownIt from 'markdown-it'
-import { highlight } from './highlight'
-
-interface HoistedTags {
-  script: string[]
-  style: string[]
-  components: string[]
-}
-
-type ExtendedMarkdownParsedData = { hoistedTags: HoistedTags }
-
-let index = 1
-// hoist <script> and <style> tags out of the returned html
-// so that they can be placed outside as SFC blocks.
-export const demoPlugin = (md: MarkdownIt): any => {
-  const RE = /<demo /i
-
-  md.renderer.rules.html_inline = (tokens: any, idx: any) => {
-    const content = tokens[idx].content
-    const data = (md as any).__data as ExtendedMarkdownParsedData
-    const hoistedTags =
-      data.hoistedTags ||
-      (data.hoistedTags = {
-        script: [],
-        style: [],
-        components: [],
-      })
-
-    if (RE.test(content.trim())) {
-      const componentName = `demo${index++}`
-      let language = (content.match(/language=("|')(.*)('|")/) || [])[2] ?? ''
-      const src = (content.match(/src=("|')(\S+)('|")/) || [])[2] ?? ''
-
-      const { realPath, urlPath, importMap } = md as any
-      const absolutePath = path
-        .resolve(realPath ?? urlPath, '../', src)
-        .split(path.sep)
-        .join('/')
-
-      if (!src || !fs.existsSync(absolutePath)) {
-        const warningMsg = `${absolutePath} does not exist!`
-        console.warn(`[vitepress]: ${warningMsg}`)
-        return `<demo src="${absolutePath}" >
-        <p>${warningMsg}</p>`
-      }
-      if (!language) {
-        language = (absolutePath.match(/\.(.+)$/) || [])[1] ?? 'vue'
-      }
-
-      const codeStr = fs.readFileSync(absolutePath).toString()
-      const htmlStr = encodeURIComponent(highlight(codeStr, language))
-
-      hoistedTags.script!.unshift(`import ${componentName} from '${absolutePath}' \n`)
-      hoistedTags.components!.push(componentName)
-
-      return content.replace(
-        '>',
-        ` componentName="${componentName}" htmlStr="${htmlStr}" codeStr="${encodeURIComponent(codeStr)}" ${
-          importMap ? `importMap="${encodeURIComponent(JSON.stringify(importMap))}"` : ''
-        } >
-        <${componentName}></${componentName}>
-        `,
-      )
-    } else {
-      return content
-    }
-  }
-}

docs/.vitepress/plugins/highlight.ts

@@ -1,46 +0,0 @@
-import chalk from 'chalk'
-import prism from 'prismjs'
-import loadLanguages from 'prismjs/components/index'
-import escapeHtml from 'escape-html'
-
-// required to make embedded highlighting work...
-loadLanguages(['markup', 'css', 'javascript'])
-
-function wrap(code: string, lang: string): string {
-  if (lang === 'text') {
-    code = escapeHtml(code)
-  }
-  return `<pre v-pre><code>${code}</code></pre>`
-}
-
-export const highlight = (str: string, lang: string) => {
-  if (!lang) {
-    return wrap(str, 'text')
-  }
-  lang = lang.toLowerCase()
-  const rawLang = lang
-  if (lang === 'vue' || lang === 'html') {
-    lang = 'markup'
-  }
-  if (lang === 'md') {
-    lang = 'markdown'
-  }
-  if (lang === 'ts') {
-    lang = 'typescript'
-  }
-  if (lang === 'py') {
-    lang = 'python'
-  }
-  if (!prism.languages[lang]) {
-    try {
-      loadLanguages([lang])
-    } catch (e) {
-      console.warn(chalk.yellow(`[vitepress] Syntax highlight for language "${lang}" is not supported.`))
-    }
-  }
-  if (prism.languages[lang]) {
-    const code = prism.highlight(str, prism.languages[lang], lang)
-    return wrap(code, rawLang)
-  }
-  return wrap(str, 'text')
-}

docs/.vitepress/theme/index.ts

@@ -1,10 +0,0 @@
-import { Theme } from 'vitepress';
-import DefaultTheme from 'vitepress/theme'
-import 'virtual:windi.css'
-import '@braks/vue-flow/dist/style.css'
-import '@braks/vue-flow/dist/theme-default.css'
-import '../assets/index.css'
-
-export default {
-  ...DefaultTheme,
-} as Theme

docs/components/home/Banner.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import data from '../../../.data.json'
+import data from '../../.data.json'
 import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
-
 </script>
 <template>
-  <div class="w-full bg-gray-900 text-white">
+  <div class="w-full bg-black text-white">
     <div class="max-w-9/12 md:max-w-3/4 lg:max-w-4xl m-auto py-4 md:py-12">
       <div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center <md:divide-y md:divide-x divide-blue-200">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">

docs/components/home/Home.vue

@@ -1,75 +1,67 @@
 <script lang="ts" setup>
-import { VueFlow, Handle, Position, useVueFlow } from "@braks/vue-flow";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
-import BoxNode from "./nodes/Box.vue";
-import { watch } from "vue";
+import { watch } from 'vue'
+import { VueFlow, Handle, Position, useVueFlow } from '@braks/vue-flow'
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import BoxNode from './nodes/Box.vue'
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const { dimensions, instance, onPaneReady, getNode } = useVueFlow({
+const { dimensions, instance, onPaneReady, getNodes, getNode } = useVueFlow({
   nodes: [
-    { id: "intro", type: "box", position: { x: 0, y: 0 }, draggable: true, extent: [[-150, 0], [150, 100]] },
-    { id: "examples", type: "box", position: { x: -50, y: 400 } },
-    { id: "documentation", type: "box", position: { x: 300, y: 400 } }
+    { id: 'intro', type: 'box', position: { x: 0, y: 0 }, draggable: true },
+    { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
+    { id: 'documentation', type: 'box', position: { x: 300, y: 400 } },
   ],
   edges: [
     {
-      id: "eintro-examples",
-      type: "smoothstep",
-      sourceHandle: "a",
-      source: "intro",
-      target: "examples",
+      id: 'eintro-examples',
+      type: 'smoothstep',
+      sourceHandle: 'a',
+      source: 'intro',
+      target: 'examples',
       animated: true,
-      style: { strokeWidth: 2, stroke: "#8b5cf6" }
+      style: { strokeWidth: 2, stroke: '#8b5cf6' },
     },
     {
-      id: "eintro-documentation",
-      type: "smoothstep",
-      sourceHandle: "a",
-      source: "intro",
-      target: "documentation",
+      id: 'eintro-documentation',
+      type: 'smoothstep',
+      sourceHandle: 'a',
+      source: 'intro',
+      target: 'documentation',
       animated: true,
-      style: { strokeWidth: 2, stroke: "#f97316" }
-    }
+      style: { strokeWidth: 2, stroke: '#f97316' },
+    },
   ],
   elementsSelectable: true,
   nodesDraggable: false,
   panOnDrag: false,
-  zoomOnScroll: false
-});
+  zoomOnScroll: false,
+})
 
-watch(
-  [
-    breakpoints.sm,
-    breakpoints.md,
-    breakpoints.lg,
-    breakpoints.xl,
-    breakpoints["2xl"]
-  ],
-  () => setTimeout(() => {
-    instance.value?.fitView();
-  }, 1)
-);
+onPaneReady(async ({ fitView }) => {
+  fitView({
+    nodes: ['intro', 'examples', 'documentation'],
+    duration: 1500,
+  })
 
-onPaneReady(({ fitView }) => {
   setTimeout(() => {
-    fitView({
-      nodes: ["intro", "examples", "tour", "documentation"],
-      duration: 1500
-    });
-  });
-});
+    watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
+      setTimeout(() => {
+        instance.value?.fitView()
+      }, 5),
+    )
+  }, 1500)
+})
 </script>
 <template>
-  <div class="bg-white h-[75vh]">
-    <VueFlow>
+  <div class="bg-white h-[90vh] md:h-[75vh]">
+    <VueFlow class="dark:bg-black bg-white">
       <template #node-box="props">
         <template v-if="props.id === 'intro'">
           <div class="max-w-[500px]">
             <BoxNode class="bg-green-500 text-white">
               <div class="font-mono flex flex-col gap-4 p-4 items-center">
-                <h1 class="pointer-events-none text-2xl lg:text-4xl text-center">Visualize your ideas with Vue
-                  Flow</h1>
+                <h1 class="pointer-events-none text-2xl lg:text-4xl text-center">Visualize your ideas with Vue Flow</h1>
                 <h2 class="pointer-events-none text-lg lg:text-xl font-normal">
                   A customizable Vue.js library for building node-based editors and diagrams.
                 </h2>
@@ -79,18 +71,14 @@ onPaneReady(({ fitView }) => {
         </template>
         <template v-else-if="props.id === 'documentation'">
           <div class="flex">
-            <a class="link group bg-orange-500" href="/docs">
-              Read The Documentation
-            </a>
+            <a class="link group bg-orange-500" href="/docs"> Read The Documentation </a>
           </div>
           <Handle type="target" :position="Position.Top" />
           <Handle type="source" :position="Position.Bottom" />
         </template>
         <template v-else-if="props.id === 'examples'">
           <div class="flex">
-            <a class="link group bg-purple-500" href="/examples">
-              Check The Examples
-            </a>
+            <a class="link group bg-purple-500" href="/examples"> Check The Examples </a>
           </div>
           <Handle type="target" :position="Position.Top" />
           <Handle type="source" :position="Position.Bottom" />
@@ -101,8 +89,7 @@ onPaneReady(({ fitView }) => {
 </template>
 <style scoped>
 .link {
-  @apply node
-  flex
+  @apply flex
   gap-3
   items-center
   p-4

docs/package.json

@@ -5,29 +5,27 @@
   "license": "MIT",
   "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
   "scripts": {
-    "dev": "vitepress dev",
-    "build": "vitepress build",
-    "serve": "vitepress serve",
+    "dev": "vuepress dev src",
+    "build": "vuepress build src",
+    "serve": "vuepress serve",
     "data": "node data.js"
   },
+  "dependencies": {
+    "@braks/vue-flow": "^0.4.0-29"
+  },
   "devDependencies": {
     "@iconify/json": "^2.1.22",
-    "@types/escape-html": "^1.0.1",
-    "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.23",
-    "@types/prismjs": "^1.26.0",
+    "@vuepress/bundler-vite": "^2.0.0-beta.37",
+    "@vuepress/plugin-docsearch": "^2.0.0-beta.37",
     "@windicss/plugin-scrollbar": "^1.2.3",
     "dotenv": "^16.0.0",
-    "escape-html": "^1.0.3",
-    "markdown-it": "^12.3.2",
     "ohmyfetch": "^0.4.15",
-    "prismjs": "^1.27.0",
     "unplugin-icons": "^0.14.1",
     "unplugin-vue-components": "^0.18.5",
     "vite-plugin-windicss": "^1.8.3",
-    "vite-svg-loader": "^3.2.0",
-    "vitepress": "^0.22.3",
-    "vue": "3.2.21",
+    "vue-demi": "^0.12.5",
+    "vuepress": "^2.0.0-beta.37",
     "windicss": "^3.5.1"
   }
 }

docs/src/.vuepress/assets/index.css

@@ -7,9 +7,12 @@ html, body {
   @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-gray-300;
 }
 
-.home-content {
+.home {
   max-width: 100% !important;
-  padding: 0 !important;
+  @apply !px-0;
+}
+
+.container {
 }
 
 h1 {
@@ -28,32 +31,6 @@ p ~ h1, p ~ h2 {
   @apply mt-6;
 }
 
-ul {
-  @apply md:p-[revert];
-}
-
-li {
-  @apply mt-2 text-md lg:text-lg;
-  list-style: inside;
-  list-style-type: circle;
-}
-
-.backround-img {
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-image: url('./polygon-scatter.svg');
-}
-
-.overview-example__add {
-  display: none;
-}
-
-.vue-flow__node.dark-node {
-  background: #0041d0;
-  color: #f8f8f8;
-}
-
 .vue-flow__node.dark {
   background: #557;
   color: #f8f8f8;

docs/src/.vuepress/config.ts

@@ -0,0 +1,62 @@
+import { config } from 'dotenv'
+import { resolve } from 'path'
+import { defineUserConfig } from 'vuepress'
+import type { DefaultThemeOptions, HeadConfig } from 'vuepress'
+
+import WindiCSS from 'vite-plugin-windicss'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import head from './head'
+
+config({ path: resolve(__dirname, '.env') })
+
+export default defineUserConfig<DefaultThemeOptions>({
+  title: 'Vue Flow',
+  head: head as HeadConfig[],
+
+  bundler: '@vuepress/bundler-vite',
+  bundlerConfig: {
+    viteOptions: {
+      plugins: [
+        WindiCSS({
+          config: resolve(__dirname, './windi.config.ts')
+        }),
+        Components({
+          dirs: [resolve(__dirname, '../../components')],
+          deep: true,
+          // allow auto load markdown components under `./src/components/`
+          extensions: ['vue', 'md'],
+          // allow auto import and register components used in markdown
+          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        }),
+        Icons(),
+      ],
+    }
+  },
+
+  theme: resolve(__dirname, './theme/index.ts'),
+
+  themeConfig: {
+    repo: 'bcakmakoglu/vue-flow',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    lastUpdated: true,
+    contributors: true,
+    darkMode: true,
+
+    algolia: {
+      appId: 'YCY25RSLA8',
+      apiKey: process.env.ALGOLIA_API_KEY,
+      indexName: (process.env.NODE_ENV !== 'production' ? 'dev_' : 'prod_') + 'VUE-FLOW',
+    },
+
+    navbar: [
+      { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
+      {
+        text: 'Examples',
+        link: '/examples/basic',
+        activeMatch: '^/examples/',
+      },
+    ],
+  },
+})

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

@@ -0,0 +1,9 @@
+import { resolve } from 'path'
+
+export default {
+  name: 'vuepress-theme-local',
+  extends: '@vuepress/theme-default',
+  layouts: {
+    Layout: resolve(__dirname, 'layouts/default.vue'),
+  },
+}

docs/src/.vuepress/theme/layouts/default.vue

@@ -0,0 +1,16 @@
+<script>
+import 'virtual:windi.css'
+import '@braks/vue-flow/dist/style.css'
+import '@braks/vue-flow/dist/theme-default.css'
+import '../../assets/index.css'
+</script>
+<script setup>
+import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
+</script>
+<template>
+  <ParentLayout>
+    <template #page-bottom>
+      <div class="my-footer">This is my custom page footer</div>
+    </template>
+  </ParentLayout>
+</template>

docs/src/.vuepress/windi.config.ts

@@ -6,13 +6,13 @@ import scrollbar from '@windicss/plugin-scrollbar'
 export default defineConfig({
   extract: {
     include: [
-      resolve(__dirname, 'components/**/*.{ts,md,vue}'),
+      resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
       resolve(__dirname, '../src/**/*.{ts,md,vue}')
     ],
   },
 
   attributify: true,
-  darkMode: 'media',
+  darkMode: 'class',
 
   plugins: [
     typography({

docs/src/examples/index.md

@@ -0,0 +1,3 @@
+# Basic Example
+
+

docs/src/index.md

@@ -1,5 +1,9 @@
 ---
 home: true
+title: null
+subtitle: null
+heroText: null
+tagline: null
 footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 ---
 

examples/vite.config.ts

@@ -15,7 +15,6 @@ export default defineConfig({
     vue(),
     vueTypes(),
     svgLoader(),
-    // https://github.com/antfu/unplugin-auto-import
     AutoImport({
       imports: ['vue', '@vueuse/core'],
       dts: resolve('src/auto-imports.d.ts'),

package.json

@@ -2,11 +2,16 @@
   "name": "@braks/vue-flow-monorepo",
   "version": "0.0.0",
   "private": true,
-  "workspaces": ["tests", "examples", "docs", "package"],
+  "workspaces": [
+    "tests",
+    "examples",
+    "docs",
+    "package"
+  ],
   "scripts": {
     "prepare": "ts-patch install -s",
     "dev": "yarn --cwd examples dev",
-    "dev:docs": "yarn --cwd docs dev",
+    "docs": "yarn --cwd docs dev",
     "build": "yarn --cwd package build",
     "postbuild": "yarn typedoc",
     "release": "yarn --cwd package np",