Cybersecurity

.babelrc.json

@@ -1,7 +1,12 @@
 {
 	"presets": [
 		"next/babel",
-		"@babel/preset-react",
+		[
+			"@babel/preset-react",
+			{
+			  "runtime": "automatic"
+			}
+		  ],
 		[
 			"@babel/env",
 			{

package.json

@@ -21,28 +21,45 @@
   "author": "[email protected]",
   "license": "Apache-2.0",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@material-ui/core": "^4.12.4",
+    "@mui/material": "^6.2.1",
+    "@mui/styled-engine-sc": "^6.2.1",
+    "@mui/system": "^6.2.1",
+    "babel-loader": "^9.2.1",
+    "browserslist": ">=4.16.5",
     "build": "^0.1.4",
+    "core-js": "^3.39.0",
     "elliptic": "^6.5.4",
-    "browserslist": ">=4.16.5",
+    "glob-parent": ">=5.1.2",
     "graphql": "^15.4.0",
     "graphql-request": "^3.3.0",
     "lodash": ">=4.17.21",
+    "material-ui-search-bar": "^1.0.1",
+    "multiselect-react-dropdown": "^2.0.25",
     "next": "^10.0.1",
-    "glob-parent": ">=5.1.2",
     "node-fetch": "^2.6.7",
-    "prop-types": "^15.7.2",
     "postcss": ">=8.2.10",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-js-search": "^0.4.0",
     "react-markdown": "^5.0.3",
+    "react-search-autocomplete": "^8.5.2",
+    "react-search-box": "^3.0.0",
+    "react-search-field": "^2.0.1",
     "ssri": "~8.0.1",
+    "styled-components": "^6.1.13",
     "swr": "^0.3.9",
     "uglify-js": ">=2.6.0",
     "webpack": "^4.20.2",
     "y18n": "~4.0.1"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
     "eslint": "^7.12.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.1",
@@ -53,6 +70,10 @@
     "lint-staged": "^10.5.0",
     "react-svg-loader": "^3.0.3"
   },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

src/components/Header/index.jsx

@@ -1,32 +1,43 @@
-import PropTypes from 'prop-types';
-// import Image from 'next/image';
-import { backgroundColor } from 'src/shared/backgroundColors';
-import { borderColor } from 'src/shared/borderColors';
-
-import {
-  header,
-  content,
-  title as titleStyle,
-  image as imageStyle, featuredImage,
-} from './style.module.css';
-
-const Header = ({ title, image, color }) => (
-  <header className={`${header} ${image && featuredImage} ${backgroundColor(color)} ${borderColor(color)}`}>
-    <section className={content}>
-      <h1 className={titleStyle}>{title}</h1>
-    </section>
-    {image && (
-    <section className={imageStyle}>
-      <img src={`${process.env.ASSET_PREFIX}${image}`} alt="" preload="true" layout="fill" objectfit="cover" objectposition="center" />
-    </section>
-    )}
-  </header>
-);
-
-export default Header;
-
-Header.propTypes = {
-  title: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-  image: PropTypes.string,
-};
+import PropTypes from "prop-types";
+import { backgroundColor } from "src/shared/backgroundColors";
+import { borderColor } from "src/shared/borderColors";
+
+import {
+  header,
+  content,
+  title as titleStyle,
+  image as imageStyle,
+  featuredImage,
+} from "./style.module.css";
+
+const Header = ({ title, image, color }) => (
+  <header
+    className={`${header} ${image ? featuredImage : ""} ${backgroundColor(
+      color
+    )} ${borderColor(color)}`}
+  >
+    <section className={content}>
+      <h1 className={titleStyle}>{title}</h1>
+    </section>
+    {image ? (
+      <section className={imageStyle}>
+        <img
+          src={`${process.env.ASSET_PREFIX}${image}`}
+          alt=""
+          preload="true"
+          layout="fill"
+          objectfit="cover"
+          objectposition="center"
+        />
+      </section>
+    ) : null}
+  </header>
+);
+
+export default Header;
+
+Header.propTypes = {
+  title: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  image: PropTypes.string,
+};

src/components/Header/style.module.css

@@ -1,6 +1,6 @@
 .header {
   border-bottom-style: solid;
-  border-bottom-width: .5rem;
+  border-bottom-width: 0.5rem;
   color: #fff;
   margin: -2rem -3rem 3rem;
   padding: 3rem;
@@ -21,7 +21,7 @@
 .header.featuredImage .content {
   margin-top: 10%;
   position: relative;
-  text-shadow: 0 0 1rem #0064, 0 0 .1rem #006 ;
+  text-shadow: 0 0 1rem #0064, 0 0 0.1rem #006;
   z-index: 1;
 }
 
@@ -38,7 +38,7 @@
 }
 
 .image:before {
-  content: '';
+  content: "";
   display: block;
   background-image: linear-gradient(to bottom, #0001, #0006);
   position: absolute;
@@ -54,26 +54,26 @@
 .category {
   border-top: 2px solid #fdb913;
   display: inline-block;
-  font-size: .6rem;
+  font-size: 0.6rem;
   font-weight: 700;
   text-transform: uppercase;
 }
 
 .category > a {
   color: #fff;
   display: inline-block;
-  padding-top: .25rem;
+  padding-top: 0.25rem;
 }
 
 .details {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 .details .date {
   border-left: 2px solid #fff;
   display: inline-block;
-  margin-left: .4rem;
-  padding-left: .4rem;
+  margin-left: 0.4rem;
+  padding-left: 0.4rem;
 }
 
 .details .author a {

src/components/Icon/Clear.jsx

@@ -0,0 +1,6 @@
+const Clear = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" class="bi bi-x">
+    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
+  </svg>
+);
+export default Clear;

src/components/Icon/LeftArrow.jsx

@@ -0,0 +1,9 @@
+const LeftArrow = () => (
+  <svg width="10" height="10" viewBox="0 0 16 16">
+    <path
+      fill-rule="evenodd"
+      d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"
+    />
+  </svg>
+);
+export default LeftArrow;