From 5f8a34cbd3b388f3a96ee2369c82f21cdcd4776e Mon Sep 17 00:00:00 2001
From: Kebo Kitanari <kebokyo@eleboog.com>
Date: Thu, 14 Nov 2024 13:46:20 -0600
Subject: [PATCH] fix: archive pages now actually work + misc stuff

---
 src/components/HR.astro            |  6 +-
 src/pages/archives/[...slug].astro | 19 +++++++
 src/pages/blog.astro               |  2 +-
 src/styles/markdown.css            | 89 +++++++++++++++---------------
 4 files changed, 71 insertions(+), 45 deletions(-)
 create mode 100644 src/pages/archives/[...slug].astro

diff --git a/src/components/HR.astro b/src/components/HR.astro
index b14c614..6fe158a 100644
--- a/src/components/HR.astro
+++ b/src/components/HR.astro
@@ -1,5 +1,9 @@
 ---
 
+const p = Astro.props;
+
+const hrClass = "flex-grow w-auto self-baseline h-1 border-t border-crusta-200 dark:border-night-800 m-4 " + p.class;
+
 ---
 
-<div class="flex-grow w-auto self-baseline h-1 border-t border-crusta-200 dark:border-night-800 m-4"></div>
\ No newline at end of file
+<div class={hrClass}></div>
\ No newline at end of file
diff --git a/src/pages/archives/[...slug].astro b/src/pages/archives/[...slug].astro
new file mode 100644
index 0000000..f673db6
--- /dev/null
+++ b/src/pages/archives/[...slug].astro
@@ -0,0 +1,19 @@
+---
+export const prerender = true;
+
+import {getCollection} from 'astro:content'
+
+export async function getStaticPaths() {
+	const archives = await getCollection('archives');
+	return archives.map(p => ({
+    params: { slug: p.slug }, props: { p },
+  	}));
+}
+
+const { p } = Astro.props;
+const { Content } = await p.render();
+
+---
+
+<Content />
+
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 143df72..475f095 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -46,7 +46,7 @@ const archives = await getCollection('archives');
       console.log(toZonedTime(post.data.date, timeZone));
       return (
         <li>
-          <a href={'/posts/' + post.slug} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">{post.data.title}</a>
+          <a href={'/archives/' + post.slug} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">{post.data.title}</a>
           &emsp;<span class="font-mono text-md">{format(toZonedTime(post.data.date, timeZone), 'LLL d, yyyy')}</span>
           <p>{post.data.summary}</p>
         </li>
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index df1c97b..eb4e762 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -36,47 +36,50 @@
 }
 
 
-article > h1 {
-    @apply text-3xl font-serif font-bold text-title mb-3 mt-1
-}
-article > h2 {
-    @apply text-2xl font-serif font-semibold text-title mb-2
-}
-article > h3 {
-    @apply text-xl font-serif text-title mb-2
-}
-article > h4 {
-    @apply text-lg font-serif italic text-title mb-2
-}
-article > p {
-    @apply text-black dark:text-night-100 mb-2
-}
-article > p > a,
-article > ul > li > a,
-article > ol > li > a {
-    @apply font-serif text-subtitle text-sm hover:underline data-[level=two]:pl-2 data-[level=three]:pl-4
-}
-article > blockquote {
-    @apply p-4 border-s-4 text-muted-foreground bg-muted
-}
-article > pre {
-    @apply p-2 bg-neutral-300 bg-opacity-50 dark:bg-slate-800 dark:bg-opacity-100 rounded-lg font-mono overflow-y-scroll mb-2
-}
-article > p > code {
-    @apply px-1 bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100 rounded-md font-mono
-}
-article > pre > code {
-    @apply px-0 bg-transparent rounded-none
-}
-article > ul {
-    @apply p-2 pl-4 mb-2 list-disc text-black dark:text-night-100
-}
-article > ol {
-    @apply ml-2 p-2 pl-4 mb-2 list-decimal text-black dark:text-night-100
-}
-article > li {
-    @apply mb-1
-}
-article > img {
-    @apply relative -z-10 border-4 border-crusta-200 dark:border-night-800 rounded-lg shadow-lgr shadow-crusta-400/20 dark:shadow-night-400/50 my-2
+article {
+    h1 {
+        @apply text-3xl font-serif font-bold text-title mb-3 mt-1
+    }
+    h2 {
+        @apply text-2xl font-serif font-semibold text-title mb-2
+    }
+    h3 {
+        @apply text-xl font-serif text-title mb-2
+    }
+    h4 {
+        @apply text-lg font-serif italic text-title mb-2
+    }
+    p {
+        @apply text-black dark:text-night-100 mb-2
+    }
+    a,
+    p > a,
+    ul > li > a,
+    ol > li > a {
+        @apply font-serif text-subtitle text-sm hover:underline data-[level=two]:pl-2 data-[level=three]:pl-4
+    }
+    blockquote {
+        @apply p-4 border-s-4 text-muted-foreground bg-muted
+    }
+    pre {
+        @apply p-2 bg-neutral-300 bg-opacity-50 dark:bg-slate-800 dark:bg-opacity-100 rounded-lg font-mono overflow-y-scroll mb-2
+    }
+    p > code {
+        @apply px-1 bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100 rounded-md font-mono
+    }
+    pre > code {
+        @apply px-0 bg-transparent rounded-none
+    }
+    ul {
+        @apply p-2 pl-4 mb-2 list-disc text-black dark:text-night-100
+    }
+    ol {
+        @apply ml-2 p-2 pl-4 mb-2 list-decimal text-black dark:text-night-100
+    }
+    li {
+        @apply mb-1
+    }
+    img {
+        @apply relative -z-10 border-4 border-crusta-200 dark:border-night-800 rounded-lg shadow-lgr shadow-crusta-400/20 dark:shadow-night-400/50 my-2
+    }
 }
\ No newline at end of file