Experimenting with my own markdown styling for blogs

3 files changed, 24 insertions, 8 deletions

diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
index b4a0632..06bafdb 100644
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@@ -24,7 +24,7 @@ const blogs = (await getCollection("blogs"))
                 <>
                     <BlogItem
                         title={blog.title}
-                        description={blog.description ? blog.description : ""}
+                        description={blog.description ?? ""}
                         date={blog.date}
                         href={blog.href}
                     />
diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro
index 33bfc84..3b15fc7 100644
--- a/src/pages/blogs/[...slug].astro
+++ b/src/pages/blogs/[...slug].astro
@@ -1,6 +1,9 @@
 ---
-import Blog from "@layouts/Blog.astro";
 import { getCollection } from "astro:content";
+import Blog from "@layouts/Blog.astro";
+import Markdown from "@components/Markdown.astro";
+import Terminal from "@layouts/Terminal.astro";
+import BlogItem from "@components/BlogItem.astro";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection("blogs");
@@ -14,6 +17,21 @@ const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<Blog title=`/home/kyren/blogs/${entry.slug}`>
-    <Content />
-</Blog>
+<Terminal path="blogs/">
+    <div class="w-full h-[65vh] overflow-y-auto pr-4">
+        <div class="flex flex-col h-full m-0 p-0">
+            <BlogItem
+                title={entry.data.title}
+                description={entry.data.description ?? ""}
+                date={entry.data.date}
+            />
+            <div class="text-[130%] flex-grow">
+                <Content />
+            </div>
+        </div>
+    </div>
+</Terminal>
+
+<!-- <Blog title=`/home/kyren/blogs/${entry.slug}`> -->
+<!--     <Content /> -->
+<!-- </Blog> -->
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a150059..872b360 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -123,9 +123,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
             <BlogItem
                 header="Latest Blog Post"
                 title={latestBlog.data.title}
-                description={latestBlog.data.description
-                    ? latestBlog.data.description
-                    : ""}
+                description={latestBlog.data.description ?? ""}
                 date={latestBlog.data.date}
                 href={"/blogs/" + latestBlog.slug}
             />