From f51ee4bd79fb78a6ce8d40ae638d8ae4a71e1645 Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Mon, 7 Aug 2023 19:58:03 +0100
Subject: [PATCH] Include all discovered past events on past-events page The
 past-events page automatically discovers all past events, and now decorates
 them with the metadata found in PastEventsList. This means that when a new
 past event is added with link-to-the-past, it will automatically appear on
 the past-events page with default metadata, and can then be given its own
 nice picture and the like when desired by editing PastEventsList. This is
 relevant to an issue brought up by @mattandrews in PR #40.

---
 src/components/PastEventsList.jsx | 44 +++++++++++++++++++------------
 src/pages/past-events.jsx         |  2 +-
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/components/PastEventsList.jsx b/src/components/PastEventsList.jsx
index bdc4782..8953b25 100644
--- a/src/components/PastEventsList.jsx
+++ b/src/components/PastEventsList.jsx
@@ -1,27 +1,37 @@
-const pastEvent = [
-  {
-    id: 1,
-    title: 'The inaguural TechMids Conf',
-    href: '/past/2022-10/index.html',
-    imageUrl:
-        '/gallery/audience.jpg',
-    date: 'Friday 14th Oct 2022',
-    slug: '2022-10',
+const pastEventMetadata = {
+  "2022-10": {
+    title: 'The inaugural TechMids Conf',
+    imageUrl: '/gallery/audience.jpg',
+    niceDate: 'Friday 14th Oct 2022'
   },
-  {
-    id: 2,
+  "2023-06": {
     title: 'TechMids co-located with DevOpsDays Birmingham',
-    href: '/past/2023-06/index.html',
-    date: 'Thursday & Friday 15th & 16th June 2023',
     imageUrl: '/gallery/millenium-point.jpg',
-    slug: '2023-06',
+    niceDate: 'Thursday & Friday 15th & 16th June 2023',
   }
   // More past events...
-]
+}
 
 
 export function PastEventsList({past_events}) {
 
+  // The past events list is created by pages/past-events.jsx
+  // However, it doesn't have all the neat imagery and metadata
+  // The imagery and metadata is in the pastEvent object, above
+  // A newly added past event will therefore show up on this page,
+  // but won't have all the cool metadata until that is added to
+  // the pastEvent object above, which needs to be done manually.
+  // So we combine a default object, the object from the past-events
+  // page, and any data from the pastEventMetadata to make the final
+  // collection of info for each event.
+
+  const combinedPastEvents = past_events.map((pe, idx) => {
+    return Object.assign({
+      id: idx,
+      imageUrl: '/gallery/audience.jpg'
+    }, pe, pastEventMetadata[pe.slug] || {})
+  });
+
   return (
     <div className="relative overflow-hidden bg-white py-16">
       <div className="hidden lg:absolute lg:inset-y-0 lg:block lg:h-full lg:w-full">
@@ -136,7 +146,7 @@ export function PastEventsList({past_events}) {
             </p>
           </div>
           <div className="flex place-content-around mx-auto mt-16 max-w-2xl auto-rows-fr gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-            {pastEvent.map((post) => (
+            {combinedPastEvents.map((post) => (
                 <article
                     key={post.id}
                     className="w-1/2 relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80"
@@ -147,7 +157,7 @@ export function PastEventsList({past_events}) {
 
                   <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
                     <time dateTime={post.datetime} className="mr-8">
-                      {post.date}
+                      {post.niceDate || post.date}
                     </time>
                     <div className="-ml-4 flex items-center gap-x-4">
                     </div>
diff --git a/src/pages/past-events.jsx b/src/pages/past-events.jsx
index f1ba4bb..2e4acce 100644
--- a/src/pages/past-events.jsx
+++ b/src/pages/past-events.jsx
@@ -34,7 +34,7 @@ export const getStaticProps = async () => {
     return {
       slug: dirent.name,
       title: `${monthname || month} ${year}`,
-      link: `past/${dirent.name}/index.html`
+      href: `past/${dirent.name}/index.html`
     }
   })
   return {props: {past_events: past_sites}}