feat: add post update time

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

@@ -1,11 +1,15 @@
-import { posts } from "#site/content";
-import { MDXContent } from "@/components/mdx-components";
+import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { Calendar } from "lucide-react";
+import { posts } from "#site/content";
 
-import "@/styles/mdx.css";
-import { Metadata } from "next";
 import { siteConfig } from "@/config/site";
+import { formatDate } from "@/lib/utils";
+import { MDXContent } from "@/components/mdx-components";
 import { Tag } from "@/components/tag";
+import { Icons } from "@/components/icons";
+
+import "@/styles/mdx.css";
 
 
 interface PostPageProps {
@@ -82,8 +86,22 @@ export default async function PostPage({ params }: PostPageProps) {
         ))}
       </div>
       {post.description ? (
-        <p className="text-xl mt-0 text-muted-foreground">{post.description}</p>
+        <p className="text-xl mt-0 mb-2 text-muted-foreground">
+          {post.description}
+        </p>
       ) : null}
+      <div className="flex gap-6">
+        <div className="flex items-center gap-1">
+          <Calendar className="h-4 w-4" />
+          <time dateTime={post.date}>{formatDate(post.date)}</time>
+        </div>
+        {post.update && post.date !== post.update && (
+          <div className="flex items-center gap-1">
+            <Icons.penToSquare className="h-4 w-4" />
+            <time dateTime={post.update}>{formatDate(post.update)}</time>
+          </div>
+        )}
+      </div>
       <hr className="my-4" />
       <MDXContent code={post.body} />
     </article>

app/blog/page.tsx

@@ -52,12 +52,12 @@ export default async function BlogPage({ searchParams }: BlogPageProps) {
           {displayPosts?.length > 0 ? (
             <ul className="flex flex-col">
               {displayPosts.map((post) => {
-                const { slug, date, title, description, tags } = post;
+                const { slug, date, update, title, description, tags } = post;
                 return (
                   <li key={slug}>
                     <PostItem
                       slug={slug}
-                      date={date}
+                      date={update || date}
                       title={title}
                       description={description}
                       tags={tags}

app/page.tsx

@@ -55,7 +55,7 @@ export default function Home() {
                 slug={post.slug}
                 title={post.title}
                 description={post.description}
-                date={post.date}
+                date={post.update || post.date}
                 tags={post.tags}
               />
             </li>

components/icons.tsx

@@ -17,6 +17,14 @@ export const Icons = {
       <circle cx="5" cy="19" r="1" />
     </svg>
   ),
+  penToSquare: (props: IconProps) => (
+    <svg viewBox="0 0 512 512" {...props}>
+      <path
+        fill="currentColor"
+        d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"
+      />
+    </svg>
+  ),
   location: (props: IconProps) => (
     <svg viewBox="0 0 384 512" {...props}>
       <path
@@ -25,6 +33,7 @@ export const Icons = {
       />
     </svg>
   ),
+
   building: (props: IconProps) => (
     <svg viewBox="0 0 384 512" {...props}>
       <path

components/post-item.tsx

@@ -43,9 +43,10 @@ export function PostItem({
         </dl>
         <Link
           href={"/" + slug}
-          className={cn(buttonVariants({ variant: "link" }), "py-0")}
+          className={cn(buttonVariants({ variant: "link" }), "py-0 gap-1 group hover:no-underline")}
         >
-          Read more →
+          Read more
+          <span className="font-bold group-hover:translate-x-1 duration-300">→</span>
         </Link>
       </div>
     </article>

lib/utils.ts

@@ -19,8 +19,11 @@ export function formatDate(input: string | number): string {
 
 export function sortPosts(posts: Array<Post>) {
   return posts.sort((a, b) => {
-    if (a.date > b.date) return -1;
-    if (a.date < b.date) return 1;
+    const aDate = a.update || a.date;
+    const bDate = b.update || b.date;
+
+    if (aDate > bDate) return -1;
+    if (aDate < bDate) return 1;
     return 0;
   });
 }

velite.config.ts

@@ -18,6 +18,7 @@ const posts = defineCollection({
       title: s.string().max(99),
       description: s.string().max(999).optional(),
       date: s.isodate(),
+      update: s.isodate().optional(),
       published: s.boolean().default(true),
       tags: s.array(s.string()).optional(),
       body: s.mdx()