Remove craco to fix vulnerabilities

craco.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  style: {
-    postcss: {
-      plugins: [require('tailwindcss'), require('autoprefixer')]
-    }
-  }
-};

package.json

@@ -4,27 +4,28 @@
   "private": true,
   "dependencies": {
     "@auth0/auth0-react": "^1.6.0",
-    "@craco/craco": "^6.4.3",
-    "@headlessui/react": "^1.4.0",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
+    "@headlessui/react": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "autoprefixer": "^9",
-    "highlight.js": "^11.5.0",
+    "highlight.js": "^11.2.0",
     "history": "^5.0.1",
-    "postcss": "^7",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "web-vitals": "^0.2.4"
+    "react-scripts": "^5.0.0",
+    "web-vitals": "^0.2.4",
+    "@heroicons/react": "^1.0.4",
+    "autoprefixer": "^10.4.4",
+    "heroicons": "^1.0.6",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -46,6 +47,6 @@
     ]
   },
   "devDependencies": {
-    "@heroicons/react": "^1.0.4"
+
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/Highlight.js

@@ -2,9 +2,8 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import hljs from "highlight.js";
-import "highlight.js/styles/monokai-sublime.css";
-
-const registeredLanguages = {};
+import "highlight.js/styles/agate.css";
+import "highlight.js/lib/languages/bash";
 
 class Highlight extends Component {
   constructor(props) {
@@ -15,22 +14,7 @@ class Highlight extends Component {
   }
 
   componentDidMount() {
-    const { language } = this.props;
-
-    if (language && !registeredLanguages[language]) {
-      try {
-        const newLanguage = require(`highlight.js/lib/languages/${language}`);
-        hljs.registerLanguage(language, newLanguage);
-        registeredLanguages[language] = true;
-
-        this.setState({ loaded: true }, this.highlight);
-      } catch (e) {
-        console.error(e);
-        throw Error(`Cannot register the language ${language}`);
-      }
-    } else {
-      this.setState({ loaded: true });
-    }
+    this.setState({ loaded: true });
   }
 
   componentDidUpdate() {
@@ -66,8 +50,4 @@ Highlight.propTypes = {
   language: PropTypes.string,
 };
 
-Highlight.defaultProps = {
-  language: "javascript",
-};
-
 export default Highlight;