docs: show changelogs on docs page

docs/.gitignore

@@ -1,2 +1,3 @@
 .data.json
 .temp
+CHANGELOG/*

docs/src/.vitepress/config.ts

@@ -9,7 +9,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import { useVueFlow } from '@vue-flow/core'
 import head from './head'
-import { copyVueFlowPlugin } from './copy-plugin'
+import { copyChangelogPlugin, copyVueFlowPlugin, files } from './plugins'
 
 const { vueFlowVersion } = useVueFlow()
 
@@ -38,6 +38,27 @@ const typedocSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
   })
 }
 
+const changelogSidebarEntries = (): DefaultTheme.SidebarGroup[] => {
+  return [
+    {
+      text: 'CHANGELOG',
+      collapsible: true,
+      items: files.map((file) => {
+        const name = file.pkgName.replace('.md', '')
+        const isCore = name === 'core'
+
+        return {
+          text: name
+            .split('-')
+            .map((s) => capitalize(s))
+            .join(' '),
+          link: `/changelog/${isCore ? '' : name}`,
+        }
+      }),
+    },
+  ]
+}
+
 export default defineConfigWithTheme<DefaultTheme.Config>({
   title: 'Vue Flow',
   description: 'Visualize your ideas with Vue Flow, a highly customizable Vue3 Flowchart library.',
@@ -51,6 +72,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
     },
     plugins: [
       copyVueFlowPlugin(),
+      copyChangelogPlugin(),
       AutoImport({
         imports: ['vue', '@vueuse/core'],
         dts: resolve(__dirname, '../auto-imports.d.ts'),
@@ -91,7 +113,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
       indexName: 'vueflow',
     },
     nav: [
-      { text: `v${vueFlowVersion.value}`, link: '/' },
+      { text: `v${vueFlowVersion.value}`, link: '/changelog/', activeMatch: '^/changelog' },
       { text: 'Guide', link: '/guide/', activeMatch: '^/guide/' },
       {
         text: 'Examples',
@@ -200,6 +222,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
         },
       ],
       '/typedocs/': typedocSidebarEntries(),
+      '/changelog/': changelogSidebarEntries(),
     },
   },
 })

docs/src/.vitepress/plugins/changelog.ts

@@ -0,0 +1,43 @@
+import { copyFile, readdirSync, statSync } from 'fs'
+import { resolve } from 'path'
+import type { Plugin } from 'vite'
+
+interface ChangelogFile {
+  path: string
+  pkgName: string
+}
+
+const skip = ['node_modules', 'dist', 'turbo']
+
+const getAllFiles = function (dirPath: string, needle?: string, arrayOfFiles: ChangelogFile[] = [], pkgName?: string) {
+  readdirSync(dirPath).forEach((file) => {
+    if (skip.includes(file)) return
+
+    if (statSync(`${dirPath}/${file}`).isDirectory()) {
+      getAllFiles(`${dirPath}/${file}`, needle, arrayOfFiles, file)
+    } else {
+      if (file.includes('CHANGELOG')) {
+        arrayOfFiles.push({ path: `${dirPath}/${file}`, pkgName })
+      }
+    }
+  })
+
+  return arrayOfFiles
+}
+
+export const files = getAllFiles(resolve(__dirname, '../../../../packages'), 'CHANGELOG')
+
+export function copyChangelogPlugin(): Plugin {
+  return {
+    name: 'copy-changelog-files',
+    config() {
+      files.forEach(({ path, pkgName }) => {
+        const isCore = pkgName === 'core'
+
+        const filePath = resolve(__dirname, `${path}`)
+
+        copyFile(filePath, resolve(__dirname, `../../changelog/${isCore ? 'index' : pkgName}.md`), () => {})
+      })
+    },
+  }
+}

docs/src/.vitepress/plugins/index.ts

@@ -0,0 +1,2 @@
+export * from './changelog'
+export * from './copy'