Add last updated to blog posts

src/markdoc/layouts/Post.svelte

@@ -19,6 +19,7 @@
     export let timeToRead: string;
     export let cover: string;
     export let category: string;
+    export let lastUpdated: string;
 
     const authors = getContext<AuthorData[]>('authors');
     const authorData = authors.find((a) => a.slug === author);
@@ -231,6 +232,15 @@
                             {/if}
 
                             <div class="web-article-content u-margin-block-start-32">
+                                {#if lastUpdated}
+                                    <span class="web-main-body-500 last-updated-text">
+                                        Updated:
+                                        <time dateTime={lastUpdated}>
+                                            {formatDate(lastUpdated)}
+                                        </time>
+                                    </span>
+                                {/if}
+
                                 <slot />
                             </div>
                         </article>
@@ -315,4 +325,8 @@
         font-size: 24px;
       }
     }
+
+    .last-updated-text {
+        color: var(--primary, #e4e4e7);
+    }
 </style>

src/routes/blog/+page.ts

@@ -23,6 +23,7 @@ export function load() {
                 description: frontmatter.description,
                 featured: frontmatter?.featured ?? false,
                 date: new Date(frontmatter.date),
+                lastUpdated: new Date(frontmatter.lastUpdated),
                 cover: frontmatter.cover,
                 timeToRead: frontmatter.timeToRead,
                 author: frontmatter.author,

src/routes/blog/content.ts

@@ -20,6 +20,7 @@ export type PostsData = {
     title: string;
     description: string;
     date: Date;
+    lastUpdated: Date;
     cover: string;
     timeToRead: number;
     author: string;
@@ -51,6 +52,7 @@ export const posts = Object.entries(postsGlob)
             title: frontmatter.title,
             description: frontmatter.description,
             date: new Date(frontmatter.date),
+            lastUpdated: new Date(frontmatter.lastUpdated),
             cover: frontmatter.cover,
             timeToRead: frontmatter.timeToRead,
             author: frontmatter.author,

src/routes/blog/post/announcing-init-faster-smoother-better/+page.markdoc

@@ -3,6 +3,7 @@ layout: post
 title: "Announcing: A new Init. Faster. Smoother. Better."
 description: Init is about to begin, and we’re bringing you many new features and products to be excited about. Experience everything new with Appwrite during the week of August 19 to 23.
 date: 2024-08-07
+lastUpdated: 2024-08-10
 cover: /images/blog/announcing-init-faster-smoother-better/init-cover.png
 timeToRead: 4
 author: eldad-fux