refactor: vuepress to vitepress

Author: bavoco

.gitignore

@@ -14,6 +14,9 @@ build/
 # generated typedocs
 docs/api
 
+docs/.vitepress/dist
+docs/.vitepress/cache
+
 # Development
 .DS_Store
 .env.local

docs/.vitepress/config.mjs

@@ -0,0 +1,100 @@
+import { defineConfig } from 'vitepress'
+const docsVersion = "VERSION";
+const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-zoom/master/' : `/chartjs-plugin-zoom/${docsVersion}/`;
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "chartjs-plugin-zoom",
+  description: "A zoom and pan plugin for Chart.js >= 3.0.0",
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+  ],
+  base,
+  outDir: '../../dist/docs',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: '/hero.svg',
+    footer: {
+      message: 'Released under the MIT License',
+      copyright: 'Copyright © 2016-2024 chartjs-plugin-zoom contributors',
+    },
+    nav: [
+      { 
+        text: docsVersion,
+        items: [
+          { text: 'Development (master)', link: '/chartjs-plugin-zoom/master/' },
+          { text: '2.x.x', link: '/chartjs-plugin-zoom/2.0.1/' },
+          { text: '1.x.x', link: '/chartjs-plugin-zoom/1.3.0/' },
+        ],
+      },
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide/integration' },
+      { text: 'Reference', link: '/api/README' },
+      { text: 'Samples', link: `/samples/` },
+      {
+        text: 'Ecosystem',
+        ariaLabel: 'Community Menu',
+        items: [
+          { text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
+        ]
+      },
+      { text: 'GitHub', link: 'https://github.com/chartjs/chartjs-plugin-zoom' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Guide',
+        collapsed: false,
+        link: '/guide/integration',
+        items: [
+          { text: 'Integration', link: '/guide/integration' },
+          { text: 'Usage', link: '/guide/usage' },
+          { text: 'Options', link: '/guide/options' },
+          { text: 'Animations', link: '/guide/animations' },
+          { text: 'Developers', link: '/guide/developers' },
+        ],
+      },
+      {
+        text: 'Samples',
+        collapsed: false,
+        link: '/samples/basic',
+        items: [
+          { text: 'Basic', link: '/samples/basic' },
+          { 
+            text: 'Wheel Zoom',
+            collapsed: true,
+            items: [
+              { text: 'Category Scale', link: '/samples/wheel/category' },
+              { text: 'Logarithmic Scale', link: '/samples/wheel/log' },
+              { text: 'Time Scale', link: '/samples/wheel/time' },
+              { text: 'Over Scale Mode', link: '/samples/wheel/over-scale-mode' },
+              { text: 'Click to Zoom', link: '/samples/wheel/click-zoom' },
+            ],
+          },
+          { 
+            text: 'Drag to Zoom',
+            collapsed: true,
+            items: [
+              { text: 'Category Scale', link: '/samples/drag/category' },
+              { text: 'Linear Scale', link: '/samples/drag/linear' },
+              { text: 'Logarithmic Scale', link: '/samples/drag/log' },
+              { text: 'Time Scale', link: '/samples/drag/time' },
+              { text: 'Timeseries Scale', link: '/samples/drag/timeseries' },
+            ],
+          },
+          { text: 'API', link: '/samples/api' },
+          { text: 'Fetch Data', link: '/samples/fetch-data' },
+          { text: 'Pan Region', link: '/samples/pan-region' },
+        ]
+      },
+      {
+        text: 'API Reference',
+        link: '/api/README',
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/chartjs/chartjs-plugin-zoom' },
+    ]
+  }
+})

docs/.vuepress/config.js

@@ -1,78 +1,4 @@
-const path = require('path');
-const docsVersion = "VERSION";
-const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-zoom/master/' : `/chartjs-plugin-zoom/${docsVersion}/`;
 
-module.exports = {
-  title: 'chartjs-plugin-zoom',
-  description: 'A zoom and pan plugin for Chart.js >= 3.0.0',
-  theme: 'chartjs',
-  base,
-  dest: path.resolve(__dirname, '../../dist/docs'),
-  head: [
-    ['link', {rel: 'icon', href: '/favicon.ico'}],
-  ],
-  plugins: [
-    ['flexsearch'],
-    ['redirect', {
-      redirectors: [
-        // Default sample page when accessing /samples.
-        {base: '/samples', alternative: ['basic']},
-      ],
-    }],
-    [
-      'vuepress-plugin-typedoc',
-      {
-        entryPoints: ['../../types/index.d.ts'],
-        hideInPageTOC: true,
-        tsconfig: 'tsconfig.json',
-        sidebar: {
-          fullNames: true,
-          parentCategory: 'API',
-        },
-      },
-    ],
-    ['@simonbrunel/vuepress-plugin-versions', {
-      filters: {
-        suffix: (tag) => tag ? ` (${tag})` : '',
-        title: (v, vars) => window.location.href.includes('master') ? 'Development (master)' : v + (vars.tag ? ` (${tag})` : ''),
-      },
-      menu: {
-        text: '{{version|title}}',
-        items: [
-          {
-            text: 'Documentation',
-            items: [
-              {
-                text: 'Development (master)',
-                link: '/chartjs-plugin-zoom/master/',
-                target: '_self',
-              },
-              {
-                type: 'versions',
-                text: '{{version}}{{tag|suffix}}',
-                link: '/chartjs-plugin-zoom/{{version}}/',
-                exclude: /^[0]\.[0-4]\./,
-                group: 'minor',
-                target: '_self',
-              }
-            ]
-          },
-          {
-            text: 'Release notes (5 latest)',
-            items: [
-              {
-                type: 'versions',
-                limit: 5,
-                target: '_blank',
-                group: 'patch',
-                link: 'https://github.com/chartjs/chartjs-plugin-zoom/releases/tag/v{{version}}'
-              }
-            ]
-          }
-        ]
-      },
-    }],
-  ],
   chainWebpack: (config) => {
     config.module
       .rule('chart.js')
@@ -93,12 +19,6 @@ module.exports = {
     });
   },
   themeConfig: {
-    repo: 'chartjs/chartjs-plugin-zoom',
-    logo: '/favicon.ico',
-    lastUpdated: 'Last Updated',
-    searchPlaceholder: 'Search...',
-    editLinks: false,
-    docsDir: 'docs',
     chart: {
       imports: [
         ['scripts/register.js'],

docs/guide/index.md

@@ -1,7 +1,21 @@
----
-home: true
-heroImage: /hero.svg
-actionText: Get Started →
-actionLink: /guide/
-footer: MIT Licensed | Copyright © 2016-2021 chartjs-plugin-zoom contributors
----
+![logo](/hero.svg)
+
+# chartjs-plugin-zoom
+
+A zoom and pan plugin for Chart.js >= 3.0.0
+
+Panning can be done via the mouse or with a finger.
+Zooming is done via the mouse wheel or via a pinch gesture. [Hammer.js](https://hammerjs.github.io/) is used for gesture recognition.
+
+## Installation
+
+```bash
+> npm install chartjs-plugin-zoom
+```
+
+:::tip
+
+**Important Note:** For Chart.js 2.6.0 to 2.9.x support, use [version 0.7.7 of this plugin](https://github.com/chartjs/chartjs-plugin-zoom/releases/tag/v0.7.7).
+Documentation for v0.7.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-zoom/blob/v0.7.7/README.md).
+
+:::