add sorting

spcbfr · Mar 26, 2024 · a65536b · a65536b
1 parent 17e84b0
commit a65536b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/src/pages/notes/[slug].astro b/src/pages/notes/[slug].astro
@@ -4,6 +4,7 @@ import { db, Note } from "astro:db";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import Link from "../../components/Link.astro";
 import Webmentions from "../../components/Webmentions.svelte";
+import { desc } from "astro:db";
 
 const { slug } = Astro.params;
 

diff --git a/src/pages/notes/index.astro b/src/pages/notes/index.astro
@@ -1,6 +1,6 @@
 ---
 import { db, Note } from "astro:db";
-const notes = await db.select().from(Note);
+const notes = await db.select().from(Note).orderBy(desc(Note.published));
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import Link from "../../components/Link.astro";
 ---
@@ -11,33 +11,35 @@ import Link from "../../components/Link.astro";
     <Link href="/posts">posts/</Link>
     <Link href="/about">about/</Link>
   </nav>
-  {
-    notes.map((note) => (
-      <article class="px-4 py-2 space-y-4 border-amber-800 border-[1px] rounded-sm bg-[#f2f1e9]">
-        <div class=" flex items-start gap-3">
-          <img src="/yusuf.jpg" width="65" class="rounded-md" />
-          <p class="text-xl">{note.content}</p>
-        </div>
-        <div>
-          <a
-            class="text-amber-900 font-medium underline underline-offset-2 decoration-amber-800/30 hover:decoration-amber-800"
-            href={Astro.site + "notes/" + note.published.getTime()}
-          >
-            <time class="text-sm" datetime={note.published.toISOString()}>
-              {note.published.toLocaleDateString("en-GB", {
-                weekday: "short",
-                day: "2-digit",
-                month: "short",
-                year: "numeric",
-                minute: "2-digit",
-                hour: "2-digit",
-                hour12: false,
-                era: "short",
-              })}
-            </time>
-          </a>
-        </div>
-      </article>
-    ))
-  }
+  <main class="space-y-3">
+    {
+      notes.map((note) => (
+        <article class="px-4 py-2 space-y-4 border-amber-800 border-[1px] rounded-sm bg-[#f2f1e9]">
+          <div class=" flex items-start gap-3">
+            <img src="/yusuf.jpg" width="65" class="rounded-md" />
+            <p class="text-xl">{note.content}</p>
+          </div>
+          <div>
+            <a
+              class="text-amber-900 font-medium underline underline-offset-2 decoration-amber-800/30 hover:decoration-amber-800"
+              href={Astro.site + "notes/" + note.published.getTime()}
+            >
+              <time class="text-sm" datetime={note.published.toISOString()}>
+                {note.published.toLocaleDateString("en-GB", {
+                  weekday: "short",
+                  day: "2-digit",
+                  month: "short",
+                  year: "numeric",
+                  minute: "2-digit",
+                  hour: "2-digit",
+                  hour12: false,
+                  era: "short",
+                })}
+              </time>
+            </a>
+          </div>
+        </article>
+      ))
+    }
+  </main>
 </BaseLayout>