feat: replace timeago with dayjs

bun.lock

@@ -23,6 +23,7 @@
         "@types/unist": "^3.0.3",
         "astro": "^6.0.2",
         "astro-icon": "^1.1.5",
+        "dayjs": "^1.11.20",
         "markdown-it": "^14.1.1",
         "marked": "^17.0.4",
         "marked-shiki": "^1.2.1",
@@ -1034,6 +1035,8 @@
 
     "datatables.net-dt": ["datatables.net-dt@2.3.7", "", { "dependencies": { "datatables.net": "2.3.7", "jquery": "4.0.0" } }, "sha512-OXXIliY5MXnI+284Gt73F+fEdnW2u5y9jiptlvjDDb3YlyqXU4E/YZUB262a068sM/+qakb6RixN1SWn18uF2g=="],
 
+    "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "decode-bmp": ["decode-bmp@0.2.1", "", { "dependencies": { "@canvas/image-data": "1.1.0", "to-data-view": "1.1.0" } }, "sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA=="],

package.json

@@ -45,6 +45,7 @@
     "@types/unist": "^3.0.3",
     "astro": "^6.0.2",
     "astro-icon": "^1.1.5",
+    "dayjs": "^1.11.20",
     "markdown-it": "^14.1.1",
     "marked": "^17.0.4",
     "marked-shiki": "^1.2.1",

src/components/cards/CategoryCard.astro

@@ -55,7 +55,7 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
             </svg>
             {count}
           </span>
-          <span class="inline-flex items-center">
+          <div class="inline-flex items-center">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -68,8 +68,10 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
               <circle cx="12" cy="12" r="10"></circle>
               <polyline points="12 6 12 12 16 14"></polyline>
             </svg>
-            {publishDate}
+            <span>
-          </span>
+              {publishDate}
+            </span>
+          </div>
         </div>
       </div>
     </div>

src/components/sections/CategorySection.astro

@@ -6,7 +6,7 @@ import type { Post } from '@lib/directusTypes';
 import CategoryCard from '@components/cards/CategoryCard.astro';
 import LargeCategoryCard from '@components/cards/LargeCategoryCard.astro';
 import directus from '@lib/directus';
-import { timeago } from '@support/time';
+import { formatFromNow } from '@support/time';
 
 const global = await directus.request(readSingleton('site_global'));
 
@@ -93,7 +93,7 @@ const categories = (await directus.request(readItems('categories')))
         logoLight={category.logoLight}
         logoDark={category.logoDark}
         count={postMap.get(category.slug)?.length ?? 0}
-        publishDate={timeago(postMap.get(category.slug)?.[0]?.published_date)}
+        publishDate={formatFromNow(postMap.get(category.slug)?.[0]?.published_date)}
       />
     </div>
     );
@@ -106,7 +106,7 @@ const categories = (await directus.request(readItems('categories')))
         logoLight={global.all_logoLight}
         logoDark={global.all_logoDark}
         count={posts.length}
-        publishDate={timeago(posts[0]?.published_date)}
+        publishDate={formatFromNow(posts[0]?.published_date)}
       />
     </div>
   </div>

src/support/time.ts

@@ -1,34 +1,13 @@
-import { format, register } from 'timeago.js';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
-const TimeAgoConfiguration: string[][] = [
+dayjs.extend(relativeTime);
-  ['today', 'today'],
-  ['%s seconds ago', 'in %s seconds'],
-  ['1 minute ago', 'in 1 minute'],
-  ['%s minutes ago', 'in %s minutes'],
-  ['1 hour ago', 'in 1 hour'],
-  ['%s hours ago', 'in %s hours'],
-  ['1 day ago', 'in 1 day'],
-  ['%s days ago', 'in %s days'],
-  ['1 week ago', 'in 1 week'],
-  ['%s weeks ago', 'in %s weeks'],
-  ['1 month ago', 'in 1 month'],
-  ['%s months ago', 'in %s months'],
-  ['1 year ago', 'in 1 year'],
-  ['%s years ago', 'in %s years'],
-];
 
-function timeago(date?: Date): string {
+function formatFromNow(date: Date | null): string {
   if (!date) {
-    return 'today';
+    return 'none';
   }
-
+  return dayjs(date).fromNow()
-  const localeFunc = (number: number, index: number, _?: number): [string, string] => {
-    return TimeAgoConfiguration[index] as [string, string];
-  };
-
-  register('timeago', localeFunc);
-
-  return format(date, 'timeago');
 }
 
 function formatDate(date: Date): string {
@@ -46,4 +25,4 @@ function formatShortDate(date: Date): string {
   })
 }
 
-export { formatDate, formatShortDate, timeago };
+export { formatFromNow, formatDate, formatShortDate,  };