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; 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]} /> 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); });