notes ui

db/seed.ts

@@ -1,6 +1,14 @@
-import { db } from 'astro:db';
+import { Note, db } from "astro:db";
 
 // https://astro.build/db/seed
 export default async function seed() {
-	// TODO
+  await db
+    .insert(Note)
+    .values([
+      {
+        content:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.",
+        published: new Date(),
+      },
+    ]);
 }

src/pages/api/testing.ts

@@ -0,0 +1,14 @@
+import type { APIContext } from "astro";
+
+export async function POST({ request, site, url }: APIContext) {
+
+	const body = await request.text()
+
+	console.log(body)
+	return new Response(null, {
+		status: 200,
+		headers: {
+			"Location": "https://yusuf.fyi/notes/2021"
+		}
+	})
+}

src/pages/notes/[slug].astro

@@ -0,0 +1,54 @@
+---
+import { eq } from "astro:db";
+import { db, Note } from "astro:db";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Link from "../../components/Link.astro";
+import Webmentions from "../../components/Webmentions.svelte";
+
+const { slug } = Astro.params;
+
+const date = new Date(Number(slug));
+console.log(date);
+
+const notes = await db
+  .select()
+  .from(Note)
+  .where(eq(Note.published, date))
+  .limit(1);
+
+const note = notes[0];
+---
+
+<BaseLayout title="x">
+  <nav class="flex text-xl my-2 font-medium font-serif justify-between">
+    <Link href="/">home/</Link>
+    <Link href="/posts">posts/</Link>
+    <Link href="/about">about/</Link>
+  </nav>
+
+  <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>
+      <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>
+    </div>
+  </article>
+  <Webmentions urlSlug={"posts/" + slug} client:load />
+</BaseLayout>

src/pages/notes/index.astro

@@ -0,0 +1,43 @@
+---
+import { db, Note } from "astro:db";
+const notes = await db.select().from(Note);
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Link from "../../components/Link.astro";
+---
+
+<BaseLayout>
+  <nav class="flex text-xl my-2 font-medium font-serif justify-between">
+    <Link href="/">home/</Link>
+    <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>
+    ))
+  }
+</BaseLayout>