Backup

2 files changed, 119 insertions, 85 deletions

diff --git a/src/pages/blogs/index.astro b/src/pages/blogs/index.astro
new file mode 100644
index 0000000..de5252a
--- /dev/null
+++ b/src/pages/blogs/index.astro
@@ -0,0 +1,39 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import TerminalBorder from "../../components/TerminalBorder.astro";
+import BlogItem from "../../components/BlogItem.astro";
+import { getCollection } from "astro:content";
+
+const blogEntries = await getCollection("blogs");
+
+const blogs = [
+    {
+        title: "The search for the perfect ed25519 key pair",
+        description: `
+This is the description about this thing which shoud be very
+long and cause this to wrap so that I can see how about 3 lines
+of paragraph will look int this so now I am gonna continue
+yapping to make it even longer`.trimStart(),
+        date: "November 12th 2024",
+    },
+];
+---
+
+<Layout dir="blogs/">
+    <TerminalBorder header="Shell" margin="0.5rem 0 20px">
+        <p>ls ~/blogs {blogs.length}</p>
+    </TerminalBorder>
+    <div class="max-h-[18.5rem] overflow-y-auto">
+        {
+            blogs.map((blog) => (
+                <>
+                    <BlogItem
+                        title={blog.title}
+                        description={blog.description}
+                        date={blog.date}
+                    />
+                </>
+            ))
+        }
+    </div>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2a47693..d6cff92 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,7 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Terminal from "../layouts/Layout.astro";
 import TerminalBorder from "../components/TerminalBorder.astro";
 import Link from "../components/Link.astro";
-import Nav from "../components/Nav.astro";
 
 const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
 const fingerprint = `
@@ -26,97 +25,93 @@ And when I am not coding I am most likely playing video games,
 watching Anime or solving Rubik's cubes fast.`.trimStart();
 ---
 
-<Layout title="/home/kyren/">
-    <main>
-        <Nav path="" />
-        <div id="content">
-            <div id="left" class="column">
-                <TerminalBorder header="Profile">
-                    <div class="flex items-center space-x-3">
-                        <img
-                            src="logo.svg"
-                            alt="picture"
-                            class="h-[100%] object-cover"
-                        />
-                        <pre
-                            id="sshKeyCopy"
-                            class="text-[75%] flex-1">{fingerprint}</pre>
-                    </div>
-                </TerminalBorder>
-                <TerminalBorder header="Name">
-                    <span>Kyren</span>
-                </TerminalBorder>
-                <TerminalBorder header="Email">
-                    <span>Kyren223@proton.me</span>
-                </TerminalBorder>
-                <TerminalBorder header="Timezone">
-                    <span>UTC+2</span>
-                </TerminalBorder>
-                <div class="w-[334%]">
-                    <TerminalBorder header="SSH Key">
-                        <div
-                            class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
-                        >
-                            <span
-                                id="sshKey"
-                                class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
-                                >{sshKey}</span
-                            >
-                            <button
-                                id="sshKeyCopy"
-                                class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
-                            >
-                                <svg
-                                    width="100%"
-                                    height="100%"
-                                    viewBox="0 -3 24 24"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                >
-                                    <path
-                                        fill="currentColor"
-                                        fill-rule="evenodd"
-                                        d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
-                                    ></path>
-                                </svg>
-                            </button>
-                        </div>
-                    </TerminalBorder>
+<Terminal dir="">
+    <div id="content">
+        <div id="left" class="column">
+            <TerminalBorder header="Profile">
+                <div class="flex items-center space-x-3">
+                    <img
+                        src="logo.svg"
+                        alt="picture"
+                        class="h-[100%] object-cover"
+                    />
+                    <pre
+                        id="sshKeyCopy"
+                        class="text-[75%] flex-1">{fingerprint}</pre>
                 </div>
-            </div>
-            <div id="right" class="column">
-                <TerminalBorder header="Status">
-                    <p>
-                        Working on
-                        <Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
-                        | Learning Web Development | Available for hire
-                    </p>
-                </TerminalBorder>
-                <TerminalBorder header="About Me" margin="20px 0">
-                    <p>{aboutMe}</p>
-                </TerminalBorder>
-                <TerminalBorder header="Links">
-                    <p>
-                        <Link href="https://github.com/Kyren223"
-                            >github.com/Kyren223</Link
+            </TerminalBorder>
+            <TerminalBorder header="Name">
+                <span>Kyren</span>
+            </TerminalBorder>
+            <TerminalBorder header="Email">
+                <span>Kyren223@proton.me</span>
+            </TerminalBorder>
+            <TerminalBorder header="Timezone">
+                <span>UTC+2</span>
+            </TerminalBorder>
+            <div class="w-[334%]">
+                <TerminalBorder header="SSH Key">
+                    <div
+                        class="w-[100%] flex items-center space-x-2 hover:text-[var(--alt)]"
+                    >
+                        <span
+                            id="sshKey"
+                            class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
+                            >{sshKey}</span
                         >
-                        <br />
-                        <Link
-                            href="https://discord.com/users/481884415090229258"
-                            >discord.com/Kyren223</Link
+                        <button
+                            id="sshKeyCopy"
+                            class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
                         >
-                    </p>
+                            <svg
+                                width="100%"
+                                height="100%"
+                                viewBox="0 -3 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                            >
+                                <path
+                                    fill="currentColor"
+                                    fill-rule="evenodd"
+                                    d="M4 2a2 2 0 00-2 2v9a2 2 0 002 2h2v2a2 2 0 002 2h9a2 2 0 002-2V8a2 2 0 00-2-2h-2V4a2 2 0 00-2-2H4zm9 4V4H4v9h2V8a2 2 0 012-2h5zM8 8h9v9H8V8z"
+                                ></path>
+                            </svg>
+                        </button>
+                    </div>
                 </TerminalBorder>
             </div>
         </div>
-    </main>
-</Layout>
+        <div id="right" class="column">
+            <TerminalBorder header="Status">
+                <p>
+                    Working on
+                    <Link href="https://github.com/KapiMC/Kapi">Kapi </Link>
+                    | Learning Web Development | Available for hire
+                </p>
+            </TerminalBorder>
+            <TerminalBorder header="About Me" margin="20px 0">
+                <p>{aboutMe}</p>
+            </TerminalBorder>
+            <TerminalBorder header="Links">
+                <p>
+                    <Link href="https://github.com/Kyren223"
+                        >github.com/Kyren223</Link
+                    >
+                    <br />
+                    <Link href="https://discord.com/users/481884415090229258"
+                        >discord.com/Kyren223</Link
+                    >
+                </p>
+            </TerminalBorder>
+        </div>
+    </div>
+</Terminal>
 
 <script>
-    const sshKey = document.getElementById("sshKey").innerHTML;
+    const sshKey = document.getElementById("sshKey")?.innerHTML;
     function copySshKeyToClipboard() {
         navigator.clipboard
-            .writeText(sshKey)
+            .writeText(sshKey ? sshKey : "")
             .then(() => {
                 // TODO: show some feedback for copying
             })
@@ -127,10 +122,10 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
 
     document
         .getElementById("sshKey")
-        .addEventListener("click", copySshKeyToClipboard);
+        ?.addEventListener("click", copySshKeyToClipboard);
     document
         .getElementById("sshKeyCopy")
-        .addEventListener("click", copySshKeyToClipboard);
+        ?.addEventListener("click", copySshKeyToClipboard);
 </script>
 
 <style>