Refactored terminal border to allow injecting arbitrary tailwind css

6 files changed, 23 insertions, 13 deletions

diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
index ae67d30..6cff714 100644
--- a/src/components/BlogItem.astro
+++ b/src/components/BlogItem.astro
@@ -19,7 +19,7 @@ interface Props {
 const { title, description, date, href, header } = Astro.props;
 ---
 
-<TerminalBorder header={header} footer={formatDate(date)} margin="0 0 2vw;">
+<TerminalBorder header={header} footer={formatDate(date)} extra="mb-[2vw]">
     <span class="cursor-pointer group block w-full">
         {
             href ? (
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index eae9cc0..42cf5af 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -2,13 +2,13 @@
 interface Props {
     header?: string;
     footer?: string;
-    margin?: string;
+    extra?: string;
 }
 
-const { header = "", footer = "", margin = "-0.1vw" } = Astro.props;
+const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
 ---
 
-<div class="section" style={`margin: ${margin};`}>
+<div class=`section ${extra}`>
     <span class="tag-top">{header}</span>
     <span class="tag-bottom">{footer}</span>
     <slot />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 2e24449..9d3910e 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,14 +1,17 @@
 ---
-import TerminalBorder from "@components/TerminalBorder.astro"
-import Terminal from "@layouts/Terminal.astro"
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Terminal from "@layouts/Terminal.astro";
 
 const url = new URL(Astro.request.url).pathname.substring(1);
 ---
+
 <Terminal path="404">
-    <TerminalBorder header="Shell" margin="0.5rem 0">
+    <TerminalBorder header="Shell" extra="my-[0.625vw]">
         <span>
             <p id="cd">$ cd ~/{url}</p>
-            <p id="err" class="pt-3">"{url}": No such file or directory (os error 2)</p>
+            <p id="err" class="pt-[1vw]">
+                "{url}": No such file or directory (os error 2)
+            </p>
         </span>
     </TerminalBorder>
 </Terminal>
@@ -16,6 +19,7 @@ const url = new URL(Astro.request.url).pathname.substring(1);
     document.addEventListener("DOMContentLoaded", () => {
         const url = window.location.pathname.substring(1);
         document.getElementById("cd")!.textContent = `$ cd ~/${url}`;
-        document.getElementById("err")!.textContent = `"${url}": No such file or directory (os error 2)`;
+        document.getElementById("err")!.textContent =
+            `"${url}": No such file or directory (os error 2)`;
     });
 </script>
diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
index 400dde0..ce10eae 100644
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@@ -15,7 +15,7 @@ const blogs = (await getCollection("blogs"))
 ---
 
 <Terminal path="blogs/">
-    <TerminalBorder header="Shell" margin="0.625vw 0 1.5625vw">
+    <TerminalBorder header="Shell" extra="mt-[0.625vw] mb-[1.5625vw]">
         <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
     <div class="max-h-[24vw] overflow-y-auto">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 816bd91..25b7b5e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -117,7 +117,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                     </Link> | Learning Golang & Backend | Available for hire
                 </p>
             </TerminalBorder>
-            <TerminalBorder header="About Me" margin="2.5vw 0">
+            <TerminalBorder header="About Me" extra="my-[2.5vw]">
                 <p>{aboutMe}</p>
             </TerminalBorder>
             <BlogItem
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
index 778b3f1..03f4df6 100644
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -13,7 +13,13 @@ const data = [
 ];
 
 const langs = ["Java", "C/C++", "Golang", "Kotlin", "Rust", "Lua"];
-const tools = ["Git & GitHub", "Sqlite3", "Neovim and IntelliJ", "Linux", "NixOS"];
+const tools = [
+    "Git & GitHub",
+    "Sqlite3",
+    "Neovim and IntelliJ",
+    "Linux",
+    "NixOS",
+];
 const frameworks = ["Spigot API", "Bubbletea", "Astro"];
 ---
 
@@ -25,7 +31,7 @@ const frameworks = ["Spigot API", "Bubbletea", "Astro"];
                     {langs.map((lang) => <p>{lang}</p>)}
                 </div>
             </TerminalBorder>
-            <TerminalBorder header="Frameworks" margin="2.25vw 0">
+            <TerminalBorder header="Frameworks" extra="my-[2.25vw]">
                 <div class="grid grid-cols-1 items-center gap-x-[0.625vw]">
                     {frameworks.map((framework) => <p>{framework}</p>)}
                 </div>