From 345ca33576956bb50bb49082a4f044ef2496c31b Mon Sep 17 00:00:00 2001
From: Simon Brunel <simonbrunel@users.noreply.github.com>
Date: Wed, 24 Mar 2021 07:57:24 +0100
Subject: [PATCH] Refactor the docs theme and plugin in a separate repo

---
 docs/.vuepress/config.js                      |  26 +-
 .../chart-editor/components/ChartActions.vue  |  55 ----
 .../chart-editor/components/ChartEditor.vue   | 120 --------
 .../chart-editor/components/ChartView.vue     |  32 --
 .../chart-editor/components/CodeEditor.vue    | 283 ------------------
 .../chart-editor/components/EditorOutput.vue  |  65 ----
 .../components/EditorTextarea.vue             |  63 ----
 .../chart-editor/components/Tooltip.vue       |  41 ---
 .../plugins/chart-editor/enhancer.js          |  14 -
 docs/.vuepress/plugins/chart-editor/global.js |   4 -
 docs/.vuepress/plugins/chart-editor/index.js  |  72 -----
 .../plugins/chart-editor/styles/index.styl    |  18 --
 .../plugins/chart-editor/styles/palette.styl  |   7 -
 docs/.vuepress/styles/index.styl              |  28 --
 docs/.vuepress/styles/palette.styl            |   3 -
 package-lock.json                             |  85 +-----
 package.json                                  |  11 +-
 17 files changed, 30 insertions(+), 897 deletions(-)
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/ChartActions.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/ChartEditor.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/ChartView.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/CodeEditor.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/EditorOutput.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/EditorTextarea.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/components/Tooltip.vue
 delete mode 100644 docs/.vuepress/plugins/chart-editor/enhancer.js
 delete mode 100644 docs/.vuepress/plugins/chart-editor/global.js
 delete mode 100644 docs/.vuepress/plugins/chart-editor/index.js
 delete mode 100644 docs/.vuepress/plugins/chart-editor/styles/index.styl
 delete mode 100644 docs/.vuepress/plugins/chart-editor/styles/palette.styl
 delete mode 100644 docs/.vuepress/styles/index.styl
 delete mode 100644 docs/.vuepress/styles/palette.styl

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 5ab3086..44b61ad 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -1,8 +1,8 @@
-const ChartEditorPlugin = require('./plugins/chart-editor');
-
 module.exports = {
+  dest: 'dist/docs',
+  theme: 'chartjs',
   title: 'chartjs-plugin-datalabels',
-  description: 'Display labels on data for any type of charts.',
+  description: 'Display labels on data for any type of charts',
   head: [
     ['link', {rel: 'icon', href: '/favicon.png'}],
   ],
@@ -16,13 +16,6 @@ module.exports = {
         {base: '/samples', alternative: ['charts/line']},
       ],
     }],
-    [ChartEditorPlugin, {
-      imports: [
-        ['samples/register.js'],
-        ['samples/defaults.js'],
-        ['samples/utils.js', 'Utils'],
-      ]
-    }],
   ],
   themeConfig: {
     repo: 'chartjs/chartjs-plugin-datalabels',
@@ -32,7 +25,14 @@ module.exports = {
     docsDir: 'docs',
     algolia: {
       apiKey: '7224f458f773f7cf4cbbc4c53621d30c',
-      indexName: 'chartjs-plugin-datalabels'
+      indexName: 'chartjs-plugin-datalabels',
+    },
+    chart: {
+      imports: [
+        ['samples/register.js'],
+        ['samples/defaults.js'],
+        ['samples/utils.js', 'Utils'],
+      ]
     },
     nav: [
       {text: 'Home', link: '/'},
@@ -54,7 +54,6 @@ module.exports = {
       '/samples/': [
         {
           title: 'Charts',
-          collapsable: false,
           children: [
             'charts/line',
             'charts/bar',
@@ -66,7 +65,6 @@ module.exports = {
         },
         {
           title: 'Scriptable',
-          collapsable: false,
           children: [
             'scriptable/interactions',
             'scriptable/data',
@@ -77,7 +75,6 @@ module.exports = {
         },
         {
           title: 'Events',
-          collapsable: false,
           children: [
             'events/listeners',
             'events/highlight',
@@ -86,7 +83,6 @@ module.exports = {
         },
         {
           title: 'Advanced',
-          collapsable: false,
           children: [
             'advanced/multiple-labels',
             'advanced/custom-labels',
diff --git a/docs/.vuepress/plugins/chart-editor/components/ChartActions.vue b/docs/.vuepress/plugins/chart-editor/components/ChartActions.vue
deleted file mode 100644
index cdc9834..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/ChartActions.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="chart-actions">
-    <a v-for="action in actions" class="chart-action" @click="onClick(action)">
-      {{ action.name }}
-    </a>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    actions: Array,
-    default: () => [],
-  },
-
-  methods: {
-    onClick(action) {
-      this.$emit('action', action);
-    }
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-@import '../styles/palette.styl'
-
-.chart-actions
-  align-items center
-  display flex
-  flex-wrap wrap
-
-.chart-action
-  transition background .25s, border-color .25s
-  background rgba($codeBgColor, 0.05)
-  border 1px solid transparent
-  border-radius $border-radius
-  color $accentColor
-  text-decoration none !important
-  display inline-block
-  font-size 0.8rem
-  padding 8px 16px
-  margin 0 8px 8px 0
-  cursor pointer
-  user-select none
-
-  &:hover
-    background rgba($accentColor, 0.15)
-    border-color rgba($accentColor, 0.2)
-    color $accentColor
-
-  &:active
-    background rgba($accentColor, 0.3)
-    border-color rgba($accentColor, 0.4)
-    color $accentColor
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/components/ChartEditor.vue b/docs/.vuepress/plugins/chart-editor/components/ChartEditor.vue
deleted file mode 100644
index 43794c1..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/ChartEditor.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div class="chart-editor">
-    <chart-view ref="chart-view" />
-    <chart-actions :actions="actions" @action="execute"/>
-    <code-editor
-      :error.sync="error"
-      :messages="messages"
-      :output="output"
-      :value="code"
-      @input="evaluate"
-    />
-  </div>
-</template>
-
-<script>
-import {Chart} from 'chart.js';
-
-// Components
-import ChartActions from './ChartActions.vue';
-import ChartView from './ChartView.vue';
-import CodeEditor from './CodeEditor.vue';
-
-export default {
-  components: {
-    ChartActions,
-    ChartView,
-    CodeEditor,
-  },
-
-  props: {
-    code: {
-      type: String,
-      required: true,
-    },
-  },
-
-  data: () => ({
-    actions: null,
-    error: null,
-    messages: [],
-    output: false,
-  }),
-
-  watch: {
-    code(code) {
-      this.evaluate(code);
-    },
-  },
-
-  mounted() {
-    this.evaluate(this.code);
-  },
-
-  methods: {
-    evaluate(code) {
-      this.error = null;
-
-      if (!code) {
-        this.update(null);
-        return;
-      }
-
-      const logger = {
-        log(...args) {
-          me.messages = [...me.messages, args.join(' ')].slice(-50);
-        },
-      };
-
-      const me = this;
-      const context = {
-        ...(this.$chart || {}).imports,
-        console: {
-          ...console,
-          ...logger,
-        },
-        Chart,
-      };
-
-      const keys = Object.keys(context);
-      const lines = keys.map((key) => {
-        return `const ${key} = arguments[0].${key}`;
-      });
-
-      const script = `
-        'use strict';
-        const module = {exports: {}};
-        ${lines.join(';\n')};
-        (function(){ ${code} })();
-        return module.exports;
-      `;
-
-      try {
-        const exports = new Function(script)(context);
-        const config = exports.config || null;
-        this.output = exports.output || false;
-
-        if (!this.actions) {
-          this.actions = exports.actions || null;
-        }
-
-        this.update(config);
-      } catch(error) {
-        this.error = error;
-      }
-    },
-    update(config) {
-      this.$refs['chart-view'].update(config);
-    },
-    execute(action) {
-      action.handler(this.$refs['chart-view'].chart());
-    },
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-.chart-view,
-.chart-actions
-  margin 16px 0
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/components/ChartView.vue b/docs/.vuepress/plugins/chart-editor/components/ChartView.vue
deleted file mode 100644
index 33d78f7..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/ChartView.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div class="chart-view">
-    <canvas ref="canvas" />
-  </div>
-</template>
-
-<script>
-import {Chart} from 'chart.js';
-
-export default {
-  methods: {
-    chart() {
-      return this._chart;
-    },
-    update(config) {
-      const canvas = this.$refs.canvas;
-      if (!canvas || !config) {
-        return;
-      }
-
-      if (!this._chart) {
-        this._chart = new Chart(canvas, config);
-      } else {
-        this._chart.stop();
-        this._chart.data = config.data || {};
-        this._chart.options = config.options || {};
-        this._chart.update();
-      }
-    }
-  },
-}
-</script>
diff --git a/docs/.vuepress/plugins/chart-editor/components/CodeEditor.vue b/docs/.vuepress/plugins/chart-editor/components/CodeEditor.vue
deleted file mode 100644
index 2a99f8b..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/CodeEditor.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<template>
-  <div class="code-editor">
-    <div class="code-editor-header">
-      <div class="code-editor-tabs">
-        <button
-          v-for="(section, index) in sections"
-          :class="{ active: current === index }"
-          :key="index"
-          class="code-editor-tab"
-          @click="current = index"
-        >
-          {{ section.name }}
-        </button>
-      </div>
-
-      <div class="code-editor-tools">
-        <i v-if="modified" class="code-editor-tool fas fa-bahai fa-spin text-muted"/>
-        <tooltip v-else-if="error">
-          <i class="code-editor-tool fas fa-exclamation-triangle text-error"/>
-          <template #content>
-            <pre style="white-space: pre-wrap">{{ error }}</pre>
-          </template>
-        </tooltip>
-        <a
-          :href="sourceLink"
-          class="code-editor-tool fab fa-github fa-lg"
-          title="View on GitHub"
-          target="_blank"
-        />
-      </div>
-    </div>
-
-    <div class="code-editor-views">
-      <component
-        v-for="(section, index) in sections"
-        v-show="current === index"
-        v-bind="section.attrs"
-        :value="section.value()"
-        :is="section.component"
-        :key="index"
-        v-on="section.on"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Parser } from 'acorn';
-
-// Components
-import EditorOutput from './EditorOutput.vue';
-import EditorTextarea from './EditorTextarea.vue';
-import Tooltip from './Tooltip.vue';
-
-const BLOCK_REGEX = /^\s*<(\/?)block:([\w\s]+)(?::(\d+))?>\s*$/;
-
-export default {
-  components: {
-    EditorOutput,
-    EditorTextarea,
-    Tooltip,
-  },
-
-  props: {
-    delay: {
-      type: Number,
-      default: 500,
-    },
-    error: {
-      type: Error,
-      default: null,
-    },
-    messages: {
-      type: Array,
-      default: () => [],
-    },
-    output: {
-      type: [Boolean, String],
-      default: false,
-    },
-    value: {
-      type: String,
-      required: true,
-    },
-  },
-
-  data: () => ({
-    blocks: [],
-    current: 0,
-    modified: false,
-    sections: [],
-  }),
-
-  computed: {
-    sourceLink() {
-      const path = this.$page.relativePath;
-      const config = this.$site.themeConfig;
-      const repo = config.docsRepo || config.repo;
-      const branch = config.docsBranch || 'master';
-      const dir = config.docsDir || '';
-      return `https://github.com/${repo}/blob/${branch}/${dir}/${path}`;
-    },
-  },
-
-  watch: {
-    output() {
-      this.rebuild();
-    },
-    value: {
-      immediate: true,
-      handler() {
-        this.rebuild();
-      },
-    },
-  },
-
-  methods: {
-    rebuild() {
-      try {
-        const me = this;
-        const blocks = this.parse(this.value);
-        const sections = blocks
-          .filter(({ name }) => !!name)
-          .sort((v0, v1) => v0.order - v1.order)
-          .map((block) => ({
-            component: EditorTextarea,
-            value: () => block.code,
-            name: block.name,
-            on: {
-              input(value) {
-                block.code = value;
-                me.invalidate();
-              }
-            }
-          }));
-
-        if (this.output) {
-          sections.push({
-            component: EditorOutput,
-            value: () => this.messages,
-            name: 'Output',
-            attrs: {
-              placeholder: this.output,
-            }
-          });
-        }
-
-        this.blocks = blocks;
-        this.sections = sections;
-        this.current = this.output ? sections.length - 1 : 0
-      } catch (error) {
-        this.$emit('update:error', error);
-        this.blocks = [];
-      }
-    },
-    invalidate() {
-      if (this._timeout) {
-        clearTimeout(this._timeout);
-        this._timeout = null;
-      }
-
-      const delay = this.delay;
-      if (!delay) {
-        this.update();
-        return;
-      }
-
-      this.modified = true;
-      this._timeout = setTimeout(() => {
-        this.modified = false;
-        this._timeout = null;
-        this.update();
-      }, delay);
-    },
-    update() {
-      this.$emit('input', this.blocks.map(({ code }) => code).join(''));
-    },
-    parse(value) {
-      const blocks = [];
-      let current = {
-        order: 0,
-        start: 0,
-        end: 0,
-      };
-
-      Parser.parse(value, {
-        ecmaVersion: 2016,
-        onComment(block, text, start, end) {
-          const match = text.match(BLOCK_REGEX);
-          if (!match) {
-            return;
-          }
-
-          const open = !match[1];
-          const name = match[2];
-          const order = match[3];
-          if (!open && current.name !== name) {
-            return;
-          }
-
-          blocks.push({ ...current, end: start });
-          current = {
-            name: open ? name : undefined,
-            order: order || 0,
-            start: end + 1,
-            end: end + 1,
-          };
-        }
-      });
-
-      if (current) {
-        blocks.push({ ...current, end: value.length });
-      }
-
-      return blocks
-        .filter(({ start, end }) => start < end)
-        .map(({ name, start, end, order }) => ({
-          code: value.slice(start, end),
-          order,
-          name,
-        }));
-    },
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-@import '../styles/palette.styl'
-
-$tab-spacing = 16px
-
-.code-editor
-  background-color $codeBgColor
-  border-radius $border-radius
-
-  @media (max-width: $MQMobileNarrow)
-    &
-      border-radius 0 !important
-      margin 0 -1.5rem
-
-.code-editor-header
-  background rgba(white, 0.02)
-  padding 0 $tab-spacing
-  display flex
-
-  .code-editor-tab,
-  .code-editor-tool
-    margin 0 ($tab-spacing / 2)
-
-.code-editor-tabs
-  align-items center
-  display flex
-  flex 1
-
-.code-editor-tab
-  background none
-  border none
-  border-bottom 2px solid transparent
-  color $code-text-color
-  text-transform capitalize
-  user-select none
-  font-weight bold
-  cursor pointer
-  padding 20px 4px 18px 4px
-
-  &:focus
-    outline none
-
-  &.active
-    border-bottom-color $accentColor
-
-.code-editor-tools
-  align-items center
-  display flex
-  padding 16px 0
-
-.code-editor-tool
-  color $code-text-color
-  text-decoration none !important
-
-.code-editor-views
-  height 360px
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/components/EditorOutput.vue b/docs/.vuepress/plugins/chart-editor/components/EditorOutput.vue
deleted file mode 100644
index 46d04ed..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/EditorOutput.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <perfect-scrollbar class="editor-output">
-    <div class="editor-output-content">
-      <span v-for="item in items" v-text="item" />
-      <span
-        v-if="!items.length && placeholder"
-        v-text="placeholder === true ? '...' : placeholder"
-        class="text-muted"
-      />
-    </div>
-  </perfect-scrollbar>
-</template>
-
-<script>
-export default {
-  props: {
-    placeholder: {
-      type: [Boolean, String],
-      default: true,
-    },
-    value: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  computed: {
-    items() {
-      return [...this.value].reverse();
-    },
-  },
-}
-</script>
-
-<style lang="stylus" scoped>
-@import '../styles/palette.styl'
-
-.editor-output
-  color $code-text-color
-  font-family $code-font-family
-  font-size $code-font-size
-  line-height $code-line-height
-  height inherit
-
-.editor-output-content
-  padding 16px 24px
-
-  > span
-    white-space pre-wrap
-    position relative
-    display block
-    margin-left 5px
-    opacity 0.25
-
-    &:first-child:before
-      content '>'
-      font-weight bold
-      position absolute
-      opacity 0.5
-      left -15px
-
-    for i in (0..15)
-      &:nth-child({i + 1})
-        opacity (1 - (i / 20))
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/components/EditorTextarea.vue b/docs/.vuepress/plugins/chart-editor/components/EditorTextarea.vue
deleted file mode 100644
index e620592..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/EditorTextarea.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <perfect-scrollbar class="editor-textarea">
-    <div class="editor-textarea-content">
-      <prism-editor :value="value" :highlight="highlight" @input="$emit('input', $event)"/>
-    </div>
-  </perfect-scrollbar>
-</template>
-
-<script>
-// prismjs comes with the 'vuepress' dependency.
-// https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/markdown/package.json#L31
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-
-// Components
-import { PrismEditor } from 'vue-prism-editor';
-
-// Style
-import 'vue-prism-editor/dist/prismeditor.min.css';
-
-export default {
-  components: {
-    PrismEditor,
-  },
-
-  props: {
-    value: {
-      type: String,
-      required: true,
-    },
-  },
-
-  methods: {
-    highlight(code) {
-      return highlight(code, languages.js);
-    },
-  }
-};
-</script>
-
-<style lang="stylus" scoped>
-@import '../styles/palette.styl'
-
-.editor-textarea
-  color $code-text-color
-  font-family $code-font-family
-  font-size $code-font-size
-  line-height $code-line-height
-  height inherit
-
-  // Move the "js" indicator a bit further from the top/right sides
-  // so we can display the vertical scrollbar without overlap it.
-  &:before
-    margin-right 8px
-    margin-top 4px
-
-  .prism-editor-wrapper
-    overflow visible
-
-.editor-textarea-content
-  padding 16px 24px
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/components/Tooltip.vue b/docs/.vuepress/plugins/chart-editor/components/Tooltip.vue
deleted file mode 100644
index 90cf104..0000000
--- a/docs/.vuepress/plugins/chart-editor/components/Tooltip.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="tooltip">
-    <div class="activator">
-      <slot name="default" />
-    </div>
-    <perfect-scrollbar class="content">
-      <slot name="content" />
-    </perfect-scrollbar>
-  </div>
-</template>
-
-<style lang="stylus" scoped>
-@import '../styles/palette.styl'
-
-.tooltip
-  position relative
-
-  .content
-    background #eee
-    color #444
-    box-shadow $box-shadow
-    border-radius $border-radius
-    display none
-    font-size 0.8rem
-    position absolute
-    min-width 256px
-    max-width 512px
-    max-height 256px
-    z-index 999
-    right 0
-
-  &:hover
-    .content
-      display block
-
-  ::v-deep
-    pre
-      background none
-      overflow visible
-      padding 0 16px
-</style>
diff --git a/docs/.vuepress/plugins/chart-editor/enhancer.js b/docs/.vuepress/plugins/chart-editor/enhancer.js
deleted file mode 100644
index 08f2f9b..0000000
--- a/docs/.vuepress/plugins/chart-editor/enhancer.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import ChartEditor from './components/ChartEditor.vue';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-import './styles/index.styl';
-
-export default ({Vue}) => {
-  Vue.use(PerfectScrollbar, {
-    options: {
-      wheelPropagation: false,
-    }
-  });
-
-  Vue.component('ChartEditor', ChartEditor);
-};
diff --git a/docs/.vuepress/plugins/chart-editor/global.js b/docs/.vuepress/plugins/chart-editor/global.js
deleted file mode 100644
index 164c716..0000000
--- a/docs/.vuepress/plugins/chart-editor/global.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// This is required by vue-prism-editor/dist/prismeditor.esm.js
-if (typeof window !== 'undefined' && window.global === undefined) {
-  window.global = window;
-}
diff --git a/docs/.vuepress/plugins/chart-editor/index.js b/docs/.vuepress/plugins/chart-editor/index.js
deleted file mode 100644
index 9c3d306..0000000
--- a/docs/.vuepress/plugins/chart-editor/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-const {resolve} = require('path');
-
-function render({renderer}) {
-  const fence = renderer.rules.fence;
-  renderer.rules.fence = (...args) => {
-    const [tokens, idx] = args;
-    const token = tokens[idx];
-    const lang = token.info.trim();
-
-    return (/ chart-editor( |$)/).test(lang) ?
-      `<chart-editor :code="\`${token.content}\`"/>` :
-      fence(...args);
-  };
-}
-
-function importsScripts(imports) {
-  const names = imports.map(([, name]) => name).filter((name) => !!name);
-  const lines = imports.map(([file, name]) => {
-    const path = `@docs/${file}`;
-    return name ?
-      `import * as ${name} from '${path}'` :
-      `import '${path}'`;
-  });
-
-  return `
-    import Vue from 'vue';
-    ${lines.join(';\n')};
-
-    const imports = {
-      ${names.join(',\n')}
-    }
-
-    Vue.mixin({
-      created() {
-        this.$chart = this.$chart || {};
-        this.$chart.imports = imports;
-      }
-    })
-  `;
-}
-
-module.exports = ({imports}) => {
-  return {
-    name: 'vuepress-plugin-chart-editor',
-    enhanceAppFiles: [
-      resolve(__dirname, 'global.js'),
-      resolve(__dirname, 'enhancer.js'),
-      {
-        content: importsScripts(imports),
-        name: 'chart-imports',
-      }
-    ],
-    chainWebpack: (config) => {
-      config.merge({
-        externals: {
-          moment: 'moment',
-        },
-        resolve: {
-          alias: {
-            '@docs': resolve(__dirname, '../../../'),
-          }
-        }
-      });
-    },
-    chainMarkdown: (config) => {
-      config
-        .plugin('chart-editor')
-        .use(render)
-        .end();
-    },
-  };
-};
diff --git a/docs/.vuepress/plugins/chart-editor/styles/index.styl b/docs/.vuepress/plugins/chart-editor/styles/index.styl
deleted file mode 100644
index b50f7f1..0000000
--- a/docs/.vuepress/plugins/chart-editor/styles/index.styl
+++ /dev/null
@@ -1,18 +0,0 @@
-@import 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css'
-
-@import 'palette.styl'
-
-.ps
-  .ps__rail-x:hover, .ps__rail-y:hover,
-  .ps__rail-x:focus, .ps__rail-y:focus,
-  .ps__rail-x.ps--clicking, .ps__rail-y.ps--clicking
-    background-color transparent
-
-.prism-editor__textarea:focus
-  outline none
-
-.text-muted
-  opacity 0.5 !important
-
-.text-error
-  color $danger-color !important
diff --git a/docs/.vuepress/plugins/chart-editor/styles/palette.styl b/docs/.vuepress/plugins/chart-editor/styles/palette.styl
deleted file mode 100644
index 5f91385..0000000
--- a/docs/.vuepress/plugins/chart-editor/styles/palette.styl
+++ /dev/null
@@ -1,7 +0,0 @@
-$border-radius = 6px
-$box-shadow = 0 4px 8px 0px rgba(black, 0.15)
-$code-font-family = source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
-$code-font-size = 0.85em
-$code-line-height = 1.5
-$code-text-color = #e0e0e0
-$danger-color = #e05025
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
deleted file mode 100644
index 8d564ff..0000000
--- a/docs/.vuepress/styles/index.styl
+++ /dev/null
@@ -1,28 +0,0 @@
-@import 'palette.styl'
-
-a
-    svg.icon.outbound
-        margin-left 2px
-
-    img + span > svg.icon.outbound
-        display none
-
-sup
-    font-size 0.75em !important
-
-.content a code
-    color $accentColor
-
-.navbar
-    -webkit-box-shadow 0 4px 4px -4px rgba(0,0,0,0.1)
-    -moz-box-shadow 0 4px 4px -4px rgba(0,0,0,0.1)
-    box-shadow 0 4px 4px -4px rgba(0,0,0,0.1)
-
-    .logo
-        margin-right: 0.5rem !important
-
-    .site-name
-        font-size 1.25rem !important
-
-    .repo-link
-        margin-left 1rem !important
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
deleted file mode 100644
index c7651d3..0000000
--- a/docs/.vuepress/styles/palette.styl
+++ /dev/null
@@ -1,3 +0,0 @@
-$accentColor = #3080D0
-$contentWidth = 768px
-$textColor = #404244
diff --git a/package-lock.json b/package-lock.json
index c146a5c..b84adcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "chartjs-plugin-datalabels",
-  "version": "0.7.0",
+  "version": "1.0.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3714,9 +3714,9 @@
       }
     },
     "acorn": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.0.5.tgz",
-      "integrity": "sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
+      "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
       "dev": true
     },
     "acorn-jsx": {
@@ -7534,72 +7534,6 @@
         "regexpp": "^3.0.0"
       }
     },
-    "eslint-plugin-html": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.1.1.tgz",
-      "integrity": "sha512-JSe3ZDb7feKMnQM27XWGeoIjvP4oWQMJD9GZ6wW67J7/plVL87NK72RBwlvfc3tTZiYUchHhxAwtgEd1GdofDA==",
-      "dev": true,
-      "requires": {
-        "htmlparser2": "^5.0.1"
-      },
-      "dependencies": {
-        "dom-serializer": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
-          "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^3.0.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
-          "dev": true
-        },
-        "domhandler": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
-          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1"
-          }
-        },
-        "domutils": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
-          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.0.1",
-            "domhandler": "^3.3.0"
-          }
-        },
-        "entities": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
-          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
-          "dev": true
-        },
-        "htmlparser2": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
-          "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^3.3.0",
-            "domutils": "^2.4.2",
-            "entities": "^2.0.0"
-          }
-        }
-      }
-    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -15423,6 +15357,17 @@
         "smoothscroll-polyfill": "^0.4.3"
       }
     },
+    "vuepress-theme-chartjs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vuepress-theme-chartjs/-/vuepress-theme-chartjs-0.1.0.tgz",
+      "integrity": "sha512-xOmMXTRk2z8jw/Qfl95iRwzIqkW5JWa0oUZ9EqgSseRcLmVgfrk6Wf1MaWSXY3ZwGBGMOCV5GQeaL+VtyEF+jQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.1.0",
+        "vue-prism-editor": "^1.2.2",
+        "vue2-perfect-scrollbar": "^1.5.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/package.json b/package.json
index 4178968..10dc9e3 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
     "bower": "node scripts/create-bower-json",
     "build": "rollup -c",
     "build:dev": "rollup -c --watch",
-    "docs": "npm run build && vuepress build docs --dest dist/docs",
-    "docs:dev": "npm run build && vuepress dev docs",
-    "lint": "eslint . --ext .js --ext .ts",
+    "docs": "npm run build && vuepress build docs --no-cache",
+    "docs:dev": "npm run build && vuepress dev docs --no-cache",
+    "lint": "eslint . --ext .js,.ts",
     "package": "npm run build && node scripts/create-packages.js",
     "test-unit": "karma start --single-run --coverage --grep",
     "test-unit:dev": "karma start --auto-watch --grep",
@@ -39,14 +39,12 @@
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
     "@vuepress/plugin-google-analytics": "^1.8.2",
-    "acorn": "^8.0.5",
     "archiver": "^5.2.0",
     "chart.js": "^2.9.4",
     "chartjs-test-utils": "^0.2.2",
     "eslint": "^7.21.0",
     "eslint-config-chartjs": "^0.3.0",
     "eslint-plugin-es": "^4.1.0",
-    "eslint-plugin-html": "^6.1.1",
     "jasmine-core": "^3.6.0",
     "karma": "^6.1.1",
     "karma-coverage": "^2.0.3",
@@ -61,10 +59,9 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.2.3",
-    "vue-prism-editor": "^1.2.2",
-    "vue2-perfect-scrollbar": "^1.5.0",
     "vuepress": "1.8.1",
     "vuepress-plugin-redirect": "^1.2.5",
+    "vuepress-theme-chartjs": "^0.1.0",
     "yargs": "^16.2.0"
   },
   "peerDependencies": {