summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/BlogItem.astro22
-rw-r--r--src/components/TerminalBorder.astro26
-rw-r--r--src/content/config.ts5
-rw-r--r--src/layouts/Layout.astro12
-rw-r--r--src/pages/blogs/index.astro39
-rw-r--r--src/pages/index.astro165
-rw-r--r--src/styles/terminal.css2
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,
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-10 03:35:22 +0000