@import url("/assets/md.css")fix: make the blog index atleast not completely horrid for now

@import url("/assets/md.css")

1 files changed, 32 insertions, 19 deletions

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 7e21fda..d2f5335 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -8,26 +8,39 @@
 <div class="flex justify-center">
   <div class="max-w-2xl">
     <div class="font-genericmono">
+      <h1 class="text-4xl font-space-grotesk mb-4 mt-2">blog posts</h1>
       {#each Object.entries(data.posts) as [_filename, post]}
-        <a
-          href={resolve('/blog/[id=int]-[slug]', {
-            id: post.metadata.id.toString(),
-            slug: post.metadata.slug,
-          })}
-          class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
-          >link</a
-        >
-        -
-        <a
-          href={resolve('/blog/[id=int]', {
-            id: post.metadata.id.toString(),
-          })}
-          class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
-          >short</a
-        >
-        {JSON.stringify(post.metadata, (k, v) =>
-          v instanceof Date ? v.toISOString() : v,
-        )}
+        <div class="flex gap-2">
+          <div class="flex flex-col items-end">
+            <a
+              href={resolve('/blog/[id=int]-[slug]', {
+                id: post.metadata.id.toString(),
+                slug: post.metadata.slug,
+              })}
+              class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
+              >link</a
+            >
+            <a
+              href={resolve('/blog/[id=int]', {
+                id: post.metadata.id.toString(),
+              })}
+              class="text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white"
+              >short</a
+            >
+          </div>
+          <div class="flex flex-col">
+            <table>
+              <tbody>
+                {#each Object.entries( { ...post.metadata, slug: undefined, id: undefined, created: undefined, updated: undefined }, ).filter((v) => v[1] !== undefined) as v}
+                  <tr>
+                    <td class="pr-1 align-top">{v[0]}:</td>
+                    <td class="pl-1 align-top">{JSON.stringify(v[1])}</td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
       {/each}
     </div>
   </div>