add: Last Edited Date

Author: cocdeshijie

app/articles/[...slug]/page.tsx

@@ -62,7 +62,7 @@ const ArticlePage = ({ params }: ArticlePageProps) => {
             <div className={"min-h-screen backdrop-blur-3xl bg-slate-50/50 dark:bg-gray-800/70"}>
                 <div className={"flex min-h-[200px] md:min-h-[300px] rounded-b-2xl overflow-hidden"}
                      style={{backgroundImage: 'url(' + article.image +')', backgroundSize: 'cover'}}>
-                    <ArticlesPageHeading title={article.title} date={article.date} tags={article.tags}/>
+                    <ArticlesPageHeading article={article}/>
                 </div>
                 <div className={cn(
                     "pb-8 mx-4 md:mx-auto lg:px-4",

components/Tags.tsx

@@ -1,20 +1,55 @@
 import { cn } from "@/lib/utils";
-import { format, parseISO } from "date-fns";
+import { parseISO, differenceInDays, format } from 'date-fns';
+import * as Tooltip from "@radix-ui/react-tooltip";
 import { HiHashtag } from "react-icons/hi";
 import Link from "next/link";
 
 type DateTagProps = {
     date: string;
+    lastEdited: string;
 }
 
-export function DateTag({ date }: DateTagProps) {
+export function DateTag({ date, lastEdited }: DateTagProps) {
+    const parsedDate = parseISO(date);
+    const parsedLastEdited = parseISO(lastEdited);
+    const daysDifference = differenceInDays(parsedLastEdited, parsedDate);
+
+    if (daysDifference > 1) {
+        return (
+            <Tooltip.Provider>
+                <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                        <div className={"bg-accent_color/50 dark:bg-accent_color-dark/70 rounded-md"}>
+                            <div className={"text-xs py-1 px-2"} suppressHydrationWarning={true}>
+                                Posted on {format(parsedDate, 'LLLL d, yyyy')} (Edited)
+                            </div>
+                        </div>
+                    </Tooltip.Trigger>
+                    <Tooltip.Portal>
+                        <Tooltip.Content
+                            className="bg-accent_color/50 dark:bg-accent_color-dark/70 rounded-md"
+                            sideOffset={5}
+                            suppressHydrationWarning={true}
+                            side={"right"}
+                        >
+                            <div className={"text-xs py-1 px-2"} suppressHydrationWarning={true}>
+                                Last edited on {format(parsedLastEdited, 'LLLL d, yyyy')}
+                            </div>
+                            <Tooltip.Arrow className="fill-accent_color/50 dark:fill-accent_color-dark/70" />
+                        </Tooltip.Content>
+                    </Tooltip.Portal>
+                </Tooltip.Root>
+            </Tooltip.Provider>
+        )
+    }
+
     return (
         <div className={"bg-accent_color/50 dark:bg-accent_color-dark/70 rounded-md"}>
             <div className={"text-xs py-1 px-2"} suppressHydrationWarning={true}>
-                Posted on {format(parseISO(date), 'LLLL d, yyyy')}
+                Posted on {format(parsedDate, 'LLLL d, yyyy')}
             </div>
         </div>
-    )
+    );
 }
 
 export function NoTag() {

components/article/ArticleCard.tsx

@@ -45,7 +45,7 @@ export default function ArticleCard({ article, idx }: ArticleCardProps) {
 
             <div className="w-full md:w-5/12 p-4 lg:px-8">
                 <div className={"flex mb-2"}>
-                    <DateTag date={article.date}></DateTag>
+                    <DateTag date={article.date} lastEdited={article.lastEdited}/>
                 </div>
                 <div className={"flex mb-3"}>
                     {(() => {

components/article/ArticlesPageHeading.tsx

@@ -2,14 +2,15 @@
 
 import { motion } from "framer-motion";
 import { DateTag, NoTag, Tag } from "@/components/Tags";
+import { type Article } from "contentlayer/generated";
 
-interface ArticlePageHeadingProps {
-    title: string;
-    date: string;
-    tags?: string[];
+interface ArticlesPageHeadingProps {
+    article: Article; // Assuming you have a type named 'Article'
 }
 
-export default function ArticlesPageHeading({ title, date, tags }: ArticlePageHeadingProps) {
+export default function ArticlesPageHeading({ article }: ArticlesPageHeadingProps) {
+    const { title, date, lastEdited, tags } = article;
+
     let FADE_DOWN_ANIMATION_VARIANTS = {
         hidden: { opacity: 0, y: -10 },
         show: { opacity: 1, y: 0, transition: { type: "spring" } },
@@ -53,7 +54,7 @@ export default function ArticlesPageHeading({ title, date, tags }: ArticlePageHe
                         className={"flex mb-2"}
                         variants={FADE_DOWN_ANIMATION_VARIANTS}
                     >
-                        <DateTag date={date}/>
+                        <DateTag date={date} lastEdited={lastEdited}/>
                     </motion.div>
                     <motion.div
                         className={"flex"}

components/search/SearchResults.tsx

@@ -28,7 +28,7 @@ function ArticleCard({ article }: ArticleCardProps) {
                     {article.excerpt}
                 </p>
                 <div className={"flex space-x-1"}>
-                    <DateTag date={article.date} />
+                    <DateTag date={article.date} lastEdited={article.lastEdited}/>
                     {(() => {
                         if (!article.tags || article.tags.length === 0) {
                             return (

contentlayer.config.ts

@@ -3,6 +3,7 @@ import { remarkCodeHike } from "@code-hike/mdx";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings, { type Options as AutolinkOptions } from 'rehype-autolink-headings';
+import { execSync } from "child_process";
 
 const computedFields: ComputedFields = {
     slug: {
@@ -31,6 +32,20 @@ export const Article = defineDocumentType(() => ({
             type: 'string',
             resolve: (article) => article.image = article.image + "?r=" + Math.random(),
         },
+        lastEdited: {
+            type: 'string',
+            resolve: (article) => {
+                try {
+                    const filePath = `./content/${article._raw.flattenedPath}.mdx`;
+                    const dateStr = execSync(`git log -1 --format="%ad" -- ${filePath}`, {
+                        encoding: 'utf-8'
+                    });
+                    return new Date(dateStr).toISOString();
+                } catch (e) {
+                    return new Date(article.date).toISOString();
+                }
+            }
+        },
         ...computedFields,
     },
 }))

lib/utils.ts

@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 /** Utility function to merge Tailwind classes with clsx and tailwind-merge */
 export function cn(...inputs: ClassValue[]) {

package.json

@@ -29,6 +29,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-navigation-menu": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tailwindcss/typography": "^0.5.9",
     "@types/mdx": "^2.0.5",
     "@types/node": "20.2.5",