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]' +--- + +
+
+ + + { + rings.map((_, index) => { + return ( + + ); + }) + } + { + axes.map((axis) => { + const { points } = axis; + return ; + }) + } + + { + properties.map((property, index) => { + const { x, y } = property; + + return ( + + + + + + + Hello + + + ); + }) + } + + +
+

Top 6 Tags

+

Calculated using Astro Content Collections.

+
    + { + properties.map((property, index) => { + const { name, total } = property; + + return ( +
  • +
    + + + + {name} +
    + {`x${total}`} +
    • + ); + }) + } +
+
+
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Terminal.astro similarity index 91% rename from src/layouts/Layout.astro rename to 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; --- 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); +--- + + + +

$ cd ~/{url}

+

"{url}": No such file or directory (os error 2)

+ + + + diff --git a/src/pages/blogs/index.astro b/src/pages/blogs.astro similarity index 57% rename from src/pages/blogs/index.astro rename to 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, + })); --- - + -

ls ~/blogs {blogs.length}

+

$ ls -lah -t --color=auto ~/blogs
{ @@ -39,7 +41,7 @@ const blogs = (await getCollection("blogs")).map((blog) => ({ <> @@ -47,4 +49,4 @@ const blogs = (await getCollection("blogs")).map((blog) => ({ )) }
- + 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(); --- +

Test

+ 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(); --- - +
@@ -36,8 +36,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); class="h-[100%] object-cover" /> 
{fingerprint}
+ class="copySshKey text-[75%] flex-1 hover:text-[var(--secondary)]">{fingerprint}
@@ -47,26 +46,22 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); Kyren223@proton.me - UTC+2 - -
- -
+ UTC+2
+
{sshKey}