mirror of
https://github.com/Kyren223/website.git
synced 2026-01-07 05:23:21 +00:00
Backup
This commit is contained in:
22
src/components/BlogItem.astro
Normal file
22
src/components/BlogItem.astro
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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(),
|
||||
}),
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
39
src/pages/blogs/index.astro
Normal file
39
src/pages/blogs/index.astro
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -60,7 +60,9 @@ main {
|
||||
padding: 1.75rem;
|
||||
width: 55rem;
|
||||
max-width: 75%;
|
||||
max-height: 75%;
|
||||
padding-top: 1.25rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
||||
Reference in New Issue
Block a user