feat(web): add relative time display to changelog header using Day.js (#2172)

* feat(web): add relative time display to changelog header using Day.js

Co-Authored-By: yujonglee <[email protected]>

* fix(web): add relative time to MockWindow header in changelog

Co-Authored-By: yujonglee <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: yujonglee <[email protected]>

Author: devin-ai-integration[bot]

apps/web/package.json

@@ -39,6 +39,7 @@
     "@tanstack/react-start": "^1.139.14",
     "@tanstack/router-plugin": "^1.139.14",
     "@unpic/react": "^1.0.1",
+    "dayjs": "^1.11.19",
     "drizzle-orm": "^0.44.7",
     "exa-js": "^1.10.2",
     "jszip": "^3.10.1",

apps/web/src/routes/_view/changelog/$slug.tsx

@@ -1,6 +1,8 @@
 import { MDXContent } from "@content-collections/mdx/react";
 import { Icon } from "@iconify-icon/react";
 import { createFileRoute, notFound, useNavigate } from "@tanstack/react-router";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
 import { ChevronDown, ChevronLeft, ChevronRight, Menu, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
@@ -22,6 +24,8 @@ import {
 import { defaultMDXComponents } from "@/components/mdx";
 import { MockWindow } from "@/components/mock-window";
 
+dayjs.extend(relativeTime);
+
 const ITEMS_PER_PAGE = 20;
 
 type VersionGroup = {
@@ -115,12 +119,15 @@ function Component() {
 }
 
 function HeroSection({ changelog }: { changelog: ChangelogWithMeta }) {
+  const relativeTimeText = dayjs(changelog.created).fromNow();
+
   return (
     <div className="px-6 py-16 lg:py-24">
       <div className="text-center max-w-3xl mx-auto">
-        <h1 className="text-3xl sm:text-4xl font-serif tracking-tight text-stone-600 mb-6">
+        <h1 className="text-3xl sm:text-4xl font-serif tracking-tight text-stone-600 mb-2">
           Version {changelog.version}
         </h1>
+        <p className="text-sm text-neutral-500 mb-6">{relativeTimeText}</p>
         <DownloadButtons version={changelog.version} />
       </div>
     </div>
@@ -251,12 +258,17 @@ function ChangelogContentSection({
 }) {
   const isMobile = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const relativeTimeText = dayjs(changelog.created).fromNow();
 
   return (
     <section className="px-6 pb-16 lg:pb-24">
       <div className="max-w-4xl mx-auto">
         <MockWindow
-          title={isMobile ? undefined : `Version ${changelog.version}`}
+          title={
+            isMobile
+              ? undefined
+              : `Version ${changelog.version} · ${relativeTimeText}`
+          }
           className="rounded-lg w-full max-w-none"
           prefixIcons={
             isMobile && (