docs: replace vuepress docs dir with vitepress docs dir

2022-08-01 21:10:14 +02:00
parent 21702daf1e
commit f2b169145c
179 changed files with 122 additions and 8131 deletions
@@ -0,0 +1,204 @@
+import { resolve } from 'path'
+import { readdirSync, statSync } from 'fs'
+import type { DefaultTheme, HeadConfig } from 'vitepress'
+import { defineConfigWithTheme } from 'vitepress'
+import WindiCSS from 'vite-plugin-windicss'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import Components from 'unplugin-vue-components/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import { useVueFlow } from '@braks/vue-flow'
+import { copyVueFlowPlugin } from './copy-plugin'
+import head from './head'
+
+const { vueFlowVersion } = useVueFlow()
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  const filePath = resolve(__dirname, '../typedocs')
+
+  const docsModules = readdirSync(filePath).filter((name) => statSync(`${filePath}/${name}`).isDirectory())
+
+  return docsModules.map((module) => {
+    let children = readdirSync(`${filePath}/${module}/`).map<DefaultTheme.SidebarItem>((entry) => ({
+      text: entry.replace('.md', ''),
+      link: `/typedocs/${module}/${entry.replace('.md', '')}`,
+    }))
+
+    if (module === 'variables') {
+      children = children.filter((child) => {
+        return child.link.includes('default')
+      })
+    }
+
+    return { text: capitalize(module), collapsible: true, items: children } as DefaultTheme.SidebarGroup
+  })
+}
+
+export default defineConfigWithTheme<DefaultTheme.Config>({
+  title: 'Vue Flow',
+  description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
+  head: head as HeadConfig[],
+
+  outDir: resolve(__dirname, '../../dist'),
+
+  vite: {
+    optimizeDeps: {
+      exclude: ['@animxyz/vue3'],
+    },
+    plugins: [
+      copyVueFlowPlugin(),
+      AutoImport({
+        imports: ['vue', '@vueuse/core'],
+        dts: resolve(__dirname, '../auto-imports.d.ts'),
+      }),
+      WindiCSS({
+        transformCSS: 'pre',
+        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$/],
+        dts: resolve(__dirname, '../components.d.ts'),
+        resolvers: [IconsResolver()],
+      }),
+      Icons({
+        compiler: 'vue3',
+      }),
+    ],
+  },
+
+  themeConfig: {
+    logo: '/favicons/android-chrome-512x512.png',
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2021-present Burak Cakmakoglu',
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/bcakmakoglu/vue-flow' },
+      { icon: 'discord', link: 'https://discord.gg/F4v6qE4Fuq' },
+    ],
+    algolia: {
+      appId: 'F7BJNSM4M5',
+      apiKey: process.env.ALGOLIA_API_KEY!,
+      indexName: 'vueflow',
+    },
+    nav: [
+      { text: `v${vueFlowVersion.value}`, link: '/' },
+      { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
+      {
+        text: 'Examples',
+        link: '/examples/',
+        activeMatch: '^/examples/',
+      },
+      {
+        text: 'TypeDocs',
+        link: '/typedocs/',
+        activeMatch: '^/typedocs/',
+      },
+    ],
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          collapsible: true,
+          items: [
+            { text: 'Introduction', link: '/guide/' },
+            { text: 'Getting Started', link: '/guide/getting-started' },
+            { text: 'Theming', link: '/guide/theming' },
+            { text: 'Nodes', link: '/guide/node' },
+            { text: 'Edges', link: '/guide/edge' },
+            { text: 'Composables', link: '/guide/composables' },
+          ],
+        },
+        {
+          text: 'Vue Flow',
+          collapsible: true,
+          items: [
+            { text: 'Config / Props', link: '/guide/vue-flow/config' },
+            { text: 'State', link: '/guide/vue-flow/state' },
+            {
+              text: 'Actions',
+              link: '/typedocs/interfaces/Actions.html',
+            },
+            {
+              text: 'Getters',
+              link: '/typedocs/interfaces/Getters.html',
+            },
+            {
+              text: 'Events',
+              link: '/typedocs/interfaces/FlowEvents.html',
+            },
+            { text: 'Slots', link: '/guide/vue-flow/slots' },
+          ],
+        },
+        {
+          text: 'Utilities',
+          collapsible: true,
+          items: [
+            { text: 'Graph', link: '/guide/utils/graph' },
+            { text: 'Viewport', link: '/guide/utils/instance' },
+            { text: 'Edges', link: '/guide/utils/edge' },
+          ],
+        },
+        {
+          text: 'Components',
+          collapsible: true,
+          items: [
+            { text: 'Background', link: '/guide/components/background' },
+            { text: 'MiniMap', link: '/guide/components/minimap' },
+            { text: 'MiniMapNode', link: '/guide/components/minimap-node' },
+            { text: 'Controls', link: '/guide/components/controls' },
+            { text: 'Control Button', link: '/guide/components/control-button' },
+          ],
+        },
+      ],
+      '/examples/': [
+        {
+          text: 'General Examples',
+          collapsible: true,
+          items: [
+            { text: 'Basic', link: '/examples/' },
+            { text: 'Save & Restore', link: '/examples/save' },
+            { text: 'Drag & Drop', link: '/examples/dnd' },
+            { text: 'Empty Flow', link: '/examples/empty' },
+            { text: 'Hide/Show', link: '/examples/hidden' },
+            { text: 'Horizontal Flow', link: '/examples/horizontal' },
+            { text: 'Interactions', link: '/examples/interaction' },
+            { text: 'Teleport', link: '/examples/teleport' },
+            { text: 'Multiple Flows', link: '/examples/multi' },
+            { text: 'Pinia', link: '/examples/pinia' },
+            { text: 'Stress', link: '/examples/stress' },
+          ],
+        },
+        {
+          text: 'Nodes',
+          collapsible: true,
+          items: [
+            { text: 'Custom Node', link: '/examples/nodes/' },
+            { text: 'Update Node', link: '/examples/nodes/update-node' },
+            { text: 'Nested Nodes', link: '/examples/nodes/nesting' },
+          ],
+        },
+        {
+          text: 'Edges',
+          collapsible: true,
+          items: [
+            { text: 'Edges', link: '/examples/edges/' },
+            { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
+            { text: 'Custom Connectionline', link: '/examples/edges/connection-line' },
+            { text: 'Connection validation', link: '/examples/edges/validation' },
+          ],
+        },
+      ],
+      '/typedocs/': typedocSidebarEntries(),
+    },
+  },
+})
@@ -0,0 +1,21 @@
+import { existsSync, readFileSync } from 'fs'
+import { resolve } from 'path'
+import type { Plugin } from 'vite'
+
+export function copyVueFlowPlugin(): Plugin {
+  return {
+    name: 'copy-vue-flow',
+    generateBundle() {
+      const filePath = resolve(__dirname, '../../node_modules/@braks/vue-flow/dist/vue-flow.es.js')
+      if (!existsSync(filePath)) {
+        throw new Error(`@braks/vue-flow/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
+      }
+
+      this.emitFile({
+        type: 'asset',
+        fileName: 'vue-flow.es.js',
+        source: readFileSync(filePath, 'utf-8'),
+      })
+    },
+  }
+}
@@ -0,0 +1,132 @@
+export const meta = {
+  title: '🌊 Vue Flow - The customizable Vue3 Flowchart Library',
+  description: `Bring interactivity to your flowcharts and graphs with Vue Flow. It's a highly customizable Vue3 Flowchart library that can be used to visualize your ideas with Vue3 Flowchart. Features seamless zoom & pan and a ton of more features!`,
+  keywords: 'vue, flowchart, graph, vue3, vuejs, vite, nuxt3, nuxtjs, quasar',
+  img: 'https://images.prismic.io/bcakmakoglu/8fbdad18-3cd4-46a9-83cf-dbd9fbf60484_vue-flow.png?auto=compress,format',
+  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,
+    },
+  ],
+  ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicons/apple-touch-icon.png' }],
+  ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/favicon-32x32.png' }],
+  ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/favicon-16x16.png' }],
+  ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicons/android-chrome-192x192.png' }],
+  ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicons/android-chrome-512x512.png' }],
+  ['link', { rel: 'manifest', href: '/favicons/site.webmanifest' }],
+  ['link', { rel: 'shortcut icon', href: '/favicons/favicon.ico' }],
+  ['meta', { name: 'msapplication-TileColor', content: '#10b981' }],
+  ['meta', { name: 'theme-color', content: '#10b981' }],
+]
@@ -0,0 +1,19 @@
+import type { Theme } from 'vitepress'
+import VueAnimXyz from '@animxyz/vue3'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './layouts/default.vue'
+import 'virtual:windi.css'
+import '@animxyz/core'
+import '@braks/vue-flow/dist/style.css'
+import '@braks/vue-flow/dist/theme-default.css'
+import './../../assets/index.css'
+
+const CustomTheme = {
+  ...DefaultTheme,
+  Layout,
+  enhanceApp: ({ app }) => {
+    app.use(VueAnimXyz)
+  },
+} as Theme
+
+export default CustomTheme
@@ -0,0 +1,15 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+
+const { Layout: ParentLayout } = DefaultTheme
+</script>
+
+<template>
+  <ParentLayout></ParentLayout>
+</template>
+
+<style>
+.page-footer {
+  @apply py-4 text-center;
+}
+</style>
@@ -0,0 +1,73 @@
+import { resolve } from 'path'
+import { defineConfig } from 'windicss/helpers'
+import typography from 'windicss/plugin/typography'
+import scrollbar from '@windicss/plugin-scrollbar'
+
+export default defineConfig({
+  extract: {
+    include: [
+      resolve(__dirname, './theme/**/*.{ts,md,vue}'),
+      resolve(__dirname, '../../components/**/*.{ts,md,vue}'),
+      resolve(__dirname, '../**/*.{ts,md,vue}'),
+    ],
+  },
+
+  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',
+        },
+      },
+    },
+  },
+})