refactor: VuePress to VitePress

.github/workflows/documentation.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - name: Test Build
         run: |
           npm ci
@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - name: Build
         run: |
           npm ci

.github/workflows/publish-npm.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
       - name: Setup and build
         run: |
@@ -106,7 +106,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
 
       - name: Build docs (latest/next)

.gitignore

@@ -14,6 +14,11 @@ build/
 # generated typedocs
 docs/api
 
+docs/.vitepress/dist
+docs/.vitepress/cache
+docs/public/register.bundle.esm.js
+docs/public/utils.bundle.esm.js
+
 # Development
 .DS_Store
 .env.local

docs/.vitepress/config.mjs

@@ -0,0 +1,113 @@
+import { defineConfig } from 'vitepress';
+import process from 'node:process';
+
+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: base + 'favicon.ico' }],
+    ['link', { rel: 'stylesheet', href: base + 'styles.css' }],
+  ],
+  base,
+  outDir: '../dist/docs',
+  appearance: false,
+  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/basic` },
+      {
+        text: 'Ecosystem',
+        ariaLabel: 'Community Menu',
+        items: [
+          { text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
+        ]
+      },
+    ],
+
+    sidebar: [
+      {
+        text: 'Guide',
+        collapsed: false,
+        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,
+        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' },
+    ]
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('playground-')
+      }
+    }
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: ['playground-elements']
+    }
+  }
+})

docs/guide/usage-example.js

@@ -0,0 +1,40 @@
+/* playground-hide */
+import Chart from './register.js';
+/* playground-hide-end */
+const ctx = document.querySelector('canvas');
+
+const chart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, 80, 81, 56, 55, 40],
+      fill: false,
+      borderColor: 'rgb(75, 192, 192)',
+      tension: 0.1
+    }]
+  },
+  options: {
+    plugins: {
+      zoom: {
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          mode: 'xy',
+        }
+      }
+    }
+  }
+});
+
+const btnResetZoom = document.createElement('button');
+btnResetZoom.textContent = 'Reset zoom';
+document.body.append(btnResetZoom);
+btnResetZoom.addEventListener('click', () => {
+  chart.resetZoom();
+})