feat: show creation date

package-lock.json

@@ -23,6 +23,7 @@
         "astro": "^4.1.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "dayjs": "^1.11.10",
         "kysely": "^0.26.0",
         "lucide-react": "^0.309.0",
         "nanoid": "^5.0.4",
@@ -2727,6 +2728,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -25,6 +25,7 @@
     "astro": "^4.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
     "kysely": "^0.26.0",
     "lucide-react": "^0.309.0",
     "nanoid": "^5.0.4",

src/lib/db.ts

@@ -11,4 +11,5 @@ export interface ContentTable {
   loc: string
   author: string
   description: string
+  created_at: Generated<string>
 }

src/pages/[id].astro

@@ -1,5 +1,7 @@
 ---
 import '@/styles/globals.css';
+import '../styles/locked-page.css';
+
 import Layout from '../layouts/Layout.astro';
 import { Button } from '@/components/ui/button';
 import {
@@ -10,12 +12,12 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { CalendarIcon } from '@radix-ui/react-icons';
-
 import LockedContent from '@/components/LockedContent';
 import { Separator } from '@/components/ui/separator';
-
-import '../styles/locked-page.css';
 import type { ContentTable } from '@/lib/db';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localeTR from 'dayjs/locale/tr';
 
 type Content = Omit<ContentTable, 'id' | 'url'>;
 
@@ -24,6 +26,13 @@ const { id } = Astro.params;
 const res = await fetch(`${import.meta.env.HOME_URL}/api/content?id=${id}`);
 
 const data: Content | null = res.status === 200 ? await res.json() : null;
+
+dayjs.locale(localeTR);
+
+dayjs.extend(relativeTime);
+
+// @ts-expect-error Generated<string> is string
+const dateFromNow = dayjs(data?.created_at).fromNow();
 ---
 
 <Layout>
@@ -52,7 +61,7 @@ const data: Content | null = res.status === 200 ? await res.json() : null;
       </CardContent>
       <CardFooter className="gap-2">
         <CalendarIcon />
-        <p>5 saat önce</p>
+        <p>{dateFromNow}</p>
       </CardFooter>
     </Card>
 

src/pages/api/content.ts

@@ -78,7 +78,13 @@ export const GET: APIRoute = async ({ request }) => {
   try {
     const content = await db
       .selectFrom("contents")
-      .select(({ fn }) => ["blob_url", fn<string>("ST_AsGeoJSON", ["loc"]).as("loc"), "description", "author"])
+      .select(({ fn }) => [
+        "blob_url",
+        fn<string>("ST_AsGeoJSON", ["loc"]).as("loc"),
+        "description",
+        "author",
+        "created_at"
+      ])
       .where("url", "=", contentId)
       .executeTakeFirst()