Backup

7 files changed, 178 insertions, 93 deletions

diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
new file mode 100644
index 0000000..5f6b0e5
--- /dev/null
+++ b/src/components/BlogItem.astro
@@ -0,0 +1,22 @@
+---
+import TerminalBorder from "../components/TerminalBorder.astro";
+
+interface Props {
+    title: string;
+    description: string;
+    date: string;
+}
+
+const { title, description, date } = Astro.props;
+---
+
+<TerminalBorder footer={date} margin="0 0 20px">
+    <span>
+        <h1 class="text-[130%] text-[var(--accent)]">
+            {title}
+        </h1>
+        <p class="text-[var(--secondary)]">
+            {description}
+        </p>
+    </span>
+</TerminalBorder>
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index bb6874c..0d9a75d 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -1,15 +1,22 @@
 ---
 interface Props {
-    header: string;
+    header?: string;
+    footer?: string;
     margin?: string;
     class?: string;
 }
 
-const { header, margin = "-1px", class: htmlClass } = Astro.props;
+const {
+    header = "",
+    footer = "",
+    margin = "-1px",
+    class: htmlClass,
+} = Astro.props;
 ---
 
 <div class="section" style={`margin: ${margin};`} class={htmlClass}>
-    <span class="tag">{header}</span>
+    <span class="tag-top">{header}</span>
+    <span class="tag-bottom">{footer}</span>
     <slot />
 </div>
 
@@ -24,7 +31,7 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
         border-color: var(--alt);
     }
 
-    .tag {
+    .tag-top {
         position: absolute;
         top: -0.6rem;
         left: 0.5rem;
@@ -34,4 +41,15 @@ const { header, margin = "-1px", class: htmlClass } = Astro.props;
         font-size: 0.8rem;
         color: var(--alt);
     }
+
+    .tag-bottom {
+        position: absolute;
+        bottom: -0.6rem;
+        left: 0.5rem;
+        background-color: var(--background);
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+        font-size: 0.8rem;
+        color: var(--alt);
+    }
 </style>
diff --git a/src/content/config.ts b/src/content/config.ts
index 33140f3..17aeedb 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -3,5 +3,10 @@ import { defineCollection, z } from "astro:content";
 export const collections = {
   blogs: defineCollection({
     type: "content",
+    schema: z.object({
+      title: z.string(),
+      description: z.string().optional(),
+      date: z.date(),
+    }),
   }),
 };
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d8e68d1..26a8e13 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,11 +1,12 @@
 ---
 import "../styles/terminal.css";
+import Nav from "../components/Nav.astro";
 
 interface Props {
-    title: string;
+    dir: string;
 }
 
-const { title } = Astro.props;
+const { dir: title } = Astro.props;
 ---
 
 <!doctype html>
@@ -16,9 +17,12 @@ const { title } = Astro.props;
         <meta name="viewport" content="width=device-width" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="generator" content={Astro.generator} />
-        <title>{title}</title>
+        <title>/home/kyren/{title}</title>
     </head>
     <body>
-        <slot />
+        <main>
+            <Nav path={title} />
+            <slot />
+        </main>
     </body>
 </html>
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>
diff --git a/src/styles/terminal.css b/src/styles/terminal.css
index 68d6c79..517eac7 100644
--- a/src/styles/terminal.css
+++ b/src/styles/terminal.css
@@ -60,7 +60,9 @@ main {
   padding: 1.75rem;
   width: 55rem;
   max-width: 75%;
+  max-height: 75%;
   padding-top: 1.25rem;
+  overflow: hidden;
 }
 
 h1,