feat(docs): replace vitepress with vuepress

* vitepress too limited

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

@@ -0,0 +1,67 @@
+:root {
+  --primary: #BB86FC;
+  --secondary: #03dac5;
+}
+
+html, body {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-gray-300;
+}
+
+.home {
+  max-width: 100% !important;
+  @apply !px-0;
+}
+
+.container {
+}
+
+h1 {
+  @apply text-xl lg:text-4xl mb-4 font-bold;
+}
+
+h2 {
+  @apply text-lg lg:text-2xl mb-4 font-semibold;
+}
+
+p {
+  @apply text-md lg:text-lg font-qtype;
+}
+
+p ~ h1, p ~ h2 {
+  @apply mt-6;
+}
+
+.vue-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
+.vue-flow__node-selector {
+  font-size: 14px;
+  background: #f0f2f3;
+  border: 1px solid #555;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.vue-flow__node-selector .vue-flow__handle {
+  border-color: #f0f2f3;
+}
+
+.slider {
+  --color: red;
+  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  -webkit-appearance: none;
+  appearance: none;
+
+&::-moz-range-thumb {
+   @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+   -webkit-appearance: none;
+   background: var(--color);
+ }
+&::-webkit-slider-thumb {
+   @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+   -webkit-appearance: none;
+   background: var(--color);
+ }
+}

docs/src/.vuepress/assets/polygon-scatter.svg

@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>

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/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/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

@@ -0,0 +1,73 @@
+import { defineConfig } from 'windicss/helpers'
+import { resolve } from 'path'
+import typography from 'windicss/plugin/typography'
+import scrollbar from '@windicss/plugin-scrollbar'
+
+export default defineConfig({
+  extract: {
+    include: [
+      resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
+      resolve(__dirname, '../src/**/*.{ts,md,vue}')
+    ],
+  },
+
+  attributify: true,
+  darkMode: 'class',
+
+  plugins: [
+    typography({
+      dark: true,
+    }),
+    scrollbar
+  ],
+
+  shortcuts: {
+    'primary-gradient': 'bg-gradient-to-b from-accent-500 via-accent-700 to-accent-900',
+  },
+
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          '50': '#fcf9ff',
+          '100': '#f8f3ff',
+          '200': '#eee1fe',
+          '300': '#e4cffe',
+          '400': '#cfaafd',
+          '500': '#BB86FC',
+          '600': '#a879e3',
+          '700': '#8c65bd',
+          '800': '#705097',
+          '900': '#5c427b',
+          'DEFAULT': '#BB86FC',
+        },
+        secondary: {
+          '50': '#c4fef9',
+          '100': '#9df7ef',
+          '200': '#77f0e4',
+          '300': '#50e8da',
+          '400': '#2ae1cf',
+          '500': '#03dac5',
+          '600': '#03ae9d',
+          '700': '#028276',
+          '800': '#02564e',
+          '900': '#012a26',
+          'DEFAULT': '#03dac5',
+        },
+        accent: {
+          '50': '#e6d4ff',
+          '100': '#ccaafc',
+          '200': '#b17ff8',
+          '300': '#9755f5',
+          '400': '#7c2af1',
+          '500': '#6200ee',
+          '600': '#5000c1',
+          '700': '#3d0095',
+          '800': '#2b0068',
+          '900': '#18003b',
+          'DEFAULT': '#6200ee',
+        },
+      },
+    },
+  },
+})

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
 ---