Experimenting with my own markdown styling for blogs

5 files changed, 41 insertions, 18 deletions

diff --git a/src/components/BlogItem.astro b/src/components/BlogItem.astro
index d94b6f5..08b98c4 100644
--- a/src/components/BlogItem.astro
+++ b/src/components/BlogItem.astro
@@ -22,7 +22,7 @@ interface Props {
     title: string;
     description: string;
     date: Date;
-    href: string;
+    href?: string;
     header?: string;
 }
 
@@ -31,13 +31,20 @@ const { title, description, date, href, header } = Astro.props;
 
 <TerminalBorder header={header} footer={formatDate(date)} margin="0 0 20px;">
     <span class="cursor-pointer group block w-full">
-        <a href={href} style="all: unset;">
-            <h1 class="text-[130%] text-[var(--accent)] group-hover:underline">
-                {title}
-            </h1>
-            <p class="text-[var(--secondary)]">
-                {description}
-            </p>
-        </a>
+        {
+            href ? (
+                <a href={href} style="all: unset;">
+                    <h1 class="text-[130%] text-[var(--accent)] group-hover:underline">
+                        {title}
+                    </h1>
+                    <p class="text-[var(--secondary)]">{description}</p>
+                </a>
+            ) : (
+                <>
+                    <h1 class="text-[130%] text-[var(--accent)]">{title}</h1>
+                    <p class="text-[var(--secondary)]">{description}</p>
+                </>
+            )
+        }
     </span>
 </TerminalBorder>
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
index 46985d0..62f66bc 100644
--- a/src/layouts/Blog.astro
+++ b/src/layouts/Blog.astro
@@ -19,7 +19,7 @@ const { title } = Astro.props;
         <title>{title}</title>
     </head>
     <body>
-        <main class="w-[70%] m-auto">
+        <main class="w-[70%] m-auto py-16">
             <Markdown>
                 <slot />
             </Markdown>
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}
             />