Improve how dates are displayed 📅.

src/components/Card.astro

@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets'
-import FormattedYear from './FormattedYear.astro'
+import FormattedDate from './FormattedDate.astro'
 import Link from './Link.astro'
 import { useTranslations } from '@/i18n'
 
@@ -9,14 +9,14 @@ const t = useTranslations()
 interface Props {
   index?: number // The index of the card in the list.
   title: string
-  year?: number | string
+  date?: number | string
   description: string
   imgSrc?: ImageMetadata | string // @todo Fix the error message.
   imgType?: string
   href?: string
 }
 
-const { index, title, year, description, imgSrc, imgType, href } = Astro.props
+const { index, title, date, description, imgSrc, imgType, href } = Astro.props
 ---
 
 <div
@@ -38,11 +38,11 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
           format={imgType === 'pixelated' ? 'png' : 'webp'}
           loading={index !== undefined && index <= 1 ? 'eager' : 'lazy'}
         />
-        {year && (
+        {date && (
           <dl>
             <dt class="sr-only">{t('components.cards.publishedIn')}</dt>
             <dd class="text-sm py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
-              <FormattedYear {year} />
+              <FormattedDate {date} />
             </dd>
           </dl>
         )}
@@ -80,11 +80,11 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
         </Link>
       )
     }
-    {!imgSrc &&year && (
+    {!imgSrc && date && (
       <dl>
         <dt class="sr-only">{t('components.cards.publishedIn')}</dt>
         <dd class="text-sm py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
-          <FormattedYear {year} />
+          <FormattedDate {date} />
         </dd>
       </dl>
     )}

src/components/FormattedDate.astro

@@ -4,12 +4,52 @@ import { useTranslations } from '@/i18n'
 const t = useTranslations()
 
 interface Props {
-  date: Date
+  date: Date | number | string
 }
 
 const { date } = Astro.props
+
+const locale = t('siteMetadata.language')
+let numericDate = ''
+let localisedDate = ''
+
+if (date instanceof Date) {
+  numericDate = date.toISOString().substring(0, 10)
+  localisedDate = date.toLocaleDateString(locale, {
+    dateStyle: 'long',
+  })
+} else if (typeof date === 'number') {
+  numericDate = String(date)
+  localisedDate = new Date(date, 0, 1).toLocaleDateString(locale, {
+    year: 'numeric',
+  })
+} else if (typeof date === 'string') {
+  let [year, month, day] = date.split('-').map((s) => parseInt(s, 10))
+  if (typeof month === 'number') {
+    month--
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+  }
+  let substring = 4
+
+  if (typeof month === 'number') {
+    options['month'] = 'long'
+    substring = 7
+  }
+
+  if (typeof day === 'number') {
+    options['day'] = 'numeric'
+    substring = 10
+  }
+
+  const dateObj = new Date(year, month || 0, day || 1)
+  numericDate = dateObj.toISOString().substring(0, substring)
+  localisedDate = dateObj.toLocaleDateString(locale, options)
+}
 ---
 
-<time datetime={date.toISOString().substring(0, 10)}>
-  {date.toLocaleDateString(t('siteMetadata.language'), { dateStyle: 'long' })}
+<time datetime={numericDate}>
+  {localisedDate}
 </time>

src/pages/apps.astro

@@ -12,23 +12,23 @@ const t = useTranslations()
 const data = [
   {
     title: 'Kim Magikal ⭐ at Saraland ⭐',
-    year: 2017,
+    date: 2017,
     description: `A cute retro platform game I made with Pico-8. You can play Kim Magikal ⭐ at Saraland ⭐ online for free.`,
     imgSrc: '/img/apps/kim-magikal-at-saraland.png',
     imgType: 'pixelated',
     href: 'https://edo999.itch.io/kim-magikal',
   },
   {
     title: 'Maniac Mansion Mobile',
-    year: 2015,
+    date: 2015,
     description: `The famous NES point'n click game optimised for touch screen. "Warning!! Trespassers will be horribly mutilated".`,
     imgSrc: '/img/apps/maniac-mansion-mobile.png',
     imgType: 'pixelated',
     href: 'https://maniac-mansion-mobile.5apps.com/',
   },
   {
     title: 'Alec',
-    year: 2013,
+    date: 2013,
     description: `Emulator for Sega Master System & Game Gear optimised for low-end mobile devices. It comes with some homebrew games builtin.`,
     imgSrc: AlecImg,
     // imgType: 'pixelated',
@@ -55,11 +55,11 @@ const data = [
     <div class="grid md:grid-cols-2 gap-8">
       {
         data.map(
-          ({ title, year, description, imgSrc, imgType, href }, index) => (
+          ({ title, date, description, imgSrc, imgType, href }, index) => (
             <Card
               {index}
               {title}
-              {year}
+              {date}
               {description}
               {imgSrc}
               {imgType}

src/pages/meetups.astro

@@ -10,37 +10,37 @@ const t = useTranslations()
 const data = [
   {
     title: 'An evening of Tiny Talks',
-    year: 2019,
+    date: '2019-11-19',
     description: `Meetup made of tiny talks related to web technologies, centred around underrepresented groups in the tech industry. Co-organised with Matt Barnett-Jones.`,
     imgSrc: undefined,
   },
   {
     title: 'Week of wellbeing',
-    year: 'June 2018',
-    description: `Internal event held at Twitter during Hackweek to sponsor wellbeing with sessions on sleep, nutrition, mental health and yoga. Co-organised with Chelsea Hipwood.`,
+    date: '2018-06',
+    description: `Internal Hackweek event held at Twitter to sponsor wellbeing with sessions from external speakers on sleep, nutrition, mental health, coaching and yoga. Co-organised with Chelsea Hipwood.`,
     imgSrc: undefined,
   },
   {
     title: 'Mozilla IOT Meetup',
-    year: 2016,
+    date: 2016,
     description: `A series of meetups to explore the IOT space with an emphasis on inspiring and diverse speakers rather than technical presentations.`,
     imgSrc: undefined,
   },
   {
     title: 'Firefox OS workshop',
-    year: 2015, // September
+    date: '2015-09',
     description: `A workshop to introduce tech people to Firefox OS. Given at JS Conf EU.`,
     imgSrc: undefined,
   },
   {
     title: 'Firefox OS meetup',
-    year: 2015,
+    date: 2015,
     description: `Meetups to socialise and discover the web technologies through the lens of Firefox OS.`,
     imgSrc: undefined,
   },
   {
     title: 'Want to organise your own meetup?',
-    description: `I wrote about what you need to organise a meetup or social event.`,
+    description: `I wrote a guide about what you need to organise a meetup or social event.`,
     imgSrc: organiseMeetupImg,
     imgType: 'default',
     href: '/posts/how-to-organise-a-meetup',
@@ -66,11 +66,11 @@ const data = [
     <div class="grid md:grid-cols-2 gap-8">
       {
         data.map(
-          ({ title, year, description, imgSrc, imgType, href }, index) => (
+          ({ title, date, description, imgSrc, imgType, href }, index) => (
             <Card
               {index}
               {title}
-              {year}
+              {date}
               {description}
               {imgSrc}
               {imgType}

src/pages/talks.astro

@@ -8,38 +8,38 @@ const t = useTranslations()
 const data = [
   {
     title: 'RxJS in TweetDeck (JS Roundabout #7)',
-    year: 2018,
+    date: '2018-11',
     description: `What are observable in JavaScript and how we use them at TweetDeck? This talk was co-presented with my teammate Amy Simmons.`,
     imgSrc: undefined,
     imgType: undefined,
     href: 'https://www.youtube.com/watch?v=vKrVjJKm4MI',
   },
   {
     title: 'Crash course in compile-to-the-web (MLOC.js)',
-    year: 2015,
+    date: '2015-06',
     description: `It's 2015. The web is omnipresent and omnipotent, and yet some vendors continue to ship proprietary formats and software. But vendor lock-in doesn't have to be a fatality. Many techniques are available to run almost anything on our beloved browser.`,
     // imgSrc: null,
     href: 'https://gmarty.github.io/2015-06-MLOC.js/',
   },
   {
     title:
       'Je viens du futur et voici comment on code en JavaScript (JavaScript Open Day)',
-    year: 2015,
+    date: '2015-03',
     description: `This talk walks through using modern JavaScript syntax in the Firefox OS codebase. Since the code is written to be ran in a specific environment, there is no need to support other browsers. You'll see sample of how you will write modern syntax JavaScript in the future. This talk was delivered in French.`,
     // imgSrc: null,
     href: 'https://gmarty.github.io/2015-03-JavaScript-Open-Day-1/',
   },
   {
     title:
       'Playing DVD in JavaScript for the sake of interoperability (JSConf US)',
-    year: 2014,
+    date: '2014-05',
     description: `We have everything we need to read DVD-video discs in a browser, so why don't we start? For that purpose, I ported libdvdread and libdvdnav libraries to JavaScript so that we can parse the DVD-video info files and emulate a virtual machine. The resulting project is a mix of websockets, video elements, media source extensions and a lot of open source love.`,
     // imgSrc: null,
     href: 'https://www.youtube.com/watch?v=lb-8euLqfRg',
   },
   {
     title: '60 FPS Retro Gaming on Mobile (Reject.JS)',
-    year: 2013,
+    date: '2013-09',
     description: `Born as an interpreter, jsSMS is now a hybrid emulator for Sega Master System and Game Gear. It makes use of static and dynamic recompilation, and falls back to a classical interpreter if required. From parsing to JavaScript generation using an optimised AST, I present the different steps that makes an emulator fast. The ultimate goal is to provide full speed for retro gaming on mobile browser and web app!`,
     // imgSrc: null,
     href: 'https://www.youtube.com/watch?v=Ey2TGjLTYuw',
@@ -65,11 +65,11 @@ const data = [
     <div class="grid md:grid-cols-2 gap-8">
       {
         data.map(
-          ({ title, year, description, imgSrc, imgType, href }, index) => (
+          ({ title, date, description, imgSrc, imgType, href }, index) => (
             <Card
               {index}
               {title}
-              {year}
+              {date}
               {description}
               {imgSrc}
               {imgType}