docs: add katacoda tutorial (kubernetes#926)

Signed-off-by: Yue Yang <[email protected]>

docusaurus.config.js

@@ -33,7 +33,8 @@ module.exports = {
           activeBasePath: 'docs',
           label: 'Documentation',
         },
-        { to: 'blog', activeBasePath: 'blog', label: 'Blog' },
+        { to: 'interactiveTutorial', label: 'Interactive Tutorial' },
+        { to: 'blog', activeBasePath: 'blog', label: 'Blog', position: 'right' },
         {
           href: 'https://github.com/chaos-mesh/chaos-mesh',
           label: 'GitHub',

package.json

@@ -6,10 +6,11 @@
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy"
+    "deploy": "docusaurus deploy",
+    "clean": "rimraf build"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.58",
+    "@docusaurus/core": "^2.0.0-alpha.64",
     "@docusaurus/preset-classic": "^2.0.0-alpha.58",
     "clsx": "^1.1.1",
     "react": "^16.8.4",
@@ -26,5 +27,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2"
   }
 }

src/pages/interactiveTutorial.js

@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react'
+
+import Layout from '@theme/Layout'
+
+const useScript = (url) => {
+  useEffect(() => {
+    const script = document.createElement('script')
+
+    script.src = url
+    script.async = true
+
+    document.body.appendChild(script)
+
+    return () => {
+      document.body.removeChild(script)
+    }
+  }, [url])
+}
+
+const InteractiveTutorial = () => {
+  useScript('//katacoda.com/embed.js')
+
+  return (
+    <Layout
+      title="Interactive Tutorial"
+      description="This interactive tutorial will use Katacoda to cover an introduction to Chaos Mesh and guides the learner through two experiments that coincide with the Chaos Mesh documentation"
+    >
+      <div
+        id="katacoda-scenario-1"
+        data-katacoda-id="javajon/courses/kubernetes-chaos/chaos-mesh"
+        data-katacoda-color="172d72"
+        style={{ height: 'calc(100vh - 60px)' }}
+      ></div>
+    </Layout>
+  )
+}
+
+export default InteractiveTutorial