Migrate from GitBook to Docusaurus (#7295)

Migrate from GitBook to Docusaurus

.github/workflows/ci.yml

@@ -49,7 +49,8 @@ jobs:
         gulp test --coverage ${BROWSERS}
     - name: Package
       run: |
-        gulp docs
+        npm run docs
+        npm run typedoc
         gulp package
     - name: Publish Test Results
       run: cat ./coverage/lcov.info | ./node_modules/.bin/coveralls

.gitignore

@@ -1,16 +1,26 @@
-/_book
 /coverage
 /custom
 /dist
 /docs/index.md
 /gh-pages
 /jsdoc
-/node_modules
-.DS_Store
 .idea
 .project
 .settings
 .vscode
 *.log
 *.swp
 *.stackdump
+build
+
+node_modules
+npm-debug.log*
+
+.docusaurus
+.cache-loader
+
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.travis.yml

@@ -11,7 +11,9 @@ services:
 script:
   - gulp build
   - gulp test --coverage
-  - gulp docs
+  - ./scripts/docs-config.sh
+  - npm run docs
+  - npm run typedoc
   - gulp package
   - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls || true
 

docs/README.md

@@ -1,63 +1,33 @@
-# Chart.js
-
-[![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
-
-## Installation
-
-You can download the latest version of Chart.js from the [GitHub releases](https://github.com/chartjs/Chart.js/releases/latest) or use a [Chart.js CDN](https://www.jsdelivr.com/package/npm/chart.js). Detailed installation instructions can be found on the [installation](./getting-started/installation.md) page.
-
-## Creating a Chart
-
-It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.
-
-In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
-```html
-<canvas id="myChart" width="400" height="400"></canvas>
-<script>
-var ctx = document.getElementById('myChart').getContext('2d');
-var myChart = new Chart(ctx, {
-    type: 'bar',
-    data: {
-        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-        datasets: [{
-            label: '# of Votes',
-            data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
-            borderColor: [
-                'rgba(255, 99, 132, 1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)'
-            ],
-            borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
-            y: {
-                beginAtZero: true
-            }
-        }
-    }
-});
-</script>
-```
-
-## Contributing
-
-Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](./developers/contributing.md) first.
-
-For support using Chart.js, please post questions with the [`chartjs` tag on Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs).
-
-## License
-
-Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm run start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/docs/README.md

@@ -0,0 +1,65 @@
+---
+title: Chart.js
+---
+
+[![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
+
+## Installation
+
+You can download the latest version of Chart.js from the [GitHub releases](https://github.com/chartjs/Chart.js/releases/latest) or use a [Chart.js CDN](https://www.jsdelivr.com/package/npm/chart.js). Detailed installation instructions can be found on the [installation](./getting-started/installation.md) page.
+
+## Creating a Chart
+
+It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.
+
+In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
+```html
+<canvas id="myChart" width="400" height="400"></canvas>
+<script>
+var ctx = document.getElementById('myChart').getContext('2d');
+var myChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3],
+            backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(255, 206, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+                'rgba(255, 99, 132, 1)',
+                'rgba(54, 162, 235, 1)',
+                'rgba(255, 206, 86, 1)',
+                'rgba(75, 192, 192, 1)',
+                'rgba(153, 102, 255, 1)',
+                'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
+    }
+});
+</script>
+```
+
+## Contributing
+
+Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](./developers/contributing.md) first.
+
+For support using Chart.js, please post questions with the [`chartjs` tag on Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs).
+
+## License
+
+Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT).

docs/axes/README.md → docs/docs/axes/README.md

@@ -1,4 +1,6 @@
-# Axes
+---
+title: Axes
+---
 
 Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X axis and 1 or more Y axis to map points onto the 2 dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/README.md#cartesian-axes).
 

docs/axes/cartesian/README.md → docs/docs/axes/cartesian/README.md

@@ -1,4 +1,6 @@
-# Cartesian Axes
+---
+title: Cartesian Axes
+---
 
 Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default.
 

docs/axes/cartesian/category.md → docs/docs/axes/cartesian/category.md

@@ -1,4 +1,6 @@
-# Category Cartesian Axis
+---
+title: Category Axis
+---
 
 If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
 

docs/axes/cartesian/linear.md → docs/docs/axes/cartesian/linear.md

@@ -1,4 +1,6 @@
-# Linear Cartesian Axis
+---
+title: Linear Axis
+---
 
 The linear scale is use to chart numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
 

docs/axes/cartesian/logarithmic.md → docs/docs/axes/cartesian/logarithmic.md

@@ -1,4 +1,6 @@
-# Logarithmic Cartesian Axis
+---
+title: Logarithmic Axis
+---
 
 The logarithmic scale is use to chart numerical data. It can be placed on either the x or y axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
 

docs/axes/cartesian/time.md → docs/docs/axes/cartesian/time.md

@@ -1,4 +1,6 @@
-# Time Cartesian Axis
+---
+title: Time Cartesian Axis
+---
 
 The time scale is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.
 

docs/axes/labelling.md → docs/docs/axes/labelling.md

@@ -1,4 +1,6 @@
-# Labeling Axes
+---
+title: Labeling Axes
+---
 
 When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
 

docs/axes/radial/README.md → docs/docs/axes/radial/README.md

@@ -1,4 +1,6 @@
-# Radial Axes
+---
+title: Radial Axes
+---
 
 Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
 

docs/axes/radial/linear.md → docs/docs/axes/radial/linear.md

@@ -1,4 +1,6 @@
-# Linear Radial Axis
+---
+title: Linear Radial Axis
+---
 
 The linear scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis.