From 8fc133f1f1a1b04896874bd366b8f787ba06093a Mon Sep 17 00:00:00 2001 From: Dan Gibbs Date: Mon, 4 May 2026 15:24:57 +0100 Subject: [PATCH 1/3] feat: add date support to card component --- src/components/Block/Card.astro | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/components/Block/Card.astro b/src/components/Block/Card.astro index 541ccd0..569a098 100644 --- a/src/components/Block/Card.astro +++ b/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; --- @@ -41,6 +50,13 @@ const { icon = null, tag = null, heading = null, summary = null, uri = '/' } = A {heading} + { + date && date instanceof Date && ( +

+ {DateTime.fromISO(date.toISOString(), { locale: 'en-GB' }).toFormat('d LLL, yyyy')} +

+ ) + }

{summary}

@@ -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; From 248dce80a001bfeff1f15d4c07d867d96f50cf87 Mon Sep 17 00:00:00 2001 From: Dan Gibbs Date: Mon, 4 May 2026 15:25:33 +0100 Subject: [PATCH 2/3] feat: add date to blog post cards --- src/pages/blog.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/blog.astro b/src/pages/blog.astro index f4d9c12..089f1cd 100644 --- a/src/pages/blog.astro +++ b/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]} /> From 5dfd2e97c669b5f51bd7590ec28b82276b91efec Mon Sep 17 00:00:00 2001 From: Dan Gibbs Date: Mon, 4 May 2026 15:39:04 +0100 Subject: [PATCH 3/3] fix: blog post test selector including card date --- tests/spec/blog.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/spec/blog.spec.ts b/tests/spec/blog.spec.ts index 6143b38..ca6ad05 100644 --- a/tests/spec/blog.spec.ts +++ b/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); });