diff options
| -rw-r--r-- | src/components/Nav.astro | 3 | ||||
| -rw-r--r-- | src/pages/blogs.astro | 2 | ||||
| -rw-r--r-- | src/pages/blogs/[...slug].astro | 2 | ||||
| -rw-r--r-- | src/pages/index.astro | 2 | ||||
| -rw-r--r-- | src/pages/projects.astro | 2 | ||||
| -rw-r--r-- | src/pages/shell.astro | 112 | ||||
| -rw-r--r-- | src/pages/skills.astro | 2 |
7 files changed, 119 insertions, 6 deletions
diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 5b9a73d..da08b32 100644 --- a/src/components/Nav.astro +++ b/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> diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro index e0da2f9..7e1b576 100644 --- a/src/pages/blogs.astro +++ b/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]" diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro index 2f88fcf..8279d07 100644 --- a/src/pages/blogs/[...slug].astro +++ b/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%]"> diff --git a/src/pages/index.astro b/src/pages/index.astro index 166ed94..b1bfb20 100644 --- a/src/pages/index.astro +++ b/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 ==== --> <!-- ================= --> diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 23cbeaa..f4b70f5 100644 --- a/src/pages/projects.astro +++ b/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" > diff --git a/src/pages/shell.astro b/src/pages/shell.astro new file mode 100644 index 0000000..1a207c0 --- /dev/null +++ b/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> </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] || " "; + 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] || " "; + 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> diff --git a/src/pages/skills.astro b/src/pages/skills.astro index 06e4b9b..e29b139 100644 --- a/src/pages/skills.astro +++ b/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"> |