Merge pull request #11 from itskdhere/cli

Implement CLI

src/App.css

@@ -0,0 +1,16 @@
+:root {
+  --side-gap: 0.5rem;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

src/App.jsx

@@ -2,12 +2,13 @@ import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
 import Home from "./pages/Home";
+import Cli from "./pages/Cli";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />}></Route>
-      {/* <Route path="/cli" element={<Cli />}></Route> */}
+      <Route path="/cli" element={<Cli />}></Route>
     </Routes>
   );
 }

src/components/Commands/Cat.jsx

@@ -0,0 +1,119 @@
+import classes from "./Commands.module.css";
+
+const Cat = (props) => {
+  let { fileName } = props;
+  fileName = fileName.trim();
+  fileName.toLowerCase();
+
+  switch (fileName) {
+    case "about":
+      return (
+        <div>
+          <h4 className={classes.description}>
+            Welcome to ZeroDay Alliance, SNU students passionate about
+            cybersecurity and ethical hacking. Here’s what you can expect:
+          </h4>
+          <ul className={classes.catList}>
+            <li>
+              <b>Learn:</b> Stay updated on zero-day vulnerabilities and the
+              latest security trends.
+            </li>
+            <li>
+              <b>Collaborate:</b> Work with peers on projects and challenges.
+            </li>
+            <li>
+              <b>Share:</b> Exchange resources, tips, and tools for ethical
+              hacking.
+            </li>
+            <li>
+              <b>Discuss:</b> Engage in conversations about cybersecurity news,
+              strategies, and innovations.
+            </li>
+            <li>
+              <b>Network:</b> Connect with future professionals in the field.
+            </li>
+          </ul>
+        </div>
+      );
+    case "events":
+      return (
+        <ul className={classes.catList}>
+          <li>Event 1</li>
+          <li>Event 2</li>
+        </ul>
+      );
+    case "teams":
+      return (
+        <ul className={classes.catList}>
+          <li>Team 1</li>
+          <li>Team 2</li>
+          <li>Team 3</li>
+          <li>Team 4</li>
+        </ul>
+      );
+    case "faq":
+      return <div>FAQ</div>;
+    case "contact":
+      return (
+        <ul className={classes.catList}>
+          <li>
+            <span>Website: </span>
+            <span>
+              <a
+                href="https://zeroday-alliance.pages.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                zeroday-alliance.pages.dev
+              </a>
+            </span>
+          </li>
+          <li>
+            <span>GitHub: </span>
+            <span>
+              <a
+                href="https://github.com/ZeroDay-Alliance-SNU"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @ZeroDay-Alliance-SNU
+              </a>
+            </span>
+          </li>
+          <li>
+            <span>LinkedIn: </span>
+            <span>
+              <a
+                href="https://www.linkedin.com/company/zeroday-alliance-snu"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @zeroday-alliance-snu
+              </a>
+            </span>
+          </li>
+          <li>
+            <span>Instagram: </span>
+            <span>
+              <a
+                href="https://www.instagram.com/zerodayalliance/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @zerodayalliance
+              </a>
+            </span>
+          </li>
+        </ul>
+      );
+    case "":
+      setTimeout(() => {
+        window.open("https://takeb1nzyto.space", "_blank");
+      }, 420);
+      return <div>🐈</div>;
+    default:
+      return <div>{fileName}: No such file or directory</div>;
+  }
+};
+
+export default Cat;

src/components/Commands/Commands.module.css

@@ -0,0 +1,7 @@
+.description {
+  padding-bottom: 5px;
+}
+
+.catList li {
+  list-style-position: inside;
+}

src/components/Commands/Echo.jsx

@@ -0,0 +1,7 @@
+const Echo = (props) => {
+  const { message } = props;
+
+  return <div>{message}</div>;
+};
+
+export default Echo;

src/components/Commands/Help.jsx

@@ -0,0 +1,22 @@
+const Help = () => {
+  return (
+    <>
+      <span className="command">cat &lt;section&gt;</span> -{" "}
+      <span>print a section</span>
+      <br />
+      <span className="command">clear</span> - <span>clear the screen</span>
+      <br />
+      <span className="command">echo &lt;arg&gt;</span> -{" "}
+      <span>print arguments</span>
+      <br />
+      <span className="command">help</span> - <span>print this help</span>
+      <br />
+      <span className="command">ls</span> - <span>list all sections</span>
+      <br />
+      <span className="command">whoami</span> - <span>about us</span>
+      <br />
+    </>
+  );
+};
+
+export default Help;

src/components/Commands/Ls.jsx

@@ -0,0 +1,13 @@
+import { files } from "../../config/fs";
+
+const Ls = () => {
+  return (
+    <>
+      {files.map((file, index) => (
+        <div key={index}>{file}</div>
+      ))}
+    </>
+  );
+};
+
+export default Ls;

src/components/Commands/Sudo.jsx

@@ -0,0 +1,9 @@
+const Sudo = () => {
+  setTimeout(() => {
+    window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
+  }, 420);
+
+  return <div>sudo: unable to change to root: Operation not permitted</div>;
+};
+
+export default Sudo;

src/components/Commands/Whoami.jsx

@@ -0,0 +1,12 @@
+const Whoami = () => {
+  return (
+    <div>
+      <p>ZeroDay Alliance SNU</p>
+      <p>
+        Use <span className="command">cat about</span> for more info.
+      </p>
+    </div>
+  );
+};
+
+export default Whoami;

src/components/Commands/index.jsx

@@ -0,0 +1,8 @@
+import Cat from "./Cat";
+import Echo from "./Echo";
+import Help from "./Help";
+import Ls from "./Ls";
+import Sudo from "./Sudo";
+import Whoami from "./Whoami";
+
+export { Cat, Echo, Help, Ls, Sudo, Whoami };

src/components/Prompt/Prompt.jsx

@@ -0,0 +1,16 @@
+import { userName, hostName, defaultDir } from "../../config/PS1";
+import "./Prompt.modules.css";
+
+const Prompt = () => {
+  return (
+    <>
+      <span className="userName">{userName}</span>
+      <span className="at">@</span>
+      <span className="hostName">{hostName}</span>
+      <span className="colon"> : </span>
+      <span className="dirName">{defaultDir}</span>
+    </>
+  );
+};
+
+export default Prompt;

src/components/Prompt/Prompt.modules.css

@@ -0,0 +1,26 @@
+.userName {
+  color: rgb(6, 197, 6);
+  /* text-shadow: 0px 0px 5px; */
+}
+
+.at {
+  color: rgb(4, 160, 207);
+  /* text-shadow: 0px 0px 5px; */
+}
+
+.hostName {
+  color: rgb(140, 197, 6);
+  /* text-shadow: 0px 0px 5px; */
+}
+
+.colon {
+  color: rgb(215, 215, 215);
+  /* text-shadow: 0px 0px 5px; */
+}
+
+.dirName {
+  font-size: larger;
+  font-weight: 900;
+  color: rgb(197, 6, 117);
+  /* text-shadow: 0px 0px 5px; */
+}

src/components/Prompt/index.jsx

@@ -0,0 +1,3 @@
+import Prompt from "./Prompt";
+
+export default Prompt;

src/components/StdErr/StdErr.jsx

@@ -0,0 +1,9 @@
+import "./StdErr.modules.css";
+
+const StdErr = (props) => {
+  const { stdErr } = props;
+
+  return <div className="stdErr">{stdErr}</div>;
+};
+
+export default StdErr;

src/components/StdErr/StdErr.modules.css

@@ -0,0 +1,7 @@
+.stdErr {
+  color: rgb(230, 40, 10);
+  /* text-shadow: 0px 0px 5px; */
+  margin-top: 5px;
+  margin-bottom: 15px;
+  margin-left: 15px;
+}

src/components/StdErr/index.jsx

@@ -0,0 +1,3 @@
+import StdErr from "./StdErr";
+
+export default StdErr;

src/components/StdIn/StdIn.jsx

@@ -0,0 +1,15 @@
+import { inCharacter } from "../../config/PS1";
+import "./StdIn.modules.css";
+
+const StdIn = (props) => {
+  const { cmd } = props;
+
+  return (
+    <>
+      <span className="inCharacter">{inCharacter} </span>
+      <span>{cmd}</span>
+    </>
+  );
+};
+
+export default StdIn;

src/components/StdIn/StdIn.modules.css

@@ -0,0 +1,4 @@
+.inCharacter {
+  color: rgb(6, 197, 6);
+  /* text-shadow: 0px 0px 5px; */
+}

src/components/StdIn/index.jsx

@@ -0,0 +1,3 @@
+import StdIn from "./StdIn";
+
+export default StdIn;

src/components/StdOut/StdOut.jsx

@@ -0,0 +1,9 @@
+import "./StdOut.modules.css";
+
+const StdOut = (props) => {
+  const { children } = props;
+
+  return <div className="stdOut">{children}</div>;
+};
+
+export default StdOut;

src/components/StdOut/StdOut.modules.css

@@ -0,0 +1,6 @@
+.stdOut {
+  /* text-shadow: 0px 0px 5px; */
+  margin-top: 5px;
+  margin-bottom: 15px;
+  margin-left: 15px;
+}

src/components/StdOut/index.jsx

@@ -0,0 +1,3 @@
+import StdOut from "./StdOut";
+
+export default StdOut;