chore(docs): update website dependencies.

* Remove unsupported stylesheets config
* update to new React Monaco editor API
* correct invalid React inline style property
* get rid of console warning on home page
* Remove dependency on old Styled Components release
* Remove example blog posts

site/docusaurus.config.js

@@ -13,7 +13,7 @@ module.exports = {
         alt: 'CSSNANO Logo',
         src: 'img/logo-alt.svg',
       },
-      links: [
+      items: [
         {
           to: 'docs/introduction',
           label: 'Guide',
@@ -112,6 +112,5 @@ module.exports = {
       },
     ],
   ],
-  stylesheets: ['https://at-ui.github.io/feather-font/css/iconfont.css', ''],
   plugins: [require.resolve('./docusaurus-webpack-plugin')],
 };

site/package.json

@@ -9,19 +9,18 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.48",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.48",
-    "@monaco-editor/react": "^3.3.0",
+    "@docusaurus/core": "^2.0.0-alpha.72",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.72",
+    "@monaco-editor/react": "^4.1.0",
     "classnames": "^2.2.6",
     "cssnano-preset-advanced": "^4.0.7",
     "cssnano-preset-default": "^4.0.7",
     "cssnano-preset-lite": "^1.0.0",
-    "postcss": "^7.0.16",
-    "prettier": "^2.0.4",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-icons": "^3.9.0",
-    "react-spinners-kit": "^1.9.1"
+    "postcss": "^8.2.6",
+    "prettier": "^2.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0"
   },
   "browserslist": {
     "production": [

site/src/components/editor/RingSpinner.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { wrapper, circle } from './RingSpinner.module.css'
+
+export function RingSpinner() {
+  return <div className={wrapper}><div className={circle}></div></div>
+}

site/src/components/editor/RingSpinner.module.css

@@ -0,0 +1,61 @@
+/* Original styles by https://dmitrymorozoff.github.io/react-spinners-kit/ */
+.wrapper {
+  width: 30px;
+  height: 30px;
+}
+
+.circle {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+}
+
+.circle::before, .circle::after {
+  width: 100%;
+  height: 100%;
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out; 
+}
+
+.circle::before {
+  box-shadow: inset 0 0 0 3px #00ff89;
+  animation-name: firstPulse;
+}
+
+.circle::after {
+  box-shadow: 0 0 0 0 #00ff89;
+  animation-name: secondPulse;
+}
+
+@keyframes firstPulse {
+  0% {
+    box-shadow: inset 0 0 0 3px #00ff89;
+    opacity: 1;
+  }
+
+  50%, 100% {
+    box-shadow: inset 0 0 0 0 #00ff89;
+    opacity: 0
+  }
+}
+
+@keyframes secondPulse {
+  0%, 50% {
+    box-shadow: inset 0 0 0 0 #00ff89;
+    opacity: 0;
+  }
+
+  100% {
+    box-shadow: inset 0 0 0 3px #00ff89;
+    opacity: 1
+  }
+}
+

site/src/components/editor/config.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { ControlledEditor as Editor } from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import Editor  from '@monaco-editor/react';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class ConfigEditor extends Component {
   render() {
@@ -14,7 +14,6 @@ class ConfigEditor extends Component {
           loading={<Loader />}
           value={this.props.config}
           onChange={this.props.handleOnChange}
-          editorDidMount={this.handleEditorDidMount}
           options={{ lineNumbers: 'on' }}
         />
       </div>

site/src/components/editor/main.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ControlledEditor as Editor } from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import Editor from '@monaco-editor/react';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class MainEditor extends Component {
   constructor(props) {
@@ -24,7 +24,7 @@ class MainEditor extends Component {
           loading={<Loader />}
           value={this.props.input}
           onChange={this.props.handleOnChange}
-          editorDidMount={this.handleEditorDidMount}
+          onMount={this.handleEditorDidMount}
           options={{ lineNumbers: 'on' }}
         />
       </div>

site/src/components/editor/output.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Editor from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class OutputEditor extends Component {
   render() {

site/src/pages/index.js

@@ -199,7 +199,7 @@ function Home() {
                       {minifyTableData.map(({ property, value }, i) => (
                         <tr
                           key={i}
-                          style={{ width: '100%', 'max-width': '100%' }}
+                          style={{ width: '100%', 'maxWidth': '100%' }}
                         >
                           <td>{property}</td>
                           <td>{value}</td>

site/src/pages/playground.js

@@ -4,7 +4,7 @@ import prettier from 'prettier/standalone';
 import cssParser from 'prettier/parser-postcss';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import className from 'classnames';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import { RingSpinner as Loader } from '../components/editor/RingSpinner.js';
 import MainEditor from '../components/editor/main';
 import OutputEditor from '../components/editor/output';
 import unicode from '../helper/unicode';
@@ -35,21 +35,21 @@ export default () => {
 
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
-  const [theme, setTheme] = useState('dark');
+  const [theme, setTheme] = useState('vs-dark');
   const [editorLoading, setEditorLoading] = useState(false);
   const [output, setOutput] = useState('/* your optimized output here */');
   const [input, setInput] = useState(intializedState.input);
   const [config, setConfig] = useState(intializedState.config);
 
   function toggleTheme() {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    setTheme(theme === 'light' ? 'vs-dark' : 'light');
   }
 
-  function handleConfigChange(e, value) {
+  function handleConfigChange(value, e) {
     setConfig(value);
   }
 
-  function handleOnInput(e, value) {
+  function handleOnInput(value, e) {
     setInput(value);
   }