Merge pull request #268 from gitcoinco/feat/add-dates-and-read-time

feat: show dates & read time on cards & details page

Author: cristinalare

src/app/apps/[slug]/page.tsx

@@ -83,6 +83,7 @@ export default async function AppDetailPage({ params }: PageProps) {
         item={app}
         breadcrumbHref="/apps"
         breadcrumbLabel="Back to Apps"
+        showDate={false}
         relatedSections={[
           {
             title: 'Related Apps',

src/app/campaigns/[slug]/page.tsx

@@ -69,6 +69,35 @@ export default async function CampaignDetailPage({ params }: PageProps) {
     },
   }
 
+  const formatDate = (d: string) =>
+    new Date(d).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+
+  const campaignStats = (campaign.matchingPoolUsd || campaign.projectsCount || campaign.startDate) ? (
+    <dl className="flex flex-wrap gap-x-10 gap-y-4 py-5 border-b border-gray-700">
+      {campaign.matchingPoolUsd && (
+        <div>
+          <dt className="text-xs text-gray-400 uppercase tracking-wider">Matching Pool</dt>
+          <dd className="mt-1 text-xl font-semibold text-gray-25">{campaign.matchingPoolUsd}</dd>
+        </div>
+      )}
+      {campaign.projectsCount && (
+        <div>
+          <dt className="text-xs text-gray-400 uppercase tracking-wider">Projects</dt>
+          <dd className="mt-1 text-xl font-semibold text-gray-25">{campaign.projectsCount}</dd>
+        </div>
+      )}
+      {campaign.startDate && (
+        <div>
+          <dt className="text-xs text-gray-400 uppercase tracking-wider">Period</dt>
+          <dd className="mt-1 text-xl font-semibold text-gray-25">
+            {formatDate(campaign.startDate)}
+            {campaign.endDate ? ` – ${formatDate(campaign.endDate)}` : " – Ongoing"}
+          </dd>
+        </div>
+      )}
+    </dl>
+  ) : undefined;
+
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumb) }} />
@@ -79,6 +108,7 @@ export default async function CampaignDetailPage({ params }: PageProps) {
         breadcrumbLabel="Back to Campaigns"
         ctaUrl={campaign.ctaUrl}
         ctaLabel="Visit Campaign"
+        contentBefore={campaignStats}
         relatedSections={[
           {
             title: 'Related Apps',

src/components/cards/CampaignCard.tsx

@@ -11,25 +11,14 @@ interface CampaignCardProps {
   ctaLabel?: string;
 }
 
-function getTimelineLabel(startDate?: string, endDate?: string): string | null {
-  if (!endDate) return null;
-  const now = new Date();
-  const end = new Date(endDate);
-  const start = startDate ? new Date(startDate) : null;
-
-  if (end < now) return "Ended";
-  if (start && start > now) {
-    const days = Math.ceil(
-      (start.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
-    );
-    return days === 1 ? "Starts in 1 day" : `Starts in ${days} days`;
-  }
+function fmtMonth(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString("en-US", { month: "short", year: "numeric" });
+}
 
-  const days = Math.ceil(
-    (end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
-  );
-  if (days < 1) return "Ends today";
-  return days === 1 ? "1 day left" : `${days} days left`;
+function getDateRange(startDate?: string, endDate?: string): string | null {
+  if (!startDate) return null;
+  const end = endDate ? fmtMonth(endDate) : "Ongoing";
+  return `${fmtMonth(startDate)} – ${end}`;
 }
 
 function getStatusBadge(
@@ -76,7 +65,7 @@ export default function CampaignCard({
   ctaLabel = "Visit campaign",
 }: CampaignCardProps) {
   const campaignUrl = `/campaigns/${campaign.slug}`;
-  const timelineLabel = getTimelineLabel(campaign.startDate, campaign.endDate);
+  const dateRange = getDateRange(campaign.startDate, campaign.endDate);
   const statusBadge = getStatusBadge(campaign.startDate, campaign.endDate);
 
   const metrics = [
@@ -90,10 +79,10 @@ export default function CampaignCard({
       label: "Projects",
       value: campaign.projectsCount,
     },
-    timelineLabel && {
+    dateRange && {
       icon: Calendar,
-      label: "Timeline",
-      value: timelineLabel,
+      label: "Period",
+      value: dateRange,
     },
   ].filter(Boolean) as { icon: LucideIcon; label: string; value: string }[];
 
@@ -139,6 +128,7 @@ export default function CampaignCard({
       layout="banner"
       banner={campaign.banner}
       bannerHeight="h-48"
+      date={campaign.startDate}
     />
   );
 }

src/components/cards/CaseStudyCard.tsx

@@ -1,5 +1,6 @@
 import ContentCard from './ContentCard'
 import type { CaseStudy } from '@/lib/types'
+import { calcReadTime } from '@/lib/utils'
 
 interface CaseStudyCardProps {
   caseStudy: CaseStudy
@@ -14,6 +15,8 @@ export default function CaseStudyCard({ caseStudy }: CaseStudyCardProps) {
       tags={caseStudy.tags}
       layout="banner"
       banner={caseStudy.banner}
+      readTime={calcReadTime(caseStudy.description)}
+      date={caseStudy.lastUpdated}
     />
   )
 }

src/components/cards/ContentCard.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import Image from "next/image";
 import TagsList from "../ui/TagsList";
+import ReadTimeBadge from "../ui/ReadTimeBadge";
+import { formatRelativeDate } from "@/lib/utils";
 
 interface ContentCardProps {
   href: string;
@@ -12,6 +14,8 @@ interface ContentCardProps {
   logo?: string;
   banner?: string;
   bannerHeight?: string;
+  readTime?: number;
+  date?: string;
 }
 
 export default function ContentCard({
@@ -24,6 +28,8 @@ export default function ContentCard({
   logo,
   banner = "/content-images/placeholder.png",
   bannerHeight,
+  readTime,
+  date,
 }: ContentCardProps) {
   const isBanner = layout === "banner";
 
@@ -51,6 +57,7 @@ export default function ContentCard({
                 className="object-cover group-hover:scale-105 transition-transform duration-300"
               />
               <div className="absolute inset-0 bg-linear-to-b from-transparent to-gray-950 group-hover:opacity-0 transition-all duration-500" />
+              {readTime !== undefined && <ReadTimeBadge minutes={readTime} />}
             </div>
           )}
 
@@ -77,13 +84,14 @@ export default function ContentCard({
             </h3>
           </div>
 
-          <p className="text-gray-300 font-serif text-sm mb-4 line-clamp-3 flex-grow">
+          <p className="text-gray-300 font-serif text-sm line-clamp-3 flex-grow">
             {shortDescription}
           </p>
+          {date && <p className="text-xs text-gray-500 text-right mt-2">{formatRelativeDate(date)}</p>}
         </>
 
         {/* Tags */}
-        <div className="pt-5 border-t border-gray-500/60 h-[3.7rem]">
+        <div className="pt-4 border-t border-gray-500/60 h-[3.7rem] mt-3">
           <TagsList tags={tags} />
         </div>
       </div>

src/components/cards/MechanismCard.tsx

@@ -1,5 +1,6 @@
 import ContentCard from './ContentCard'
 import type { Mechanism } from '@/lib/types'
+import { calcReadTime } from '@/lib/utils'
 
 interface MechanismCardProps {
   mechanism: Mechanism
@@ -14,6 +15,8 @@ export default function MechanismCard({ mechanism }: MechanismCardProps) {
       tags={mechanism.tags}
       layout="banner"
       banner={mechanism.banner}
+      readTime={calcReadTime(mechanism.description)}
+      date={mechanism.lastUpdated}
     />
   )
 }

src/components/cards/ResearchCard.tsx

@@ -2,7 +2,8 @@ import Link from "next/link";
 import Image from "next/image";
 import ContentCard from "./ContentCard";
 import type { Research } from "@/lib/types";
-import { Badge, Button } from "../ui";
+import { Badge, Button, ReadTimeBadge } from "../ui";
+import { calcReadTime, formatRelativeDate } from "@/lib/utils";
 
 interface ResearchCardProps {
   research: Research;
@@ -13,6 +14,8 @@ export default function ResearchCard({
   research,
   variant = "default",
 }: ResearchCardProps) {
+  const readTime = calcReadTime(research.description);
+
   if (variant === "sensemaking") {
     return (
       <Link href={`/research/${research.slug}`}>
@@ -29,6 +32,7 @@ export default function ResearchCard({
               className="object-cover"
             />
             <div className="absolute inset-0 bg-linear-to-b from-transparent to-gray-900" />
+            <ReadTimeBadge minutes={readTime} />
           </div>
           <div className="flex flex-1 flex-col py-6 px-10">
             <Badge
@@ -45,6 +49,7 @@ export default function ResearchCard({
             <p className="sm:max-w-[60%] mt-2 text-sm text-gray-300 font-serif">
               {research.shortDescription}
             </p>
+            <p className="mt-2 text-xs text-gray-500 text-right">{formatRelativeDate(research.lastUpdated)}</p>
             <div className="mt-4 flex justify-end">
               <Button
                 variant="ghost"
@@ -72,6 +77,7 @@ export default function ResearchCard({
             className="object-cover group-hover:scale-105 transition-transform duration-300"
           />
           <div className="absolute inset-0 bg-linear-to-b from-transparent to-gray-900 group-hover:opacity-0 transition-all duration-500" />
+          <ReadTimeBadge minutes={readTime} />
         </div>
         <div className="flex flex-1 flex-col px-4 pb-4">
           <Badge
@@ -85,9 +91,10 @@ export default function ResearchCard({
           <h3 className="-translate-y-1/2 text-md sm:text-xl md:text-2xl text-center font-bold h-18 flex items-center overflow-visible">
             <span className="line-clamp-3">{research.name}</span>
           </h3>
-          <p className="text-xs text-gray-400 font-serif line-clamp-4 mb-2">
+          <p className="text-xs text-gray-400 font-serif line-clamp-4 mb-1">
             {research.shortDescription}
           </p>
+          <p className="text-xs text-gray-500 text-right mb-2">{formatRelativeDate(research.lastUpdated)}</p>
           <Button
             variant="ghost"
             className="mt-auto pt-4 w-full flex items-center justify-center gap-3"

src/components/layouts/CategoryContent.tsx

@@ -15,6 +15,7 @@ import type {
 } from "@/lib/types";
 import TagsList from "@/components/ui/TagsList";
 import InitialAvatar from "@/components/ui/InitialAvatar";
+import { formatRelativeDate } from "@/lib/utils";
 import AppCard from "@/components/cards/AppCard";
 import MechanismCard from "@/components/cards/MechanismCard";
 import ResearchCard from "@/components/cards/ResearchCard";
@@ -68,22 +69,31 @@ const BASE_HREFS: Record<ContentType, string> = {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
+function sortKey(item: BaseContent): string {
+  return (item as Campaign).startDate ?? item.lastUpdated;
+}
+
+// Active = campaign that hasn't ended yet (no endDate or endDate in the future)
+function isActive(item: BaseContent): boolean {
+  const endDate = (item as Campaign).endDate;
+  if (endDate === undefined) return false; // not a campaign
+  return !endDate || new Date(endDate) > new Date();
+}
+
 function sortItems(items: BaseContent[], sort: SortOption): BaseContent[] {
   const sorted = [...items];
   if (sort === "newest")
-    return sorted.sort((a, b) => b.lastUpdated.localeCompare(a.lastUpdated));
+    return sorted.sort((a, b) => {
+      const aActive = isActive(a);
+      const bActive = isActive(b);
+      if (aActive !== bActive) return aActive ? -1 : 1;
+      return sortKey(b).localeCompare(sortKey(a));
+    });
   if (sort === "oldest")
-    return sorted.sort((a, b) => a.lastUpdated.localeCompare(b.lastUpdated));
+    return sorted.sort((a, b) => sortKey(a).localeCompare(sortKey(b)));
   return sorted.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-  });
-}
-
 // ─── Sub-components ───────────────────────────────────────────────────────────
 
 function GridCard({ item, type }: { item: BaseContent; type: ContentType }) {
@@ -147,10 +157,12 @@ function ListRow({
   item,
   href,
   preferLogo,
+  showDate,
 }: {
   item: BaseContent;
   href: string;
   preferLogo: boolean;
+  showDate: boolean;
 }) {
   return (
     <Link href={href}>
@@ -163,9 +175,11 @@ function ListRow({
             <h3 className="font-semibold text-gray-25 line-clamp-3 text-base sm:text-2xl">
               {item.name}
             </h3>
-            <span className="text-xs text-gray-500 shrink-0 tabular-nums">
-              {formatDate(item.lastUpdated)}
-            </span>
+            {showDate && (
+              <span className="text-xs text-gray-500 shrink-0 tabular-nums">
+                {formatRelativeDate((item as Campaign).startDate ?? item.lastUpdated)}
+              </span>
+            )}
           </div>
           <p className="text-sm text-gray-300 font-serif mt-0.5 line-clamp-2 sm:line-clamp-4">
             {item.shortDescription}
@@ -304,6 +318,7 @@ export function CategoryContent({
   const sorted = useMemo(() => sortItems(filtered, sort), [filtered, sort]);
   const baseHref = BASE_HREFS[type];
   const preferLogo = type === "app";
+  const showDate = type !== "app";
 
   return (
     <div>
@@ -353,6 +368,7 @@ export function CategoryContent({
               item={item}
               href={`${baseHref}/${item.slug}`}
               preferLogo={preferLogo}
+              showDate={showDate}
             />
           ))}
         </div>

src/components/layouts/DetailPageLayout.tsx

@@ -37,19 +37,13 @@ export function Breadcrumb({ href, label }: BreadcrumbProps) {
 interface HeroImageProps {
   src: string;
   alt: string;
-  readTime?: number;
 }
 
-export function HeroImage({ src, alt, readTime }: HeroImageProps) {
+export function HeroImage({ src, alt }: HeroImageProps) {
   return (
     <div className="h-64 md:h-80 bg-gray-950 relative overflow-hidden">
       <Image src={src} alt={alt} fill sizes="100vw" className="object-cover" />
       <div className="absolute inset-0 bg-linear-to-t from-gray-950 to-transparent" />
-      {readTime !== undefined && (
-        <div className="absolute top-4 right-4 bg-gray-900 backdrop-blur-sm text-gray-200 px-3 py-1.5 rounded-md">
-          {readTime} min read
-        </div>
-      )}
     </div>
   );
 }