Backup

10 files changed, 222 insertions, 39 deletions

diff --git a/package.json b/package.json
index 8f3586d..b9b56bf 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@expressive-code/plugin-line-numbers": "^0.38.3",
     "astro": "^4.16.10",
     "astro-expressive-code": "^0.38.3",
+    "chart.js": "^4.4.6",
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9923043..b12ccfd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       astro-expressive-code:
         specifier: ^0.38.3
         version: 0.38.3(astro@4.16.10(rollup@4.24.4)(typescript@5.6.3))
+      chart.js:
+        specifier: ^4.4.6
+        version: 4.4.6
       tailwindcss:
         specifier: ^3.4.14
         version: 3.4.14
@@ -464,6 +467,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@kurkle/color@0.3.2':
+    resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
+
   '@mdx-js/mdx@3.1.0':
     resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
@@ -835,6 +841,10 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  chart.js@4.4.6:
+    resolution: {integrity: sha512-8Y406zevUPbbIBA/HRk33khEmQPk5+cxeflWE/2rx1NJsjVWMPw/9mSP9rxHP5eqi6LNoPBVMfZHxbwLSgldYA==}
+    engines: {pnpm: '>=8'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2640,6 +2650,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@kurkle/color@0.3.2': {}
+
   '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
     dependencies:
       '@types/estree': 1.0.6
@@ -3065,6 +3077,10 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  chart.js@4.4.6:
+    dependencies:
+      '@kurkle/color': 0.3.2
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
diff --git a/src/components/RadarChart.astro b/src/components/RadarChart.astro
new file mode 100644
index 0000000..60f2cf7
--- /dev/null
+++ b/src/components/RadarChart.astro
@@ -0,0 +1,147 @@
+---
+
+// const { data } = Astro.props;
+
+const data = [
+ { name: 'React', total: 9 },
+ { name: 'GraphQL', total: 2 },
+ { name: 'JavaScript', total: 5 },
+ { name: 'SVG', total: 5 },
+ { name: 'TypeScript', total: 7 },
+ { name: 'Tailwind', total: 7 },
+ { name: 'React Query', total: 2 },
+ { name: 'Next.js', total: 3 },
+ { name: 'Hmm', total: 5 },
+]
+
+const chartSize = 400;
+const chartCenter = chartSize / 2;
+
+const colors = ['#58e6d9', '#ff6090', '#4871e3', '#ffc107', '#8bc34a', '#00FF00'];
+const chartData = data.sort((a, b) => b.total - a.total).slice(0, colors.length);
+const pointPadding = 10;
+const max = chartData.reduce((max, current) => (current.total > max ? current.total : max), 0);
+const rings = [...Array(6).keys()];
+
+const getX = (angle, value) => Math.cos(angle - Math.PI / 2) * value;
+const getY = (angle, value) => Math.sin(angle - Math.PI / 2) * value;
+
+const axes = chartData.map((_, index) => {
+  const angle = (Math.PI * 2 * index) / chartData.length;
+  const x = getX(angle, chartSize / 2);
+  const y = getY(angle, chartSize / 2);
+  const points = [
+    [0, 0],
+    [x, y],
+  ]
+    .map((point) => point[0] + ',' + point[1])
+    .join(' ');
+  return {
+    points: points,
+  };
+});
+
+const properties = chartData.map((item, index) => {
+  const { name, total } = item;
+  const clamp = Number(total / (max + pointPadding));
+  const angle = (Math.PI * 2 * index) / chartData.length;
+  const x = getX(angle, (clamp * chartSize) / 2);
+  const y = getY(angle, (clamp * chartSize) / 2);
+  return { name: name, total: total, x: x, y: y };
+});
+
+const shape =
+  properties.reduce((items, item, index) => {
+    const { x, y } = item;
+    const string = `${index === 0 ? 'M' : 'L'}${x},${y}`;
+    return items + string;
+  }, '') + 'z';
+
+const bgColor = "bg-blue-500"
+const borderColor = "border-gray-100"
+const strokeColor = 'stroke-gray-200'
+const shapeClass = 'stroke-gray-900 fill-gray-900/[0.5]'
+---
+
+<div class=`m-0 p-0 ${bgColor} border rounded ${borderColor} shadow-lg`>
+  <div class='grid md:grid-cols-2 items-center gap-16 p-16'>
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox={`0 0 ${chartSize} ${chartSize}`} role='presentation'>
+      <g transform={`translate(${chartCenter},${chartCenter})`}>
+        {
+          rings.map((_, index) => {
+            return (
+              <circle
+                cx={0}
+                cy={0}
+                r={((index / rings.length) * chartSize) / Number((Math.PI / 2 + 0.1).toFixed(2))}
+                    class={strokeColor}
+                fill='none'
+                stroke-width={1}
+              />
+            );
+          })
+        }
+        {
+          axes.map((axis) => {
+            const { points } = axis;
+            return <polyline points={points} class={strokeColor} fill='none' stroke-width={1} />;
+          })
+        }
+                <path d={shape} class=`${shapeClass}` stroke-width={1.5}></path>
+        {
+          properties.map((property, index) => {
+            const { x, y } = property;
+
+            return (
+              <g transform={`translate(${x},${y})`}>
+                <circle cx={0} cy={0} r={8} fill={colors[index]} />
+
+              </g>
+              <g transform={`translate(${x},${y})`}>
+                <text
+                  x={0}
+                  y={0}
+                  fill={colors[index]}
+                  font-size="16px"
+                  text-anchor="middle"   
+                  dominant-baseline="middle"
+                >
+                  Hello
+                </text>
+              </g>
+            );
+          })
+        }
+      </g>
+    </svg>
+    <div>
+      <h2 class='text-4xl font-black uppercase'>Top 6 Tags</h2>
+      <p class='mb-6'>Calculated using Astro Content Collections.</p>
+      <ul class='list-none m-0 p-0'>
+        {
+          properties.map((property, index) => {
+            const { name, total } = property;
+
+            return (
+              <li class='m-0 p-0 flex items-center justify-between border-b border-b-transparent [&:not(:last-child)]:border-b-gray-100 leading-10'>
+                <div class='flex items-center gap-1'>
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 24 24'
+                    width={24}
+                    height={24}
+                    role='presentation'
+                  >
+                    <circle cx={12} cy={12} r={6} fill={colors[index]} />
+                  </svg>
+                  <strong>{name}</strong>
+                </div>
+                <strong>{`x${total}`}</strong>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Terminal.astro
index 26a8e13..ca2eac0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Terminal.astro
@@ -3,10 +3,10 @@ import "../styles/terminal.css";
 import Nav from "../components/Nav.astro";
 
 interface Props {
-    dir: string;
+    path: string;
 }
 
-const { dir: title } = Astro.props;
+const { path: title } = Astro.props;
 ---
 
 <!doctype html>
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>
diff --git a/src/styles/terminal.css b/src/styles/terminal.css
index 517eac7..3d8e51b 100644
--- a/src/styles/terminal.css
+++ b/src/styles/terminal.css
@@ -61,7 +61,6 @@ main {
   width: 55rem;
   max-width: 75%;
   max-height: 75%;
-  padding-top: 1.25rem;
   overflow: hidden;
 }