From 0fe7e8bce109d662bcf5ffb93a93d76cfa350ecd Mon Sep 17 00:00:00 2001
From: Francis Turmel <fturmel@gmail.com>
Date: Thu, 24 Nov 2022 09:36:23 -0500
Subject: [PATCH 1/2] generate topbar component date client-side only

---
 src/components/TopBar.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index d63b58604..ef4b93bb0 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'gatsby';
 
 import Menu from './Menu';
@@ -39,7 +39,18 @@ const longDate = (date) => {
 };
 
 const TopBar = () => {
-  const today = new Date();
+  const [date, setDate] = useState({ long: '', short: '' });
+
+  useEffect(() => {
+    // Runs client-side only, the date should not be captured at build time during SSG
+
+    const today = new Date();
+    setDate({
+      long: longDate(today),
+      short: shortDate(today)
+    });
+  }, []);
+
   return (
     <div className={css.outer}>
       <header className={css.root}>
@@ -50,8 +61,8 @@ const TopBar = () => {
         </div>
         <div className={css.clock}>🕛</div>
         <div className={css.date}>
-          <span className={css.longDate}>{longDate(today)}</span>
-          <span className={css.shortDate}>{shortDate(today)}</span>
+          <span className={css.longDate}>{date.long}</span>
+          <span className={css.shortDate}>{date.short}</span>
         </div>
         <Menu />
       </header>

From 15267aa7ecef11669e2ab8da70a9bda2fe59b537 Mon Sep 17 00:00:00 2001
From: Francis Turmel <fturmel@gmail.com>
Date: Tue, 29 Nov 2022 08:49:59 -0500
Subject: [PATCH 2/2] Fix react-select instanceId to fix their html output.
 Default behavior impredictably increments the value during build.

---
 src/components/ItemsPage.js | 2 ++
 src/components/Select.js    | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ItemsPage.js b/src/components/ItemsPage.js
index c29e62b29..0aebfa0c3 100644
--- a/src/components/ItemsPage.js
+++ b/src/components/ItemsPage.js
@@ -129,6 +129,7 @@ const ItemsPage = ({
           selected={selectedLanguage}
           onChange={setSelectedLanguage}
           variant={variant}
+          instanceId="languages-filter"
         />
 
         <Select
@@ -140,6 +141,7 @@ const ItemsPage = ({
           selected={selectedTopic}
           onChange={setSelectedTopic}
           variant={variant}
+          instanceId="topics-filter"
         />
       </div>
 
diff --git a/src/components/Select.js b/src/components/Select.js
index c4d568c38..9c9a39be0 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -14,7 +14,8 @@ export const Select = ({
   onChange,
   icon,
   className,
-  variant
+  variant,
+  instanceId
 }) => {
   const opts = useMemo(() => options.map(toOption), [options]);
   const handleOnChange = (o, action) => onChange(o ? o.value : o);
@@ -38,6 +39,7 @@ export const Select = ({
             options={opts}
             defaultValue={selected ? toOption(selected) : selected}
             onChange={handleOnChange}
+            instanceId={instanceId}
           />
 
           <div className={css.itemSpacer}></div>