1 files changed, 56 insertions, 36 deletions
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 3ce7b0a..fb4592a 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,55 @@
 <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 once some posts are published.
+        </p>
+      {/if}
     </div>
   </div>
 </div>