Merge pull request #677 from datum-cloud/style/last-update

chore: lastupdate component handbook

Author: felixwidjaja

package-lock.json

@@ -1,4 +1,5 @@
 ---
+// src/components/handbook/Article.astro
 import { getCollection, getEntry, render } from 'astro:content';
 import { Breadcrumbs } from 'astro-breadcrumbs';
 import Sidebar from '@components/handbook/Sidebar.astro';
@@ -234,7 +235,12 @@ handbooks.forEach((collection) => {
         </div>
 
         {/* Navigation */}
-        <PageNav currentArticleId={articleId} categories={categories} items={items} />
+        <PageNav
+          currentArticleId={articleId}
+          categories={categories}
+          items={items}
+          lastUpdated={mainArticleEntry?.data.lastUpdated}
+        />
       </article>
 
       <aside class="handbook-toc">

src/components/handbook/Article.astro

@@ -0,0 +1,24 @@
+---
+import { formatLongDate, formatISODate } from '@utils/dateUtils';
+
+interface LastUpdatedProps {
+  date?: Date;
+}
+
+const { date } = Astro.props as LastUpdatedProps;
+
+if (!date) {
+  return null;
+}
+
+const formattedDate = formatLongDate(date);
+const dateTime = formatISODate(date);
+---
+
+{
+  date && (
+    <p class="last-updated">
+      Last updated: <time datetime={dateTime}>{formattedDate}</time>
+    </p>
+  )
+}

src/components/handbook/LastUpdated.astro

@@ -1,15 +1,19 @@
 ---
+// src/components/handbook/PageNav.astro
 import ArticleNavigation from '@components/ArticleNavigation.astro';
+import LastUpdated from '@components/handbook/LastUpdated.astro';
 import type { SidebarItems } from '@/src/types/common';
 
 const {
   currentArticleId,
   items,
+  lastUpdated,
   class: className,
 } = Astro.props as {
   currentArticleId: string;
   class?: string;
   items: SidebarItems[];
+  lastUpdated?: Date;
 };
 
 const handbookItems: Array<{ id: string; data: { title: string } }> = [];
@@ -32,20 +36,25 @@ const nextArticle =
   currentIndex < handbookItems.length - 1 ? handbookItems[currentIndex + 1] : undefined;
 ---
 
-<ArticleNavigation
-  previousArticle={previousArticle
-    ? {
-        id: previousArticle.id,
-        title: previousArticle.data.title,
-        url: `/handbook/${previousArticle.id}/`,
-      }
-    : undefined}
-  nextArticle={nextArticle
-    ? {
-        id: nextArticle.id,
-        title: nextArticle.data.title,
-        url: `/handbook/${nextArticle.id}/`,
-      }
-    : undefined}
-  class={className}
-/>
+{/* Last Updated */}
+<footer id="footer-article" class="article-footer">
+  {lastUpdated && <LastUpdated date={lastUpdated} />}
+
+  <ArticleNavigation
+    previousArticle={previousArticle
+      ? {
+          id: previousArticle.id,
+          title: previousArticle.data.title,
+          url: `/handbook/${previousArticle.id}/`,
+        }
+      : undefined}
+    nextArticle={nextArticle
+      ? {
+          id: nextArticle.id,
+          title: nextArticle.data.title,
+          url: `/handbook/${nextArticle.id}/`,
+        }
+      : undefined}
+    class={className}
+  />
+</footer>

src/components/handbook/PageNav.astro

@@ -188,6 +188,7 @@ const handbooks = defineCollection({
       draft: z.boolean().optional(),
       readingTime: z.string().optional(),
       updatedDate: z.string().optional(),
+      lastUpdated: z.date().optional(),
       authors: z.string().optional(),
       sidebar: z.object({
         label: z.string().optional(),

src/content.config.ts

@@ -1,5 +1,6 @@
 ---
 title: Code of conduct
+lastUpdated: 2025-12-04
 sidebar:
   label: Code of conduct
   order: 1

src/content/handbook/policy/code-of-conduct.md

@@ -279,6 +279,19 @@
     @apply mt-10 flex flex-col gap-4 md:mt-14 md:flex-row;
   }
 
+  .article-footer {
+    @apply mt-10 md:mt-14;
+    @apply flex flex-col gap-6;
+    .article-nav {
+      @apply mt-0 md:mt-0;
+    }
+
+    .last-updated {
+      @apply datum-text-sm mb-0 text-right;
+      @apply text-midnight-fjord;
+    }
+  }
+
   .article-nav-item {
     @apply hover:text-midnight-fjord/80 text-midnight-fjord border-midnight-fjord hover:bg-midnight-fjord/5 hover:border-midnight-fjord/80;
     @apply w-full gap-2 border transition-colors duration-200;