Migrate the documentation to VuePress

It seems that GitBook abandoned their open source tools which now contains lot of vulnerabilities so let's switch to VuePress which looks more flexible and user friendly.
chartjs · Nov 20, 2018 · 50de9be · 50de9be
1 parent 28d1a87
commit 50de9be
Show file tree

Hide file tree

Showing 20 changed files with 142 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ The following commands will then be available from the repository root:
     > gulp test --coverage  // run unit tests and generate code coverage
     > gulp lint             // perform code linting
     > gulp package          // create an archive with dist files and samples
-    > gulp docs             // generate GitBook documentation (`dist/docs`)
+    > gulp docs             // generate VuePress documentation (`dist/docs`)
 
 ## License
 

diff --git a/book.json b/book.json
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -0,0 +1,28 @@
+module.exports = {
+    title: 'chartjs-plugin-datalabels',
+    description: 'Display labels on data for any type of charts.',
+    ga: 'UA-99068522-2',
+    head: [
+        ['link', { rel: 'icon', href: `/favicon.png` }],
+    ],
+    themeConfig: {
+        repo: 'chartjs/chartjs-plugin-datalabels',
+        logo: '/favicon.png',
+        lastUpdated: 'Last Updated',
+        editLinks: true,
+        docsDir: 'docs',
+        nav: [
+            { text: 'Home', link: '/' },
+            { text: 'Guide', link: '/guide/' },
+            { text: 'Samples', link: 'https://chartjs-plugin-datalabels.netlify.com/samples/' }
+        ],
+        sidebar: [
+            '/guide/',
+            '/guide/installation',
+            '/guide/options',
+            '/guide/positioning',
+            '/guide/formatting',
+            '/guide/events'
+        ]
+    }
+}
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
@@ -0,0 +1,3 @@
+$accentColor = #3080D0
+$contentWidth = 768px
+$textColor = #404244
diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico
diff --git a/docs/.vuepress/public/favicon.png b/docs/.vuepress/public/favicon.png
diff --git a/docs/.vuepress/public/hero.png b/docs/.vuepress/public/hero.png
diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/style.styl
@@ -0,0 +1,29 @@
+@import 'override.styl'
+
+a
+    svg.icon.outbound
+        margin-bottom -2px
+        margin-left 2px
+
+    img + 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;
+
+    .site-name
+        font-size 1.25rem
+
+    .repo-link
+        margin-left 1rem
diff --git a/docs/README.md b/docs/README.md
@@ -1,15 +1,14 @@
-![chartjs-plugin-datalabels](assets/banner.png)
-
-Highly customizable [Chart.js](http://www.chartjs.org/) plugin that displays labels on data for any type of charts.
-
-Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.7.0** or later.
-
-> **Important:** this plugin doesn't provide any public API (except the plugin options), thus you should **not** access private properties or methods starting with `$` or `_`, including the `$datalabels` attached property. The implementation can change at any version and could break your production build without notice in upcoming minor/patch releases if any of your code relies on it.
-
-## Table of Contents
-
-{% include "SUMMARY.md" %}
-
-## License
-
-`chartjs-plugin-datalabels` is available under the [MIT license](https://github.com/chartjs/chartjs-plugin-datalabels/blob/master/LICENSE.md).
+---
+home: true
+heroImage: /hero.png
+actionText: Get Started →
+actionLink: /guide/
+footer: MIT Licensed | Copyright © 2018 Chart.js Contributors
+features:
+- title: Flexible
+  details: Compatible with all types of charts (bar, line, doughnut, radar, etc.)
+- title: Customizable
+  details: Appearance and position of each label are fully and dynamically controllable.
+- title: Interactive
+  details: Labels can react to user interactions or element events using scriptable options.
+---
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
diff --git a/docs/assets/banner.png b/docs/assets/banner.png
diff --git a/docs/assets/style.css b/docs/assets/style.css
diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -0,0 +1,24 @@
+# Introduction
+
+Highly customizable [Chart.js](http://www.chartjs.org/) plugin that displays labels on data for any type of charts.
+
+::: warning COMPATIBILITY NOTE
+Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.7.0** or later.
+:::
+
+::: danger IMPORTANT
+This plugin doesn't provide any public API (except the plugin options), thus you should **not** access private properties or methods starting with `$` or `_`, including the `$datalabels` attached property. The implementation can change at any version and could break your production build without notice in upcoming minor/patch releases if any of your code relies on it.
+:::
+
+## Table of Contents
+
+* [Installation](installation.md)
+* [Options](options.md)
+* [Positioning](positioning.md)
+* [Formating](formatting.md)
+* [Events](events.md)
+* [Samples](https://chartjs-plugin-datalabels.netlify.com/samples/)
+
+## License
+
+`chartjs-plugin-datalabels` is available under the [MIT license](https://github.com/chartjs/chartjs-plugin-datalabels/blob/master/LICENSE.md).
diff --git a/docs/events.md → docs/guide/events.md b/docs/events.md → docs/guide/events.md
@@ -8,7 +8,9 @@ This plugin currently supports the following label events:
 | `leave` | `mousemove` | the mouse is moved out of an label
 | `click` | `click` | the mouse's primary button is pressed and released on a label
 
-> <sup>1</sup> [Chart.js events](http://www.chartjs.org/docs/latest/general/interactions/events.html) that need to be enabled in order to get the associated label event working. Note that by default Chart.js enables `"mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"`, meaning that label events work out-of-the-box.
+::: tip NOTE
+<sup>1</sup> [Chart.js events](http://www.chartjs.org/docs/latest/general/interactions/events.html) that need to be enabled in order to get the associated label event working. Note that by default Chart.js enables `"mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"`, meaning that label events work out-of-the-box.
+:::
 
 ## Listeners
 
@@ -18,7 +20,9 @@ The `context` contains the same information as for [scriptable options](options.
 
 Listeners can be registered for any label (`options.plugin.datalabels.listener.*`) or for labels of a specific dataset (`dataset.datalabels.listeners.*`).
 
-> **Tip:** if no listener is registered, incoming events are immediately ignored, preventing extra computation such as intersecting label bounding box. That means there should be no performance penalty for configurations that don't use events.
+::: tip
+If no listener is registered, incoming events are immediately ignored, preventing extra computation such as intersecting label bounding box. That means there should be no performance penalty for configurations that don't use events.
+:::
 
 ## Example
 

diff --git a/docs/formatting.md → docs/guide/formatting.md b/docs/formatting.md → docs/guide/formatting.md
@@ -25,7 +25,9 @@ formatter: function(value, context) {
 // ...
 ```
 
-> **Tip:** the first argument being the value, you can directly use generic methods:
+::: tip
+The first argument being the value, you can directly use generic methods:
+:::
 
 ```javascript
 formatter: Math.round
@@ -63,7 +65,9 @@ new Chart('id', {
 // ...
 ```
 
-> **Tip:** `chart.data.labels` is given as an example but it works with any source:
+::: tip
+`chart.data.labels` is given as an example but it works with any source:
+:::
 
 ```javascript
 context.dataset.data[context.dataIndex].label;  // labels in each data object
@@ -85,7 +89,9 @@ formatter: function(value) {
 }
 ```
 
-> **Tip:** the space between each line can be adjusted using the `font.lineHeight` option.
+::: tip
+The space between each line can be adjusted using the `font.lineHeight` option.
+:::
 
 ## Text Alignment
 

diff --git a/docs/installation.md → docs/guide/installation.md b/docs/installation.md → docs/guide/installation.md
@@ -4,22 +4,26 @@
 
 [![npm](https://img.shields.io/npm/v/chartjs-plugin-datalabels.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chartjs-plugin-datalabels) [![npm downloads](https://img.shields.io/npm/dm/chartjs-plugin-datalabels.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chartjs-plugin-datalabels)
 
-    npm install chartjs-plugin-datalabels --save
+```
+npm install chartjs-plugin-datalabels --save
+```
 
 ## Bower
 
-[![bower](https://img.shields.io/bower/v/chartjs-plugin-datalabels.svg?style=flat-square&maxAge=600)](https://libraries.io/bower/chartjs-plugin-datalabels)
-
-    bower install chartjs-plugin-datalabels --save
+```
+bower install chartjs-plugin-datalabels --save
+```
 
 ## CDN
 
 [![jsdelivr](https://img.shields.io/npm/v/chartjs-plugin-datalabels.svg?label=jsdelivr&style=flat-square&maxAge=600)](https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@latest/dist/) [![jsdelivr hits](https://data.jsdelivr.com/v1/package/npm/chartjs-plugin-datalabels/badge)](https://www.jsdelivr.com/package/npm/chartjs-plugin-datalabels)
 
 By default, `https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels` returns the latest (minified) version, however it's [**highly recommended**](https://www.jsdelivr.com/features) to always specify a version in order to avoid breaking changes. This can be achieved by appending `@{version}` to the url:
 
-    https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.1.2    // exact version
-    https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1        // latest 1.x.x
+```
+https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.1.2    // exact version
+https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1        // latest 1.x.x
+```
 
 Read more about jsDeliver versioning on their [website](http://www.jsdelivr.com/).
 

diff --git a/docs/options.md → docs/guide/options.md b/docs/options.md → docs/guide/options.md
diff --git a/docs/positioning.md → docs/guide/positioning.md b/docs/positioning.md → docs/guide/positioning.md
@@ -2,24 +2,24 @@
 
 ## Anchoring
 
-An anchor point is defined by an orientation (normalized) vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the `anchor` option and the orientation vector.
+An anchor point is defined by an orientation vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the `anchor` option and the orientation vector.
 
 Supported values for `anchor`:
 - `center` (default): element center
 - `start`: lowest element boundary
 - `end`: highest element boundary
 
-![chartjs-plugin-datalabels](assets/anchor.png)
+![chartjs-plugin-datalabels](../assets/anchor.png)
 
 ## Clamping
 
-The `clamp` option, when `true`, enforces the anchor position to be calculated based on
-the *visible geometry* of the associated element (i.e. part inside the chart area).
+The `clamp` option, when `true`, enforces the anchor position to be calculated based on the *visible geometry* of the associated element (i.e. part inside the chart area).
 
-![chartjs-plugin-datalabels](assets/clamp.png)
+![chartjs-plugin-datalabels](../assets/clamp.png)
 
-> **Note:** if the element is fully hidden (i.e. entirely outside the chart area),
-anchor points will **not** be adjusted and thus will also be outside the viewport.
+::: tip NOTE
+If the element is fully hidden (i.e. entirely outside the chart area), anchor points will **not** be adjusted and thus will also be outside the viewport.
+:::
 
 ## Alignment and Offset
 
@@ -34,7 +34,7 @@ The `align` option defines the position of the label relative to the anchor poin
 
 The `offset` represents the distance (in pixels) to pull the label *away* from the anchor point. This option is **not applicable** when `align` is `center`. Also note that if `align` is `start`, the label is moved in the opposite direction. The default value is `4`.
 
-![chartjs-plugin-datalabels](assets/align.png)
+![chartjs-plugin-datalabels](../assets/align.png)
 
 ## Rotation
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -14,7 +14,7 @@ var merge = require('merge2');
 var path = require('path');
 var rollup = require('rollup-stream');
 var source = require('vinyl-source-stream');
-var {exec} = require('mz/child_process');
+var {exec} = require('child_process');
 var pkg = require('./package.json');
 
 var argv = require('yargs')
@@ -84,17 +84,15 @@ gulp.task('lint', function() {
 });
 
 gulp.task('docs', function(done) {
-	var script = require.resolve('gitbook-cli/bin/gitbook.js');
+	var script = require.resolve('vuepress/bin/vuepress.js');
 	var out = path.join(argv.output, argv.docsDir);
+	var mode = argv.watch ? 'dev' : 'build';
 	var cmd = '"' + process.execPath + '"';
+	var ps = exec([cmd, script, mode, 'docs', '--dest', out].join(' '));
 
-	exec([cmd, script, 'install', './'].join(' ')).then(() => {
-		return exec([cmd, script, argv.watch ? 'serve' : 'build', './', out].join(' '));
-	}).then(() => {
-		done();
-	}).catch((err) => {
-		done(new Error(err.stdout || err));
-	});
+	ps.stdout.pipe(process.stdout);
+	ps.stderr.pipe(process.stderr);
+	ps.on('close', () => done());
 });
 
 gulp.task('samples', function() {
@@ -127,9 +125,7 @@ gulp.task('netlify', ['build', 'docs', 'samples'], function() {
 		gulp.src(path.join(root, '*.js'))
 	);
 
-	return streams
-		.pipe(streamify(replace(/https?:\/\/chartjs-plugin-datalabels\.netlify\.com\/?/g, '/', {skipBinary: true})))
-		.pipe(gulp.dest(out));
+	return streams.pipe(gulp.dest(out));
 });
 
 gulp.task('bower', function() {

diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "chart.js": "2.7.2",
     "eslint-config-chartjs": "^0.1.0",
     "fancy-log": "^1.3.2",
-    "gitbook-cli": "^2.3.2",
     "gulp": "^3.9.1",
     "gulp-eslint": "^5.0.0",
     "gulp-file": "^0.4.0",
@@ -31,12 +30,11 @@
     "karma": "^3.1.1",
     "karma-coverage": "^1.1.2",
     "karma-firefox-launcher": "^1.1.0",
-    "karma-jasmine": "^1.1.2",
+    "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "karma-rollup-preprocessor": "^6.1.0",
     "karma-spec-reporter": "^0.0.32",
     "merge2": "^1.2.3",
-    "mz": "^2.7.0",
     "path": "^0.12.7",
     "pixelmatch": "^4.0.2",
     "rollup": "^0.67.0",
@@ -45,6 +43,7 @@
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-stream": "^1.24.0",
     "vinyl-source-stream": "^2.0.0",
+    "vuepress": "^0.14.5",
     "yargs": "^12.0.2"
   },
   "peerDependencies": {