Added Terminal Support

Sidhant-raj · Dec 25, 2022 · e146030 · e146030
1 parent a6c21ca
commit e146030
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 3 deletions.
diff --git a/components/UI/Hero.jsx b/components/UI/Hero.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import SectionSubtitle from "./SectionSubtitle";
 import { Container, Row, Col, Button } from "reactstrap";
 import Image from "next/image";

diff --git a/components/UI/Terminal.jsx b/components/UI/Terminal.jsx
@@ -0,0 +1,65 @@
+import { ReactTerminal, TerminalContextProvider } from "react-terminal";
+
+const commands = {
+  whoami: {
+    help: "Tells you who are you",
+    action: "piyushgarg",
+  },
+
+  "get-location": {
+    help: "Gets your current location",
+    action: async () =>
+      new Promise((resolve, reject) =>
+        navigator.geolocation.getCurrentPosition(
+          (pos) =>
+            resolve(
+              `Your current position is ${pos.coords.latitude}, ${pos.coords.longitude}`
+            ),
+          (error) => resolve(`Error: ${error.message}`)
+        )
+      ),
+  },
+};
+
+const Terminal = () => {
+  return (
+    <TerminalContextProvider>
+      <ReactTerminal
+        prompt="$ piyushgarg-dev >> "
+        welcomeMessage={
+          <p>
+            Welcome to my website! Get started by typing `help` command below
+          </p>
+        }
+        themes={{
+          darkDefault: {
+            themeBGColor: "",
+            themeToolbarColor: "",
+            themeColor: "#38CC77",
+            themePromptColor: "#fff",
+          },
+        }}
+        theme="darkDefault"
+        commands={{
+          ...Object.keys(commands).reduce(
+            (b, key) => ({ ...b, [key]: commands[key].action }),
+            {}
+          ),
+          help: (
+            <div>
+              <p>Available Commands:</p>
+              {Object.keys(commands).map((key) => (
+                <p key={key}>
+                  <span style={{ color: "#38CC77" }}>{key}:</span>{" "}
+                  {commands[key].help}
+                </p>
+              ))}
+            </div>
+          ),
+        }}
+      />
+    </TerminalContextProvider>
+  );
+};
+
+export default Terminal;
diff --git a/package.json b/package.json
@@ -10,15 +10,18 @@
   },
   "dependencies": {
     "@vercel/analytics": "^0.1.6",
+    "add": "^2.0.6",
     "axios": "^1.2.1",
     "bootstrap": "^5.1.3",
     "next": "12.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-slick": "^0.29.0",
+    "react-terminal": "^1.3.0",
     "reactstrap": "^9.1.1",
     "remixicon": "^2.5.0",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "eslint": "8.18.0",

diff --git a/pages/index.js b/pages/index.js
@@ -6,11 +6,14 @@ import Services from "../components/UI/Services";
 import Portfolio from "../components/UI/Portfolio";
 import Contact from "../components/UI/Contact";
 import Blog from "../components/UI/Blog";
+import Terminal from "../components/UI/Terminal";
 
 import {
   getYoutubeChannelDataDefaultResponse,
   getYoutubeVideosDefaultResponse,
 } from "../components/data/youtubeDefault";
+import { Container } from "reactstrap";
+import SectionSubtitle from "../components/UI/SectionSubtitle";
 
 export default function Home({ youtubeStats, youtubeVideos, blogData }) {
   return (
@@ -60,6 +63,13 @@ export default function Home({ youtubeStats, youtubeVideos, blogData }) {
         blogDomain={blogData?.user?.publicationDomain}
         blogs={blogData?.user?.publication?.posts}
       />
+
+      <Container className="my-5">
+        <SectionSubtitle subtitle="Terminal" />
+        <div style={{ border: "1px solid white", height: "400px" }}>
+          <Terminal />
+        </div>
+      </Container>
       <Contact />
     </Fragment>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -213,6 +213,11 @@ acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
   integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 ajv@^6.10.0, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -1430,7 +1435,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1454,6 +1459,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-device-detect@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.2.tgz#dbabbce798ec359c83f574c3edb24cf1cca641a5"
+  integrity sha512-zSN1gIAztUekp5qUT/ybHwQ9fmOqVT1psxpSlTn1pe0CO+fnJHKRLOWWac5nKxOxvOpD/w84hk1I+EydrJp7SA==
+  dependencies:
+    ua-parser-js "^1.0.2"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -1491,6 +1503,14 @@ react-slick@^0.29.0:
     lodash.debounce "^4.0.8"
     resize-observer-polyfill "^1.5.0"
 
+react-terminal@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-terminal/-/react-terminal-1.3.0.tgz#a03183eed5fb433e4ebc13c5ad00f186139cc65a"
+  integrity sha512-AZguyamdJLKdQNgisHezac5QFLt6Jh0zU+CfPBVoniOtT1Rnn5ACh5tPZ5H2i8VvLnn73Hh2GnR+gpr0jAidag==
+  dependencies:
+    prop-types "^15.7.2"
+    react-device-detect "^2.2.2"
+
 react-transition-group@^4.4.2:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -1772,6 +1792,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+ua-parser-js@^1.0.2:
+  version "1.0.32"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.32.tgz#786bf17df97de159d5b1c9d5e8e9e89806f8a030"
+  integrity sha512-dXVsz3M4j+5tTiovFVyVqssXBu5HM47//YSOeZ9fQkdDKkfzv2v3PP1jmH6FUyPW+yCSn7aBVK1fGGKNhowdDA==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -1833,3 +1858,8 @@ yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yarn@^1.22.19:
+  version "1.22.19"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==