refactor: website (#740)

* refactor: website

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

* fix: typo

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

Co-authored-by: ti-srebot <[email protected]>

Author: g1eny0ung

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

README.md

@@ -1,33 +1,33 @@
-# Website
+# Chaos Mesh Website
 
 This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
 
 ### Installation
 
-```
-$ yarn
+```sh
+yarn
 ```
 
 ### Local Development
 
-```
-$ yarn start
+```sh
+yarn start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
 ### Build
 
-```
-$ yarn build
+```sh
+yarn 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 yarn deploy
+```sh
+GIT_USER=<Your GitHub username> USE_SSH=true yarn 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.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/2020-04-20-simulating-clock-skew-in-k8s-without-affecting-other-containers-on-node.md

@@ -5,7 +5,7 @@ author: Cwen Yin
 author_title: Maintainer of Chaos Mesh
 author_url: https://github.com/cwen0
 author_image_url: https://avatars1.githubusercontent.com/u/22956341?v=4
-tags: [Chaos Mesh, Chaos Engineering, Kubernetes, Distributed system]
+tags: [Chaos Mesh, Chaos Engineering, Kubernetes, Distributed System]
 ---
 
 ![Clock synchronization in distributed system](/img/clock-sync-chaos-engineering-k8s.jpg)

docs/installation/get_started_on_kind.md

@@ -1,6 +1,6 @@
 ---
 id: get_started_on_kind
-title: Get started on kind
+title: Get started on Kind
 ---
 
 This document describes how to deploy Chaos Mesh in Kubernetes on your laptop (Linux or macOS) using kind.

docusaurus.config.js

@@ -1,13 +1,12 @@
 module.exports = {
   title: 'Chaos Mesh®',
   tagline: 'A Powerful Chaos Engineering Platform for Kubernetes',
-  url: 'https://chaos-mesh.github.io',
+  url: 'https://chaos-mesh.org',
   baseUrl: '/',
   favicon: 'img/favicon.ico',
   organizationName: 'chaos-mesh', // Usually your GitHub org/user name.
   projectName: 'chaos-mesh.github.io', // Usually your repo name.
   themeConfig: {
-    defaultDarkMode: false,
     algolia: {
       apiKey: '49739571d4f89670b12f39d5ad135f5a',
       indexName: 'chaos-mesh',
@@ -16,19 +15,19 @@ module.exports = {
       trackingID: 'UA-90760217-2',
     },
     navbar: {
+      hideOnScroll: true,
+      title: 'Chaos Mesh®',
       logo: {
         alt: 'Chaos Mesh Logo',
-        src: 'img/logo.svg',
-        srcDark: 'img/logo_dark.svg'
+        src: 'img/logos/logo-mini.svg',
       },
-      links: [
+      items: [
         {
-          to: 'docs/',
+          to: 'docs',
           activeBasePath: 'docs',
-          label: 'Docs',
-          position: 'left',
+          label: 'Documentation',
         },
-        {to: 'blog', label: 'Blog', position: 'left'},
+        { to: 'blog', activeBasePath: 'blog', label: 'Blog' },
         {
           href: 'https://github.com/chaos-mesh/chaos-mesh',
           label: 'GitHub',
@@ -37,17 +36,16 @@ module.exports = {
       ],
     },
     footer: {
-      style: 'dark',
       links: [
         {
-          title: 'Docs',
+          title: 'Documentation',
           items: [
             {
-              label: 'Getting started',
+              label: 'Getting Started',
               to: 'docs/installation/installation',
             },
             {
-              label: 'User Guide',
+              label: 'User Guides',
               to: 'docs/user_guides/run_chaos_experiment',
             },
           ],
@@ -59,14 +57,6 @@ module.exports = {
               label: 'Twitter',
               href: 'https://twitter.com/chaos_mesh',
             },
-            {
-              label: 'Slack',
-              href: 'https://chaos-mesh.org/tidbslack',
-            },
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/chaos-mesh',
-            },
           ],
         },
         {
@@ -83,9 +73,13 @@ module.exports = {
           ],
         },
       ],
-      copyright: `<strong>© Chaos Mesh® Authors ${new Date().getFullYear()} | Documentation Distributed under CC-BY-4.0 </strong> <br> <br> © ${new Date().getFullYear()} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/"> Trademark Usage page</a>.`,
+      copyright: `<br /><strong>© Chaos Mesh® Authors ${new Date().getFullYear()} | Documentation Distributed under CC-BY-4.0 </strong><br /><br />© ${new Date().getFullYear()} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage/"> Trademark Usage</a> page.`,
+    },
+    prism: {
+      theme: require('prism-react-renderer/themes/dracula'),
     },
   },
+  plugins: ['docusaurus-plugin-sass'],
   presets: [
     [
       '@docusaurus/preset-classic',
@@ -95,19 +89,17 @@ module.exports = {
           homePageId: 'overview',
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          editUrl:
-            'https://github.com/chaos-mesh/chaos-mesh/edit/master/website/',
+          editUrl: 'https://github.com/chaos-mesh/chaos-mesh/edit/master/website/',
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
-          editUrl:
-            'https://github.com/chaos-mesh/chaos-mesh/edit/master/website/blog/',
+          editUrl: 'https://github.com/chaos-mesh/chaos-mesh/edit/master/website/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/styles/custom.scss'),
         },
       },
     ],
   ],
-};
+}

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "chaos-mesh",
-  "version": "0.0.0",
+  "name": "chaos-mesh-website",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "start": "docusaurus start",
@@ -9,9 +9,10 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.56",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.56",
-    "classnames": "^2.2.6",
+    "@docusaurus/core": "^2.0.0-alpha.58",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.58",
+    "clsx": "^1.1.1",
+    "docusaurus-plugin-sass": "^0.1.9",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
@@ -27,4 +28,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

sidebars.js

@@ -7,11 +7,7 @@ module.exports = {
     {
       type: 'category',
       label: 'Getting Started',
-      items: [
-        'installation/installation',
-        'installation/get_started_on_kind',
-        'installation/get_started_on_minikube'
-      ],
+      items: ['installation/installation', 'installation/get_started_on_kind', 'installation/get_started_on_minikube'],
     },
     {
       type: 'category',
@@ -37,11 +33,9 @@ module.exports = {
       ],
     },
     {
-      type: "category",
-      label: "Use Cases",
-      items: [
-        "use_cases/multi_data_centers",
-      ]
+      type: 'category',
+      label: 'Use Cases',
+      items: ['use_cases/multi_data_centers'],
     },
     {
       type: 'category',
@@ -50,7 +44,7 @@ module.exports = {
         'development_guides/development_overview',
         'development_guides/set_up_the_development_environment',
         'development_guides/develop_a_new_chaos',
-      ]
+      ],
     },
     {
       type: 'doc',