use dayjs to format dates

spcbfr · Mar 26, 2024 · 60314da · 60314da
1 parent 6508806
commit 60314da
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 33 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/db/config.ts b/db/config.ts
@@ -1,9 +1,9 @@
-import { NOW, column, defineDb, defineTable } from 'astro:db';
+import { column, defineDb, defineTable } from 'astro:db';
 
 const Note = defineTable({
   columns: {
     content: column.text(),
-    published: column.date({ default: NOW })
+    published: column.number()
   }
 })
 

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@types/react-dom": "^18.2.22",
     "@vercel/analytics": "^1.2.2",
     "astro": "^4.5.5",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "svelte": "^4.2.12",

diff --git a/src/pages/api/micropub.ts b/src/pages/api/micropub.ts
@@ -1,6 +1,7 @@
 import type { APIContext } from "astro";
 import { db, Note } from "astro:db";
 import { record } from "zod";
+import { Dayjs } from "dayjs"
 
 interface SuccessfulIndieToken {
 	me: string;
@@ -82,17 +83,19 @@ export async function POST({ request, site, url }: APIContext) {
 			if (!hasOwnProperty(formBodyObject, 'content')) {
 				return Error(422)
 			}
+			const sinceEpoch = new Dayjs().unix
 
 			const records = await db.insert(Note).values({
-				content: formBodyObject.content
+				content: formBodyObject.content,
+				published: sinceEpoch
 			}).returning()
 			console.log(records)
 
 			return new Response(null, {
 				statusText: "Created",
 				status: 201,
 				headers: {
-					"Location": "https://yusuf.fyi/notes/" + records[0].published.getTime()
+					"Location": "https://yusuf.fyi/notes/" + records[0].published
 				}
 			})
 		}

diff --git a/src/pages/notes/[slug].astro b/src/pages/notes/[slug].astro
@@ -4,18 +4,14 @@ 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";
 
+import dayjs from "dayjs";
 const { slug } = Astro.params;
 
-const date = new Date(Number(slug));
-console.log(date);
-
-const notes = await db.select().from(Note);
+const notes = await db.select().from(Note).where(eq(slug, Note.published))
 
 const note = notes[0];
 
-console.log(notes);
 ---
 
 <BaseLayout
@@ -36,18 +32,9 @@ console.log(notes);
       <p class="text-xl">{note.content}</p>
     </div>
     <div>
-      <time class="text-sm" datetime={note.published.toISOString()}>
+      <time class="text-sm" datetime={dayjs(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",
-          })
+        dayjs(note.published).format("ddd, D MMM, YYYY, HH:mm")
         }
       </time>
     </div>

diff --git a/src/pages/notes/index.astro b/src/pages/notes/index.astro
@@ -4,6 +4,7 @@ const notes = await db.select().from(Note).orderBy(desc(Note.published));
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import Link from "../../components/Link.astro";
 import { desc } from "astro:db";
+import dayjs from "dayjs";
 ---
 
 <BaseLayout title="notes!" description="Yusuf's note hub">
@@ -23,19 +24,13 @@ import { desc } from "astro:db";
           <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()}
+              href={"/notes/" + note.published}
             >
-              <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
+                class="text-sm"
+                datetime={dayjs(note.published).toISOString()}
+              >
+                {dayjs(note.published).format("ddd, D MMM, YYYY, HH:mm")}
               </time>
             </a>
           </div>