feat(docs): Add vitepress for docs & docs workspace

docs/.vitepress/components/Demo.vue

@@ -0,0 +1,3 @@
+<template>
+  Demo!
+</template>

docs/.vitepress/config.ts

@@ -0,0 +1,42 @@
+import { config } from 'dotenv'
+import { resolve } from 'path'
+import { defineConfig, HeadConfig } from 'vitepress'
+import head from './head'
+
+config({ path: resolve(__dirname, '.env') })
+
+export default defineConfig({
+  title: 'Vue Flow',
+  description: 'Create node based editors!',
+  lastUpdated: true,
+  srcDir: './src',
+  head: head as HeadConfig[],
+
+  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: 'Config Reference',
+        link: '/config/basics',
+        activeMatch: '^/config/',
+      },
+    ],
+  },
+
+  markdown: {
+    config(md) {
+      return md
+    },
+  },
+})

docs/.vitepress/head.ts

@@ -0,0 +1,122 @@
+const meta = {
+  title: '🌊 Vue Flow - A Vue3 Flowchart library',
+  description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
+  img: 'https://images.prismic.io/bcakmakoglu/7cca6d1f-2d05-4ed6-a0a9-af9df54943ac_vue-flow.png',
+  url: 'https://vueflow.dev/',
+}
+
+export default [
+  [
+    'meta',
+    {
+      name: 'description',
+      content: meta.description,
+    },
+  ],
+  ['meta', { hid: 'og:title', name: 'og:title', content: meta.title }],
+  [
+    'meta',
+    {
+      hid: 'og:description',
+      property: 'og:description',
+      content: meta.description,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'og:image',
+      property: 'og:image',
+      content: `http://${meta.img}`,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'og:image:secure_url',
+      property: 'og:image:secure_url',
+      content: `https://${meta.img}`,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'og:image:type',
+      property: 'og:image:type',
+      content: 'image/png',
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'og:image:width',
+      property: 'og:image:width',
+      content: '2428',
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'og:image:height',
+      property: 'og:image:height',
+      content: '1280',
+    },
+  ],
+  ['meta', { hid: 'og:url', property: 'og:url', content: meta.url }],
+  [
+    'meta',
+    {
+      hid: 'twitter:card',
+      name: 'twitter:card',
+      content: 'summary_large_image',
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'twitter:url',
+      name: 'twitter:url',
+      content: meta.url,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'twitter:title',
+      name: 'twitter:title',
+      content: meta.title,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'twitter:description',
+      name: 'twitter:description',
+      content: meta.description,
+    },
+  ],
+  [
+    'meta',
+    {
+      hid: 'twitter:image',
+      name: 'twitter:image',
+      content: meta.img,
+    },
+  ],
+  [
+    'link',
+    {
+      hid: 'canonical',
+      rel: 'canonical',
+      href: meta.url,
+    },
+  ],
+  [
+    'link',
+    {
+      hid: 'image_src',
+      rel: 'image_src',
+      href: meta.img,
+    },
+  ],
+]

docs/.vitepress/plugins/demo.ts

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,10 @@
+import { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme'
+import Demo from '../components/Demo.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('Demo', Demo)
+  }
+} as Theme