Added new shell visuals (does nothing atm)

src/components/Nav.astro

@@ -18,7 +18,7 @@ const directories = ["skills", "projects", "blogs"];
     p-[3vw] sm:p-[1vw]"
 >
     <span class="mr-[2.5vh] text-[5vw] sm:mr-[2.5vw] sm:text-[1.375vw]"
-        >/home/kyren/{path}</span
+        >{path}</span
     >
     <span
         id="nav-links"
@@ -33,6 +33,7 @@ const directories = ["skills", "projects", "blogs"];
                 </>
             ))
         }
+        <a class="hidden sm:contents" href="/shell">shell</a>
     </span>
 </nav>
 

src/pages/blogs.astro

@@ -14,7 +14,7 @@ const blogs = (await getCollection("blogs"))
     }));
 ---
 
-<Terminal path="blogs/">
+<Terminal path="/home/kyren/blogs/">
     <TerminalBorder
         header="Shell"
         extra="mb-[5vw] sm:mt-[0.625vw] sm:mb-[1.5625vw]"

src/pages/blogs/[...slug].astro

@@ -23,7 +23,7 @@ const previousBlog = sortedBlogs[currentIndex + 1] || undefined;
 const nextBlog = sortedBlogs[currentIndex - 1] || undefined;
 ---
 
-<Terminal path="blogs/">
+<Terminal path="/home/kyren/blogs/">
     <div class="w-full h-[85svh] sm:h-[30vw] overflow-y-auto pr-[1.25vw] border-box">
         <div class="text-[130%] h-full">
             <div class="text-[110%]">

src/pages/index.astro

@@ -32,7 +32,7 @@ And when I am not coding I am most likely playing video games,
 watching Anime or solving Rubik's cubes fast.`.trimStart();
 ---
 
-<Terminal path="">
+<Terminal path="/home/kyren/">
     <!-- ================= -->
     <!-- ==== Desktop ==== -->
     <!-- ================= -->

src/pages/projects.astro

@@ -3,7 +3,7 @@ import Terminal from "@layouts/Terminal.astro";
 import Project from "@components/Project.astro";
 ---
 
-<Terminal path="projects/">
+<Terminal path="/home/kyren/projects/">
     <div
         class="w-full max-h-[80svh] overflow-auto sm:overflow-visible"
     >

src/pages/shell.astro

@@ -0,0 +1,112 @@
+---
+import Terminal from "@layouts/Terminal.astro";
+import TerminalBorder from "@components/TerminalBorder.astro";
+---
+
+<Terminal path="/bin/bash">
+    <TerminalBorder header="Bash" extra="h-[62%] mt-[0.625vw] mb-[1.5625vw]">
+        <div class="flex flex-col">
+            <p>$ ls -lah -t --color=auto ~/blogs</p>
+            <p>"/home/kyren/blogs": No such file or directory (os error 2)</p>
+            <p>&nbsp;</p>
+            <p>ls -lah -t --color=auto ~/blogs</p>
+            <p>ls -lah -t --color=auto ~/blogs</p>
+        </div>
+    </TerminalBorder>
+    <TerminalBorder header="Shell" extra="font-['JetBrains_Mono'] w-full">
+        <span class="pr-2">$</span>
+        <p id="terminal" contenteditable="true" spellcheck="false">
+            npm run buil<span>d</span>after
+        </p>
+        <input class="absolute opacity-0 w-0 h-0 p-0 m-0" autofocus />
+    </TerminalBorder>
+</Terminal>
+<script>
+    var prevCursor = -1;
+    var prevSelectionEnd = -1;
+    var swapped = false;
+    function getCursorText(inputElement) {
+        const text = inputElement.value;
+
+        const oCursorPos = inputElement.selectionStart;
+        const oSelectionEnd = inputElement.selectionEnd;
+
+        var cursorPos = oCursorPos;
+        var selectionEnd = oSelectionEnd;
+
+        if (
+            prevCursor != -1 &&
+            oCursorPos != oSelectionEnd &&
+            (prevSelectionEnd != oSelectionEnd ||
+                (prevSelectionEnd == oSelectionEnd &&
+                    prevCursor == oCursorPos &&
+                    swapped))
+        ) {
+            cursorPos = oSelectionEnd;
+            selectionEnd = oCursorPos;
+            prevSelectionEnd = oSelectionEnd;
+            swapped = true;
+        } else {
+            swapped = false;
+        }
+
+        prevCursor = oCursorPos;
+
+        var beforeCursor = text.substring(0, cursorPos);
+        var afterCursor = text.substring(cursorPos + 1);
+        var cursorChar = text[cursorPos] || "&nbsp;";
+        var selectedText = "";
+
+        if (selectionEnd > cursorPos) {
+            selectedText = text.substring(cursorPos + 1, selectionEnd);
+            afterCursor = text.substring(oSelectionEnd);
+            beforeCursor = text.substring(0, cursorPos);
+        } else if (selectionEnd < cursorPos) {
+            cursorChar = text[cursorPos - 1] || "&nbsp;";
+            selectedText = text.substring(selectionEnd, cursorPos - 1);
+            afterCursor = text.substring(cursorPos);
+            beforeCursor = text.substring(0, oCursorPos);
+        }
+
+        return {
+            beforeCursor,
+            afterCursor,
+            cursorChar,
+            selectedText,
+            swapped,
+        };
+    }
+
+    const terminal = document.getElementById("terminal")!!;
+    const input = document.querySelector("input")!!;
+    const cursorStyle =
+        "background-color: var(--text); color: var(--background);";
+    const visualStyle = "background-color: var(--primary); color: var(--background);";
+
+    function updateShell() {
+        var { beforeCursor, afterCursor, cursorChar, selectedText, swapped } =
+            getCursorText(input);
+
+        input.focus();
+
+        const cursor = `<span style="${cursorStyle}">${cursorChar}</span>`;
+        const visual = `<span style="${visualStyle}">${selectedText}</span>`;
+
+        if (swapped) {
+            terminal.innerHTML = `${beforeCursor}${visual}${cursor}${afterCursor}`;
+        } else {
+            terminal.innerHTML = `${beforeCursor}${cursor}${visual}${afterCursor}`;
+        }
+    }
+
+    input.addEventListener("keydown", function (event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            // const inputText = input.value;
+            input.value = "";
+            updateShell();
+        }
+    });
+
+    setInterval(updateShell, 50);
+</script>

src/pages/skills.astro

@@ -23,7 +23,7 @@ const tools = [
 const frameworks = ["Spigot API", "Bubbletea", "Astro"];
 ---
 
-<Terminal path="skills.md">
+<Terminal path="/home/kyren/skills.md">
     <div class="sm:flex overflow-y-auto h-[80svh]">
         <div class="sm:w-[60%] mt-[1vw] mx-[1vw] flex-column items-center">
             <TerminalBorder header="Languages">