Backup

5 files changed, 56 insertions, 36 deletions

diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..f5db977
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,15 @@
+---
+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">
+        <span>
+            <p>$ cd ~/{url}</p>
+            <p class="pt-3">"{url}": No such file or directory (os error 2)</p>
+        </span>
+    </TerminalBorder>
+</Terminal>
+
diff --git a/src/pages/blogs/index.astro b/src/pages/blogs.astro
index e91e580..c571090 100644
--- a/src/pages/blogs/index.astro
+++ b/src/pages/blogs.astro
@@ -1,12 +1,12 @@
 ---
-import Layout from "../../layouts/Layout.astro";
-import TerminalBorder from "../../components/TerminalBorder.astro";
-import BlogItem from "../../components/BlogItem.astro";
+import Terminal from "../layouts/Terminal.astro";
+import TerminalBorder from "../components/TerminalBorder.astro";
+import BlogItem from "../components/BlogItem.astro";
 import { getCollection } from "astro:content";
 
-function formatDate(date) {
+function formatDate(date: Date) {
     const day = date.getDate();
-    const month = date.toLocaleString("default", { month: "long" }); // Get full month name
+    const month = date.toLocaleString("default", { month: "long" });
     const year = date.getFullYear();
 
     let suffix = "th";
@@ -21,17 +21,19 @@ function formatDate(date) {
     return `${month} ${day}${suffix} ${year}`;
 }
 
-const blogs = (await getCollection("blogs")).map((blog) => ({
-    title: blog.data.title,
-    description: blog.data.description,
-    date: formatDate(blog.data.date),
-    href: "/blogs/" + blog.slug,
-}));
+const blogs = (await getCollection("blogs"))
+    .sort((a, b) => +new Date(b.data.date) - +new Date(a.data.date))
+    .map((blog) => ({
+        title: blog.data.title,
+        description: blog.data.description,
+        date: formatDate(blog.data.date),
+        href: "/blogs/" + blog.slug,
+    }));
 ---
 
-<Layout dir="blogs/">
+<Terminal path="blogs/">
     <TerminalBorder header="Shell" margin="0.5rem 0 20px">
-        <p>ls ~/blogs {blogs.length}</p>
+        <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
     <div class="max-h-[18.5rem] overflow-y-auto">
         {
@@ -39,7 +41,7 @@ const blogs = (await getCollection("blogs")).map((blog) => ({
                 <>
                     <BlogItem
                         title={blog.title}
-                        description={blog.description}
+                        description={blog.description ? blog.description : ""}
                         date={blog.date}
                         href={blog.href}
                     />
@@ -47,4 +49,4 @@ const blogs = (await getCollection("blogs")).map((blog) => ({
             ))
         }
     </div>
-</Layout>
+</Terminal>
diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro
index 37e6f53..3e42575 100644
--- a/src/pages/blogs/[...slug].astro
+++ b/src/pages/blogs/[...slug].astro
@@ -1,5 +1,6 @@
 ---
 import Blog from "../../layouts/Blog.astro";
+import RadarChart from "../../components/RadarChart.astro"
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {
@@ -15,5 +16,7 @@ const { Content } = await entry.render();
 ---
 
 <Blog title=`/home/kyren/blogs/${entry.slug}`>
+    <h1>Test</h1>
+    <RadarChart></RadarChart>
     <Content />
 </Blog>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d6cff92..243838f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,9 +1,9 @@
 ---
-import Terminal from "../layouts/Layout.astro";
+import Terminal from "../layouts/Terminal.astro";
 import TerminalBorder from "../components/TerminalBorder.astro";
 import Link from "../components/Link.astro";
 
-const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIAsrdN6e4XbkJfV/FbH3GY8ujWgxSCSbYiwzQ4rKyren`;
+const sshKey = `ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren`;
 const fingerprint = `
 +--[ED25519 256]--+
 |+o.+oE*B%* o     |
@@ -25,7 +25,7 @@ And when I am not coding I am most likely playing video games,
 watching Anime or solving Rubik's cubes fast.`.trimStart();
 ---
 
-<Terminal dir="">
+<Terminal path="">
     <div id="content">
         <div id="left" class="column">
             <TerminalBorder header="Profile">
@@ -36,8 +36,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                         class="h-[100%] object-cover"
                     />
                     <pre
-                        id="sshKeyCopy"
-                        class="text-[75%] flex-1">{fingerprint}</pre>
+                        class="copySshKey text-[75%] flex-1 hover:text-[var(--secondary)]">{fingerprint}</pre>
                 </div>
             </TerminalBorder>
             <TerminalBorder header="Name">
@@ -47,26 +46,22 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                 <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>UTC+2</span> </TerminalBorder> <div class="w-[334%]"> <TerminalBorder header="SSH Key">
+                    <div class="w-[100%] flex items-center space-x-2 group">
                         <span
                             id="sshKey"
-                            class="hover:text-[var(--alt)] cursor-pointer truncate flex-1"
+                            class="hover:text-[var(--alt)] cursor-pointer truncate flex-1 group-hover:text-[var(--alt)]"
                             >{sshKey}</span
                         >
                         <button
                             id="sshKeyCopy"
-                            class="flex items-center justify-center ml-auto hover:text-[var(--alt)]"
+                            type="button"
+                            class="group-hover:text-[var(--alt)]"
                         >
                             <svg
                                 width="100%"
                                 height="100%"
-                                viewBox="0 -3 24 24"
+                                viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
                             >
@@ -113,19 +108,18 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
         navigator.clipboard
             .writeText(sshKey ? sshKey : "")
             .then(() => {
+                console.log("Clicked");
                 // TODO: show some feedback for copying
             })
             .catch((_err) => {
+                console.log("Error copying!");
                 // TODO: show same feedback but with err
             });
     }
 
-    document
-        .getElementById("sshKey")
-        ?.addEventListener("click", copySshKeyToClipboard);
-    document
-        .getElementById("sshKeyCopy")
-        ?.addEventListener("click", copySshKeyToClipboard);
+    document.querySelectorAll("copySshKey").forEach((elem) => {
+        elem.addEventListener("click", copySshKeyToClipboard);
+    });
 </script>
 
 <style>
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
new file mode 100644
index 0000000..550ac1d
--- /dev/null
+++ b/src/pages/skills.astro
@@ -0,0 +1,6 @@
+---
+import Terminal from "../layouts/Terminal.astro";
+---
+
+<Terminal path="skills">
+</Terminal>