Live demo in getting-started page (#7659)

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

diff --git a/docs/docs/getting-started/index.md b/docs/docs/getting-started/index.mdx
similarity index 58%
rename from docs/docs/getting-started/index.md
rename to docs/docs/getting-started/index.mdx
index 622a52257c9e4e4549d95c45b54bbeca366d3a24..d9830a5486c64e823c5bff9db9cdf2d2b7ca98b2 100644 (file)
--- a/docs/docs/getting-started/index.md
+++ b/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',
-
-    // 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: {}
-});
+import { useEffect } from 'react';
+
+```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',
+
+               // 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.

diff --git a/docs/package.json b/docs/package.json
index e84aad2a922cea83e92c099007f9c8e74a1a6a77..eb06264860d69a7b2ba9c8d2f2d9f1b625db40f4 100644 (file)
--- a/docs/package.json
+++ b/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"
   },

diff --git a/package.json b/package.json
index c42d320487e0f6a943929d910abe68cc7fcafb1e..18b28477061760844b02e4e9f1f07a30f7294e3f 100644 (file)
--- a/package.json
+++ b/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-*\"",