fix: archive pages now actually work + misc stuff

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>
+<div class={hrClass}></div>

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

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>

src/styles/markdown.css

@@ -36,47 +36,50 @@
 }
 
 
-article > h1 {
+article {
-    @apply text-3xl font-serif font-bold text-title mb-3 mt-1
+    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
+    h2 {
-}
+        @apply text-2xl font-serif font-semibold text-title mb-2
-article > h3 {
+    }
-    @apply text-xl font-serif text-title mb-2
+    h3 {
-}
+        @apply text-xl font-serif text-title mb-2
-article > h4 {
+    }
-    @apply text-lg font-serif italic text-title mb-2
+    h4 {
-}
+        @apply text-lg font-serif italic text-title mb-2
-article > p {
+    }
-    @apply text-black dark:text-night-100 mb-2
+    p {
-}
+        @apply text-black dark:text-night-100 mb-2
-article > p > a,
+    }
-article > ul > li > a,
+    a,
-article > ol > li > a {
+    p > a,
-    @apply font-serif text-subtitle text-sm hover:underline data-[level=two]:pl-2 data-[level=three]:pl-4
+    ul > li > a,
-}
+    ol > li > a {
-article > blockquote {
+        @apply font-serif text-subtitle text-sm hover:underline data-[level=two]:pl-2 data-[level=three]:pl-4
-    @apply p-4 border-s-4 text-muted-foreground bg-muted
+    }
-}
+    blockquote {
-article > pre {
+        @apply p-4 border-s-4 text-muted-foreground bg-muted
-    @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
+    }
-}
+    pre {
-article > p > code {
+        @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
-    @apply px-1 bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100 rounded-md font-mono
+    }
-}
+    p > code {
-article > pre > code {
+        @apply px-1 bg-neutral-300 bg-opacity-50 dark:bg-slate-600 dark:bg-opacity-100 rounded-md font-mono
-    @apply px-0 bg-transparent rounded-none
+    }
-}
+    pre > code {
-article > ul {
+        @apply px-0 bg-transparent rounded-none
-    @apply p-2 pl-4 mb-2 list-disc text-black dark:text-night-100
+    }
-}
+    ul {
-article > ol {
+        @apply p-2 pl-4 mb-2 list-disc text-black dark:text-night-100
-    @apply ml-2 p-2 pl-4 mb-2 list-decimal text-black dark:text-night-100
+    }
-}
+    ol {
-article > li {
+        @apply ml-2 p-2 pl-4 mb-2 list-decimal text-black dark:text-night-100
-    @apply mb-1
+    }
-}
+    li {
-article > img {
+        @apply mb-1
-    @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
+    }
+    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
+    }
 }