relative time to publishedAt

Docs/components/ReleaseInfo.tsx

@@ -12,6 +12,23 @@ const reactionToEmoji = {
 } as const
 type reactionKeys = keyof typeof reactionToEmoji
 
+const formatRelativeDate = (publishedAt: string) => {
+  const publishedDate = new Date(publishedAt)
+  const deltaTime = (publishedDate.getTime() - Date.now()) / 1000
+
+  const formatter = new Intl.RelativeTimeFormat()
+  if (deltaTime > -60 * 60) {
+    return formatter.format(Math.floor(deltaTime / 60), 'minute')
+  }
+  if (deltaTime > -24 * 60 * 60) {
+    return formatter.format(Math.floor(deltaTime / 60 / 60), 'hour')
+  }
+  if (deltaTime > -7 * 24 * 60 * 60) {
+    return formatter.format(Math.floor(deltaTime / 60 / 60 / 24), 'day')
+  }
+  return formatter.format(Math.floor(deltaTime / 60 / 60 / 24 / 7), 'week')
+}
+
 const ReleaseInfo = ({
   htmlUrl,
   publishedAt,
@@ -29,7 +46,7 @@ const ReleaseInfo = ({
 
   return (
     <div className="flex flex-wrap items-center text-xs gap-x-2 py-2 opacity-60 hover:opacity-80 transition-all duration-150">
-      <span>on {new Date(publishedAt).toLocaleDateString()},</span>
+      <span>{formatRelativeDate(publishedAt)},</span>
       <span>
         {downloadCount} {downloadCount > 1 ? 'downloads' : 'download'},
       </span>