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; +--- + + + +

+ {title} +

+

+ {description} +

+ + 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; ---
- {header} + {header} + {footer}
@@ -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); + } 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; --- @@ -16,9 +17,12 @@ const { title } = Astro.props; - {title} + /home/kyren/{title} - +
+
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", + }, +]; +--- + + + +

ls ~/blogs {blogs.length}

+ +
+ { + blogs.map((blog) => ( + <> + + + )) + } +
+ 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(); --- - -
-
- + + +