Live demo in getting-started page (#7659)

* Output docs directly to dist
* Live demo in getting-started page

docs/docs/getting-started/index.mdx

@@ -20,26 +20,33 @@ Now that we have a canvas we can use, we need to include Chart.js in our page.
 
 Now, we can create a chart. We add a script to our page:
 
-```javascript
-var ctx = document.getElementById('myChart').getContext('2d');
-var chart = new Chart(ctx, {
-    // The type of chart we want to create
-    type: 'line',
+import { useEffect } from 'react';
 
-    // The data for our dataset
-    data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-            label: 'My First dataset',
-            backgroundColor: 'rgb(255, 99, 132)',
-            borderColor: 'rgb(255, 99, 132)',
-            data: [0, 10, 5, 2, 20, 30, 45]
-        }]
-    },
+```jsx live
+function example() {
+  useEffect(() => {
+	var ctx = document.getElementById('myChart').getContext('2d');
+	var chart = new Chart(ctx, {
+		// The type of chart we want to create
+		type: 'line',
 
-    // Configuration options go here
-    options: {}
-});
+		// The data for our dataset
+		data: {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'My First dataset',
+				backgroundColor: 'rgb(255, 99, 132)',
+				borderColor: 'rgb(255, 99, 132)',
+				data: [0, 10, 5, 2, 20, 30, 45]
+			}]
+		},
+
+		// Configuration options go here
+		options: {}
+	});
+  });
+  return <div className="chartjs-wrapper"><canvas id="myChart" className="chartjs"></canvas></div>;
+}
 ```
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.

docs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "docusaurus build --out-dir ../dist/docs",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"
   },

package.json

@@ -31,7 +31,7 @@
     "autobuild": "rollup -c -w",
     "build": "rollup -c",
     "dev": "karma start ---auto-watch --no-single-run --browsers chrome --grep",
-    "docs": "cd docs && npm install && npm run build && mkdir -p ../dist && cp -r build ../dist/docs",
+    "docs": "cd docs && npm install && npm run build",
     "lint-js": "eslint samples/**/*.html samples/**/*.js src/**/*.js test/**/*.js",
     "lint-tsc": "tsc",
     "lint": "concurrently \"npm:lint-*\"",