From b9cbd513127254780ae59c8e17ab2c47eea301cb Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Wed, 14 Jan 2026 17:40:37 +0100
Subject: feat: start working on alpine early init blog post, do a bunch of
 other blog related stuff

---
 src/routes/blog/+page.svelte | 90 ++++++++++++++++++++++++++------------------
 1 file changed, 54 insertions(+), 36 deletions(-)

(limited to 'src/routes/blog/+page.svelte')

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 3ce7b0a..edd1c46 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -3,6 +3,14 @@
   import type { PageProps } from './$types';
 
   let { data }: PageProps = $props();
+  let posts = $derived(
+    Object.entries(data.posts)
+      .filter((v) => v[1].metadata.published === true)
+      .toSorted(
+        ([_, a], [__, b]) =>
+          b.metadata.updated.getTime() - a.metadata.updated.getTime(),
+      ),
+  );
 </script>
 
 <svelte:head>
@@ -12,43 +20,53 @@
 <div class="flex justify-center">
   <div class="max-w-2xl w-full">
     <div class="font-genericmono">
-      <h1 class="font-space-grotesk text-5xl mt-8 mb-4">
-        <span class="text-red-400 select-none">❯&thinsp;</span>ls
-        <span class="text-red-400">'</span>blog posts<span class="text-red-400"
-          >'</span
-        ><span class="text-red-400 select-none">;</span>
-      </h1>
-      {#each Object.entries(data.posts) as [_filename, post]}
-        <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="quicklink">link</a
-            >
-            <a
-              href={resolve('/blog/[id=int]', {
-                id: post.metadata.id.toString(),
-              })}
-              class="quicklink">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>
+      {#if posts.length}
+        <h1 class="font-space-grotesk text-5xl mt-8 mb-4">
+          <span class="text-red-400 select-none">❯&thinsp;</span>ls
+          <span class="text-red-400">'</span>blog posts<span
+            class="text-red-400">'</span
+          ><span class="text-red-400 select-none">;</span>
+        </h1>
+        <div class="flex gap-4 flex-col">
+          {#each posts as [_filename, post]}
+            <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="quicklink">link</a
+                >
+                <a
+                  href={resolve('/blog/[id=int]', {
+                    id: post.metadata.id.toString(),
+                  })}
+                  class="quicklink">short</a
+                >
+              </div>
+              <div class="flex flex-col">
+                <table>
+                  <tbody>
+                    {#each Object.entries( { ...post.metadata, slug: undefined, id: undefined, created: undefined, updated: undefined, published: 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>
-      {/each}
+      {:else}
+        <h2 class="font-space-grotesk text-5xl mt-8 mb-4">
+          <span class="text-accent-primary select-none">zsh:&ThinSpace;</span>no
+          matches found<span class="text-accent-primary select-none">.</span>
+        </h2>
+        <p class="mt-1.5">Feel free to check back later.</p>
+      {/if}
     </div>
   </div>
 </div>
-- 
cgit v1.2.3