feat(kb) - add optional, formatted date field to schema (#51271)

## Problem

LLMs especially are looking for freshness signals such as `published`
dates, especially high up in the content body.

## Solution

Adds a new date field in the schema and then conditionally renders it
within the GuideLayout template.

## Preview links


https://kb-git-kody-market-2505-guide-layout-date-formatted-supabase.vercel.app/kb/guides/sample-guide

<img width="1112" height="481" alt="image"
src="https://github.com/user-attachments/assets/e87fabaa-e5ec-47d4-9780-9e7fe90e16fb"
/>

apps/kb/src/content.config.ts

@@ -4,6 +4,19 @@ import { z } from 'astro/zod'
 
 import { TOPIC_NAMES } from './lib/topics'
 
+// Format date as "26 SEPTEMBER 2026"
+const formatDate = (date: Date): string => {
+  // Adjust for timezone offset to preserve the intended date
+  const adjusted = new Date(date.getTime() + date.getTimezoneOffset() * 60000)
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+    .format(adjusted)
+    .toUpperCase()
+}
+
 // Every entry here is rendered through GuideLayout by
 // src/pages/guides/[...slug].astro — dropping a new file in
 // src/content/guides doesn't need any per-file layout wiring.
@@ -18,6 +31,10 @@ const guides = defineCollection({
     // Surfaces the guide in the homepage's "Featured Guides" section.
     pinned: z.boolean().default(false),
     github_url: z.string().optional(),
+    date: z
+      .date()
+      .optional()
+      .transform((date) => (date ? formatDate(date) : undefined)),
   }),
 })
 

apps/kb/src/content/guides/sample-guide.mdx

@@ -4,6 +4,7 @@ description: 'A lorem ipsum sample guide exercising every base Markdown element
 topics: ['Tutorial', 'Database']
 pinned: true
 github_url: 'https://github.com/supabase/supabase/discussions/0000000'
+date: 2026-10-05
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor

apps/kb/src/layouts/GuideLayout.astro

@@ -10,14 +10,16 @@ interface Props {
 	description?: string
 	topics?: Topic[]
 	github_url?: string
+	date?: string
 }
 
-const { title, description, topics = [], github_url } = Astro.props
+const { title, description, topics = [], github_url, date } = Astro.props
 ---
 
 <Layout title={title} description={description}>
 	<article class="prose max-w-3xl mx-auto px-6 py-16">
 		<h1>{title}</h1>
+		{date && <p class="text-sm pb-4">{date}</p>}
 		{description && <p class="lead">{description}</p>}
 		{
 			topics.length > 0 && (

apps/kb/src/pages/guides/[...slug].astro

@@ -13,10 +13,10 @@ export async function getStaticPaths() {
 }
 
 const { guide } = Astro.props
-const { title, description, topics, github_url } = guide.data
+const { title, description, topics, github_url, date } = guide.data
 const { Content } = await render(guide)
 ---
 
-<GuideLayout title={title} description={description} topics={topics} github_url={github_url}>
+<GuideLayout title={title} description={description} topics={topics} github_url={github_url} date={date}>
 	<Content components={{ Admonition }} />
 </GuideLayout>