From 0fd243831941bf3de941804850eaa049d236bc2c Mon Sep 17 00:00:00 2001
From: leekalan <kalanjlee@gmail.com>
Date: Wed, 4 Jun 2025 23:14:30 +1000
Subject: [PATCH 1/2] Added interactable terminal and fixed "/" href on the
 logo

---
 frontend/package-lock.json           |  1 -
 frontend/src/components/Navbar.tsx   | 24 ++++---
 frontend/src/components/Terminal.tsx | 97 ++++++++++++++++++++++++++++
 package-lock.json                    |  2 +-
 4 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/Terminal.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 450f4f7..71f8ec3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -3383,7 +3383,6 @@
       "version": "0.511.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
       "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
-
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 8e3f161..e5eeff4 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -2,6 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import Hamburger from './Hamburger';
+import Terminal from './Terminal';
 
 const Navbar = () => {
   const [path, setPath] = useState<string[]>([]);
@@ -13,22 +14,25 @@ const Navbar = () => {
 
   return (
     <nav className="flex justify-between items-center relative z-10">
-      <Link href="/">
-        <Image
-          src="/assets/csesoc_logo.svg"
-          alt="CSESoc Logo"
-          width={200}
-          height={200}
-          draggable={false}
-        />
+      <div>
+        <Link href="/">
+          <Image
+            src="/assets/csesoc_logo.svg"
+            alt="CSESoc Logo"
+            width={200}
+            height={200}
+            draggable={false}
+          />
+        </Link>
         <p className="font-mono mt-3 font-bold">
           <span className="text-green-500">csesoc@unsw</span>
           <span>:</span>
           <span className="text-blue-500">~{path.map(segment => '/' + segment.toLowerCase())}</span>
           <span>$ </span>
-          <span id="cursor" className="text-gray-400 inline-block animate-blink">_</span>
+          {/* The interactive terminal that allows changing pages using 'cd' */}
+          <Terminal/>
         </p>
-      </Link>
+      </div>
       <div>
         <div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
           <Link href="/about">
diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx
new file mode 100644
index 0000000..6d8593f
--- /dev/null
+++ b/frontend/src/components/Terminal.tsx
@@ -0,0 +1,97 @@
+import { useRouter } from "next/router";
+import { useRef, useState } from "react";
+
+const Terminal = () => {
+  // Store the value of the input
+  const [value, setValue] = useState("");
+
+  // Automatically select the end of the input as the custom
+  // cursor only works at the end of the input.
+  const inputRef: any = useRef(null);
+  const setInputEnd = () => {
+    if (inputRef.current) {
+      const len = inputRef.current.value.length;
+      inputRef.current.setSelectionRange(len, len);
+    }
+  }
+
+  // Keep track of if the input is focused
+  const [inputFocused, setInputFocused] = useState(false);
+
+  // Using the router to change pages seamlessly
+  const router = useRouter();
+  const goToPage = (target: string) => {
+    router.push(target);
+  };
+  
+  // Checking for "Enter" and if so, changing to
+  // the inputted page
+  const handleKey = (key: string) => {
+    if (key !== "Enter") return;
+
+    if (value.toLowerCase() === "~"
+      || value.toLowerCase() === "cd"
+      || value.toLowerCase() === "cd ~"
+    ) {
+      goToPage("/");
+    } else if (value.toLowerCase() === "cd about"
+      || value.toLowerCase() === "cd about us"
+    ) {
+      goToPage("/about");
+    } else if (value.toLowerCase() === "cd events"
+      || value.toLowerCase() === "cd event"
+    ) {
+      goToPage("/events");
+    } else if (value.toLowerCase() === "cd resources"
+      || value.toLowerCase() === "cd resource"
+    ) {
+      goToPage("/resources");
+    } else if (value.toLowerCase() === "cd sponsors"
+      || value.toLowerCase() === "cd sponsor"
+    ) {
+      goToPage("/sponsors");
+    } else if (value.toLowerCase() === "cd contact"
+      || value.toLowerCase() === "cd contacts"
+      || value.toLowerCase() === "cd contact us"
+    ) {
+      goToPage("/contact-us");
+    }
+
+    clearInput()
+  };
+
+  const clearInput = () => {
+    setValue("");
+  };
+
+  return (
+    // Using relative + absolute to overlap the `input` and `span`
+    <span className="relative">
+      {/* The input */}
+      <input type="text" id="input" value={value} ref={inputRef} maxLength={40}
+        className="absolute text-blue-500 p-0 m-0 bg-transparent outline-none caret-transparent w-[50vw] z-10"
+        onKeyDown={(e) => {
+          handleKey(e.key)
+          setInputEnd()
+        }}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={() => setInputFocused(true)}
+        onBlur={() => {
+          clearInput()
+          setInputFocused(false)
+        }}
+      ></input>
+      {/* The custom cursor */}
+      <span className="absolute w-[60vw] p-0 m-0 z-0">
+        {/* The invisable span that is the same length as the input */}
+        <span
+          className="invisible whitespace-pre pointer-events-none text-base"
+        >{value}</span>
+        {/* The custom cursor */}
+        <span id="cursor" className={`text-${inputFocused ? "white" : "gray-500"} pointer-events-none inline-block animate-blink p-0 m-0`}>_</span>
+      </span>
+    </span>
+  )
+}
+
+export default Terminal
diff --git a/package-lock.json b/package-lock.json
index 14ab158..5c2f183 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "csesoc-website-2023",
+  "name": "csesoc-website",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {}

From 07c42b2507e2e7cd61abfa6ad38f09a5f0245daf Mon Sep 17 00:00:00 2001
From: Dylan Zhang <z5478419@ad.unsw.edu.au>
Date: Sun, 8 Jun 2025 18:25:27 +1000
Subject: [PATCH 2/2] add type for useRef

---
 frontend/src/components/Terminal.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx
index 6d8593f..3137fa5 100644
--- a/frontend/src/components/Terminal.tsx
+++ b/frontend/src/components/Terminal.tsx
@@ -7,7 +7,7 @@ const Terminal = () => {
 
   // Automatically select the end of the input as the custom
   // cursor only works at the end of the input.
-  const inputRef: any = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const setInputEnd = () => {
     if (inputRef.current) {
       const len = inputRef.current.value.length;
@@ -32,10 +32,12 @@ const Terminal = () => {
     if (value.toLowerCase() === "~"
       || value.toLowerCase() === "cd"
       || value.toLowerCase() === "cd ~"
+      || value.toLowerCase() === "cd .."
     ) {
       goToPage("/");
     } else if (value.toLowerCase() === "cd about"
       || value.toLowerCase() === "cd about us"
+      || value.toLowerCase() === "cd about_us"
     ) {
       goToPage("/about");
     } else if (value.toLowerCase() === "cd events"
@@ -53,6 +55,7 @@ const Terminal = () => {
     } else if (value.toLowerCase() === "cd contact"
       || value.toLowerCase() === "cd contacts"
       || value.toLowerCase() === "cd contact us"
+      || value.toLowerCase() === "cd contact_us"
     ) {
       goToPage("/contact-us");
     }