feat: add card date support

src/components/Block/Card.astro

@@ -1,16 +1,25 @@
 ---
 import { env } from '@src/env.config';
 import Logo from '@components/Block/LogoIcon.astro';
+import { DateTime } from 'luxon';
 
 interface Props {
 	icon?: string;
 	tag?: string;
+	date?: Date;
 	heading: string;
 	summary: string;
 	uri: string;
 }
 
-const { icon = null, tag = null, heading = null, summary = null, uri = '/' } = Astro.props;
+const {
+	icon = null,
+	tag = null,
+	date = null,
+	heading = null,
+	summary = null,
+	uri = '/',
+} = Astro.props;
 ---
 
 <x-card class="card">
@@ -41,6 +50,13 @@ const { icon = null, tag = null, heading = null, summary = null, uri = '/' } = A
 				{heading}
 			</a>
 		</h2>
+		{
+			date && date instanceof Date && (
+				<p class="card-date">
+					{DateTime.fromISO(date.toISOString(), { locale: 'en-GB' }).toFormat('d LLL, yyyy')}
+				</p>
+			)
+		}
 		<p>{summary}</p>
 	</div>
 </x-card>
@@ -85,6 +101,11 @@ const { icon = null, tag = null, heading = null, summary = null, uri = '/' } = A
 		}
 	}
 
+	.card-date {
+		margin-top: calc(var(--space-3) * -0.75);
+		margin-bottom: calc(var(--space-3) * 0.75);
+	}
+
 	.card-preview {
 		position: relative;
 		overflow: hidden;

src/pages/blog.astro

@@ -45,6 +45,7 @@ const featured = posts.shift();
 						heading={post.data.title}
 						summary={post.data.summary}
 						uri={`blog/${post.uid}`}
+						date={new Date(post.data.date) || null}
 						tag={post.tags[0]}
 						icon={post.tags[0]}
 					/>

tests/spec/blog.spec.ts

@@ -27,7 +27,7 @@ test.describe('Blog page', () => {
 		const datetime = await time.getAttribute('datetime');
 		expect(isNaN(Date.parse((datetime || '').toString()))).toBe(false);
 
-		const summary = first.locator('p');
+		const summary = first.locator('p:not(.card-date)');
 		await expect(summary).toBeVisible();
 		expect((await summary.textContent())?.length ?? 0).toBeGreaterThan(20);
 	});