From 960c422aef8ec2580415add85ffda5e8dd1feab0 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:00:44 -0500
Subject: [PATCH 01/28] chore(typescript): add basic tsconfig.json

---
 tsconfig.json | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 tsconfig.json

diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..86483e00
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "esnext"],
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*", "./lib/**/*"]
+}

From 4692094b56583a30c2c43deee5b1eba2b79aee81 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:10:39 -0500
Subject: [PATCH 02/28] refactor(404): port typescript

---
 src/pages/404.js  | 27 ---------------------------
 src/pages/404.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 27 deletions(-)
 delete mode 100644 src/pages/404.js
 create mode 100644 src/pages/404.tsx

diff --git a/src/pages/404.js b/src/pages/404.js
deleted file mode 100644
index 9ffde8e0..00000000
--- a/src/pages/404.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import { Helmet, Layout } from "ui/partials";
-
-const Iframe = styled.iframe`
-  overflow: hidden;
-  border: 0;
-`;
-
-export default function ErrorPage(props) {
-  return (
-    <>
-      <Helmet {...props} title="Error" />
-      <Layout {...props}>
-        <h1>You'd think there would be something more interesting here.</h1>
-        <Iframe
-          title="Background music"
-          width="1"
-          height="1"
-          allow="autoplay"
-          src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/348238181&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
-        />
-      </Layout>
-    </>
-  );
-}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 00000000..f1dbcf2b
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+import type { PageProps } from "gatsby";
+
+import { Helmet, Layout } from "ui/partials";
+
+const Iframe = styled.iframe`
+  overflow: hidden;
+  border: 0;
+`;
+
+const ErrorPage: React.FC<PageProps> = (props) => (
+  <>
+    <Helmet {...props} title="Error" />
+    <Layout {...props}>
+      <h1>You'd think there would be something more interesting here.</h1>
+      <Iframe
+        title="Background music"
+        width="1"
+        height="1"
+        allow="autoplay"
+        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/348238181&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"
+      />
+    </Layout>
+  </>
+);
+
+export default ErrorPage;

From 98e3cad203eb33d05ebb7f035266538ec122d4b8 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:30:22 -0500
Subject: [PATCH 03/28] chore(ts): add ui path to config

---
 tsconfig.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/tsconfig.json b/tsconfig.json
index 86483e00..f940022e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,9 @@
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
+    "paths": {
+      "ui/*": ["./lib/ui/*"]
+    },
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,

From 5e2d3660f596c9ba11f3fa29af7423ec5d5ff8a0 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:30:35 -0500
Subject: [PATCH 04/28] refactor(settings): port typescript

---
 lib/ui/settings/{breakpoints.js => breakpoints.ts} | 0
 lib/ui/settings/{colors.js => colors.ts}           | 0
 lib/ui/settings/{fonts.js => fonts.ts}             | 0
 lib/ui/settings/{fsizes.js => fsizes.ts}           | 2 ++
 lib/ui/settings/{index.js => index.ts}             | 0
 lib/ui/settings/{indexes.js => indexes.ts}         | 0
 lib/ui/settings/{leading.js => leading.ts}         | 0
 lib/ui/settings/{radii.js => radii.ts}             | 0
 lib/ui/settings/{sizes.js => sizes.ts}             | 2 ++
 lib/ui/settings/{spaces.js => spaces.ts}           | 0
 lib/ui/settings/{time.js => time.ts}               | 0
 lib/ui/settings/{tracking.js => tracking.ts}       | 0
 12 files changed, 4 insertions(+)
 rename lib/ui/settings/{breakpoints.js => breakpoints.ts} (100%)
 rename lib/ui/settings/{colors.js => colors.ts} (100%)
 rename lib/ui/settings/{fonts.js => fonts.ts} (100%)
 rename lib/ui/settings/{fsizes.js => fsizes.ts} (80%)
 rename lib/ui/settings/{index.js => index.ts} (100%)
 rename lib/ui/settings/{indexes.js => indexes.ts} (100%)
 rename lib/ui/settings/{leading.js => leading.ts} (100%)
 rename lib/ui/settings/{radii.js => radii.ts} (100%)
 rename lib/ui/settings/{sizes.js => sizes.ts} (81%)
 rename lib/ui/settings/{spaces.js => spaces.ts} (100%)
 rename lib/ui/settings/{time.js => time.ts} (100%)
 rename lib/ui/settings/{tracking.js => tracking.ts} (100%)

diff --git a/lib/ui/settings/breakpoints.js b/lib/ui/settings/breakpoints.ts
similarity index 100%
rename from lib/ui/settings/breakpoints.js
rename to lib/ui/settings/breakpoints.ts
diff --git a/lib/ui/settings/colors.js b/lib/ui/settings/colors.ts
similarity index 100%
rename from lib/ui/settings/colors.js
rename to lib/ui/settings/colors.ts
diff --git a/lib/ui/settings/fonts.js b/lib/ui/settings/fonts.ts
similarity index 100%
rename from lib/ui/settings/fonts.js
rename to lib/ui/settings/fonts.ts
diff --git a/lib/ui/settings/fsizes.js b/lib/ui/settings/fsizes.ts
similarity index 80%
rename from lib/ui/settings/fsizes.js
rename to lib/ui/settings/fsizes.ts
index c2f54529..649a6113 100644
--- a/lib/ui/settings/fsizes.js
+++ b/lib/ui/settings/fsizes.ts
@@ -1,3 +1,5 @@
+export type FSizeValue = keyof typeof fsizes;
+
 export const fsizes = {
   k: ["28px", "56px"],
   h: ["24px", "42px"],
diff --git a/lib/ui/settings/index.js b/lib/ui/settings/index.ts
similarity index 100%
rename from lib/ui/settings/index.js
rename to lib/ui/settings/index.ts
diff --git a/lib/ui/settings/indexes.js b/lib/ui/settings/indexes.ts
similarity index 100%
rename from lib/ui/settings/indexes.js
rename to lib/ui/settings/indexes.ts
diff --git a/lib/ui/settings/leading.js b/lib/ui/settings/leading.ts
similarity index 100%
rename from lib/ui/settings/leading.js
rename to lib/ui/settings/leading.ts
diff --git a/lib/ui/settings/radii.js b/lib/ui/settings/radii.ts
similarity index 100%
rename from lib/ui/settings/radii.js
rename to lib/ui/settings/radii.ts
diff --git a/lib/ui/settings/sizes.js b/lib/ui/settings/sizes.ts
similarity index 81%
rename from lib/ui/settings/sizes.js
rename to lib/ui/settings/sizes.ts
index 8eeaa187..fe809e49 100644
--- a/lib/ui/settings/sizes.js
+++ b/lib/ui/settings/sizes.ts
@@ -1,3 +1,5 @@
+export type SizeValue = keyof typeof sizes;
+
 export const sizes = {
   k: ["72px", "144px"],
   h: ["48px", "96px"],
diff --git a/lib/ui/settings/spaces.js b/lib/ui/settings/spaces.ts
similarity index 100%
rename from lib/ui/settings/spaces.js
rename to lib/ui/settings/spaces.ts
diff --git a/lib/ui/settings/time.js b/lib/ui/settings/time.ts
similarity index 100%
rename from lib/ui/settings/time.js
rename to lib/ui/settings/time.ts
diff --git a/lib/ui/settings/tracking.js b/lib/ui/settings/tracking.ts
similarity index 100%
rename from lib/ui/settings/tracking.js
rename to lib/ui/settings/tracking.ts

From 4e0da78bec620fb1bfe033fd24c35a1dee851343 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:33:25 -0500
Subject: [PATCH 05/28] refactor(mixins): port most to typescript

---
 lib/ui/mixins/{disselect.js => disselect.ts}  |  0
 lib/ui/mixins/{index.js => index.ts}          |  0
 .../ofMixins/{fluidify.js => fluidify.ts}     | 24 ++++++++++++++-----
 lib/ui/mixins/{paint.js => paint.ts}          | 13 +++++++++-
 lib/ui/mixins/setSize.js                      |  9 -------
 lib/ui/mixins/setSize.ts                      | 14 +++++++++++
 lib/ui/mixins/{setType.js => setType.ts}      |  4 ++--
 7 files changed, 46 insertions(+), 18 deletions(-)
 rename lib/ui/mixins/{disselect.js => disselect.ts} (100%)
 rename lib/ui/mixins/{index.js => index.ts} (100%)
 rename lib/ui/mixins/ofMixins/{fluidify.js => fluidify.ts} (61%)
 rename lib/ui/mixins/{paint.js => paint.ts} (75%)
 delete mode 100644 lib/ui/mixins/setSize.js
 create mode 100644 lib/ui/mixins/setSize.ts
 rename lib/ui/mixins/{setType.js => setType.ts} (88%)

diff --git a/lib/ui/mixins/disselect.js b/lib/ui/mixins/disselect.ts
similarity index 100%
rename from lib/ui/mixins/disselect.js
rename to lib/ui/mixins/disselect.ts
diff --git a/lib/ui/mixins/index.js b/lib/ui/mixins/index.ts
similarity index 100%
rename from lib/ui/mixins/index.js
rename to lib/ui/mixins/index.ts
diff --git a/lib/ui/mixins/ofMixins/fluidify.js b/lib/ui/mixins/ofMixins/fluidify.ts
similarity index 61%
rename from lib/ui/mixins/ofMixins/fluidify.js
rename to lib/ui/mixins/ofMixins/fluidify.ts
index c9eb0d26..1f6714c1 100644
--- a/lib/ui/mixins/ofMixins/fluidify.js
+++ b/lib/ui/mixins/ofMixins/fluidify.ts
@@ -1,13 +1,19 @@
-const getFluidStyles = (property, minValue, maxValue, isImportant) => {
+const getFluidStyles = (
+  property: string,
+  minValue: string,
+  maxValue: string,
+  isImportant: boolean
+) => {
   const screen = { min: 320, max: 1440 };
   const minVal = parseInt(minValue, 10);
   const maxVal = parseInt(maxValue, 10);
+
   return `
     ${property}: ${minValue} ${isImportant ? "!important" : ``};
     @media screen and (min-width: ${screen.min}px) {
       ${property}: calc(${minValue} + ${maxVal - minVal} * (100vw - ${
-    screen.min
-  }px) / ${screen.max - screen.min}) ${isImportant ? "!important" : ``};
+        screen.min
+      }px) / ${screen.max - screen.min}) ${isImportant ? "!important" : ``};
     }
     @media screen and (min-width: ${screen.max}px) {
       ${property}: ${maxValue} ${isImportant ? "!important" : ``};
@@ -15,13 +21,19 @@ const getFluidStyles = (property, minValue, maxValue, isImportant) => {
   `;
 };
 
-const fluid = (properties, minValue, maxValue, isImportant) => {
+const fluidify = (
+  properties: string | string[],
+  minValue: string,
+  maxValue: string,
+  isImportant: boolean = false
+) => {
   if (Array.isArray(properties)) {
-    return properties.map(property =>
+    return properties.map((property) =>
       getFluidStyles(property, minValue, maxValue, isImportant)
     );
   }
+
   return getFluidStyles(properties, minValue, maxValue, isImportant);
 };
 
-export default fluid;
+export default fluidify;
diff --git a/lib/ui/mixins/paint.js b/lib/ui/mixins/paint.ts
similarity index 75%
rename from lib/ui/mixins/paint.js
rename to lib/ui/mixins/paint.ts
index 5e0545f5..c45796cd 100644
--- a/lib/ui/mixins/paint.js
+++ b/lib/ui/mixins/paint.ts
@@ -1,6 +1,17 @@
 import { darken, lighten } from "polished";
 
-export const paint = (hex, val) => {
+export type PaintValue =
+  | "Wt"
+  | "HL"
+  | "Lt"
+  | "LLt"
+  | "HD"
+  | "D"
+  | "LD"
+  | "Blk"
+  | "M";
+
+export const paint = (hex: string, val: PaintValue) => {
   switch (val) {
     case "Wt":
       return lighten(0.36, hex);
diff --git a/lib/ui/mixins/setSize.js b/lib/ui/mixins/setSize.js
deleted file mode 100644
index ea6ecece..00000000
--- a/lib/ui/mixins/setSize.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { sizes } from "ui/settings";
-import fluidify from "./ofMixins/fluidify";
-
-export const setHeight = val =>
-  fluidify([`height`], sizes[val][0], sizes[val][1]);
-export const setWidth = val =>
-  fluidify([`width`], sizes[val][0], sizes[val][1]);
-export const setSize = val =>
-  fluidify([`width`, `height`], sizes[val][0], sizes[val][1]);
diff --git a/lib/ui/mixins/setSize.ts b/lib/ui/mixins/setSize.ts
new file mode 100644
index 00000000..72707593
--- /dev/null
+++ b/lib/ui/mixins/setSize.ts
@@ -0,0 +1,14 @@
+import { sizes, type SizeValue } from "ui/settings";
+import fluidify from "./ofMixins/fluidify";
+
+export const setHeight = (val: SizeValue) =>
+  fluidify([`height`], sizes[val][0], sizes[val][1]);
+
+export const setWidth = (val: SizeValue) =>
+  fluidify([`width`], sizes[val][0], sizes[val][1]);
+
+export const setSize = (val: SizeValue) =>
+  fluidify([`width`, `height`], sizes[val][0], sizes[val][1]);
+
+// Re-export type so it can be imported with helper function
+export { SizeValue };
diff --git a/lib/ui/mixins/setType.js b/lib/ui/mixins/setType.ts
similarity index 88%
rename from lib/ui/mixins/setType.js
rename to lib/ui/mixins/setType.ts
index 10d63287..b8a9c3a1 100644
--- a/lib/ui/mixins/setType.js
+++ b/lib/ui/mixins/setType.ts
@@ -1,8 +1,8 @@
-import { lead, fsize } from "ui/settings";
+import { lead, fsize, type FSizeValue } from "ui/settings";
 import fluidify from "./ofMixins/fluidify";
 
 /* eslint import/prefer-default-export: 0 */
-export const setType = size => {
+export const setType = (size: FSizeValue) => {
   switch (size) {
     case "k":
       return `${fluidify("font-size", fsize.k[0], fsize.k[1])}line-height: ${

From b5cc738f8d3e52bee51e6a26b4a65e50b510de2e Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:34:43 -0500
Subject: [PATCH 06/28] refactor(themes): port typescript

---
 lib/ui/themes/{defaultThm.js => defaultThm.ts} | 0
 lib/ui/themes/{index.js => index.ts}           | 0
 lib/ui/themes/{whiteThm.js => whiteThm.ts}     | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename lib/ui/themes/{defaultThm.js => defaultThm.ts} (100%)
 rename lib/ui/themes/{index.js => index.ts} (100%)
 rename lib/ui/themes/{whiteThm.js => whiteThm.ts} (100%)

diff --git a/lib/ui/themes/defaultThm.js b/lib/ui/themes/defaultThm.ts
similarity index 100%
rename from lib/ui/themes/defaultThm.js
rename to lib/ui/themes/defaultThm.ts
diff --git a/lib/ui/themes/index.js b/lib/ui/themes/index.ts
similarity index 100%
rename from lib/ui/themes/index.js
rename to lib/ui/themes/index.ts
diff --git a/lib/ui/themes/whiteThm.js b/lib/ui/themes/whiteThm.ts
similarity index 100%
rename from lib/ui/themes/whiteThm.js
rename to lib/ui/themes/whiteThm.ts

From 7e77b4799885197cd4d13cf7b7f4a159ee9a764d Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 10:35:39 -0500
Subject: [PATCH 07/28] refactor(brandmarks): port typescript

---
 lib/ui/components/brandmarks/Logo.js          | 36 -----------------
 lib/ui/components/brandmarks/Logo.tsx         | 40 +++++++++++++++++++
 .../brandmarks/{Symbol.js => Symbol.tsx}      | 32 +++++++++------
 3 files changed, 59 insertions(+), 49 deletions(-)
 delete mode 100644 lib/ui/components/brandmarks/Logo.js
 create mode 100644 lib/ui/components/brandmarks/Logo.tsx
 rename lib/ui/components/brandmarks/{Symbol.js => Symbol.tsx} (81%)

diff --git a/lib/ui/components/brandmarks/Logo.js b/lib/ui/components/brandmarks/Logo.js
deleted file mode 100644
index 5dc77eba..00000000
--- a/lib/ui/components/brandmarks/Logo.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { shape, string } from "prop-types";
-import React from "react";
-import styled from "styled-components";
-
-import { defaultThm } from "ui/themes";
-import { setHeight } from "ui/mixins";
-
-const SVG = styled.svg`
-  ${({ $size }) => setHeight($size)};
-`;
-
-function BrandmarkLogo({ size = 'm', theme = {} }) {
-  return (
-    <SVG
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 866.82 252.28"
-      $size={size}
-    >
-      <title id="BrandmarkLogo">Bad Idea Factory</title>
-      <path
-        fill={theme.svgFill || defaultThm.svgFill}
-        fillRule="nonzero"
-        d="M37 28.5L0 238.16l16.8 14.12 91.68-33.37 22.1-26.35 10.31-58.45-13.84-11.62 20.12-24 10.31-58.46-46-38.64zM135.61 136L126 190.44l-20.43 24.34-85.18 31 35-198.64 10.33 8.67L52 133.83l38.54-14 10.33 8.67-51.2 18.62-14.24 80.77 58.42-21.26L116 180.29l9.33-52.93zM68.89 52.1l-10.33-8.67 48.57-17.68 10.34 8.67zM119.13 39l-5.79 32.83-20.43 24.34-31.33 11.4 9-50.9zm-16.59 94.06l-5.79 32.83-20.42 24.34L45 201.63l9-50.9zM152.2 42l-9.59 54.41-19.29 23-10.91-9.15 20.13-24 9.33-52.93zM128 84.1l-22.41 26.71 14.64 12.28.78.66-9.59 54.41L91 202.51l-49.32 17.93L44 207.16l35.19-12.81L101.32 168l7-39.65-16.8-14.07-33.26 12.1 2.35-13.28 35.19-12.81L117.9 74l7-39.65-16.79-14.13-56.49 20.56-36 204.16-10.34-8.7 36-204.13 69.17-25.17 27.12 22.75zM210.45 8.74l-17.17 14.41 37.83 214.55 21.07 7.67L269.35 231 231.52 16.41zM235.51 234L198.68 25.11l10.57-8.86 39.23 222.48zm17.87 3.86L214.15 15.38l13 4.72L264 229zM342.64 32.91l-36.19 205.23 16.42 13.79 20.13-7.34 16.24-92.05L412 133.35l3.72-21.11-16.46-13.79-32.56 11.85 8.8-49.92 70.26-25.48 3.72-21.12L433.06 0zm-20.92 211.84l-10.11-8.49 35.23-199.82 12.41-4.51zm86-114.93l-47.54 17.3 2.29-13 47.58-17.5zm-33.2-91.29l-13.94 79.06 37.72-13.73 10 8.36-50 18.38-19.49 110.46-12.4 4.52 38-215.53 65.11-23.7-2.29 13zM376.46 55l2.27-12.9 50.12-18.25L439 32.3zm67.86-39.31l-2.29 13-10.12-8.48 2.3-13zM575.29 58.45a15.55 15.55 0 0 0 4.38-11.06 13.89 13.89 0 0 0-2-7.26 11.58 11.58 0 0 0-6.2-4.91q6.42-3 6.43-10.8a13.71 13.71 0 0 0-4.09-10.16q-4.07-4-13.06-4h-23.2V63.1h24.25q9.11 0 13.49-4.65zm-27.58-38.72h13.15q6.64 0 6.65 5.6a4.91 4.91 0 0 1-2 4.15q-2 1.51-6 1.51h-11.8zm0 20.78h12.47q9.14 0 9.14 6.88a6.32 6.32 0 0 1-1.66 4.34c-1.11 1.24-2.9 1.85-5.37 1.85h-14.58zM599.38 52.15h20.4l4.08 11h11l-20.29-52.93h-10L584.35 63.1h11zm8.54-23a41.81 41.81 0 0 0 1.66-4.75 44.4 44.4 0 0 0 1.67 4.75l5.21 13.75h-13.75zM670.18 61.51a21.25 21.25 0 0 0 7.4-4.19 24.2 24.2 0 0 0 4.83-6.12 26 26 0 0 0 2.76-7.14 34.44 34.44 0 0 0 .79-7.4 32.44 32.44 0 0 0-1.43-9.66 27.29 27.29 0 0 0-4.38-8.42 19.89 19.89 0 0 0-8-6.08 29 29 0 0 0-11.75-2.23h-17.88V63.1h17.53a30.5 30.5 0 0 0 10.13-1.59zm-17.46-41.62h9.37a11.28 11.28 0 0 1 9.9 4.94 20.44 20.44 0 0 1 3.4 11.83 20.13 20.13 0 0 1-3.48 11.75c-2.31 3.35-5.87 5-10.65 5h-8.54zM541.89 100.85h10.2v52.88h-10.2zM590.13 103.08a29.18 29.18 0 0 0-11.75-2.23h-17.83v52.89h17.53a30.4 30.4 0 0 0 10.12-1.59 21.53 21.53 0 0 0 7.41-4.19 24.2 24.2 0 0 0 4.83-6.12 26 26 0 0 0 2.76-7.14 34.46 34.46 0 0 0 .79-7.41 32.06 32.06 0 0 0-1.43-9.7 27.34 27.34 0 0 0-4.38-8.43 20 20 0 0 0-8.05-6.08zm-.19 36c-2.31 3.35-5.87 5-10.65 5h-8.54v-33.56h9.37a11.26 11.26 0 0 1 9.9 5 20.41 20.41 0 0 1 3.4 11.82 20.11 20.11 0 0 1-3.48 11.66zM650.3 110.52v-9.67h-36.11v52.89h37.7v-9.67h-27.5V131.3h15.26v-9.67h-15.26v-11.11h25.91zM693.14 142.78l4.08 11h10.95l-20.25-52.89H678l-20.24 52.89h10.95l4.08-11zm-11.86-23a43.2 43.2 0 0 0 1.66-4.76 43.2 43.2 0 0 0 1.66 4.76l5.21 13.75h-13.74zM547.71 201.15h25.24v-9.67h-35.44v52.89h10.2v-22.44h16.02v-9.67h-16.02v-11.11zM589.56 191.48l-20.24 52.89h10.95l4.08-11h20.4l4.08 11h10.95l-20.24-52.89zm-1.88 32.64l5.21-13.75a43.2 43.2 0 0 0 1.66-4.76 43.2 43.2 0 0 0 1.66 4.76l5.22 13.75zM645.55 235.38q-5.67 0-8.65-5.29a24.22 24.22 0 0 1-3-12.16 31.77 31.77 0 0 1 1-8.05 14.65 14.65 0 0 1 3.74-6.57 9.27 9.27 0 0 1 6.92-2.84A9.44 9.44 0 0 1 651 202a17.13 17.13 0 0 1 4.3 4.76l9.14-4.15a19.35 19.35 0 0 0-6.91-8.46 20.07 20.07 0 0 0-12-3.48 20.67 20.67 0 0 0-10.35 2.53 18.87 18.87 0 0 0-7 6.65 33.22 33.22 0 0 0-3.7 8.69 36.9 36.9 0 0 0-1.2 9.41 39.33 39.33 0 0 0 1.17 9.82 31 31 0 0 0 3.66 8.65 17.9 17.9 0 0 0 7 6.42 21.9 21.9 0 0 0 10.43 2.38q13.07 0 19-13.07l-9.37-3.55q-4.11 6.78-9.62 6.78zM669.42 201.31h15.11v43.06h10.2v-43.06h15.11v-9.83h-40.42v9.83zM758.07 202.66a24.74 24.74 0 0 0-4.38-6.23 18.69 18.69 0 0 0-6.65-4.27 26.14 26.14 0 0 0-17.9 0 18.78 18.78 0 0 0-6.65 4.27 25.66 25.66 0 0 0-4.42 6.23 28.46 28.46 0 0 0-2.57 7.34 41.93 41.93 0 0 0 0 15.79 28.46 28.46 0 0 0 2.57 7.37 25.66 25.66 0 0 0 4.42 6.23 18.65 18.65 0 0 0 6.65 4.27 26.14 26.14 0 0 0 17.9 0 18.56 18.56 0 0 0 6.65-4.27 24.74 24.74 0 0 0 4.38-6.23 29.14 29.14 0 0 0 2.54-7.37 41.93 41.93 0 0 0 0-15.79 29.14 29.14 0 0 0-2.54-7.34zm-8 21.23a22.63 22.63 0 0 1-2.11 5.63 11.3 11.3 0 0 1-4 4.31 10.79 10.79 0 0 1-5.89 1.62 10.62 10.62 0 0 1-7.48-2.79 14.54 14.54 0 0 1-4.15-6.58 28 28 0 0 1-1.14-8.15 26.49 26.49 0 0 1 .68-6 24.15 24.15 0 0 1 2.08-5.59 11 11 0 0 1 4-4.31 11.3 11.3 0 0 1 15.94 4.15 22.31 22.31 0 0 1 2.07 5.55 27.09 27.09 0 0 1 .68 6.2 26 26 0 0 1-.65 5.96zM811.11 217.21a18.12 18.12 0 0 0-1.51-21.08q-4.2-4.65-13.49-4.65h-24.55v52.89h10.2v-19.72h10.65l9.9 19.72h11.48l-10.27-21.08a14.28 14.28 0 0 0 7.59-6.08zm-9.56-4.21c-1.11 1.3-2.87 2-5.29 2h-14.5v-13.85h14.5q3.71 0 5.33 2a8.29 8.29 0 0 1 0 9.9zM855.26 191.48l-13.06 21.61-13.07-21.61h-11.56l19.56 32.26v20.63h10.13v-20.63l19.56-32.26h-11.56z"
-      />
-    </SVG>
-  )
-}
-
-BrandmarkLogo.propTypes = {
-  size: string,
-  theme: shape({
-    svgFill: string
-  })
-};
-
-export default BrandmarkLogo;
diff --git a/lib/ui/components/brandmarks/Logo.tsx b/lib/ui/components/brandmarks/Logo.tsx
new file mode 100644
index 00000000..3b027488
--- /dev/null
+++ b/lib/ui/components/brandmarks/Logo.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+import { defaultThm } from "ui/themes";
+import { setHeight, type SizeValue } from "ui/mixins";
+
+interface SVGProps {
+  readonly $size: SizeValue;
+}
+
+interface BrandmarkLogoProps {
+  size: SizeValue;
+  theme: {
+    svgFill?: string;
+  };
+}
+
+const SVG = styled.svg<SVGProps>`
+  ${({ $size }) => setHeight($size)};
+`;
+
+const BrandmarkLogo: React.FC<BrandmarkLogoProps> = ({
+  size = "m",
+  theme = {},
+}) => (
+  <SVG
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 866.82 252.28"
+    $size={size}
+  >
+    <title id="BrandmarkLogo">Bad Idea Factory</title>
+    <path
+      fill={theme.svgFill ?? defaultThm.svgFill}
+      fillRule="nonzero"
+      d="M37 28.5L0 238.16l16.8 14.12 91.68-33.37 22.1-26.35 10.31-58.45-13.84-11.62 20.12-24 10.31-58.46-46-38.64zM135.61 136L126 190.44l-20.43 24.34-85.18 31 35-198.64 10.33 8.67L52 133.83l38.54-14 10.33 8.67-51.2 18.62-14.24 80.77 58.42-21.26L116 180.29l9.33-52.93zM68.89 52.1l-10.33-8.67 48.57-17.68 10.34 8.67zM119.13 39l-5.79 32.83-20.43 24.34-31.33 11.4 9-50.9zm-16.59 94.06l-5.79 32.83-20.42 24.34L45 201.63l9-50.9zM152.2 42l-9.59 54.41-19.29 23-10.91-9.15 20.13-24 9.33-52.93zM128 84.1l-22.41 26.71 14.64 12.28.78.66-9.59 54.41L91 202.51l-49.32 17.93L44 207.16l35.19-12.81L101.32 168l7-39.65-16.8-14.07-33.26 12.1 2.35-13.28 35.19-12.81L117.9 74l7-39.65-16.79-14.13-56.49 20.56-36 204.16-10.34-8.7 36-204.13 69.17-25.17 27.12 22.75zM210.45 8.74l-17.17 14.41 37.83 214.55 21.07 7.67L269.35 231 231.52 16.41zM235.51 234L198.68 25.11l10.57-8.86 39.23 222.48zm17.87 3.86L214.15 15.38l13 4.72L264 229zM342.64 32.91l-36.19 205.23 16.42 13.79 20.13-7.34 16.24-92.05L412 133.35l3.72-21.11-16.46-13.79-32.56 11.85 8.8-49.92 70.26-25.48 3.72-21.12L433.06 0zm-20.92 211.84l-10.11-8.49 35.23-199.82 12.41-4.51zm86-114.93l-47.54 17.3 2.29-13 47.58-17.5zm-33.2-91.29l-13.94 79.06 37.72-13.73 10 8.36-50 18.38-19.49 110.46-12.4 4.52 38-215.53 65.11-23.7-2.29 13zM376.46 55l2.27-12.9 50.12-18.25L439 32.3zm67.86-39.31l-2.29 13-10.12-8.48 2.3-13zM575.29 58.45a15.55 15.55 0 0 0 4.38-11.06 13.89 13.89 0 0 0-2-7.26 11.58 11.58 0 0 0-6.2-4.91q6.42-3 6.43-10.8a13.71 13.71 0 0 0-4.09-10.16q-4.07-4-13.06-4h-23.2V63.1h24.25q9.11 0 13.49-4.65zm-27.58-38.72h13.15q6.64 0 6.65 5.6a4.91 4.91 0 0 1-2 4.15q-2 1.51-6 1.51h-11.8zm0 20.78h12.47q9.14 0 9.14 6.88a6.32 6.32 0 0 1-1.66 4.34c-1.11 1.24-2.9 1.85-5.37 1.85h-14.58zM599.38 52.15h20.4l4.08 11h11l-20.29-52.93h-10L584.35 63.1h11zm8.54-23a41.81 41.81 0 0 0 1.66-4.75 44.4 44.4 0 0 0 1.67 4.75l5.21 13.75h-13.75zM670.18 61.51a21.25 21.25 0 0 0 7.4-4.19 24.2 24.2 0 0 0 4.83-6.12 26 26 0 0 0 2.76-7.14 34.44 34.44 0 0 0 .79-7.4 32.44 32.44 0 0 0-1.43-9.66 27.29 27.29 0 0 0-4.38-8.42 19.89 19.89 0 0 0-8-6.08 29 29 0 0 0-11.75-2.23h-17.88V63.1h17.53a30.5 30.5 0 0 0 10.13-1.59zm-17.46-41.62h9.37a11.28 11.28 0 0 1 9.9 4.94 20.44 20.44 0 0 1 3.4 11.83 20.13 20.13 0 0 1-3.48 11.75c-2.31 3.35-5.87 5-10.65 5h-8.54zM541.89 100.85h10.2v52.88h-10.2zM590.13 103.08a29.18 29.18 0 0 0-11.75-2.23h-17.83v52.89h17.53a30.4 30.4 0 0 0 10.12-1.59 21.53 21.53 0 0 0 7.41-4.19 24.2 24.2 0 0 0 4.83-6.12 26 26 0 0 0 2.76-7.14 34.46 34.46 0 0 0 .79-7.41 32.06 32.06 0 0 0-1.43-9.7 27.34 27.34 0 0 0-4.38-8.43 20 20 0 0 0-8.05-6.08zm-.19 36c-2.31 3.35-5.87 5-10.65 5h-8.54v-33.56h9.37a11.26 11.26 0 0 1 9.9 5 20.41 20.41 0 0 1 3.4 11.82 20.11 20.11 0 0 1-3.48 11.66zM650.3 110.52v-9.67h-36.11v52.89h37.7v-9.67h-27.5V131.3h15.26v-9.67h-15.26v-11.11h25.91zM693.14 142.78l4.08 11h10.95l-20.25-52.89H678l-20.24 52.89h10.95l4.08-11zm-11.86-23a43.2 43.2 0 0 0 1.66-4.76 43.2 43.2 0 0 0 1.66 4.76l5.21 13.75h-13.74zM547.71 201.15h25.24v-9.67h-35.44v52.89h10.2v-22.44h16.02v-9.67h-16.02v-11.11zM589.56 191.48l-20.24 52.89h10.95l4.08-11h20.4l4.08 11h10.95l-20.24-52.89zm-1.88 32.64l5.21-13.75a43.2 43.2 0 0 0 1.66-4.76 43.2 43.2 0 0 0 1.66 4.76l5.22 13.75zM645.55 235.38q-5.67 0-8.65-5.29a24.22 24.22 0 0 1-3-12.16 31.77 31.77 0 0 1 1-8.05 14.65 14.65 0 0 1 3.74-6.57 9.27 9.27 0 0 1 6.92-2.84A9.44 9.44 0 0 1 651 202a17.13 17.13 0 0 1 4.3 4.76l9.14-4.15a19.35 19.35 0 0 0-6.91-8.46 20.07 20.07 0 0 0-12-3.48 20.67 20.67 0 0 0-10.35 2.53 18.87 18.87 0 0 0-7 6.65 33.22 33.22 0 0 0-3.7 8.69 36.9 36.9 0 0 0-1.2 9.41 39.33 39.33 0 0 0 1.17 9.82 31 31 0 0 0 3.66 8.65 17.9 17.9 0 0 0 7 6.42 21.9 21.9 0 0 0 10.43 2.38q13.07 0 19-13.07l-9.37-3.55q-4.11 6.78-9.62 6.78zM669.42 201.31h15.11v43.06h10.2v-43.06h15.11v-9.83h-40.42v9.83zM758.07 202.66a24.74 24.74 0 0 0-4.38-6.23 18.69 18.69 0 0 0-6.65-4.27 26.14 26.14 0 0 0-17.9 0 18.78 18.78 0 0 0-6.65 4.27 25.66 25.66 0 0 0-4.42 6.23 28.46 28.46 0 0 0-2.57 7.34 41.93 41.93 0 0 0 0 15.79 28.46 28.46 0 0 0 2.57 7.37 25.66 25.66 0 0 0 4.42 6.23 18.65 18.65 0 0 0 6.65 4.27 26.14 26.14 0 0 0 17.9 0 18.56 18.56 0 0 0 6.65-4.27 24.74 24.74 0 0 0 4.38-6.23 29.14 29.14 0 0 0 2.54-7.37 41.93 41.93 0 0 0 0-15.79 29.14 29.14 0 0 0-2.54-7.34zm-8 21.23a22.63 22.63 0 0 1-2.11 5.63 11.3 11.3 0 0 1-4 4.31 10.79 10.79 0 0 1-5.89 1.62 10.62 10.62 0 0 1-7.48-2.79 14.54 14.54 0 0 1-4.15-6.58 28 28 0 0 1-1.14-8.15 26.49 26.49 0 0 1 .68-6 24.15 24.15 0 0 1 2.08-5.59 11 11 0 0 1 4-4.31 11.3 11.3 0 0 1 15.94 4.15 22.31 22.31 0 0 1 2.07 5.55 27.09 27.09 0 0 1 .68 6.2 26 26 0 0 1-.65 5.96zM811.11 217.21a18.12 18.12 0 0 0-1.51-21.08q-4.2-4.65-13.49-4.65h-24.55v52.89h10.2v-19.72h10.65l9.9 19.72h11.48l-10.27-21.08a14.28 14.28 0 0 0 7.59-6.08zm-9.56-4.21c-1.11 1.3-2.87 2-5.29 2h-14.5v-13.85h14.5q3.71 0 5.33 2a8.29 8.29 0 0 1 0 9.9zM855.26 191.48l-13.06 21.61-13.07-21.61h-11.56l19.56 32.26v20.63h10.13v-20.63l19.56-32.26h-11.56z"
+    />
+  </SVG>
+);
+
+export default BrandmarkLogo;
diff --git a/lib/ui/components/brandmarks/Symbol.js b/lib/ui/components/brandmarks/Symbol.tsx
similarity index 81%
rename from lib/ui/components/brandmarks/Symbol.js
rename to lib/ui/components/brandmarks/Symbol.tsx
index 29054d6b..a67e75e5 100644
--- a/lib/ui/components/brandmarks/Symbol.js
+++ b/lib/ui/components/brandmarks/Symbol.tsx
@@ -1,15 +1,28 @@
-import { shape, string } from "prop-types";
 import React from "react";
 import styled from "styled-components";
 
 import { defaultThm } from "ui/themes";
-import { setHeight } from "ui/mixins";
+import { setHeight, type SizeValue } from "ui/mixins";
 
-const SVG = styled.svg`
-  ${({ $size = 'm' }) => setHeight($size)};
+interface SVGProps {
+  readonly $size: SizeValue;
+}
+
+interface BrandmarkSymbolProps {
+  size: SizeValue;
+  theme: {
+    svgFill?: string;
+  };
+}
+
+const SVG = styled.svg<SVGProps>`
+  ${({ $size }) => setHeight($size)};
 `;
 
-const BrandmarkSymbol = ({ size, theme }) => (
+const BrandmarkLogo: React.FC<BrandmarkSymbolProps> = ({
+  size = "m",
+  theme = {},
+}) => (
   <SVG
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 449.91 252.52"
@@ -24,11 +37,4 @@ const BrandmarkSymbol = ({ size, theme }) => (
   </SVG>
 );
 
-BrandmarkSymbol.propTypes = {
-  size: string,
-  theme: shape({
-    svgFill: string
-  })
-};
-
-export default BrandmarkSymbol;
+export default BrandmarkLogo;

From 4bc2e324ce118657401bb5812eaa5f59fb8b854b Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 11:42:14 -0500
Subject: [PATCH 08/28] refactor(actionbars): port typescript

---
 lib/ui/components/actionbars/{Actionbar.js => Actionbar.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename lib/ui/components/actionbars/{Actionbar.js => Actionbar.ts} (100%)

diff --git a/lib/ui/components/actionbars/Actionbar.js b/lib/ui/components/actionbars/Actionbar.ts
similarity index 100%
rename from lib/ui/components/actionbars/Actionbar.js
rename to lib/ui/components/actionbars/Actionbar.ts

From e9515a3e53345f82a733f7840f9e06d8c79ccd6c Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 13:15:16 -0500
Subject: [PATCH 09/28] refactor(Footer): port typescript

also brandmark props should be optional bc they have default values
---
 lib/ui/components/brandmarks/Logo.tsx         |  4 ++--
 lib/ui/components/brandmarks/Symbol.tsx       |  4 ++--
 lib/ui/components/{index.js => index.ts}      |  0
 .../ofLayout/{Footer.js => Footer.tsx}        | 22 ++++++++-----------
 4 files changed, 13 insertions(+), 17 deletions(-)
 rename lib/ui/components/{index.js => index.ts} (100%)
 rename lib/ui/partials/ofLayout/{Footer.js => Footer.tsx} (76%)

diff --git a/lib/ui/components/brandmarks/Logo.tsx b/lib/ui/components/brandmarks/Logo.tsx
index 3b027488..cee9d701 100644
--- a/lib/ui/components/brandmarks/Logo.tsx
+++ b/lib/ui/components/brandmarks/Logo.tsx
@@ -9,8 +9,8 @@ interface SVGProps {
 }
 
 interface BrandmarkLogoProps {
-  size: SizeValue;
-  theme: {
+  size?: SizeValue;
+  theme?: {
     svgFill?: string;
   };
 }
diff --git a/lib/ui/components/brandmarks/Symbol.tsx b/lib/ui/components/brandmarks/Symbol.tsx
index a67e75e5..fb188a23 100644
--- a/lib/ui/components/brandmarks/Symbol.tsx
+++ b/lib/ui/components/brandmarks/Symbol.tsx
@@ -9,8 +9,8 @@ interface SVGProps {
 }
 
 interface BrandmarkSymbolProps {
-  size: SizeValue;
-  theme: {
+  size?: SizeValue;
+  theme?: {
     svgFill?: string;
   };
 }
diff --git a/lib/ui/components/index.js b/lib/ui/components/index.ts
similarity index 100%
rename from lib/ui/components/index.js
rename to lib/ui/components/index.ts
diff --git a/lib/ui/partials/ofLayout/Footer.js b/lib/ui/partials/ofLayout/Footer.tsx
similarity index 76%
rename from lib/ui/partials/ofLayout/Footer.js
rename to lib/ui/partials/ofLayout/Footer.tsx
index acad0bbe..7d28bc4a 100644
--- a/lib/ui/partials/ofLayout/Footer.js
+++ b/lib/ui/partials/ofLayout/Footer.tsx
@@ -34,18 +34,14 @@ const FooterFlex = styled.div`
   width: 100%;
 `;
 
-function Footer() {
-  return (
-    <FooterEl className="plxFoo">
-      <FooterContent>
-        <FooterFlex>
-          <Logo size="m" />
-        </FooterFlex>
-      </FooterContent>
-    </FooterEl>
-  )
-}
-
-Footer.propTypes = {};
+const Footer: React.FC = () => (
+  <FooterEl>
+    <FooterContent>
+      <FooterFlex>
+        <Logo size="m" />
+      </FooterFlex>
+    </FooterContent>
+  </FooterEl>
+);
 
 export default Footer;

From e8432a79fbb39f2d0ac745a230235884c065ddd1 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 13:38:09 -0500
Subject: [PATCH 10/28] refactor(assets): add type definitions for imported
 assets

---
 lib/assets/images/{index.js => index.ts} |  0
 lib/index.d.ts                           | 14 ++++++++++++++
 tsconfig.json                            |  1 +
 3 files changed, 15 insertions(+)
 rename lib/assets/images/{index.js => index.ts} (100%)
 create mode 100644 lib/index.d.ts

diff --git a/lib/assets/images/index.js b/lib/assets/images/index.ts
similarity index 100%
rename from lib/assets/images/index.js
rename to lib/assets/images/index.ts
diff --git a/lib/index.d.ts b/lib/index.d.ts
new file mode 100644
index 00000000..c4958583
--- /dev/null
+++ b/lib/index.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.ico" {
+  const content: string;
+  export default content;
+}
diff --git a/tsconfig.json b/tsconfig.json
index f940022e..978072a7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "paths": {
+      "assets/*": ["./lib/assets/*"],
       "ui/*": ["./lib/ui/*"]
     },
     "esModuleInterop": true,

From 3901a9ee781a3800b5ea53cc330d206d99e0eccb Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 13:39:00 -0500
Subject: [PATCH 11/28] refactor(animations): port typescript

---
 lib/ui/animations/{fadeIn.js => fadeIn.ts} | 0
 lib/ui/animations/{index.js => index.ts}   | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename lib/ui/animations/{fadeIn.js => fadeIn.ts} (100%)
 rename lib/ui/animations/{index.js => index.ts} (100%)

diff --git a/lib/ui/animations/fadeIn.js b/lib/ui/animations/fadeIn.ts
similarity index 100%
rename from lib/ui/animations/fadeIn.js
rename to lib/ui/animations/fadeIn.ts
diff --git a/lib/ui/animations/index.js b/lib/ui/animations/index.ts
similarity index 100%
rename from lib/ui/animations/index.js
rename to lib/ui/animations/index.ts

From 1d48c2c0d7f5073a807bb2268ca84880789ebbeb Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 13:47:23 -0500
Subject: [PATCH 12/28] refactor(partials/ofLayout): port typescript

---
 .../partials/ofLayout/{Main.js => Main.tsx}   |  17 +-
 .../{MobileMenu.js => MobileMenu.tsx}         |  21 ++-
 .../ofLayout/{Parallax.js => Parallax.tsx}    |  13 +-
 lib/ui/partials/ofLayout/Topbar.js            | 158 ------------------
 lib/ui/partials/ofLayout/Topbar.tsx           | 158 ++++++++++++++++++
 .../partials/ofLayout/{index.js => index.ts}  |   0
 6 files changed, 184 insertions(+), 183 deletions(-)
 rename lib/ui/partials/ofLayout/{Main.js => Main.tsx} (68%)
 rename lib/ui/partials/ofLayout/{MobileMenu.js => MobileMenu.tsx} (89%)
 rename lib/ui/partials/ofLayout/{Parallax.js => Parallax.tsx} (93%)
 delete mode 100644 lib/ui/partials/ofLayout/Topbar.js
 create mode 100644 lib/ui/partials/ofLayout/Topbar.tsx
 rename lib/ui/partials/ofLayout/{index.js => index.ts} (100%)

diff --git a/lib/ui/partials/ofLayout/Main.js b/lib/ui/partials/ofLayout/Main.tsx
similarity index 68%
rename from lib/ui/partials/ofLayout/Main.js
rename to lib/ui/partials/ofLayout/Main.tsx
index 109e8912..0434530d 100644
--- a/lib/ui/partials/ofLayout/Main.js
+++ b/lib/ui/partials/ofLayout/Main.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type PropsWithChildren } from "react";
 import styled from "styled-components";
 
 import { breakpoint, time } from "ui/settings";
@@ -21,15 +21,10 @@ const MainContent = styled.div`
   max-width: 1100px;
 `;
 
-const Main = props => {
-  const { children } = props;
-  return (
-    <MainEl {...props}>
-      <MainContent>{children}</MainContent>
-    </MainEl>
-  );
-};
-
-Main.propTypes = {};
+const Main: React.FC<PropsWithChildren> = ({ children, ...props }) => (
+  <MainEl {...props}>
+    <MainContent>{children}</MainContent>
+  </MainEl>
+);
 
 export default Main;
diff --git a/lib/ui/partials/ofLayout/MobileMenu.js b/lib/ui/partials/ofLayout/MobileMenu.tsx
similarity index 89%
rename from lib/ui/partials/ofLayout/MobileMenu.js
rename to lib/ui/partials/ofLayout/MobileMenu.tsx
index 886bbc6a..c6a0f653 100644
--- a/lib/ui/partials/ofLayout/MobileMenu.js
+++ b/lib/ui/partials/ofLayout/MobileMenu.tsx
@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
 import React from "react";
+import { type PageProps } from "gatsby";
 import styled from "styled-components";
 
 import { Action, Modal } from "ui/components";
@@ -26,11 +26,20 @@ const MenuItem = styled.li`
   ${setType("l")};
 `;
 
-function MobileMenu(props) {
-  const { location, toggleModal, ...restProps } = props;
+interface MobileMenuProps {
+  location: PageProps["location"];
+  toggleModal: VoidFunction;
+}
+
+const MobileMenu: React.FC<MobileMenuProps> = ({
+  location,
+  toggleModal,
+  ...props
+}) => {
   const { pathname } = location;
+
   return (
-    <Modal toggleModal={toggleModal} {...restProps}>
+    <Modal toggleModal={toggleModal} {...props}>
       <MobileMenuBody>
         <nav>
           <Menu>
@@ -84,10 +93,6 @@ function MobileMenu(props) {
       </MobileMenuBody>
     </Modal>
   );
-}
-
-MobileMenu.propTypes = {
-  toggleModal: PropTypes.func
 };
 
 export default MobileMenu;
diff --git a/lib/ui/partials/ofLayout/Parallax.js b/lib/ui/partials/ofLayout/Parallax.tsx
similarity index 93%
rename from lib/ui/partials/ofLayout/Parallax.js
rename to lib/ui/partials/ofLayout/Parallax.tsx
index 0c176617..89ea0e9e 100644
--- a/lib/ui/partials/ofLayout/Parallax.js
+++ b/lib/ui/partials/ofLayout/Parallax.tsx
@@ -1,9 +1,9 @@
-import Plx from "react-plx";
 import React from "react";
+import Plx, { type PlxItem } from "react-plx";
 import styled from "styled-components";
 
 import { scatteredBif1, scatteredBif2, scatteredBif3 } from "assets/images";
-import {} from "ui/animations";
+import "ui/animations";
 import { breakpoint } from "ui/settings";
 
 const ParallaxEl = styled.div`
@@ -42,8 +42,8 @@ const ParallaxEl = styled.div`
   }
 `;
 
-function Parallax() {
-  const layer1plx = [
+const Parallax: React.FC = () => {
+  const layer1plx: PlxItem[] = [
     {
       easing: "easeInOutSine",
       start: 0,
@@ -81,7 +81,7 @@ function Parallax() {
       ]
     }
   ];
-  const layer2plx = [
+  const layer2plx: PlxItem[] = [
     {
       easing: "easeInOutSine",
       start: 50,
@@ -119,7 +119,7 @@ function Parallax() {
       ]
     }
   ];
-  const layer3plx = [
+  const layer3plx: PlxItem[] = [
     {
       easing: "easeInOutSine",
       start: 50,
@@ -157,6 +157,7 @@ function Parallax() {
       ]
     }
   ];
+
   return (
     <ParallaxEl>
       <Plx className="PlxEl PlxEl1" parallaxData={layer1plx} />
diff --git a/lib/ui/partials/ofLayout/Topbar.js b/lib/ui/partials/ofLayout/Topbar.js
deleted file mode 100644
index de8e1e7f..00000000
--- a/lib/ui/partials/ofLayout/Topbar.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import { func, shape } from "prop-types";
-import { Link } from "gatsby";
-import React from "react";
-import styled from "styled-components";
-
-import { Action, Icon, Logo } from "ui/components";
-import { setSpace, setType } from "ui/mixins";
-import { breakpoint, time, zindex } from "ui/settings";
-
-const TopbarEl = styled.header`
-  ${setSpace("pah")};
-  ${setType("s")};
-  transition: background ${time.m}, box-shadow ${time.m}, padding ${time.m};
-  z-index: ${zindex.z3};
-  ${breakpoint.phone} {
-    ${setSpace("phl")};
-  }
-`;
-
-const TopbarContent = styled.div``;
-
-const TopbarFlex = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-const Navigation = styled.nav``;
-
-const Menu = styled.ul`
-  display: none;
-  ${breakpoint.desktopUp} {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-`;
-
-const MenuItem = styled.li`
-  &:not(:first-child) {
-    ${setSpace("mll")};
-  }
-`;
-
-const MenuToggle = styled.div`
-  display: inline-block;
-  ${breakpoint.desktopUp} {
-    display: none;
-  }
-  button {
-    ${setSpace("pas")};
-  }
-`;
-
-function Topbar(props) {
-  const { controls, location, ...restProps } = props;
-  return (
-    <TopbarEl {...restProps}>
-      <TopbarContent>
-        <TopbarFlex>
-          <div>
-            <Link to="/">
-              <h1>
-                <Logo size="l" />
-              </h1>
-            </Link>
-          </div>
-          <div>
-            <Navigation>
-              <Menu>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/projects")}
-                    to="/projects"
-                  >
-                    Portfolol
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/tldr")}
-                    to="/tldr"
-                  >
-                    Blog
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/wat")}
-                    to="/wat"
-                  >
-                    About
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/fame")}
-                    to="/fame"
-                  >
-                    Fame
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/question")}
-                    to="/question"
-                  >
-                    FAQ
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/people")}
-                    to="/people"
-                  >
-                    People
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    $isActive={location.pathname.includes("/eotm")}
-                    to="/eotm"
-                  >
-                    EOTM
-                  </Action>
-                </MenuItem>
-                <MenuItem>
-                  <Action
-                    button
-                    $isActive={location.pathname.includes("/contact")}
-                    to="/contact"
-                  >
-                    Contact
-                  </Action>
-                </MenuItem>
-              </Menu>
-              <MenuToggle>
-                <Action button onClick={controls.toggleModal}>
-                  <Icon name="menu" text="Toggle Menu" size="m" />
-                </Action>
-              </MenuToggle>
-            </Navigation>
-          </div>
-        </TopbarFlex>
-      </TopbarContent>
-    </TopbarEl>
-  );
-}
-
-Topbar.propTypes = {
-  controls: shape({
-    toggleModal: func.isRequired
-  }).isRequired
-};
-
-export default Topbar;
diff --git a/lib/ui/partials/ofLayout/Topbar.tsx b/lib/ui/partials/ofLayout/Topbar.tsx
new file mode 100644
index 00000000..ba24bdd9
--- /dev/null
+++ b/lib/ui/partials/ofLayout/Topbar.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+import { Link, type PageProps } from "gatsby";
+import styled from "styled-components";
+
+import { Action, Icon, Logo } from "ui/components";
+import { setSpace, setType } from "ui/mixins";
+import { breakpoint, time, zindex } from "ui/settings";
+
+const TopbarEl = styled.header`
+  ${setSpace("pah")};
+  ${setType("s")};
+  transition:
+    background ${time.m},
+    box-shadow ${time.m},
+    padding ${time.m};
+  z-index: ${zindex.z3};
+  ${breakpoint.phone} {
+    ${setSpace("phl")};
+  }
+`;
+
+const TopbarContent = styled.div``;
+
+const TopbarFlex = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+const Navigation = styled.nav``;
+
+const Menu = styled.ul`
+  display: none;
+  ${breakpoint.desktopUp} {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+const MenuItem = styled.li`
+  &:not(:first-child) {
+    ${setSpace("mll")};
+  }
+`;
+
+const MenuToggle = styled.div`
+  display: inline-block;
+  ${breakpoint.desktopUp} {
+    display: none;
+  }
+  button {
+    ${setSpace("pas")};
+  }
+`;
+
+interface TopbarProps {
+  controls: {
+    toggleModal: VoidFunction;
+  };
+  location: PageProps["location"];
+}
+
+const Topbar: React.FC<TopbarProps> = ({ controls, location, ...props }) => (
+  <TopbarEl {...props}>
+    <TopbarContent>
+      <TopbarFlex>
+        <div>
+          <Link to="/">
+            <h1>
+              <Logo size="l" />
+            </h1>
+          </Link>
+        </div>
+        <div>
+          <Navigation>
+            <Menu>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/projects")}
+                  to="/projects"
+                >
+                  Portfolol
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/tldr")}
+                  to="/tldr"
+                >
+                  Blog
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/wat")}
+                  to="/wat"
+                >
+                  About
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/fame")}
+                  to="/fame"
+                >
+                  Fame
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/question")}
+                  to="/question"
+                >
+                  FAQ
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/people")}
+                  to="/people"
+                >
+                  People
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  $isActive={location.pathname.includes("/eotm")}
+                  to="/eotm"
+                >
+                  EOTM
+                </Action>
+              </MenuItem>
+              <MenuItem>
+                <Action
+                  button
+                  $isActive={location.pathname.includes("/contact")}
+                  to="/contact"
+                >
+                  Contact
+                </Action>
+              </MenuItem>
+            </Menu>
+            <MenuToggle>
+              <Action button onClick={controls.toggleModal}>
+                <Icon name="menu" text="Toggle Menu" size="m" />
+              </Action>
+            </MenuToggle>
+          </Navigation>
+        </div>
+      </TopbarFlex>
+    </TopbarContent>
+  </TopbarEl>
+);
+
+export default Topbar;
diff --git a/lib/ui/partials/ofLayout/index.js b/lib/ui/partials/ofLayout/index.ts
similarity index 100%
rename from lib/ui/partials/ofLayout/index.js
rename to lib/ui/partials/ofLayout/index.ts

From 6f70baaaf9934ab9f4f63a8f57dd3302b4e4f261 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 13:52:17 -0500
Subject: [PATCH 13/28] refactor(contexts): port typescript

---
 .../contexts/{SharedHEX.context.js => SharedHEX.context.ts}  | 5 ++++-
 lib/ui/contexts/{index.js => index.ts}                       | 0
 2 files changed, 4 insertions(+), 1 deletion(-)
 rename lib/ui/contexts/{SharedHEX.context.js => SharedHEX.context.ts} (60%)
 rename lib/ui/contexts/{index.js => index.ts} (100%)

diff --git a/lib/ui/contexts/SharedHEX.context.js b/lib/ui/contexts/SharedHEX.context.ts
similarity index 60%
rename from lib/ui/contexts/SharedHEX.context.js
rename to lib/ui/contexts/SharedHEX.context.ts
index 555f8945..8ab30149 100644
--- a/lib/ui/contexts/SharedHEX.context.js
+++ b/lib/ui/contexts/SharedHEX.context.ts
@@ -1,4 +1,7 @@
 import { createContext } from "react";
 
-export const SharedHexContext = createContext();
+export const SharedHexContext = createContext({
+  BIFHEX: ''
+});
+
 export const SharedHexConsumer = SharedHexContext.Consumer;
diff --git a/lib/ui/contexts/index.js b/lib/ui/contexts/index.ts
similarity index 100%
rename from lib/ui/contexts/index.js
rename to lib/ui/contexts/index.ts

From 6696f6e1e1c9b06cf97ff67e31519c7ab9cef57b Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 14:18:52 -0500
Subject: [PATCH 14/28] refactor(partials): port most of them to typescript

and add types for react-helmet
---
 lib/config/{meta.js => meta.ts}           |  4 +-
 lib/ui/partials/Body.js                   | 32 ----------
 lib/ui/partials/Body.tsx                  | 29 +++++++++
 lib/ui/partials/{Header.js => Header.tsx} | 14 -----
 lib/ui/partials/Helmet.js                 | 73 ----------------------
 lib/ui/partials/Helmet.tsx                | 75 +++++++++++++++++++++++
 lib/ui/partials/{Pitch.js => Pitch.tsx}   |  0
 lib/ui/partials/{index.js => index.ts}    |  0
 package.json                              |  1 +
 tsconfig.json                             |  1 +
 yarn.lock                                 | 39 +++++++-----
 11 files changed, 132 insertions(+), 136 deletions(-)
 rename lib/config/{meta.js => meta.ts} (94%)
 delete mode 100644 lib/ui/partials/Body.js
 create mode 100644 lib/ui/partials/Body.tsx
 rename lib/ui/partials/{Header.js => Header.tsx} (55%)
 delete mode 100644 lib/ui/partials/Helmet.js
 create mode 100644 lib/ui/partials/Helmet.tsx
 rename lib/ui/partials/{Pitch.js => Pitch.tsx} (100%)
 rename lib/ui/partials/{index.js => index.ts} (100%)

diff --git a/lib/config/meta.js b/lib/config/meta.ts
similarity index 94%
rename from lib/config/meta.js
rename to lib/config/meta.ts
index 30c4d685..87395aea 100644
--- a/lib/config/meta.js
+++ b/lib/config/meta.ts
@@ -1,4 +1,4 @@
-module.exports = {
+const config = {
   /* some awkward meta */
   designer: "Mogli Studio — https://moglistudio.pl",
   owner: "Bad Idea Factory — https://biffud.com",
@@ -13,3 +13,5 @@ module.exports = {
   twitterHandle: "biffud", // used for twitter cards
   url: "https://biffud.com" // used as base for generating rel="canonical" links
 };
+
+export default config;
diff --git a/lib/ui/partials/Body.js b/lib/ui/partials/Body.js
deleted file mode 100644
index 8ee6681a..00000000
--- a/lib/ui/partials/Body.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import PropTypes from "prop-types";
-import React from "react";
-import styled, { ThemeProvider } from "styled-components";
-
-import { color } from "ui/settings";
-import { SharedHexConsumer } from "ui/contexts";
-import { whiteThm } from "ui/themes";
-
-const BodyEl = styled.section`
-  color: ${({ theme }) => theme.color};
-`;
-
-function Body(props) {
-  const { children, ...restProps } = props;
-  return (
-    <SharedHexConsumer>
-      {({ BIFHEX }) => (
-        <ThemeProvider
-          theme={{ ...whiteThm, actionColor: BIFHEX, actionColorLt: color.flareM, decor: BIFHEX }}
-        >
-          <BodyEl {...restProps}>{children}</BodyEl>
-        </ThemeProvider>
-      )}
-    </SharedHexConsumer>
-  );
-}
-
-Body.propTypes = {
-  children: PropTypes.node
-};
-
-export default Body;
diff --git a/lib/ui/partials/Body.tsx b/lib/ui/partials/Body.tsx
new file mode 100644
index 00000000..b9614684
--- /dev/null
+++ b/lib/ui/partials/Body.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
+
+import { color } from "ui/settings";
+import { SharedHexConsumer } from "ui/contexts";
+import { whiteThm } from "ui/themes";
+
+const BodyEl = styled.section`
+  color: ${({ theme }) => theme.color};
+`;
+
+const Body: React.FC<React.PropsWithChildren> = ({ children, ...props }) => (
+  <SharedHexConsumer>
+    {({ BIFHEX }) => (
+      <ThemeProvider
+        theme={{
+          ...whiteThm,
+          actionColor: BIFHEX,
+          actionColorLt: color.flareM,
+          decor: BIFHEX,
+        }}
+      >
+        <BodyEl {...props}>{children}</BodyEl>
+      </ThemeProvider>
+    )}
+  </SharedHexConsumer>
+);
+
+export default Body;
diff --git a/lib/ui/partials/Header.js b/lib/ui/partials/Header.tsx
similarity index 55%
rename from lib/ui/partials/Header.js
rename to lib/ui/partials/Header.tsx
index 26743d15..0330a566 100644
--- a/lib/ui/partials/Header.js
+++ b/lib/ui/partials/Header.tsx
@@ -27,20 +27,6 @@ const Header = styled.header`
     ${setType("l")};
     color: ${color.flareBlk};
   }
-  ${"" /* h1 {
-    ${setType("k")};
-    color: ${({ theme }) => theme.background};
-    font-weight: 800;
-    font-style: italic;
-    text-shadow: 1px 1px 0 ${({ theme }) => theme.color},
-      -1px -1px 0 ${({ theme }) => theme.color},
-      -1px 1px 0 ${({ theme }) => theme.color},
-      1px -1px 0 ${({ theme }) => theme.color},
-      0 -1px 0 ${({ theme }) => theme.color},
-      0 1px 0 ${({ theme }) => theme.color},
-      -1px 0 0 ${({ theme }) => theme.color},
-      1px 0 0 ${({ theme }) => theme.color};
-  } */};
 `;
 
 export default Header;
diff --git a/lib/ui/partials/Helmet.js b/lib/ui/partials/Helmet.js
deleted file mode 100644
index 7bed3b9a..00000000
--- a/lib/ui/partials/Helmet.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { object, string } from "prop-types";
-import Helmet from "react-helmet";
-import React from "react";
-
-import meta from "config/meta";
-import { favicon } from "assets/images";
-
-function CustomHelmet(props) {
-  const { description, location, keywords, title } = props;
-  return (
-    <Helmet
-      encodeSpecialCharacters
-      meta={[
-        { name: "designer", content: meta.designer },
-        { name: "author", content: meta.author },
-        { name: "owner", content: meta.owner },
-        { name: "title", content: title || meta.defaultTitle },
-        {
-          name: "description",
-          content: description || meta.description
-        },
-        { name: "keywords", content: keywords || meta.keywords },
-        { name: "charset", content: "utf-8" },
-        { name: "coverage", content: "Worldwide" },
-        { name: "distribution", content: "Global" },
-        { name: "language", content: "en" },
-        { name: "rating", content: "General" },
-        { name: "revist-after", content: "after 3 days" },
-        { name: "robots", content: "index, follow" },
-        {
-          name: "viewport",
-          content:
-            "width=device-width, minimum-scale = 1.0, initial-scale = 1.0, maximum-scale = 5.0, user-scalable=yes, shrink-to-fit=no"
-        }
-      ]}
-      defaultTitle={title || meta.defaultTitle}
-      titleTemplate={`%s ⋅ ${meta.defaultTitle}`}
-    >
-      <html lang="en" />
-
-      <title>{title || meta.defaultTitle}</title>
-
-      {/* Twitter Card */}
-      <meta name="twitter:card" content="summary" />
-      <meta name="twitter:creator" content={`@${meta.twitterHandle}`} />
-      <meta name="twitter:image" content="https://biffud.com/assets/ogcover.png" />
-
-      {/* Facebook OG */}
-      <meta
-        property="og:description"
-        content={description || meta.description}
-      />
-      <meta property="og:image" content="https://biffud.com/assets/ogcover.png" />
-      <meta property="og:locale" content="en" />
-      <meta property="og:site_name" content={meta.siteName} />
-      <meta property="og:title" content={meta.defaultTitle} />
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content={meta.url} />
-
-      <link rel="icon" type="image/x-icon" href={favicon} />
-      <link rel="canonical" href={`${meta.url}${location.pathname}`} />
-    </Helmet>
-  );
-}
-
-CustomHelmet.propTypes = {
-  description: string,
-  location: object.isRequired,
-  keywords: string,
-  title: string
-};
-
-export default CustomHelmet;
diff --git a/lib/ui/partials/Helmet.tsx b/lib/ui/partials/Helmet.tsx
new file mode 100644
index 00000000..7b671888
--- /dev/null
+++ b/lib/ui/partials/Helmet.tsx
@@ -0,0 +1,75 @@
+import Helmet from "react-helmet";
+import React from "react";
+
+import meta from "config/meta";
+import { favicon } from "assets/images";
+import { PageProps } from "gatsby";
+
+interface CustomHelmetProps {
+  description: string;
+  location: PageProps["location"];
+  keywords: string;
+  title: string;
+}
+
+const CustomHelmet: React.FC<CustomHelmetProps> = ({
+  description,
+  location,
+  keywords,
+  title,
+}) => (
+  <Helmet
+    encodeSpecialCharacters
+    meta={[
+      { name: "designer", content: meta.designer },
+      { name: "author", content: meta.author },
+      { name: "owner", content: meta.owner },
+      { name: "title", content: title || meta.defaultTitle },
+      {
+        name: "description",
+        content: description || meta.description,
+      },
+      { name: "keywords", content: keywords || meta.keywords },
+      { name: "charset", content: "utf-8" },
+      { name: "coverage", content: "Worldwide" },
+      { name: "distribution", content: "Global" },
+      { name: "language", content: "en" },
+      { name: "rating", content: "General" },
+      { name: "revist-after", content: "after 3 days" },
+      { name: "robots", content: "index, follow" },
+      {
+        name: "viewport",
+        content:
+          "width=device-width, minimum-scale = 1.0, initial-scale = 1.0, maximum-scale = 5.0, user-scalable=yes, shrink-to-fit=no",
+      },
+    ]}
+    defaultTitle={title || meta.defaultTitle}
+    titleTemplate={`%s ⋅ ${meta.defaultTitle}`}
+  >
+    <html lang="en" />
+
+    <title>{title || meta.defaultTitle}</title>
+
+    {/* Twitter Card */}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content={`@${meta.twitterHandle}`} />
+    <meta
+      name="twitter:image"
+      content="https://biffud.com/assets/ogcover.png"
+    />
+
+    {/* Facebook OG */}
+    <meta property="og:description" content={description || meta.description} />
+    <meta property="og:image" content="https://biffud.com/assets/ogcover.png" />
+    <meta property="og:locale" content="en" />
+    <meta property="og:site_name" content={meta.siteName} />
+    <meta property="og:title" content={meta.defaultTitle} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={meta.url} />
+
+    <link rel="icon" type="image/x-icon" href={favicon} />
+    <link rel="canonical" href={`${meta.url}${location.pathname}`} />
+  </Helmet>
+);
+
+export default CustomHelmet;
diff --git a/lib/ui/partials/Pitch.js b/lib/ui/partials/Pitch.tsx
similarity index 100%
rename from lib/ui/partials/Pitch.js
rename to lib/ui/partials/Pitch.tsx
diff --git a/lib/ui/partials/index.js b/lib/ui/partials/index.ts
similarity index 100%
rename from lib/ui/partials/index.js
rename to lib/ui/partials/index.ts
diff --git a/package.json b/package.json
index 2e51e24f..09a5a395 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "3.2.0",
     "@eslint/js": "9.15.0",
+    "@types/react-helmet": "^6.1.11",
     "eslint": "9.15.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
diff --git a/tsconfig.json b/tsconfig.json
index 978072a7..39e87b25 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "moduleResolution": "node",
     "paths": {
       "assets/*": ["./lib/assets/*"],
+      "config/*": ["./lib/config/*"],
       "ui/*": ["./lib/ui/*"]
     },
     "esModuleInterop": true,
diff --git a/yarn.lock b/yarn.lock
index 96ca4809..5202ad40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1092,6 +1092,21 @@
   resolved "https://registry.yarnpkg.com/@eslint/core/-/core-0.9.0.tgz#168ee076f94b152c01ca416c3e5cf82290ab4fcd"
   integrity sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==
 
+"@eslint/eslintrc@3.2.0", "@eslint/eslintrc@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.2.0.tgz#57470ac4e2e283a6bf76044d63281196e370542c"
+  integrity sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1122,27 +1137,12 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.2.0.tgz#57470ac4e2e283a6bf76044d63281196e370542c"
-  integrity sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^10.0.1"
-    globals "^14.0.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.1.2"
-    strip-json-comments "^3.1.1"
-
 "@eslint/js@8.57.1":
   version "8.57.1"
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
-"@eslint/js@9.15.0", "@eslint/js@^9.15.0":
+"@eslint/js@9.15.0":
   version "9.15.0"
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.15.0.tgz#df0e24fe869143b59731942128c19938fdbadfb5"
   integrity sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==
@@ -2365,6 +2365,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.11":
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.11.tgz#8cafcafff38f75361f451563ba7b406b0c5d3907"
+  integrity sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.3.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"

From 7193712e9fbbdf8462ddd9491132b99b993904a8 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 14:33:48 -0500
Subject: [PATCH 15/28] refactor(assets): port remainder to typescript

---
 lib/assets/fonts/{index.js => index.ts}  | 0
 lib/assets/styles/{index.js => index.ts} | 0
 lib/assets/styles/{reset.js => reset.ts} | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename lib/assets/fonts/{index.js => index.ts} (100%)
 rename lib/assets/styles/{index.js => index.ts} (100%)
 rename lib/assets/styles/{reset.js => reset.ts} (100%)

diff --git a/lib/assets/fonts/index.js b/lib/assets/fonts/index.ts
similarity index 100%
rename from lib/assets/fonts/index.js
rename to lib/assets/fonts/index.ts
diff --git a/lib/assets/styles/index.js b/lib/assets/styles/index.ts
similarity index 100%
rename from lib/assets/styles/index.js
rename to lib/assets/styles/index.ts
diff --git a/lib/assets/styles/reset.js b/lib/assets/styles/reset.ts
similarity index 100%
rename from lib/assets/styles/reset.js
rename to lib/assets/styles/reset.ts

From b1540367a061190fc300a1cb10d19909d642c6c3 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 15:26:05 -0500
Subject: [PATCH 16/28] refactor(Layout): port typescript + convert to
 functional component

---
 lib/ui/partials/Layout.js  | 198 -------------------------------------
 lib/ui/partials/Layout.tsx | 174 ++++++++++++++++++++++++++++++++
 2 files changed, 174 insertions(+), 198 deletions(-)
 delete mode 100644 lib/ui/partials/Layout.js
 create mode 100644 lib/ui/partials/Layout.tsx

diff --git a/lib/ui/partials/Layout.js b/lib/ui/partials/Layout.js
deleted file mode 100644
index 54e4258f..00000000
--- a/lib/ui/partials/Layout.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/* eslint no-unused-expressions: 0 */
-import { array, oneOfType, object } from "prop-types";
-import { createGlobalStyle, ThemeProvider } from "styled-components";
-import { transparentize } from 'polished'
-import React, { Component } from "react";
-
-import { defaultThm } from "ui/themes";
-import { breakpoint, color, font, time, zindex } from "ui/settings";
-import { reset } from "assets/styles";
-import { setHeight, setWidth, setType } from "ui/mixins";
-import { SharedHexContext } from "ui/contexts";
-
-import { Footer, Main, MobileMenu, Parallax, Topbar } from "./ofLayout";
-
-const GlobalStyle = createGlobalStyle`
-  ${reset};
-  #___gatsby {
-    overflow-x: hidden;
-  }
-  html {
-    background: white;
-  }
-  body {
-    ${setType("m")};
-    background-color: ${({ theme }) => theme.background};
-    color: ${({ theme }) => theme.color};
-    font-family: ${font.sans};
-    min-height: 100vh;
-    position: relative;
-    transition: background ${time.m};
-    width: 100%;
-    z-index: ${zindex.z1};
-  }
-  img {
-    line-height: 0;
-  }
-  a,
-  abbr {
-    text-decoration: none;
-  }
-  *::selection { background: ${({ theme }) => theme.selectionColor}; }
-  *::-moz-selection { background: ${({ theme }) => theme.selectionColor}; }
-  .HeroParallax {
-    transform: translateY(0);
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    text-align: center;
-    top: 100px;
-    z-index: -${zindex.z1};
-    & > * {
-      bottom: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-  .border {
-    display: none;
-  }
-  ${breakpoint.tabletUp} {
-    .border {
-      background: white;
-      display: block;
-      position: fixed;
-      z-index: ${zindex.z2};
-    }
-    .border.bt,
-    .border.bb {
-      ${setHeight("x")};
-    }
-    .border.bl,
-    .border.br {
-      ${setWidth("x")};
-    }
-    .border.bt {
-      left: 0;
-      right: 0;
-      top: 0;
-    }
-    .border.bb {
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .border.br {
-      bottom: 0;
-      right: 0;
-      top: 0;
-    }
-    .border.bl {
-      bottom: 0;
-      left: 0;
-      top: 0;
-    }
-  }
-`;
-
-class Layout extends Component {
-  constructor(props) {
-    super(props);
-
-    // get random bifhex
-    const { hexArray } = color;
-    this.BIFHEX = hexArray[Math.floor(Math.random() * hexArray.length)];
-
-    this.state = {
-      hasMobileMenu: false,
-      BIFHEX: this.BIFHEX
-    };
-
-    this.detectWidth = this.detectWidth.bind(this);
-    this.toggleMobileMenu = this.toggleMobileMenu.bind(this);
-  }
-
-  componentDidMount() {
-    this.detectWidth();
-    window.addEventListener("resize", this.detectWidth);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.detectWidth);
-  }
-
-  detectWidth() {
-    if (this.state.hasMobileMenu && window.innerWidth >= 768) {
-      this.toggleMobileMenu();
-    }
-    return null;
-  }
-
-  toggleMobileMenu() {
-    this.setState(prevState => ({ hasMobileMenu: !prevState.hasMobileMenu }));
-  }
-
-  render() {
-    const { children, location } = this.props;
-    const { BIFHEX, hasMobileMenu } = this.state;
-
-    const controls = {
-      toggleModal: this.toggleMobileMenu
-    };
-
-    return (
-      <SharedHexContext.Provider
-        value={{
-          BIFHEX
-        }}
-      >
-        <ThemeProvider
-          theme={{
-            ...defaultThm,
-            background: BIFHEX,
-            modalDecor: BIFHEX,
-            actionColorLt: transparentize(0.8, BIFHEX),
-          }}
-        >
-          <>
-            <Parallax />
-            <Topbar
-              controls={controls}
-              location={location}
-            />
-            <Main>{children}</Main>
-            <Footer />
-            <GlobalStyle
-              theme={{
-                ...defaultThm,
-                background: BIFHEX,
-                modalDecor: BIFHEX,
-                actionColorLt: color.flareM,
-              }}
-            />
-            {hasMobileMenu ? (
-              <MobileMenu
-                location={location}
-                toggleModal={this.toggleMobileMenu}
-              />
-            ) : null}
-            <div className="border bt" />
-            <div className="border bl" />
-            <div className="border br" />
-            <div className="border bb" />
-          </>
-        </ThemeProvider>
-      </SharedHexContext.Provider>
-    );
-  }
-}
-
-Layout.propTypes = {
-  children: oneOfType([array, object]).isRequired,
-  location: object.isRequired
-};
-
-export default Layout;
diff --git a/lib/ui/partials/Layout.tsx b/lib/ui/partials/Layout.tsx
new file mode 100644
index 00000000..32a7ad1c
--- /dev/null
+++ b/lib/ui/partials/Layout.tsx
@@ -0,0 +1,174 @@
+import React, { useEffect, useState } from "react";
+import { type PageProps } from "gatsby";
+import { createGlobalStyle, ThemeProvider } from "styled-components";
+import { transparentize } from "polished";
+
+import { reset } from "assets/styles";
+import { SharedHexContext } from "ui/contexts";
+import { setHeight, setWidth, setType } from "ui/mixins";
+import { breakpoint, color, font, time, zindex } from "ui/settings";
+import { defaultThm } from "ui/themes";
+
+import { Footer, Main, MobileMenu, Parallax, Topbar } from "./ofLayout";
+
+const GlobalStyle = createGlobalStyle`
+  ${reset};
+  #___gatsby {
+    overflow-x: hidden;
+  }
+  html {
+    background: white;
+  }
+  body {
+    ${setType("m")};
+    background-color: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.color};
+    font-family: ${font.sans};
+    min-height: 100vh;
+    position: relative;
+    transition: background ${time.m};
+    width: 100%;
+    z-index: ${zindex.z1};
+  }
+  img {
+    line-height: 0;
+  }
+  a,
+  abbr {
+    text-decoration: none;
+  }
+  *::selection { background: ${({ theme }) => theme.selectionColor}; }
+  *::-moz-selection { background: ${({ theme }) => theme.selectionColor}; }
+  .HeroParallax {
+    transform: translateY(0);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    top: 100px;
+    z-index: -${zindex.z1};
+    & > * {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  .border {
+    display: none;
+  }
+  ${breakpoint.tabletUp} {
+    .border {
+      background: white;
+      display: block;
+      position: fixed;
+      z-index: ${zindex.z2};
+    }
+    .border.bt,
+    .border.bb {
+      ${setHeight("x")};
+    }
+    .border.bl,
+    .border.br {
+      ${setWidth("x")};
+    }
+    .border.bt {
+      left: 0;
+      right: 0;
+      top: 0;
+    }
+    .border.bb {
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .border.br {
+      bottom: 0;
+      right: 0;
+      top: 0;
+    }
+    .border.bl {
+      bottom: 0;
+      left: 0;
+      top: 0;
+    }
+  }
+`;
+
+const Layout: React.FC<PageProps> = ({ children, location }) => {
+  const [hasMobileMenu, setMobileMenu] = useState(false);
+
+  // get random bifhex
+  const { hexArray } = color;
+  const BIFHEX = hexArray[Math.floor(Math.random() * hexArray.length)];
+
+  useEffect(() => {
+    detectWidth();
+    window.addEventListener("resize", detectWidth);
+
+    return () => {
+      window.removeEventListener("resize", detectWidth);
+    };
+  }, []);
+
+  function detectWidth() {
+    if (hasMobileMenu && window.innerWidth >= 768) {
+      toggleMobileMenu();
+    }
+    return null;
+  }
+
+  function toggleMobileMenu() {
+    setMobileMenu(!hasMobileMenu);
+  }
+
+  const controls = {
+    toggleModal: toggleMobileMenu,
+  };
+
+  return (
+    <SharedHexContext.Provider
+      value={{
+        BIFHEX,
+      }}
+    >
+      <ThemeProvider
+        theme={{
+          ...defaultThm,
+          background: BIFHEX,
+          modalDecor: BIFHEX,
+          actionColorLt: transparentize(0.8, BIFHEX),
+        }}
+      >
+        <>
+          <Parallax />
+          <Topbar controls={controls} location={location} />
+          <Main>{children}</Main>
+          <Footer />
+          <GlobalStyle
+            theme={{
+              ...defaultThm,
+              background: BIFHEX,
+              modalDecor: BIFHEX,
+              actionColorLt: color.flareM,
+            }}
+          />
+          {hasMobileMenu ? (
+            <MobileMenu
+              location={location}
+              toggleModal={toggleMobileMenu}
+            />
+          ) : null}
+          <div className="border bt" />
+          <div className="border bl" />
+          <div className="border br" />
+          <div className="border bb" />
+        </>
+      </ThemeProvider>
+    </SharedHexContext.Provider>
+  );
+};
+
+export default Layout;

From 199bcd3dae40735e6373efe065575e9c42ff8dfd Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 15:27:08 -0500
Subject: [PATCH 17/28] refactor(setSpace): port to typescript

not done! see ts errors in setSpace.ts
---
 lib/ui/mixins/{setSpace.js => setSpace.ts} | 14 +++++++-------
 lib/ui/settings/spaces.ts                  |  2 ++
 2 files changed, 9 insertions(+), 7 deletions(-)
 rename lib/ui/mixins/{setSpace.js => setSpace.ts} (77%)

diff --git a/lib/ui/mixins/setSpace.js b/lib/ui/mixins/setSpace.ts
similarity index 77%
rename from lib/ui/mixins/setSpace.js
rename to lib/ui/mixins/setSpace.ts
index 79c897b1..e725ec3f 100644
--- a/lib/ui/mixins/setSpace.js
+++ b/lib/ui/mixins/setSpace.ts
@@ -1,23 +1,23 @@
-import { space } from "ui/settings";
+import { space, type SpaceValue } from "ui/settings";
 import fluidify from "./ofMixins/fluidify";
 
-/* eslint import/prefer-default-export: 0 */
-export const setSpace = (args, force) => {
-  const prop = args.substr(0, 1);
-  const pos = args.substr(1, 1);
-  const size = args.substr(2, 1);
+export const setSpace = (args: string, force?: 'force') => {
+  const prop: keyof typeof properties = args.substring(0, 1);
+  const pos: SpaceValue = args.substring(1, 2);
+  const size: SpaceValue = args.substring(2, 3);
   const properties = {
     b: "border-width",
     m: "margin",
     p: "padding"
   };
-  const positions = {
+  const positions: Record<SpaceValue, string> = {
     t: "top",
     b: "bottom",
     l: "left",
     r: "right"
   };
   const isImportant = force === "force";
+
   switch (pos) {
     case "a":
       return fluidify(
diff --git a/lib/ui/settings/spaces.ts b/lib/ui/settings/spaces.ts
index afc34409..0d1a19b0 100644
--- a/lib/ui/settings/spaces.ts
+++ b/lib/ui/settings/spaces.ts
@@ -1,3 +1,5 @@
+export type SpaceValue = keyof typeof spaces;
+
 export const spaces = {
   k: ["50px", "100px"],
   h: ["38px", "64px"],

From 6f107adc556e5f6ae3b72e275f697ca3f67c61c1 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 15:33:09 -0500
Subject: [PATCH 18/28] refactor(Gallery): port typescript

---
 .../galleries/{Gallery.js => Gallery.tsx}     | 57 ++++++++-----------
 1 file changed, 24 insertions(+), 33 deletions(-)
 rename lib/ui/components/galleries/{Gallery.js => Gallery.tsx} (50%)

diff --git a/lib/ui/components/galleries/Gallery.js b/lib/ui/components/galleries/Gallery.tsx
similarity index 50%
rename from lib/ui/components/galleries/Gallery.js
rename to lib/ui/components/galleries/Gallery.tsx
index 9b14b1a3..79437c39 100644
--- a/lib/ui/components/galleries/Gallery.js
+++ b/lib/ui/components/galleries/Gallery.tsx
@@ -1,7 +1,6 @@
-import React, { Component } from "react";
-import { array, object } from "prop-types";
+import React, { useState } from "react";
 import styled from "styled-components";
-import { GatsbyImage } from "gatsby-plugin-image";
+import { GatsbyImage, GatsbyImageProps } from "gatsby-plugin-image";
 
 import { time } from "../../settings";
 
@@ -21,55 +20,47 @@ const Thumb = styled.li`
   border: 2px solid ${({ theme }) => theme.actionColor};
   cursor: pointer;
   grid-row-end: span 1;
-  transition: box-shadow ${time.s}, transform ${time.s};
+  transition:
+    box-shadow ${time.s},
+    transform ${time.s};
   &:hover {
     box-shadow: 4px 4px 0 0 ${({ theme }) => theme.actionDecor};
     transform: translate(-1px, -1px);
   }
 `;
 
-class Gallery extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { current: 0 };
-  }
+interface GalleryProps {
+  images?: GatsbyImageProps["image"][];
+  defaultImage: GatsbyImageProps["image"];
+}
 
-  render() {
-    const { current } = this.state;
-    const { images, defaultImage } = this.props;
-    if (images && images.length > 0) {
-      return <>
+const Gallery: React.FC<GalleryProps> = ({ images, defaultImage }) => {
+  const [current, setCurrent] = useState(0);
+
+  if (images && images.length > 0) {
+    return (
+      <>
         <Image>
           <GatsbyImage image={images[current]} alt="" />
         </Image>
         <Thumbs>
           {images.length > 1
             ? images.map((image, i) => (
-              <Thumb
-                key={i}
-                onClick={() => this.setState({ current: i })}
-                role="button"
-              >
-                <GatsbyImage image={image} alt="" />
-              </Thumb>
+                <Thumb key={i} onClick={() => setCurrent(i)} role="button">
+                  <GatsbyImage image={image} alt="" />
+                </Thumb>
               ))
             : null}
         </Thumbs>
-      </>;
-    }
-    return (
-      <Image>
-        <GatsbyImage image={defaultImage} alt="" />
-      </Image>
+      </>
     );
   }
-}
 
-Gallery.propTypes = {
-  images: array,
-  defaultImage: object.isRequired
+  return (
+    <Image>
+      <GatsbyImage image={defaultImage} alt="" />
+    </Image>
+  );
 };
 
-Gallery.defaultProps = { images: null };
-
 export default Gallery;

From fe740fd9a04dd47a3c7688b6c51d95413545afb7 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 15:41:43 -0500
Subject: [PATCH 19/28] refactor(Icon): port typescript

---
 lib/ui/components/icons/{Icon.js => Icon.tsx} | 39 +++++++++----------
 lib/ui/mixins/setType.ts                      |  2 +
 2 files changed, 21 insertions(+), 20 deletions(-)
 rename lib/ui/components/icons/{Icon.js => Icon.tsx} (66%)

diff --git a/lib/ui/components/icons/Icon.js b/lib/ui/components/icons/Icon.tsx
similarity index 66%
rename from lib/ui/components/icons/Icon.js
rename to lib/ui/components/icons/Icon.tsx
index 4834b5ce..df2f139f 100644
--- a/lib/ui/components/icons/Icon.js
+++ b/lib/ui/components/icons/Icon.tsx
@@ -1,17 +1,20 @@
-import { shape, string } from "prop-types";
 import React from "react";
 import styled from "styled-components";
 import { FaLink } from "react-icons/fa";
 import { SiBluesky, SiMastodon } from "react-icons/si";
 
 import "assets/fonts";
-import { setType } from "ui/mixins";
+import { setType, type FSizeValue } from "ui/mixins";
 
-const IconEl = styled.i`
-  ${({ size = 's' }) => setType(size)};
+interface IconElProps {
+  readonly $size?: FSizeValue
+}
+
+const IconEl = styled.i<IconElProps>`
+  ${({ $size = 's' }) => setType($size)};
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  color: ${({ theme }) => (theme.iconColor || 'inherit') };
+  color: ${({ theme }) => (theme.iconColor ?? 'inherit') };
   font-family: "bif-iconfont";
   font-style: normal;
   font-variant: normal;
@@ -30,8 +33,13 @@ const IconEl = styled.i`
   }
 `;
 
-function Icon(props) {
-  const { name, text, ...restProps } = props;
+interface IconProps {
+  name: string;
+  text?: string;
+  size?: FSizeValue;
+}
+
+const Icon: React.FC<IconProps> = ({ name, text, size, ...props }) => {
   switch (name) {
     // I'm not going to generate a new IcoMoon font for these
     // and in any case they don't have Bluesky or Mastdon readily
@@ -39,7 +47,7 @@ function Icon(props) {
     // more flexible
     case 'bluesky':
       return (
-        <IconEl {...restProps} className={`icon-${name}`} style={{
+        <IconEl {...props} $size={size} className={`icon-${name}`} style={{
           top: '1px',
           position: 'relative'
         }}>
@@ -48,7 +56,7 @@ function Icon(props) {
       )
     case 'mastodon':
       return (
-        <IconEl {...restProps} className={`icon-${name}`} style={{
+        <IconEl {...props} $size={size} className={`icon-${name}`} style={{
           top: '1px',
           position: 'relative'
         }}>
@@ -57,7 +65,7 @@ function Icon(props) {
       )
     case 'website':
       return (
-        <IconEl {...restProps} className={`icon-${name}`} style={{
+        <IconEl {...props} $size={size} className={`icon-${name}`} style={{
           top: '1px',
           position: 'relative'
         }}>
@@ -66,20 +74,11 @@ function Icon(props) {
       )
     default:
       return (
-        <IconEl {...restProps} className={`icon-${name}`}>
+        <IconEl {...props} $size={size} className={`icon-${name}`}>
           {text ? <span>{text}</span> : null}
         </IconEl>
       )
   }
 }
 
-Icon.propTypes = {
-  name: string.isRequired,
-  size: string,
-  text: string,
-  theme: shape({
-    iconColor: string
-  })
-};
-
 export default Icon;
diff --git a/lib/ui/mixins/setType.ts b/lib/ui/mixins/setType.ts
index b8a9c3a1..805d0ca6 100644
--- a/lib/ui/mixins/setType.ts
+++ b/lib/ui/mixins/setType.ts
@@ -31,3 +31,5 @@ export const setType = (size: FSizeValue) => {
       }`;
   }
 };
+
+export { FSizeValue };

From 7a0745bbfa69450f98bd064237492902b0c795cd Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 15:46:59 -0500
Subject: [PATCH 20/28] refactor(Tabs): port typescript

---
 lib/ui/components/tabs/{Tab.js => Tab.tsx}   | 35 +++++++++++---------
 lib/ui/components/tabs/{Tabs.js => Tabs.tsx} | 23 +++++++------
 2 files changed, 32 insertions(+), 26 deletions(-)
 rename lib/ui/components/tabs/{Tab.js => Tab.tsx} (57%)
 rename lib/ui/components/tabs/{Tabs.js => Tabs.tsx} (51%)

diff --git a/lib/ui/components/tabs/Tab.js b/lib/ui/components/tabs/Tab.tsx
similarity index 57%
rename from lib/ui/components/tabs/Tab.js
rename to lib/ui/components/tabs/Tab.tsx
index 1c76faec..a4d941a9 100644
--- a/lib/ui/components/tabs/Tab.js
+++ b/lib/ui/components/tabs/Tab.tsx
@@ -1,11 +1,14 @@
-import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
 
 import { breakpoint } from "ui/settings";
 import { setSpace, setType } from "ui/mixins";
 
-const TabLink = styled.h2`
+interface TabLinkProps {
+  readonly $isActive: boolean;
+}
+
+const TabLink = styled.h2<TabLinkProps>`
   ${setSpace("pvm")};
   ${setSpace("phx")};
   ${setType("m")};
@@ -21,21 +24,21 @@ const TabLink = styled.h2`
   }
 `;
 
-function Tab(props) {
-  const { isActive, children, handleClick = () => {} } = props;
-  return (
-    <li>
-      <TabLink $isActive={isActive} onClick={handleClick} role="button">
-        {children}
-      </TabLink>
-    </li>
-  );
+interface TabProps extends React.PropsWithChildren {
+  isActive: boolean;
+  handleClick: VoidFunction;
 }
 
-Tab.propTypes = {
-  isActive: PropTypes.bool,
-  handleClick: PropTypes.func,
-  children: PropTypes.node
-};
+const Tab: React.FC<TabProps> = ({
+  isActive,
+  children,
+  handleClick = () => {},
+}) => (
+  <li>
+    <TabLink $isActive={isActive} onClick={handleClick} role="button">
+      {children}
+    </TabLink>
+  </li>
+);
 
 export default Tab;
diff --git a/lib/ui/components/tabs/Tabs.js b/lib/ui/components/tabs/Tabs.tsx
similarity index 51%
rename from lib/ui/components/tabs/Tabs.js
rename to lib/ui/components/tabs/Tabs.tsx
index c7ab4539..c6b37bad 100644
--- a/lib/ui/components/tabs/Tabs.js
+++ b/lib/ui/components/tabs/Tabs.tsx
@@ -1,11 +1,13 @@
-import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
 
 import "ui/themes";
 import "ui/mixins";
 
-const TabsEl = styled.ol`
+interface TabsElProps {
+  readonly $count: number;
+}
+const TabsEl = styled.ol<TabsElProps>`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -17,15 +19,16 @@ const TabsEl = styled.ol`
   }
 `;
 
-function Tabs({ children, count, ...restProps }) {
-  return <nav>
-    <TabsEl $count={count} {...restProps}>{children}</TabsEl>
-  </nav>
+interface TabsProps extends React.PropsWithChildren {
+  count: number;
 }
 
-Tabs.propTypes = {
-  children: PropTypes.node,
-  count: PropTypes.number
-};
+const Tabs: React.FC<TabsProps> = ({ children, count, ...props }) => (
+  <nav>
+    <TabsEl $count={count} {...props}>
+      {children}
+    </TabsEl>
+  </nav>
+);
 
 export default Tabs;

From a43e3f0aededbb0e1a807460fb0cf99fae0f0255 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 16:11:36 -0500
Subject: [PATCH 21/28] refactor(Copy): port typescript

---
 lib/ui/components/text/{Copy.js => Copy.tsx} | 36 +++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)
 rename lib/ui/components/text/{Copy.js => Copy.tsx} (89%)

diff --git a/lib/ui/components/text/Copy.js b/lib/ui/components/text/Copy.tsx
similarity index 89%
rename from lib/ui/components/text/Copy.js
rename to lib/ui/components/text/Copy.tsx
index 5c081f5c..9456168b 100644
--- a/lib/ui/components/text/Copy.js
+++ b/lib/ui/components/text/Copy.tsx
@@ -1,28 +1,40 @@
-/* eslint no-unused-vars: 0 */
-import { bool, shape, string } from "prop-types";
 import styled from "styled-components";
 
 import { setSpace, setType } from "ui/mixins";
 
-// prettier-ignore
-
 const Copy = styled.div`
   color: ${({ theme }) => theme.color};
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: ${({ theme }) => theme.titleColor};
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     &:not(:first-child) {
       ${setSpace("mtl")};
     }
   }
 
-  h1, h2, h3, h4, h5, h6,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
   div,
   p,
-  ul, ol {
+  ul,
+  ol {
     &:not(:last-child) {
       ${setSpace("mbm")};
     }
@@ -54,8 +66,7 @@ const Copy = styled.div`
     font-weight: 600;
     text-transform: uppercase;
   }
-  p {
-  }
+
   ul {
     ${setSpace("pll")};
   }
@@ -70,10 +81,12 @@ const Copy = styled.div`
     ${setSpace("mlm")};
     list-style: decimal;
   }
+
   a {
     color: ${({ theme }) => theme.actionColor};
     text-decoration: underline;
   }
+
   blockquote {
     ${setSpace("mhl")};
     ${setSpace("mvh")};
@@ -108,6 +121,7 @@ const Copy = styled.div`
   em {
     font-style: italic;
   }
+
   strong {
     color: ${({ theme }) => theme.titleColor};
     font-weight: 600;
@@ -118,6 +132,4 @@ const Copy = styled.div`
   }
 `;
 
-Copy.propTypes = {};
-
 export default Copy;

From 2c980b3a79f184b9ec765a4906a5fc803320a2b2 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 16:11:56 -0500
Subject: [PATCH 22/28] refactor(Tile): port typescript

not done; there are types to pass thru because <Tile> is polymorphic and
can be rendered as <a> with its associated props/attributes
---
 lib/ui/components/tiles/{Tile.js => Tile.tsx} | 33 ++++++++++---------
 lib/ui/mixins/setSpace.ts                     |  8 +++--
 2 files changed, 22 insertions(+), 19 deletions(-)
 rename lib/ui/components/tiles/{Tile.js => Tile.tsx} (67%)

diff --git a/lib/ui/components/tiles/Tile.js b/lib/ui/components/tiles/Tile.tsx
similarity index 67%
rename from lib/ui/components/tiles/Tile.js
rename to lib/ui/components/tiles/Tile.tsx
index 0e24e6e8..749e9454 100644
--- a/lib/ui/components/tiles/Tile.js
+++ b/lib/ui/components/tiles/Tile.tsx
@@ -1,14 +1,17 @@
-import { string } from "prop-types";
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 
 import { time } from "ui/settings";
-import { setSpace } from "ui/mixins";
+import { setSpace, type SpaceValue } from "ui/mixins";
 import { SharedHexConsumer } from "ui/contexts";
 import { whiteThm } from "ui/themes";
 
-const Element = styled.div`
-  ${({ $space = 'l'}) => setSpace(`pa${$space}`)};
+interface ElementProps {
+  readonly $space: SpaceValue;
+}
+
+const Element = styled.div<ElementProps>`
+  ${({ $space = "l" }) => setSpace(`pa${$space}`)};
   background: ${({ theme }) => theme.background};
   color: ${({ theme }) => theme.color};
   display: block;
@@ -19,32 +22,30 @@ const Element = styled.div`
     color: ${({ theme }) => theme.titleColor};
   }
   ${({ onClick, href, theme, to }) =>
-    onClick || href || to
+    (onClick || href || to)
       ? `
     transition: box-shadow ${time.s}, transform ${time.s};
     &:hover {
       box-shadow: 6px 6px 0 0 ${theme.actionDecor};
       transform: translate(-1px, -1px);
-    }
-  `
+    }`
       : ``};
 `;
 
-function Tile(props) {
-  const { space, ...restProps } = props;
-  return <SharedHexConsumer>
+interface TileProps {
+  space: SpaceValue;
+}
+
+const Tile: React.FC<TileProps> = ({ space, ...props }) => (
+  <SharedHexConsumer>
     {({ BIFHEX }) => (
       <ThemeProvider
         theme={{ ...whiteThm, actionColor: BIFHEX, decor: BIFHEX }}
       >
-        <Element $space={space} {...restProps} />
+        <Element $space={space} {...props} />
       </ThemeProvider>
     )}
   </SharedHexConsumer>
-}
-
-Tile.propTypes = {
-  space: string
-};
+);
 
 export default Tile;
diff --git a/lib/ui/mixins/setSpace.ts b/lib/ui/mixins/setSpace.ts
index e725ec3f..e03e2298 100644
--- a/lib/ui/mixins/setSpace.ts
+++ b/lib/ui/mixins/setSpace.ts
@@ -1,20 +1,20 @@
 import { space, type SpaceValue } from "ui/settings";
 import fluidify from "./ofMixins/fluidify";
 
-export const setSpace = (args: string, force?: 'force') => {
+export const setSpace = (args: string, force?: "force") => {
   const prop: keyof typeof properties = args.substring(0, 1);
   const pos: SpaceValue = args.substring(1, 2);
   const size: SpaceValue = args.substring(2, 3);
   const properties = {
     b: "border-width",
     m: "margin",
-    p: "padding"
+    p: "padding",
   };
   const positions: Record<SpaceValue, string> = {
     t: "top",
     b: "bottom",
     l: "left",
-    r: "right"
+    r: "right",
   };
   const isImportant = force === "force";
 
@@ -56,3 +56,5 @@ export const setSpace = (args: string, force?: 'force') => {
       );
   }
 };
+
+export { SpaceValue };

From 16cf524a59d79927f834ab53afeb224403c416a0 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 16:55:59 -0500
Subject: [PATCH 23/28] refactor(Modal): port typescript

---
 lib/ui/components/modals/Modal.js  | 139 -----------------------------
 lib/ui/components/modals/Modal.tsx | 123 +++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 139 deletions(-)
 delete mode 100644 lib/ui/components/modals/Modal.js
 create mode 100644 lib/ui/components/modals/Modal.tsx

diff --git a/lib/ui/components/modals/Modal.js b/lib/ui/components/modals/Modal.js
deleted file mode 100644
index ce5f25bd..00000000
--- a/lib/ui/components/modals/Modal.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import PropTypes from "prop-types";
-import React, { Component } from "react";
-import styled, { ThemeProvider } from "styled-components";
-
-import { Actionbar, Action, Icon } from "ui/components";
-import { breakpoint, color } from "ui/settings";
-import { setSpace, setType } from "ui/mixins";
-import { SharedHexConsumer } from "ui/contexts";
-import { whiteThm } from "ui/themes";
-
-const Overlay = styled.div`
-  ${setSpace("pal")};
-  align-items: center;
-  background: ${color.shadowHL};
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-`;
-
-const ModalClose = styled.div`
-  ${setSpace("ptm")};
-  ${setSpace("prm")};
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-`;
-
-const ModalEl = styled.div`
-  background: ${({ theme }) => theme.modalBackground};
-  border-style: solid;
-  box-shadow: 10px 10px 0 0 ${({ theme }) => theme.actionDecor};
-  color: ${({ theme }) => theme.color};
-  height: 90vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-width: 800px;
-  position: relative;
-  width: 100%;
-  ${breakpoint.phone} {
-    overflow-y: scroll; /* has to be scroll, not auto */
-    -webkit-overflow-scrolling: touch;
-  }
-  ${breakpoint.desktopUp} {
-    height: auto;
-    min-height: 60vh;
-  }
-  ${Actionbar} {
-    ${setType("s")};
-  }
-`;
-
-const ModalBody = styled.div`
-  ${setSpace("pah")};
-  height: 100%;
-`;
-
-class Modal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.closeModal = this.closeModal.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.ref = React.createRef();
-  }
-
-  componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
-    document.documentElement.style.overflow = "hidden";
-    document.body.style.overflow = "hidden";
-    document.body.style.height = "100%";
-    document.body.style.position = "fixed";
-    this.ref.current.focus();
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown);
-    document.documentElement.style.overflow = "auto";
-    document.body.style.overflow = "auto";
-    document.body.style.height = "auto";
-    document.body.style.position = "relative";
-  }
-
-  handleKeyDown(event) {
-    if (event.keyCode === 27) {
-      this.closeModal();
-    }
-  }
-
-  closeModal() {
-    this.props.toggleModal();
-  }
-
-  render() {
-    const { children, toggleModal, ...restProps } = this.props;
-    return (
-      <SharedHexConsumer>
-        {({ BIFHEX }) => (
-          <ThemeProvider
-            theme={{ ...whiteThm, actionColor: BIFHEX, decor: BIFHEX }}
-          >
-            <Overlay onClick={this.closeModal}>
-              <ModalEl
-                {...restProps}
-                role="dialog"
-                onClick={e => e.stopPropagation()}
-                innerRef={this.getScrollArea}
-                height={this.scrollArea && this.scrollArea.clientHeight}
-                ref={this.ref}
-              >
-                <ModalClose>
-                  <Action
-                    onClick={this.closeModal}
-                    style={{ border: "none" }}
-                  >
-                    <Icon name="cross" text="Close Modal" size="l" />
-                  </Action>
-                </ModalClose>
-                <ModalBody>{children}</ModalBody>
-              </ModalEl>
-            </Overlay>
-          </ThemeProvider>
-        )}
-      </SharedHexConsumer>
-    );
-  }
-}
-
-Modal.propTypes = {
-  children: PropTypes.node,
-  toggleModal: PropTypes.func.isRequired
-};
-
-export default Modal;
diff --git a/lib/ui/components/modals/Modal.tsx b/lib/ui/components/modals/Modal.tsx
new file mode 100644
index 00000000..a0285a4f
--- /dev/null
+++ b/lib/ui/components/modals/Modal.tsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useRef } from "react";
+import styled, { ThemeProvider } from "styled-components";
+
+import { Actionbar, Action, Icon } from "ui/components";
+import { SharedHexConsumer } from "ui/contexts";
+import { setSpace, setType } from "ui/mixins";
+import { breakpoint, color } from "ui/settings";
+import { whiteThm } from "ui/themes";
+
+const Overlay = styled.div`
+  ${setSpace("pal")};
+  align-items: center;
+  background: ${color.shadowHL};
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+`;
+
+const ModalClose = styled.div`
+  ${setSpace("ptm")};
+  ${setSpace("prm")};
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+`;
+
+const ModalEl = styled.div`
+  background: ${({ theme }) => theme.modalBackground};
+  border-style: solid;
+  box-shadow: 10px 10px 0 0 ${({ theme }) => theme.actionDecor};
+  color: ${({ theme }) => theme.color};
+  height: 90vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-width: 800px;
+  position: relative;
+  width: 100%;
+  ${breakpoint.phone} {
+    overflow-y: scroll; /* has to be scroll, not auto */
+    -webkit-overflow-scrolling: touch;
+  }
+  ${breakpoint.desktopUp} {
+    height: auto;
+    min-height: 60vh;
+  }
+  ${Actionbar} {
+    ${setType("s")};
+  }
+`;
+
+const ModalBody = styled.div`
+  ${setSpace("pah")};
+  height: 100%;
+`;
+
+interface ModalProps extends React.PropsWithChildren {
+  toggleModal: VoidFunction;
+}
+
+const Modal: React.FC<ModalProps> = ({ children, toggleModal, ...props }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown, false);
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    document.body.style.height = "100%";
+    document.body.style.position = "fixed";
+    ref.current?.focus();
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.documentElement.style.overflow = "auto";
+      document.body.style.overflow = "auto";
+      document.body.style.height = "auto";
+      document.body.style.position = "relative";
+    };
+  }, []);
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  }
+
+  function closeModal() {
+    toggleModal();
+  }
+
+  return (
+    <SharedHexConsumer>
+      {({ BIFHEX }) => (
+        <ThemeProvider
+          theme={{ ...whiteThm, actionColor: BIFHEX, decor: BIFHEX }}
+        >
+          <Overlay onClick={closeModal}>
+            <ModalEl
+              {...props}
+              role="dialog"
+              onClick={(e) => e.stopPropagation()}
+              ref={ref}
+            >
+              <ModalClose>
+                <Action onClick={closeModal} style={{ border: "none" }}>
+                  <Icon name="cross" text="Close Modal" size="l" />
+                </Action>
+              </ModalClose>
+              <ModalBody>{children}</ModalBody>
+            </ModalEl>
+          </Overlay>
+        </ThemeProvider>
+      )}
+    </SharedHexConsumer>
+  );
+};
+
+export default Modal;

From 68ed85b7a8b87f3812dca1c0159f5704ac408355 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Wed, 4 Dec 2024 17:08:08 -0500
Subject: [PATCH 24/28] chore(gatsby): auto-generate gatsby query types

---
 gatsby-config.js      |    3 +
 lib/gatsby-types.d.ts | 3197 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 3200 insertions(+)
 create mode 100644 lib/gatsby-types.d.ts

diff --git a/gatsby-config.js b/gatsby-config.js
index 11c5f316..e0c4e783 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,5 +1,8 @@
 module.exports = {
   siteMetadata: {},
+  graphqlTypegen: {
+    typesOutputPath: `./lib/gatsby-types.d.ts`
+  }, 
   plugins: [
     "gatsby-plugin-catch-links",
     `gatsby-plugin-image`,
diff --git a/lib/gatsby-types.d.ts b/lib/gatsby-types.d.ts
new file mode 100644
index 00000000..23e3c778
--- /dev/null
+++ b/lib/gatsby-types.d.ts
@@ -0,0 +1,3197 @@
+/* eslint-disable */
+
+/* prettier-ignore */
+
+/* THIS FILE IS AUTOGENERATED. CHANGES WILL BE LOST ON SUBSEQUENT RUNS. */
+
+declare namespace Queries {
+
+type Maybe<T> = T | null;
+type InputMaybe<T> = T | null;
+type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+type Scalars = {
+  /** The `ID` scalar type represents a unique identifier, often used to refetch an object or as key for a cache. The ID type appears in a JSON response as a String; however, it is not intended to be human-readable. When expected as an input type, any string (such as `"4"`) or integer (such as `4`) input value will be accepted as an ID. */
+  ID: string;
+  /** The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text. */
+  String: string;
+  /** The `Boolean` scalar type represents `true` or `false`. */
+  Boolean: boolean;
+  /** The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1. */
+  Int: number;
+  /** The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point). */
+  Float: number;
+  /** A date string, such as 2007-12-03, compliant with the ISO 8601 standard for representation of dates and times using the Gregorian calendar. */
+  Date: string;
+  GatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData;
+  /** The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf). */
+  JSON: Record<string, unknown>;
+};
+
+type AVIFOptions = {
+  readonly lossless: InputMaybe<Scalars['Boolean']>;
+  readonly quality: InputMaybe<Scalars['Int']>;
+  readonly speed: InputMaybe<Scalars['Int']>;
+};
+
+type BlurredOptions = {
+  /** Force the output format for the low-res preview. Default is to use the same format as the input. You should rarely need to change this */
+  readonly toFormat: InputMaybe<ImageFormat>;
+  /** Width of the generated low-res preview. Default is 20px */
+  readonly width: InputMaybe<Scalars['Int']>;
+};
+
+type BooleanQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['Boolean']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Boolean']>>>;
+  readonly ne: InputMaybe<Scalars['Boolean']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Boolean']>>>;
+};
+
+type DateQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['Date']>;
+  readonly gt: InputMaybe<Scalars['Date']>;
+  readonly gte: InputMaybe<Scalars['Date']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Date']>>>;
+  readonly lt: InputMaybe<Scalars['Date']>;
+  readonly lte: InputMaybe<Scalars['Date']>;
+  readonly ne: InputMaybe<Scalars['Date']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Date']>>>;
+};
+
+type Directory = Node & {
+  readonly absolutePath: Scalars['String'];
+  readonly accessTime: Scalars['Date'];
+  readonly atime: Scalars['Date'];
+  readonly atimeMs: Scalars['Float'];
+  readonly base: Scalars['String'];
+  readonly birthTime: Scalars['Date'];
+  /** @deprecated Use `birthTime` instead */
+  readonly birthtime: Maybe<Scalars['Date']>;
+  /** @deprecated Use `birthTime` instead */
+  readonly birthtimeMs: Maybe<Scalars['Float']>;
+  readonly changeTime: Scalars['Date'];
+  readonly children: ReadonlyArray<Node>;
+  readonly ctime: Scalars['Date'];
+  readonly ctimeMs: Scalars['Float'];
+  readonly dev: Scalars['Int'];
+  readonly dir: Scalars['String'];
+  readonly ext: Scalars['String'];
+  readonly extension: Scalars['String'];
+  readonly gid: Scalars['Int'];
+  readonly id: Scalars['ID'];
+  readonly ino: Scalars['Float'];
+  readonly internal: Internal;
+  readonly mode: Scalars['Int'];
+  readonly modifiedTime: Scalars['Date'];
+  readonly mtime: Scalars['Date'];
+  readonly mtimeMs: Scalars['Float'];
+  readonly name: Scalars['String'];
+  readonly nlink: Scalars['Int'];
+  readonly parent: Maybe<Node>;
+  readonly prettySize: Scalars['String'];
+  readonly rdev: Scalars['Int'];
+  readonly relativeDirectory: Scalars['String'];
+  readonly relativePath: Scalars['String'];
+  readonly root: Scalars['String'];
+  readonly size: Scalars['Int'];
+  readonly sourceInstanceName: Scalars['String'];
+  readonly uid: Scalars['Int'];
+};
+
+
+type Directory_accessTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_atimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_birthTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_changeTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_ctimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_modifiedTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type Directory_mtimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type DirectoryConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<DirectoryEdge>;
+  readonly group: ReadonlyArray<DirectoryGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<Directory>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type DirectoryConnection_distinctArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryConnection_groupArgs = {
+  field: DirectoryFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type DirectoryConnection_maxArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryConnection_minArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryConnection_sumArgs = {
+  field: DirectoryFieldSelector;
+};
+
+type DirectoryEdge = {
+  readonly next: Maybe<Directory>;
+  readonly node: Directory;
+  readonly previous: Maybe<Directory>;
+};
+
+type DirectoryFieldSelector = {
+  readonly absolutePath: InputMaybe<FieldSelectorEnum>;
+  readonly accessTime: InputMaybe<FieldSelectorEnum>;
+  readonly atime: InputMaybe<FieldSelectorEnum>;
+  readonly atimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly base: InputMaybe<FieldSelectorEnum>;
+  readonly birthTime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly changeTime: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly ctime: InputMaybe<FieldSelectorEnum>;
+  readonly ctimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly dev: InputMaybe<FieldSelectorEnum>;
+  readonly dir: InputMaybe<FieldSelectorEnum>;
+  readonly ext: InputMaybe<FieldSelectorEnum>;
+  readonly extension: InputMaybe<FieldSelectorEnum>;
+  readonly gid: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly ino: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly mode: InputMaybe<FieldSelectorEnum>;
+  readonly modifiedTime: InputMaybe<FieldSelectorEnum>;
+  readonly mtime: InputMaybe<FieldSelectorEnum>;
+  readonly mtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly nlink: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly prettySize: InputMaybe<FieldSelectorEnum>;
+  readonly rdev: InputMaybe<FieldSelectorEnum>;
+  readonly relativeDirectory: InputMaybe<FieldSelectorEnum>;
+  readonly relativePath: InputMaybe<FieldSelectorEnum>;
+  readonly root: InputMaybe<FieldSelectorEnum>;
+  readonly size: InputMaybe<FieldSelectorEnum>;
+  readonly sourceInstanceName: InputMaybe<FieldSelectorEnum>;
+  readonly uid: InputMaybe<FieldSelectorEnum>;
+};
+
+type DirectoryFilterInput = {
+  readonly absolutePath: InputMaybe<StringQueryOperatorInput>;
+  readonly accessTime: InputMaybe<DateQueryOperatorInput>;
+  readonly atime: InputMaybe<DateQueryOperatorInput>;
+  readonly atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly base: InputMaybe<StringQueryOperatorInput>;
+  readonly birthTime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly changeTime: InputMaybe<DateQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly ctime: InputMaybe<DateQueryOperatorInput>;
+  readonly ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly dev: InputMaybe<IntQueryOperatorInput>;
+  readonly dir: InputMaybe<StringQueryOperatorInput>;
+  readonly ext: InputMaybe<StringQueryOperatorInput>;
+  readonly extension: InputMaybe<StringQueryOperatorInput>;
+  readonly gid: InputMaybe<IntQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly ino: InputMaybe<FloatQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly mode: InputMaybe<IntQueryOperatorInput>;
+  readonly modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly nlink: InputMaybe<IntQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly prettySize: InputMaybe<StringQueryOperatorInput>;
+  readonly rdev: InputMaybe<IntQueryOperatorInput>;
+  readonly relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  readonly relativePath: InputMaybe<StringQueryOperatorInput>;
+  readonly root: InputMaybe<StringQueryOperatorInput>;
+  readonly size: InputMaybe<IntQueryOperatorInput>;
+  readonly sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  readonly uid: InputMaybe<IntQueryOperatorInput>;
+};
+
+type DirectoryGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<DirectoryEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<DirectoryGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<Directory>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type DirectoryGroupConnection_distinctArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryGroupConnection_groupArgs = {
+  field: DirectoryFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type DirectoryGroupConnection_maxArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryGroupConnection_minArgs = {
+  field: DirectoryFieldSelector;
+};
+
+
+type DirectoryGroupConnection_sumArgs = {
+  field: DirectoryFieldSelector;
+};
+
+type DirectorySortInput = {
+  readonly absolutePath: InputMaybe<SortOrderEnum>;
+  readonly accessTime: InputMaybe<SortOrderEnum>;
+  readonly atime: InputMaybe<SortOrderEnum>;
+  readonly atimeMs: InputMaybe<SortOrderEnum>;
+  readonly base: InputMaybe<SortOrderEnum>;
+  readonly birthTime: InputMaybe<SortOrderEnum>;
+  readonly birthtime: InputMaybe<SortOrderEnum>;
+  readonly birthtimeMs: InputMaybe<SortOrderEnum>;
+  readonly changeTime: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly ctime: InputMaybe<SortOrderEnum>;
+  readonly ctimeMs: InputMaybe<SortOrderEnum>;
+  readonly dev: InputMaybe<SortOrderEnum>;
+  readonly dir: InputMaybe<SortOrderEnum>;
+  readonly ext: InputMaybe<SortOrderEnum>;
+  readonly extension: InputMaybe<SortOrderEnum>;
+  readonly gid: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly ino: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly mode: InputMaybe<SortOrderEnum>;
+  readonly modifiedTime: InputMaybe<SortOrderEnum>;
+  readonly mtime: InputMaybe<SortOrderEnum>;
+  readonly mtimeMs: InputMaybe<SortOrderEnum>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly nlink: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly prettySize: InputMaybe<SortOrderEnum>;
+  readonly rdev: InputMaybe<SortOrderEnum>;
+  readonly relativeDirectory: InputMaybe<SortOrderEnum>;
+  readonly relativePath: InputMaybe<SortOrderEnum>;
+  readonly root: InputMaybe<SortOrderEnum>;
+  readonly size: InputMaybe<SortOrderEnum>;
+  readonly sourceInstanceName: InputMaybe<SortOrderEnum>;
+  readonly uid: InputMaybe<SortOrderEnum>;
+};
+
+type DuotoneGradient = {
+  readonly highlight: Scalars['String'];
+  readonly opacity: InputMaybe<Scalars['Int']>;
+  readonly shadow: Scalars['String'];
+};
+
+type FieldSelectorEnum =
+  | 'SELECT';
+
+type File = Node & {
+  readonly absolutePath: Scalars['String'];
+  readonly accessTime: Scalars['Date'];
+  readonly atime: Scalars['Date'];
+  readonly atimeMs: Scalars['Float'];
+  readonly base: Scalars['String'];
+  readonly birthTime: Scalars['Date'];
+  /** @deprecated Use `birthTime` instead */
+  readonly birthtime: Maybe<Scalars['Date']>;
+  /** @deprecated Use `birthTime` instead */
+  readonly birthtimeMs: Maybe<Scalars['Float']>;
+  readonly blksize: Maybe<Scalars['Int']>;
+  readonly blocks: Maybe<Scalars['Int']>;
+  readonly changeTime: Scalars['Date'];
+  /** Returns the first child node of type ImageSharp or null if there are no children of given type on this node */
+  readonly childImageSharp: Maybe<ImageSharp>;
+  /** Returns the first child node of type MarkdownRemark or null if there are no children of given type on this node */
+  readonly childMarkdownRemark: Maybe<MarkdownRemark>;
+  readonly children: ReadonlyArray<Node>;
+  /** Returns all children nodes filtered by type ImageSharp */
+  readonly childrenImageSharp: Maybe<ReadonlyArray<Maybe<ImageSharp>>>;
+  /** Returns all children nodes filtered by type MarkdownRemark */
+  readonly childrenMarkdownRemark: Maybe<ReadonlyArray<Maybe<MarkdownRemark>>>;
+  readonly ctime: Scalars['Date'];
+  readonly ctimeMs: Scalars['Float'];
+  readonly dev: Scalars['Int'];
+  readonly dir: Scalars['String'];
+  readonly ext: Scalars['String'];
+  readonly extension: Scalars['String'];
+  readonly gid: Scalars['Int'];
+  readonly id: Scalars['ID'];
+  readonly ino: Scalars['Float'];
+  readonly internal: Internal;
+  readonly mode: Scalars['Int'];
+  readonly modifiedTime: Scalars['Date'];
+  readonly mtime: Scalars['Date'];
+  readonly mtimeMs: Scalars['Float'];
+  readonly name: Scalars['String'];
+  readonly nlink: Scalars['Int'];
+  readonly parent: Maybe<Node>;
+  readonly prettySize: Scalars['String'];
+  /** Copy file to static directory and return public url to it */
+  readonly publicURL: Maybe<Scalars['String']>;
+  readonly rdev: Scalars['Int'];
+  readonly relativeDirectory: Scalars['String'];
+  readonly relativePath: Scalars['String'];
+  readonly root: Scalars['String'];
+  readonly size: Scalars['Int'];
+  readonly sourceInstanceName: Scalars['String'];
+  readonly uid: Scalars['Int'];
+};
+
+
+type File_accessTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_atimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_birthTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_changeTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_ctimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_modifiedTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+
+type File_mtimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type FileConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<FileEdge>;
+  readonly group: ReadonlyArray<FileGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<File>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type FileConnection_distinctArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileConnection_groupArgs = {
+  field: FileFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type FileConnection_maxArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileConnection_minArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileConnection_sumArgs = {
+  field: FileFieldSelector;
+};
+
+type FileEdge = {
+  readonly next: Maybe<File>;
+  readonly node: File;
+  readonly previous: Maybe<File>;
+};
+
+type FileFieldSelector = {
+  readonly absolutePath: InputMaybe<FieldSelectorEnum>;
+  readonly accessTime: InputMaybe<FieldSelectorEnum>;
+  readonly atime: InputMaybe<FieldSelectorEnum>;
+  readonly atimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly base: InputMaybe<FieldSelectorEnum>;
+  readonly birthTime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtime: InputMaybe<FieldSelectorEnum>;
+  readonly birthtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly blksize: InputMaybe<FieldSelectorEnum>;
+  readonly blocks: InputMaybe<FieldSelectorEnum>;
+  readonly changeTime: InputMaybe<FieldSelectorEnum>;
+  readonly childImageSharp: InputMaybe<ImageSharpFieldSelector>;
+  readonly childMarkdownRemark: InputMaybe<MarkdownRemarkFieldSelector>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly childrenImageSharp: InputMaybe<ImageSharpFieldSelector>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkFieldSelector>;
+  readonly ctime: InputMaybe<FieldSelectorEnum>;
+  readonly ctimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly dev: InputMaybe<FieldSelectorEnum>;
+  readonly dir: InputMaybe<FieldSelectorEnum>;
+  readonly ext: InputMaybe<FieldSelectorEnum>;
+  readonly extension: InputMaybe<FieldSelectorEnum>;
+  readonly gid: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly ino: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly mode: InputMaybe<FieldSelectorEnum>;
+  readonly modifiedTime: InputMaybe<FieldSelectorEnum>;
+  readonly mtime: InputMaybe<FieldSelectorEnum>;
+  readonly mtimeMs: InputMaybe<FieldSelectorEnum>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly nlink: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly prettySize: InputMaybe<FieldSelectorEnum>;
+  readonly publicURL: InputMaybe<FieldSelectorEnum>;
+  readonly rdev: InputMaybe<FieldSelectorEnum>;
+  readonly relativeDirectory: InputMaybe<FieldSelectorEnum>;
+  readonly relativePath: InputMaybe<FieldSelectorEnum>;
+  readonly root: InputMaybe<FieldSelectorEnum>;
+  readonly size: InputMaybe<FieldSelectorEnum>;
+  readonly sourceInstanceName: InputMaybe<FieldSelectorEnum>;
+  readonly uid: InputMaybe<FieldSelectorEnum>;
+};
+
+type FileFilterInput = {
+  readonly absolutePath: InputMaybe<StringQueryOperatorInput>;
+  readonly accessTime: InputMaybe<DateQueryOperatorInput>;
+  readonly atime: InputMaybe<DateQueryOperatorInput>;
+  readonly atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly base: InputMaybe<StringQueryOperatorInput>;
+  readonly birthTime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtime: InputMaybe<DateQueryOperatorInput>;
+  readonly birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly blksize: InputMaybe<IntQueryOperatorInput>;
+  readonly blocks: InputMaybe<IntQueryOperatorInput>;
+  readonly changeTime: InputMaybe<DateQueryOperatorInput>;
+  readonly childImageSharp: InputMaybe<ImageSharpFilterInput>;
+  readonly childMarkdownRemark: InputMaybe<MarkdownRemarkFilterInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly childrenImageSharp: InputMaybe<ImageSharpFilterListInput>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkFilterListInput>;
+  readonly ctime: InputMaybe<DateQueryOperatorInput>;
+  readonly ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly dev: InputMaybe<IntQueryOperatorInput>;
+  readonly dir: InputMaybe<StringQueryOperatorInput>;
+  readonly ext: InputMaybe<StringQueryOperatorInput>;
+  readonly extension: InputMaybe<StringQueryOperatorInput>;
+  readonly gid: InputMaybe<IntQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly ino: InputMaybe<FloatQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly mode: InputMaybe<IntQueryOperatorInput>;
+  readonly modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtime: InputMaybe<DateQueryOperatorInput>;
+  readonly mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly nlink: InputMaybe<IntQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly prettySize: InputMaybe<StringQueryOperatorInput>;
+  readonly publicURL: InputMaybe<StringQueryOperatorInput>;
+  readonly rdev: InputMaybe<IntQueryOperatorInput>;
+  readonly relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  readonly relativePath: InputMaybe<StringQueryOperatorInput>;
+  readonly root: InputMaybe<StringQueryOperatorInput>;
+  readonly size: InputMaybe<IntQueryOperatorInput>;
+  readonly sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  readonly uid: InputMaybe<IntQueryOperatorInput>;
+};
+
+type FileFilterListInput = {
+  readonly elemMatch: InputMaybe<FileFilterInput>;
+};
+
+type FileGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<FileEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<FileGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<File>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type FileGroupConnection_distinctArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileGroupConnection_groupArgs = {
+  field: FileFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type FileGroupConnection_maxArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileGroupConnection_minArgs = {
+  field: FileFieldSelector;
+};
+
+
+type FileGroupConnection_sumArgs = {
+  field: FileFieldSelector;
+};
+
+type FileSortInput = {
+  readonly absolutePath: InputMaybe<SortOrderEnum>;
+  readonly accessTime: InputMaybe<SortOrderEnum>;
+  readonly atime: InputMaybe<SortOrderEnum>;
+  readonly atimeMs: InputMaybe<SortOrderEnum>;
+  readonly base: InputMaybe<SortOrderEnum>;
+  readonly birthTime: InputMaybe<SortOrderEnum>;
+  readonly birthtime: InputMaybe<SortOrderEnum>;
+  readonly birthtimeMs: InputMaybe<SortOrderEnum>;
+  readonly blksize: InputMaybe<SortOrderEnum>;
+  readonly blocks: InputMaybe<SortOrderEnum>;
+  readonly changeTime: InputMaybe<SortOrderEnum>;
+  readonly childImageSharp: InputMaybe<ImageSharpSortInput>;
+  readonly childMarkdownRemark: InputMaybe<MarkdownRemarkSortInput>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly childrenImageSharp: InputMaybe<ImageSharpSortInput>;
+  readonly childrenMarkdownRemark: InputMaybe<MarkdownRemarkSortInput>;
+  readonly ctime: InputMaybe<SortOrderEnum>;
+  readonly ctimeMs: InputMaybe<SortOrderEnum>;
+  readonly dev: InputMaybe<SortOrderEnum>;
+  readonly dir: InputMaybe<SortOrderEnum>;
+  readonly ext: InputMaybe<SortOrderEnum>;
+  readonly extension: InputMaybe<SortOrderEnum>;
+  readonly gid: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly ino: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly mode: InputMaybe<SortOrderEnum>;
+  readonly modifiedTime: InputMaybe<SortOrderEnum>;
+  readonly mtime: InputMaybe<SortOrderEnum>;
+  readonly mtimeMs: InputMaybe<SortOrderEnum>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly nlink: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly prettySize: InputMaybe<SortOrderEnum>;
+  readonly publicURL: InputMaybe<SortOrderEnum>;
+  readonly rdev: InputMaybe<SortOrderEnum>;
+  readonly relativeDirectory: InputMaybe<SortOrderEnum>;
+  readonly relativePath: InputMaybe<SortOrderEnum>;
+  readonly root: InputMaybe<SortOrderEnum>;
+  readonly size: InputMaybe<SortOrderEnum>;
+  readonly sourceInstanceName: InputMaybe<SortOrderEnum>;
+  readonly uid: InputMaybe<SortOrderEnum>;
+};
+
+type FloatQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['Float']>;
+  readonly gt: InputMaybe<Scalars['Float']>;
+  readonly gte: InputMaybe<Scalars['Float']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Float']>>>;
+  readonly lt: InputMaybe<Scalars['Float']>;
+  readonly lte: InputMaybe<Scalars['Float']>;
+  readonly ne: InputMaybe<Scalars['Float']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Float']>>>;
+};
+
+type GatsbyImageDataQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['GatsbyImageData']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['GatsbyImageData']>>>;
+  readonly ne: InputMaybe<Scalars['GatsbyImageData']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['GatsbyImageData']>>>;
+};
+
+type GatsbyImageFormat =
+  | 'auto'
+  | 'avif'
+  | 'jpg'
+  | ''
+  | 'png'
+  | 'webp';
+
+type GatsbyImageLayout =
+  | 'constrained'
+  | 'fixed'
+  | 'fullWidth';
+
+type GatsbyImagePlaceholder =
+  | 'blurred'
+  | 'dominantColor'
+  | 'none'
+  | 'tracedSVG';
+
+type ImageCropFocus =
+  | 17
+  | 0
+  | 2
+  | 16
+  | 1
+  | 5
+  | 8
+  | 3
+  | 6
+  | 7
+  | 4;
+
+type ImageFit =
+  | 'contain'
+  | 'cover'
+  | 'fill'
+  | 'inside'
+  | 'outside';
+
+type ImageFormat =
+  | ''
+  | 'avif'
+  | 'jpg'
+  | ''
+  | 'png'
+  | 'webp';
+
+type ImageLayout =
+  | 'constrained'
+  | 'fixed'
+  | 'fullWidth';
+
+type ImagePlaceholder =
+  | 'blurred'
+  | 'dominantColor'
+  | 'none'
+  | 'tracedSVG';
+
+type ImageSharp = Node & {
+  readonly children: ReadonlyArray<Node>;
+  readonly fixed: Maybe<ImageSharpFixed>;
+  readonly fluid: Maybe<ImageSharpFluid>;
+  readonly gatsbyImageData: Scalars['GatsbyImageData'];
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly original: Maybe<ImageSharpOriginal>;
+  readonly parent: Maybe<Node>;
+  readonly resize: Maybe<ImageSharpResize>;
+};
+
+
+type ImageSharp_fixedArgs = {
+  background?: InputMaybe<Scalars['String']>;
+  base64Width: InputMaybe<Scalars['Int']>;
+  cropFocus?: InputMaybe<ImageCropFocus>;
+  duotone: InputMaybe<DuotoneGradient>;
+  fit?: InputMaybe<ImageFit>;
+  grayscale?: InputMaybe<Scalars['Boolean']>;
+  height: InputMaybe<Scalars['Int']>;
+  jpegProgressive?: InputMaybe<Scalars['Boolean']>;
+  jpegQuality: InputMaybe<Scalars['Int']>;
+  pngCompressionSpeed?: InputMaybe<Scalars['Int']>;
+  pngQuality: InputMaybe<Scalars['Int']>;
+  quality: InputMaybe<Scalars['Int']>;
+  rotate?: InputMaybe<Scalars['Int']>;
+  toFormat?: InputMaybe<ImageFormat>;
+  toFormatBase64?: InputMaybe<ImageFormat>;
+  traceSVG: InputMaybe<Potrace>;
+  trim?: InputMaybe<Scalars['Float']>;
+  webpQuality: InputMaybe<Scalars['Int']>;
+  width: InputMaybe<Scalars['Int']>;
+};
+
+
+type ImageSharp_fluidArgs = {
+  background?: InputMaybe<Scalars['String']>;
+  base64Width: InputMaybe<Scalars['Int']>;
+  cropFocus?: InputMaybe<ImageCropFocus>;
+  duotone: InputMaybe<DuotoneGradient>;
+  fit?: InputMaybe<ImageFit>;
+  grayscale?: InputMaybe<Scalars['Boolean']>;
+  jpegProgressive?: InputMaybe<Scalars['Boolean']>;
+  jpegQuality: InputMaybe<Scalars['Int']>;
+  maxHeight: InputMaybe<Scalars['Int']>;
+  maxWidth: InputMaybe<Scalars['Int']>;
+  pngCompressionSpeed?: InputMaybe<Scalars['Int']>;
+  pngQuality: InputMaybe<Scalars['Int']>;
+  quality: InputMaybe<Scalars['Int']>;
+  rotate?: InputMaybe<Scalars['Int']>;
+  sizes?: InputMaybe<Scalars['String']>;
+  srcSetBreakpoints?: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Int']>>>;
+  toFormat?: InputMaybe<ImageFormat>;
+  toFormatBase64?: InputMaybe<ImageFormat>;
+  traceSVG: InputMaybe<Potrace>;
+  trim?: InputMaybe<Scalars['Float']>;
+  webpQuality: InputMaybe<Scalars['Int']>;
+};
+
+
+type ImageSharp_gatsbyImageDataArgs = {
+  aspectRatio: InputMaybe<Scalars['Float']>;
+  avifOptions: InputMaybe<AVIFOptions>;
+  backgroundColor: InputMaybe<Scalars['String']>;
+  blurredOptions: InputMaybe<BlurredOptions>;
+  breakpoints: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Int']>>>;
+  formats: InputMaybe<ReadonlyArray<InputMaybe<ImageFormat>>>;
+  height: InputMaybe<Scalars['Int']>;
+  jpgOptions: InputMaybe<JPGOptions>;
+  layout?: InputMaybe<ImageLayout>;
+  outputPixelDensities: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Float']>>>;
+  placeholder: InputMaybe<ImagePlaceholder>;
+  pngOptions: InputMaybe<PNGOptions>;
+  quality: InputMaybe<Scalars['Int']>;
+  sizes: InputMaybe<Scalars['String']>;
+  tracedSVGOptions: InputMaybe<Potrace>;
+  transformOptions: InputMaybe<TransformOptions>;
+  webpOptions: InputMaybe<WebPOptions>;
+  width: InputMaybe<Scalars['Int']>;
+};
+
+
+type ImageSharp_resizeArgs = {
+  background?: InputMaybe<Scalars['String']>;
+  base64?: InputMaybe<Scalars['Boolean']>;
+  cropFocus?: InputMaybe<ImageCropFocus>;
+  duotone: InputMaybe<DuotoneGradient>;
+  fit?: InputMaybe<ImageFit>;
+  grayscale?: InputMaybe<Scalars['Boolean']>;
+  height: InputMaybe<Scalars['Int']>;
+  jpegProgressive?: InputMaybe<Scalars['Boolean']>;
+  jpegQuality: InputMaybe<Scalars['Int']>;
+  pngCompressionLevel?: InputMaybe<Scalars['Int']>;
+  pngCompressionSpeed?: InputMaybe<Scalars['Int']>;
+  pngQuality: InputMaybe<Scalars['Int']>;
+  quality: InputMaybe<Scalars['Int']>;
+  rotate?: InputMaybe<Scalars['Int']>;
+  toFormat?: InputMaybe<ImageFormat>;
+  traceSVG: InputMaybe<Potrace>;
+  trim?: InputMaybe<Scalars['Float']>;
+  webpQuality: InputMaybe<Scalars['Int']>;
+  width: InputMaybe<Scalars['Int']>;
+};
+
+type ImageSharpConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<ImageSharpEdge>;
+  readonly group: ReadonlyArray<ImageSharpGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<ImageSharp>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type ImageSharpConnection_distinctArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpConnection_groupArgs = {
+  field: ImageSharpFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type ImageSharpConnection_maxArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpConnection_minArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpConnection_sumArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+type ImageSharpEdge = {
+  readonly next: Maybe<ImageSharp>;
+  readonly node: ImageSharp;
+  readonly previous: Maybe<ImageSharp>;
+};
+
+type ImageSharpFieldSelector = {
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly fixed: InputMaybe<ImageSharpFixedFieldSelector>;
+  readonly fluid: InputMaybe<ImageSharpFluidFieldSelector>;
+  readonly gatsbyImageData: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly original: InputMaybe<ImageSharpOriginalFieldSelector>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly resize: InputMaybe<ImageSharpResizeFieldSelector>;
+};
+
+type ImageSharpFilterInput = {
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly fixed: InputMaybe<ImageSharpFixedFilterInput>;
+  readonly fluid: InputMaybe<ImageSharpFluidFilterInput>;
+  readonly gatsbyImageData: InputMaybe<GatsbyImageDataQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly original: InputMaybe<ImageSharpOriginalFilterInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly resize: InputMaybe<ImageSharpResizeFilterInput>;
+};
+
+type ImageSharpFilterListInput = {
+  readonly elemMatch: InputMaybe<ImageSharpFilterInput>;
+};
+
+type ImageSharpFixed = {
+  readonly aspectRatio: Maybe<Scalars['Float']>;
+  readonly base64: Maybe<Scalars['String']>;
+  readonly height: Scalars['Float'];
+  readonly originalName: Maybe<Scalars['String']>;
+  readonly src: Scalars['String'];
+  readonly srcSet: Scalars['String'];
+  readonly srcSetWebp: Maybe<Scalars['String']>;
+  readonly srcWebp: Maybe<Scalars['String']>;
+  readonly tracedSVG: Maybe<Scalars['String']>;
+  readonly width: Scalars['Float'];
+};
+
+type ImageSharpFixedFieldSelector = {
+  readonly aspectRatio: InputMaybe<FieldSelectorEnum>;
+  readonly base64: InputMaybe<FieldSelectorEnum>;
+  readonly height: InputMaybe<FieldSelectorEnum>;
+  readonly originalName: InputMaybe<FieldSelectorEnum>;
+  readonly src: InputMaybe<FieldSelectorEnum>;
+  readonly srcSet: InputMaybe<FieldSelectorEnum>;
+  readonly srcSetWebp: InputMaybe<FieldSelectorEnum>;
+  readonly srcWebp: InputMaybe<FieldSelectorEnum>;
+  readonly tracedSVG: InputMaybe<FieldSelectorEnum>;
+  readonly width: InputMaybe<FieldSelectorEnum>;
+};
+
+type ImageSharpFixedFilterInput = {
+  readonly aspectRatio: InputMaybe<FloatQueryOperatorInput>;
+  readonly base64: InputMaybe<StringQueryOperatorInput>;
+  readonly height: InputMaybe<FloatQueryOperatorInput>;
+  readonly originalName: InputMaybe<StringQueryOperatorInput>;
+  readonly src: InputMaybe<StringQueryOperatorInput>;
+  readonly srcSet: InputMaybe<StringQueryOperatorInput>;
+  readonly srcSetWebp: InputMaybe<StringQueryOperatorInput>;
+  readonly srcWebp: InputMaybe<StringQueryOperatorInput>;
+  readonly tracedSVG: InputMaybe<StringQueryOperatorInput>;
+  readonly width: InputMaybe<FloatQueryOperatorInput>;
+};
+
+type ImageSharpFixedSortInput = {
+  readonly aspectRatio: InputMaybe<SortOrderEnum>;
+  readonly base64: InputMaybe<SortOrderEnum>;
+  readonly height: InputMaybe<SortOrderEnum>;
+  readonly originalName: InputMaybe<SortOrderEnum>;
+  readonly src: InputMaybe<SortOrderEnum>;
+  readonly srcSet: InputMaybe<SortOrderEnum>;
+  readonly srcSetWebp: InputMaybe<SortOrderEnum>;
+  readonly srcWebp: InputMaybe<SortOrderEnum>;
+  readonly tracedSVG: InputMaybe<SortOrderEnum>;
+  readonly width: InputMaybe<SortOrderEnum>;
+};
+
+type ImageSharpFluid = {
+  readonly aspectRatio: Scalars['Float'];
+  readonly base64: Maybe<Scalars['String']>;
+  readonly originalImg: Maybe<Scalars['String']>;
+  readonly originalName: Maybe<Scalars['String']>;
+  readonly presentationHeight: Scalars['Int'];
+  readonly presentationWidth: Scalars['Int'];
+  readonly sizes: Scalars['String'];
+  readonly src: Scalars['String'];
+  readonly srcSet: Scalars['String'];
+  readonly srcSetWebp: Maybe<Scalars['String']>;
+  readonly srcWebp: Maybe<Scalars['String']>;
+  readonly tracedSVG: Maybe<Scalars['String']>;
+};
+
+type ImageSharpFluidFieldSelector = {
+  readonly aspectRatio: InputMaybe<FieldSelectorEnum>;
+  readonly base64: InputMaybe<FieldSelectorEnum>;
+  readonly originalImg: InputMaybe<FieldSelectorEnum>;
+  readonly originalName: InputMaybe<FieldSelectorEnum>;
+  readonly presentationHeight: InputMaybe<FieldSelectorEnum>;
+  readonly presentationWidth: InputMaybe<FieldSelectorEnum>;
+  readonly sizes: InputMaybe<FieldSelectorEnum>;
+  readonly src: InputMaybe<FieldSelectorEnum>;
+  readonly srcSet: InputMaybe<FieldSelectorEnum>;
+  readonly srcSetWebp: InputMaybe<FieldSelectorEnum>;
+  readonly srcWebp: InputMaybe<FieldSelectorEnum>;
+  readonly tracedSVG: InputMaybe<FieldSelectorEnum>;
+};
+
+type ImageSharpFluidFilterInput = {
+  readonly aspectRatio: InputMaybe<FloatQueryOperatorInput>;
+  readonly base64: InputMaybe<StringQueryOperatorInput>;
+  readonly originalImg: InputMaybe<StringQueryOperatorInput>;
+  readonly originalName: InputMaybe<StringQueryOperatorInput>;
+  readonly presentationHeight: InputMaybe<IntQueryOperatorInput>;
+  readonly presentationWidth: InputMaybe<IntQueryOperatorInput>;
+  readonly sizes: InputMaybe<StringQueryOperatorInput>;
+  readonly src: InputMaybe<StringQueryOperatorInput>;
+  readonly srcSet: InputMaybe<StringQueryOperatorInput>;
+  readonly srcSetWebp: InputMaybe<StringQueryOperatorInput>;
+  readonly srcWebp: InputMaybe<StringQueryOperatorInput>;
+  readonly tracedSVG: InputMaybe<StringQueryOperatorInput>;
+};
+
+type ImageSharpFluidSortInput = {
+  readonly aspectRatio: InputMaybe<SortOrderEnum>;
+  readonly base64: InputMaybe<SortOrderEnum>;
+  readonly originalImg: InputMaybe<SortOrderEnum>;
+  readonly originalName: InputMaybe<SortOrderEnum>;
+  readonly presentationHeight: InputMaybe<SortOrderEnum>;
+  readonly presentationWidth: InputMaybe<SortOrderEnum>;
+  readonly sizes: InputMaybe<SortOrderEnum>;
+  readonly src: InputMaybe<SortOrderEnum>;
+  readonly srcSet: InputMaybe<SortOrderEnum>;
+  readonly srcSetWebp: InputMaybe<SortOrderEnum>;
+  readonly srcWebp: InputMaybe<SortOrderEnum>;
+  readonly tracedSVG: InputMaybe<SortOrderEnum>;
+};
+
+type ImageSharpGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<ImageSharpEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<ImageSharpGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<ImageSharp>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type ImageSharpGroupConnection_distinctArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpGroupConnection_groupArgs = {
+  field: ImageSharpFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type ImageSharpGroupConnection_maxArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpGroupConnection_minArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+
+type ImageSharpGroupConnection_sumArgs = {
+  field: ImageSharpFieldSelector;
+};
+
+type ImageSharpOriginal = {
+  readonly height: Maybe<Scalars['Float']>;
+  readonly src: Maybe<Scalars['String']>;
+  readonly width: Maybe<Scalars['Float']>;
+};
+
+type ImageSharpOriginalFieldSelector = {
+  readonly height: InputMaybe<FieldSelectorEnum>;
+  readonly src: InputMaybe<FieldSelectorEnum>;
+  readonly width: InputMaybe<FieldSelectorEnum>;
+};
+
+type ImageSharpOriginalFilterInput = {
+  readonly height: InputMaybe<FloatQueryOperatorInput>;
+  readonly src: InputMaybe<StringQueryOperatorInput>;
+  readonly width: InputMaybe<FloatQueryOperatorInput>;
+};
+
+type ImageSharpOriginalSortInput = {
+  readonly height: InputMaybe<SortOrderEnum>;
+  readonly src: InputMaybe<SortOrderEnum>;
+  readonly width: InputMaybe<SortOrderEnum>;
+};
+
+type ImageSharpResize = {
+  readonly aspectRatio: Maybe<Scalars['Float']>;
+  readonly height: Maybe<Scalars['Int']>;
+  readonly originalName: Maybe<Scalars['String']>;
+  readonly src: Maybe<Scalars['String']>;
+  readonly tracedSVG: Maybe<Scalars['String']>;
+  readonly width: Maybe<Scalars['Int']>;
+};
+
+type ImageSharpResizeFieldSelector = {
+  readonly aspectRatio: InputMaybe<FieldSelectorEnum>;
+  readonly height: InputMaybe<FieldSelectorEnum>;
+  readonly originalName: InputMaybe<FieldSelectorEnum>;
+  readonly src: InputMaybe<FieldSelectorEnum>;
+  readonly tracedSVG: InputMaybe<FieldSelectorEnum>;
+  readonly width: InputMaybe<FieldSelectorEnum>;
+};
+
+type ImageSharpResizeFilterInput = {
+  readonly aspectRatio: InputMaybe<FloatQueryOperatorInput>;
+  readonly height: InputMaybe<IntQueryOperatorInput>;
+  readonly originalName: InputMaybe<StringQueryOperatorInput>;
+  readonly src: InputMaybe<StringQueryOperatorInput>;
+  readonly tracedSVG: InputMaybe<StringQueryOperatorInput>;
+  readonly width: InputMaybe<IntQueryOperatorInput>;
+};
+
+type ImageSharpResizeSortInput = {
+  readonly aspectRatio: InputMaybe<SortOrderEnum>;
+  readonly height: InputMaybe<SortOrderEnum>;
+  readonly originalName: InputMaybe<SortOrderEnum>;
+  readonly src: InputMaybe<SortOrderEnum>;
+  readonly tracedSVG: InputMaybe<SortOrderEnum>;
+  readonly width: InputMaybe<SortOrderEnum>;
+};
+
+type ImageSharpSortInput = {
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly fixed: InputMaybe<ImageSharpFixedSortInput>;
+  readonly fluid: InputMaybe<ImageSharpFluidSortInput>;
+  readonly gatsbyImageData: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly original: InputMaybe<ImageSharpOriginalSortInput>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly resize: InputMaybe<ImageSharpResizeSortInput>;
+};
+
+type IntQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['Int']>;
+  readonly gt: InputMaybe<Scalars['Int']>;
+  readonly gte: InputMaybe<Scalars['Int']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Int']>>>;
+  readonly lt: InputMaybe<Scalars['Int']>;
+  readonly lte: InputMaybe<Scalars['Int']>;
+  readonly ne: InputMaybe<Scalars['Int']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['Int']>>>;
+};
+
+type Internal = {
+  readonly content: Maybe<Scalars['String']>;
+  readonly contentDigest: Scalars['String'];
+  readonly contentFilePath: Maybe<Scalars['String']>;
+  readonly description: Maybe<Scalars['String']>;
+  readonly fieldOwners: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  readonly ignoreType: Maybe<Scalars['Boolean']>;
+  readonly mediaType: Maybe<Scalars['String']>;
+  readonly owner: Scalars['String'];
+  readonly type: Scalars['String'];
+};
+
+type InternalFieldSelector = {
+  readonly content: InputMaybe<FieldSelectorEnum>;
+  readonly contentDigest: InputMaybe<FieldSelectorEnum>;
+  readonly contentFilePath: InputMaybe<FieldSelectorEnum>;
+  readonly description: InputMaybe<FieldSelectorEnum>;
+  readonly fieldOwners: InputMaybe<FieldSelectorEnum>;
+  readonly ignoreType: InputMaybe<FieldSelectorEnum>;
+  readonly mediaType: InputMaybe<FieldSelectorEnum>;
+  readonly owner: InputMaybe<FieldSelectorEnum>;
+  readonly type: InputMaybe<FieldSelectorEnum>;
+};
+
+type InternalFilterInput = {
+  readonly content: InputMaybe<StringQueryOperatorInput>;
+  readonly contentDigest: InputMaybe<StringQueryOperatorInput>;
+  readonly contentFilePath: InputMaybe<StringQueryOperatorInput>;
+  readonly description: InputMaybe<StringQueryOperatorInput>;
+  readonly fieldOwners: InputMaybe<StringQueryOperatorInput>;
+  readonly ignoreType: InputMaybe<BooleanQueryOperatorInput>;
+  readonly mediaType: InputMaybe<StringQueryOperatorInput>;
+  readonly owner: InputMaybe<StringQueryOperatorInput>;
+  readonly type: InputMaybe<StringQueryOperatorInput>;
+};
+
+type InternalSortInput = {
+  readonly content: InputMaybe<SortOrderEnum>;
+  readonly contentDigest: InputMaybe<SortOrderEnum>;
+  readonly contentFilePath: InputMaybe<SortOrderEnum>;
+  readonly description: InputMaybe<SortOrderEnum>;
+  readonly fieldOwners: InputMaybe<SortOrderEnum>;
+  readonly ignoreType: InputMaybe<SortOrderEnum>;
+  readonly mediaType: InputMaybe<SortOrderEnum>;
+  readonly owner: InputMaybe<SortOrderEnum>;
+  readonly type: InputMaybe<SortOrderEnum>;
+};
+
+type JPGOptions = {
+  readonly progressive: InputMaybe<Scalars['Boolean']>;
+  readonly quality: InputMaybe<Scalars['Int']>;
+};
+
+type JSONQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['JSON']>;
+  readonly glob: InputMaybe<Scalars['JSON']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['JSON']>>>;
+  readonly ne: InputMaybe<Scalars['JSON']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['JSON']>>>;
+  readonly regex: InputMaybe<Scalars['JSON']>;
+};
+
+type MarkdownExcerptFormats =
+  | 'HTML'
+  | 'MARKDOWN'
+  | 'PLAIN';
+
+type MarkdownHeading = {
+  readonly depth: Maybe<Scalars['Int']>;
+  readonly id: Maybe<Scalars['String']>;
+  readonly value: Maybe<Scalars['String']>;
+};
+
+type MarkdownHeadingFieldSelector = {
+  readonly depth: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly value: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownHeadingFilterInput = {
+  readonly depth: InputMaybe<IntQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly value: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownHeadingFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownHeadingFilterInput>;
+};
+
+type MarkdownHeadingLevels =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6';
+
+type MarkdownHeadingSortInput = {
+  readonly depth: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly value: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemark = Node & {
+  readonly children: ReadonlyArray<Node>;
+  readonly excerpt: Maybe<Scalars['String']>;
+  readonly excerptAst: Maybe<Scalars['JSON']>;
+  readonly fileAbsolutePath: Maybe<Scalars['String']>;
+  readonly frontmatter: Maybe<MarkdownRemarkFrontmatter>;
+  readonly headings: Maybe<ReadonlyArray<Maybe<MarkdownHeading>>>;
+  readonly html: Maybe<Scalars['String']>;
+  readonly htmlAst: Maybe<Scalars['JSON']>;
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly parent: Maybe<Node>;
+  readonly rawMarkdownBody: Maybe<Scalars['String']>;
+  readonly tableOfContents: Maybe<Scalars['String']>;
+  readonly timeToRead: Maybe<Scalars['Int']>;
+  readonly wordCount: Maybe<MarkdownWordCount>;
+};
+
+
+type MarkdownRemark_excerptArgs = {
+  format?: InputMaybe<MarkdownExcerptFormats>;
+  pruneLength?: InputMaybe<Scalars['Int']>;
+  truncate?: InputMaybe<Scalars['Boolean']>;
+};
+
+
+type MarkdownRemark_excerptAstArgs = {
+  pruneLength?: InputMaybe<Scalars['Int']>;
+  truncate?: InputMaybe<Scalars['Boolean']>;
+};
+
+
+type MarkdownRemark_headingsArgs = {
+  depth: InputMaybe<MarkdownHeadingLevels>;
+};
+
+
+type MarkdownRemark_tableOfContentsArgs = {
+  absolute?: InputMaybe<Scalars['Boolean']>;
+  heading: InputMaybe<Scalars['String']>;
+  maxDepth: InputMaybe<Scalars['Int']>;
+  pathToSlugField?: InputMaybe<Scalars['String']>;
+};
+
+type MarkdownRemarkConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<MarkdownRemarkEdge>;
+  readonly group: ReadonlyArray<MarkdownRemarkGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<MarkdownRemark>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type MarkdownRemarkConnection_distinctArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkConnection_groupArgs = {
+  field: MarkdownRemarkFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type MarkdownRemarkConnection_maxArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkConnection_minArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkConnection_sumArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+type MarkdownRemarkEdge = {
+  readonly next: Maybe<MarkdownRemark>;
+  readonly node: MarkdownRemark;
+  readonly previous: Maybe<MarkdownRemark>;
+};
+
+type MarkdownRemarkFieldSelector = {
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly excerpt: InputMaybe<FieldSelectorEnum>;
+  readonly excerptAst: InputMaybe<FieldSelectorEnum>;
+  readonly fileAbsolutePath: InputMaybe<FieldSelectorEnum>;
+  readonly frontmatter: InputMaybe<MarkdownRemarkFrontmatterFieldSelector>;
+  readonly headings: InputMaybe<MarkdownHeadingFieldSelector>;
+  readonly html: InputMaybe<FieldSelectorEnum>;
+  readonly htmlAst: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly rawMarkdownBody: InputMaybe<FieldSelectorEnum>;
+  readonly tableOfContents: InputMaybe<FieldSelectorEnum>;
+  readonly timeToRead: InputMaybe<FieldSelectorEnum>;
+  readonly wordCount: InputMaybe<MarkdownWordCountFieldSelector>;
+};
+
+type MarkdownRemarkFilterInput = {
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly excerpt: InputMaybe<StringQueryOperatorInput>;
+  readonly excerptAst: InputMaybe<JSONQueryOperatorInput>;
+  readonly fileAbsolutePath: InputMaybe<StringQueryOperatorInput>;
+  readonly frontmatter: InputMaybe<MarkdownRemarkFrontmatterFilterInput>;
+  readonly headings: InputMaybe<MarkdownHeadingFilterListInput>;
+  readonly html: InputMaybe<StringQueryOperatorInput>;
+  readonly htmlAst: InputMaybe<JSONQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly rawMarkdownBody: InputMaybe<StringQueryOperatorInput>;
+  readonly tableOfContents: InputMaybe<StringQueryOperatorInput>;
+  readonly timeToRead: InputMaybe<IntQueryOperatorInput>;
+  readonly wordCount: InputMaybe<MarkdownWordCountFilterInput>;
+};
+
+type MarkdownRemarkFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFilterInput>;
+};
+
+type MarkdownRemarkFrontmatter = {
+  readonly accomplicesDescr: Maybe<Scalars['String']>;
+  readonly accomplicesHeading: Maybe<Scalars['String']>;
+  readonly active: Maybe<Scalars['Boolean']>;
+  readonly application: Maybe<Scalars['String']>;
+  readonly avatar: Maybe<File>;
+  readonly awards: Maybe<ReadonlyArray<Maybe<MarkdownRemarkFrontmatterAwards>>>;
+  readonly bifpresents: Maybe<Scalars['String']>;
+  readonly bluesky: Maybe<Scalars['String']>;
+  readonly clientsSubtitle: Maybe<Scalars['String']>;
+  readonly clientsTitle: Maybe<Scalars['String']>;
+  readonly code: Maybe<Scalars['String']>;
+  readonly contactCta: Maybe<Scalars['String']>;
+  readonly cover: Maybe<File>;
+  readonly date: Maybe<Scalars['Date']>;
+  readonly email: Maybe<Scalars['String']>;
+  readonly emoji: Maybe<Scalars['String']>;
+  readonly facebookid: Maybe<Scalars['String']>;
+  readonly feature: Maybe<Scalars['Boolean']>;
+  readonly fname: Maybe<Scalars['String']>;
+  readonly github: Maybe<Scalars['String']>;
+  readonly githubid: Maybe<Scalars['String']>;
+  readonly goodat: Maybe<ReadonlyArray<Maybe<MarkdownRemarkFrontmatterGoodat>>>;
+  readonly goodatSubtitle: Maybe<Scalars['String']>;
+  readonly goodatTitle: Maybe<Scalars['String']>;
+  readonly heading: Maybe<Scalars['String']>;
+  readonly highlight: Maybe<Scalars['Boolean']>;
+  readonly link: Maybe<Scalars['String']>;
+  readonly lname: Maybe<Scalars['String']>;
+  readonly logo: Maybe<File>;
+  readonly mastodon: Maybe<Scalars['String']>;
+  readonly membersDescr: Maybe<Scalars['String']>;
+  readonly membersHeading: Maybe<Scalars['String']>;
+  readonly membershipTab: Maybe<Scalars['String']>;
+  readonly name: Maybe<Scalars['String']>;
+  readonly needs: Maybe<MarkdownRemarkFrontmatterNeeds>;
+  readonly overlordsDescr: Maybe<Scalars['String']>;
+  readonly overlordsHeading: Maybe<Scalars['String']>;
+  readonly partnershipTab: Maybe<Scalars['String']>;
+  readonly path: Maybe<Scalars['String']>;
+  readonly projectsCta: Maybe<Scalars['String']>;
+  readonly projectsSubtitle: Maybe<Scalars['String']>;
+  readonly projectsTitle: Maybe<Scalars['String']>;
+  readonly publication: Maybe<Scalars['String']>;
+  readonly quote: Maybe<Scalars['String']>;
+  readonly role: Maybe<ReadonlyArray<Maybe<MarkdownRemarkFrontmatterRole>>>;
+  readonly score: Maybe<Scalars['Int']>;
+  readonly services: Maybe<ReadonlyArray<Maybe<MarkdownRemarkFrontmatterServices>>>;
+  readonly servicesSubtitle: Maybe<Scalars['String']>;
+  readonly servicesTitle: Maybe<Scalars['String']>;
+  readonly slides: Maybe<ReadonlyArray<Maybe<File>>>;
+  readonly source: Maybe<Scalars['String']>;
+  readonly subheading: Maybe<Scalars['String']>;
+  readonly summary: Maybe<Scalars['String']>;
+  readonly tagline: Maybe<Scalars['String']>;
+  readonly testimonials: Maybe<ReadonlyArray<Maybe<MarkdownRemarkFrontmatterTestimonials>>>;
+  readonly testimonialsSubtitle: Maybe<Scalars['String']>;
+  readonly testimonialsTitle: Maybe<Scalars['String']>;
+  readonly timeframe: Maybe<Scalars['String']>;
+  readonly title: Maybe<Scalars['String']>;
+  readonly twitter: Maybe<Scalars['String']>;
+  readonly twitterid: Maybe<Scalars['String']>;
+  readonly uid: Maybe<Scalars['String']>;
+  readonly website: Maybe<Scalars['String']>;
+};
+
+
+type MarkdownRemarkFrontmatter_dateArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type MarkdownRemarkFrontmatterAwards = {
+  readonly description: Maybe<Scalars['String']>;
+  readonly name: Maybe<Scalars['String']>;
+  readonly url: Maybe<Scalars['String']>;
+};
+
+type MarkdownRemarkFrontmatterAwardsFieldSelector = {
+  readonly description: InputMaybe<FieldSelectorEnum>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly url: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterAwardsFilterInput = {
+  readonly description: InputMaybe<StringQueryOperatorInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly url: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterAwardsFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFrontmatterAwardsFilterInput>;
+};
+
+type MarkdownRemarkFrontmatterAwardsSortInput = {
+  readonly description: InputMaybe<SortOrderEnum>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly url: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterFieldSelector = {
+  readonly accomplicesDescr: InputMaybe<FieldSelectorEnum>;
+  readonly accomplicesHeading: InputMaybe<FieldSelectorEnum>;
+  readonly active: InputMaybe<FieldSelectorEnum>;
+  readonly application: InputMaybe<FieldSelectorEnum>;
+  readonly avatar: InputMaybe<FileFieldSelector>;
+  readonly awards: InputMaybe<MarkdownRemarkFrontmatterAwardsFieldSelector>;
+  readonly bifpresents: InputMaybe<FieldSelectorEnum>;
+  readonly bluesky: InputMaybe<FieldSelectorEnum>;
+  readonly clientsSubtitle: InputMaybe<FieldSelectorEnum>;
+  readonly clientsTitle: InputMaybe<FieldSelectorEnum>;
+  readonly code: InputMaybe<FieldSelectorEnum>;
+  readonly contactCta: InputMaybe<FieldSelectorEnum>;
+  readonly cover: InputMaybe<FileFieldSelector>;
+  readonly date: InputMaybe<FieldSelectorEnum>;
+  readonly email: InputMaybe<FieldSelectorEnum>;
+  readonly emoji: InputMaybe<FieldSelectorEnum>;
+  readonly facebookid: InputMaybe<FieldSelectorEnum>;
+  readonly feature: InputMaybe<FieldSelectorEnum>;
+  readonly fname: InputMaybe<FieldSelectorEnum>;
+  readonly github: InputMaybe<FieldSelectorEnum>;
+  readonly githubid: InputMaybe<FieldSelectorEnum>;
+  readonly goodat: InputMaybe<MarkdownRemarkFrontmatterGoodatFieldSelector>;
+  readonly goodatSubtitle: InputMaybe<FieldSelectorEnum>;
+  readonly goodatTitle: InputMaybe<FieldSelectorEnum>;
+  readonly heading: InputMaybe<FieldSelectorEnum>;
+  readonly highlight: InputMaybe<FieldSelectorEnum>;
+  readonly link: InputMaybe<FieldSelectorEnum>;
+  readonly lname: InputMaybe<FieldSelectorEnum>;
+  readonly logo: InputMaybe<FileFieldSelector>;
+  readonly mastodon: InputMaybe<FieldSelectorEnum>;
+  readonly membersDescr: InputMaybe<FieldSelectorEnum>;
+  readonly membersHeading: InputMaybe<FieldSelectorEnum>;
+  readonly membershipTab: InputMaybe<FieldSelectorEnum>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly needs: InputMaybe<MarkdownRemarkFrontmatterNeedsFieldSelector>;
+  readonly overlordsDescr: InputMaybe<FieldSelectorEnum>;
+  readonly overlordsHeading: InputMaybe<FieldSelectorEnum>;
+  readonly partnershipTab: InputMaybe<FieldSelectorEnum>;
+  readonly path: InputMaybe<FieldSelectorEnum>;
+  readonly projectsCta: InputMaybe<FieldSelectorEnum>;
+  readonly projectsSubtitle: InputMaybe<FieldSelectorEnum>;
+  readonly projectsTitle: InputMaybe<FieldSelectorEnum>;
+  readonly publication: InputMaybe<FieldSelectorEnum>;
+  readonly quote: InputMaybe<FieldSelectorEnum>;
+  readonly role: InputMaybe<MarkdownRemarkFrontmatterRoleFieldSelector>;
+  readonly score: InputMaybe<FieldSelectorEnum>;
+  readonly services: InputMaybe<MarkdownRemarkFrontmatterServicesFieldSelector>;
+  readonly servicesSubtitle: InputMaybe<FieldSelectorEnum>;
+  readonly servicesTitle: InputMaybe<FieldSelectorEnum>;
+  readonly slides: InputMaybe<FileFieldSelector>;
+  readonly source: InputMaybe<FieldSelectorEnum>;
+  readonly subheading: InputMaybe<FieldSelectorEnum>;
+  readonly summary: InputMaybe<FieldSelectorEnum>;
+  readonly tagline: InputMaybe<FieldSelectorEnum>;
+  readonly testimonials: InputMaybe<MarkdownRemarkFrontmatterTestimonialsFieldSelector>;
+  readonly testimonialsSubtitle: InputMaybe<FieldSelectorEnum>;
+  readonly testimonialsTitle: InputMaybe<FieldSelectorEnum>;
+  readonly timeframe: InputMaybe<FieldSelectorEnum>;
+  readonly title: InputMaybe<FieldSelectorEnum>;
+  readonly twitter: InputMaybe<FieldSelectorEnum>;
+  readonly twitterid: InputMaybe<FieldSelectorEnum>;
+  readonly uid: InputMaybe<FieldSelectorEnum>;
+  readonly website: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterFilterInput = {
+  readonly accomplicesDescr: InputMaybe<StringQueryOperatorInput>;
+  readonly accomplicesHeading: InputMaybe<StringQueryOperatorInput>;
+  readonly active: InputMaybe<BooleanQueryOperatorInput>;
+  readonly application: InputMaybe<StringQueryOperatorInput>;
+  readonly avatar: InputMaybe<FileFilterInput>;
+  readonly awards: InputMaybe<MarkdownRemarkFrontmatterAwardsFilterListInput>;
+  readonly bifpresents: InputMaybe<StringQueryOperatorInput>;
+  readonly bluesky: InputMaybe<StringQueryOperatorInput>;
+  readonly clientsSubtitle: InputMaybe<StringQueryOperatorInput>;
+  readonly clientsTitle: InputMaybe<StringQueryOperatorInput>;
+  readonly code: InputMaybe<StringQueryOperatorInput>;
+  readonly contactCta: InputMaybe<StringQueryOperatorInput>;
+  readonly cover: InputMaybe<FileFilterInput>;
+  readonly date: InputMaybe<DateQueryOperatorInput>;
+  readonly email: InputMaybe<StringQueryOperatorInput>;
+  readonly emoji: InputMaybe<StringQueryOperatorInput>;
+  readonly facebookid: InputMaybe<StringQueryOperatorInput>;
+  readonly feature: InputMaybe<BooleanQueryOperatorInput>;
+  readonly fname: InputMaybe<StringQueryOperatorInput>;
+  readonly github: InputMaybe<StringQueryOperatorInput>;
+  readonly githubid: InputMaybe<StringQueryOperatorInput>;
+  readonly goodat: InputMaybe<MarkdownRemarkFrontmatterGoodatFilterListInput>;
+  readonly goodatSubtitle: InputMaybe<StringQueryOperatorInput>;
+  readonly goodatTitle: InputMaybe<StringQueryOperatorInput>;
+  readonly heading: InputMaybe<StringQueryOperatorInput>;
+  readonly highlight: InputMaybe<BooleanQueryOperatorInput>;
+  readonly link: InputMaybe<StringQueryOperatorInput>;
+  readonly lname: InputMaybe<StringQueryOperatorInput>;
+  readonly logo: InputMaybe<FileFilterInput>;
+  readonly mastodon: InputMaybe<StringQueryOperatorInput>;
+  readonly membersDescr: InputMaybe<StringQueryOperatorInput>;
+  readonly membersHeading: InputMaybe<StringQueryOperatorInput>;
+  readonly membershipTab: InputMaybe<StringQueryOperatorInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly needs: InputMaybe<MarkdownRemarkFrontmatterNeedsFilterInput>;
+  readonly overlordsDescr: InputMaybe<StringQueryOperatorInput>;
+  readonly overlordsHeading: InputMaybe<StringQueryOperatorInput>;
+  readonly partnershipTab: InputMaybe<StringQueryOperatorInput>;
+  readonly path: InputMaybe<StringQueryOperatorInput>;
+  readonly projectsCta: InputMaybe<StringQueryOperatorInput>;
+  readonly projectsSubtitle: InputMaybe<StringQueryOperatorInput>;
+  readonly projectsTitle: InputMaybe<StringQueryOperatorInput>;
+  readonly publication: InputMaybe<StringQueryOperatorInput>;
+  readonly quote: InputMaybe<StringQueryOperatorInput>;
+  readonly role: InputMaybe<MarkdownRemarkFrontmatterRoleFilterListInput>;
+  readonly score: InputMaybe<IntQueryOperatorInput>;
+  readonly services: InputMaybe<MarkdownRemarkFrontmatterServicesFilterListInput>;
+  readonly servicesSubtitle: InputMaybe<StringQueryOperatorInput>;
+  readonly servicesTitle: InputMaybe<StringQueryOperatorInput>;
+  readonly slides: InputMaybe<FileFilterListInput>;
+  readonly source: InputMaybe<StringQueryOperatorInput>;
+  readonly subheading: InputMaybe<StringQueryOperatorInput>;
+  readonly summary: InputMaybe<StringQueryOperatorInput>;
+  readonly tagline: InputMaybe<StringQueryOperatorInput>;
+  readonly testimonials: InputMaybe<MarkdownRemarkFrontmatterTestimonialsFilterListInput>;
+  readonly testimonialsSubtitle: InputMaybe<StringQueryOperatorInput>;
+  readonly testimonialsTitle: InputMaybe<StringQueryOperatorInput>;
+  readonly timeframe: InputMaybe<StringQueryOperatorInput>;
+  readonly title: InputMaybe<StringQueryOperatorInput>;
+  readonly twitter: InputMaybe<StringQueryOperatorInput>;
+  readonly twitterid: InputMaybe<StringQueryOperatorInput>;
+  readonly uid: InputMaybe<StringQueryOperatorInput>;
+  readonly website: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterGoodat = {
+  readonly text: Maybe<Scalars['String']>;
+  readonly title: Maybe<Scalars['String']>;
+};
+
+type MarkdownRemarkFrontmatterGoodatFieldSelector = {
+  readonly text: InputMaybe<FieldSelectorEnum>;
+  readonly title: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterGoodatFilterInput = {
+  readonly text: InputMaybe<StringQueryOperatorInput>;
+  readonly title: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterGoodatFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFrontmatterGoodatFilterInput>;
+};
+
+type MarkdownRemarkFrontmatterGoodatSortInput = {
+  readonly text: InputMaybe<SortOrderEnum>;
+  readonly title: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterNeeds = {
+  readonly code: Maybe<Scalars['Boolean']>;
+  readonly graphic: Maybe<Scalars['Boolean']>;
+  readonly money: Maybe<Scalars['Boolean']>;
+  readonly other: Maybe<Scalars['String']>;
+  readonly users: Maybe<Scalars['Boolean']>;
+  readonly uxui: Maybe<Scalars['Boolean']>;
+};
+
+type MarkdownRemarkFrontmatterNeedsFieldSelector = {
+  readonly code: InputMaybe<FieldSelectorEnum>;
+  readonly graphic: InputMaybe<FieldSelectorEnum>;
+  readonly money: InputMaybe<FieldSelectorEnum>;
+  readonly other: InputMaybe<FieldSelectorEnum>;
+  readonly users: InputMaybe<FieldSelectorEnum>;
+  readonly uxui: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterNeedsFilterInput = {
+  readonly code: InputMaybe<BooleanQueryOperatorInput>;
+  readonly graphic: InputMaybe<BooleanQueryOperatorInput>;
+  readonly money: InputMaybe<BooleanQueryOperatorInput>;
+  readonly other: InputMaybe<StringQueryOperatorInput>;
+  readonly users: InputMaybe<BooleanQueryOperatorInput>;
+  readonly uxui: InputMaybe<BooleanQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterNeedsSortInput = {
+  readonly code: InputMaybe<SortOrderEnum>;
+  readonly graphic: InputMaybe<SortOrderEnum>;
+  readonly money: InputMaybe<SortOrderEnum>;
+  readonly other: InputMaybe<SortOrderEnum>;
+  readonly users: InputMaybe<SortOrderEnum>;
+  readonly uxui: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterRole = {
+  readonly accomplice: Maybe<Scalars['Boolean']>;
+  readonly member: Maybe<Scalars['Boolean']>;
+  readonly overlord: Maybe<Scalars['Boolean']>;
+};
+
+type MarkdownRemarkFrontmatterRoleFieldSelector = {
+  readonly accomplice: InputMaybe<FieldSelectorEnum>;
+  readonly member: InputMaybe<FieldSelectorEnum>;
+  readonly overlord: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterRoleFilterInput = {
+  readonly accomplice: InputMaybe<BooleanQueryOperatorInput>;
+  readonly member: InputMaybe<BooleanQueryOperatorInput>;
+  readonly overlord: InputMaybe<BooleanQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterRoleFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFrontmatterRoleFilterInput>;
+};
+
+type MarkdownRemarkFrontmatterRoleSortInput = {
+  readonly accomplice: InputMaybe<SortOrderEnum>;
+  readonly member: InputMaybe<SortOrderEnum>;
+  readonly overlord: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterServices = {
+  readonly text: Maybe<Scalars['String']>;
+  readonly title: Maybe<Scalars['String']>;
+};
+
+type MarkdownRemarkFrontmatterServicesFieldSelector = {
+  readonly text: InputMaybe<FieldSelectorEnum>;
+  readonly title: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterServicesFilterInput = {
+  readonly text: InputMaybe<StringQueryOperatorInput>;
+  readonly title: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterServicesFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFrontmatterServicesFilterInput>;
+};
+
+type MarkdownRemarkFrontmatterServicesSortInput = {
+  readonly text: InputMaybe<SortOrderEnum>;
+  readonly title: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterSortInput = {
+  readonly accomplicesDescr: InputMaybe<SortOrderEnum>;
+  readonly accomplicesHeading: InputMaybe<SortOrderEnum>;
+  readonly active: InputMaybe<SortOrderEnum>;
+  readonly application: InputMaybe<SortOrderEnum>;
+  readonly avatar: InputMaybe<FileSortInput>;
+  readonly awards: InputMaybe<MarkdownRemarkFrontmatterAwardsSortInput>;
+  readonly bifpresents: InputMaybe<SortOrderEnum>;
+  readonly bluesky: InputMaybe<SortOrderEnum>;
+  readonly clientsSubtitle: InputMaybe<SortOrderEnum>;
+  readonly clientsTitle: InputMaybe<SortOrderEnum>;
+  readonly code: InputMaybe<SortOrderEnum>;
+  readonly contactCta: InputMaybe<SortOrderEnum>;
+  readonly cover: InputMaybe<FileSortInput>;
+  readonly date: InputMaybe<SortOrderEnum>;
+  readonly email: InputMaybe<SortOrderEnum>;
+  readonly emoji: InputMaybe<SortOrderEnum>;
+  readonly facebookid: InputMaybe<SortOrderEnum>;
+  readonly feature: InputMaybe<SortOrderEnum>;
+  readonly fname: InputMaybe<SortOrderEnum>;
+  readonly github: InputMaybe<SortOrderEnum>;
+  readonly githubid: InputMaybe<SortOrderEnum>;
+  readonly goodat: InputMaybe<MarkdownRemarkFrontmatterGoodatSortInput>;
+  readonly goodatSubtitle: InputMaybe<SortOrderEnum>;
+  readonly goodatTitle: InputMaybe<SortOrderEnum>;
+  readonly heading: InputMaybe<SortOrderEnum>;
+  readonly highlight: InputMaybe<SortOrderEnum>;
+  readonly link: InputMaybe<SortOrderEnum>;
+  readonly lname: InputMaybe<SortOrderEnum>;
+  readonly logo: InputMaybe<FileSortInput>;
+  readonly mastodon: InputMaybe<SortOrderEnum>;
+  readonly membersDescr: InputMaybe<SortOrderEnum>;
+  readonly membersHeading: InputMaybe<SortOrderEnum>;
+  readonly membershipTab: InputMaybe<SortOrderEnum>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly needs: InputMaybe<MarkdownRemarkFrontmatterNeedsSortInput>;
+  readonly overlordsDescr: InputMaybe<SortOrderEnum>;
+  readonly overlordsHeading: InputMaybe<SortOrderEnum>;
+  readonly partnershipTab: InputMaybe<SortOrderEnum>;
+  readonly path: InputMaybe<SortOrderEnum>;
+  readonly projectsCta: InputMaybe<SortOrderEnum>;
+  readonly projectsSubtitle: InputMaybe<SortOrderEnum>;
+  readonly projectsTitle: InputMaybe<SortOrderEnum>;
+  readonly publication: InputMaybe<SortOrderEnum>;
+  readonly quote: InputMaybe<SortOrderEnum>;
+  readonly role: InputMaybe<MarkdownRemarkFrontmatterRoleSortInput>;
+  readonly score: InputMaybe<SortOrderEnum>;
+  readonly services: InputMaybe<MarkdownRemarkFrontmatterServicesSortInput>;
+  readonly servicesSubtitle: InputMaybe<SortOrderEnum>;
+  readonly servicesTitle: InputMaybe<SortOrderEnum>;
+  readonly slides: InputMaybe<FileSortInput>;
+  readonly source: InputMaybe<SortOrderEnum>;
+  readonly subheading: InputMaybe<SortOrderEnum>;
+  readonly summary: InputMaybe<SortOrderEnum>;
+  readonly tagline: InputMaybe<SortOrderEnum>;
+  readonly testimonials: InputMaybe<MarkdownRemarkFrontmatterTestimonialsSortInput>;
+  readonly testimonialsSubtitle: InputMaybe<SortOrderEnum>;
+  readonly testimonialsTitle: InputMaybe<SortOrderEnum>;
+  readonly timeframe: InputMaybe<SortOrderEnum>;
+  readonly title: InputMaybe<SortOrderEnum>;
+  readonly twitter: InputMaybe<SortOrderEnum>;
+  readonly twitterid: InputMaybe<SortOrderEnum>;
+  readonly uid: InputMaybe<SortOrderEnum>;
+  readonly website: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkFrontmatterTestimonials = {
+  readonly source: Maybe<Scalars['String']>;
+  readonly span: Maybe<Scalars['Boolean']>;
+  readonly text: Maybe<Scalars['String']>;
+};
+
+type MarkdownRemarkFrontmatterTestimonialsFieldSelector = {
+  readonly source: InputMaybe<FieldSelectorEnum>;
+  readonly span: InputMaybe<FieldSelectorEnum>;
+  readonly text: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownRemarkFrontmatterTestimonialsFilterInput = {
+  readonly source: InputMaybe<StringQueryOperatorInput>;
+  readonly span: InputMaybe<BooleanQueryOperatorInput>;
+  readonly text: InputMaybe<StringQueryOperatorInput>;
+};
+
+type MarkdownRemarkFrontmatterTestimonialsFilterListInput = {
+  readonly elemMatch: InputMaybe<MarkdownRemarkFrontmatterTestimonialsFilterInput>;
+};
+
+type MarkdownRemarkFrontmatterTestimonialsSortInput = {
+  readonly source: InputMaybe<SortOrderEnum>;
+  readonly span: InputMaybe<SortOrderEnum>;
+  readonly text: InputMaybe<SortOrderEnum>;
+};
+
+type MarkdownRemarkGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<MarkdownRemarkEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<MarkdownRemarkGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<MarkdownRemark>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type MarkdownRemarkGroupConnection_distinctArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkGroupConnection_groupArgs = {
+  field: MarkdownRemarkFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type MarkdownRemarkGroupConnection_maxArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkGroupConnection_minArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+
+type MarkdownRemarkGroupConnection_sumArgs = {
+  field: MarkdownRemarkFieldSelector;
+};
+
+type MarkdownRemarkSortInput = {
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly excerpt: InputMaybe<SortOrderEnum>;
+  readonly excerptAst: InputMaybe<SortOrderEnum>;
+  readonly fileAbsolutePath: InputMaybe<SortOrderEnum>;
+  readonly frontmatter: InputMaybe<MarkdownRemarkFrontmatterSortInput>;
+  readonly headings: InputMaybe<MarkdownHeadingSortInput>;
+  readonly html: InputMaybe<SortOrderEnum>;
+  readonly htmlAst: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly rawMarkdownBody: InputMaybe<SortOrderEnum>;
+  readonly tableOfContents: InputMaybe<SortOrderEnum>;
+  readonly timeToRead: InputMaybe<SortOrderEnum>;
+  readonly wordCount: InputMaybe<MarkdownWordCountSortInput>;
+};
+
+type MarkdownWordCount = {
+  readonly paragraphs: Maybe<Scalars['Int']>;
+  readonly sentences: Maybe<Scalars['Int']>;
+  readonly words: Maybe<Scalars['Int']>;
+};
+
+type MarkdownWordCountFieldSelector = {
+  readonly paragraphs: InputMaybe<FieldSelectorEnum>;
+  readonly sentences: InputMaybe<FieldSelectorEnum>;
+  readonly words: InputMaybe<FieldSelectorEnum>;
+};
+
+type MarkdownWordCountFilterInput = {
+  readonly paragraphs: InputMaybe<IntQueryOperatorInput>;
+  readonly sentences: InputMaybe<IntQueryOperatorInput>;
+  readonly words: InputMaybe<IntQueryOperatorInput>;
+};
+
+type MarkdownWordCountSortInput = {
+  readonly paragraphs: InputMaybe<SortOrderEnum>;
+  readonly sentences: InputMaybe<SortOrderEnum>;
+  readonly words: InputMaybe<SortOrderEnum>;
+};
+
+/** Node Interface */
+type Node = {
+  readonly children: ReadonlyArray<Node>;
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly parent: Maybe<Node>;
+};
+
+type NodeFieldSelector = {
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+};
+
+type NodeFilterInput = {
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+};
+
+type NodeFilterListInput = {
+  readonly elemMatch: InputMaybe<NodeFilterInput>;
+};
+
+type NodeSortInput = {
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly parent: InputMaybe<NodeSortInput>;
+};
+
+type PNGOptions = {
+  readonly compressionSpeed: InputMaybe<Scalars['Int']>;
+  readonly quality: InputMaybe<Scalars['Int']>;
+};
+
+type PageInfo = {
+  readonly currentPage: Scalars['Int'];
+  readonly hasNextPage: Scalars['Boolean'];
+  readonly hasPreviousPage: Scalars['Boolean'];
+  readonly itemCount: Scalars['Int'];
+  readonly pageCount: Scalars['Int'];
+  readonly perPage: Maybe<Scalars['Int']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+type Potrace = {
+  readonly alphaMax: InputMaybe<Scalars['Float']>;
+  readonly background: InputMaybe<Scalars['String']>;
+  readonly blackOnWhite: InputMaybe<Scalars['Boolean']>;
+  readonly color: InputMaybe<Scalars['String']>;
+  readonly optCurve: InputMaybe<Scalars['Boolean']>;
+  readonly optTolerance: InputMaybe<Scalars['Float']>;
+  readonly threshold: InputMaybe<Scalars['Int']>;
+  readonly turdSize: InputMaybe<Scalars['Float']>;
+  readonly turnPolicy: InputMaybe<PotraceTurnPolicy>;
+};
+
+type PotraceTurnPolicy =
+  | 'black'
+  | 'left'
+  | 'majority'
+  | 'minority'
+  | 'right'
+  | 'white';
+
+type Query = {
+  readonly allDirectory: DirectoryConnection;
+  readonly allFile: FileConnection;
+  readonly allImageSharp: ImageSharpConnection;
+  readonly allMarkdownRemark: MarkdownRemarkConnection;
+  readonly allSite: SiteConnection;
+  readonly allSiteBuildMetadata: SiteBuildMetadataConnection;
+  readonly allSiteFunction: SiteFunctionConnection;
+  readonly allSitePage: SitePageConnection;
+  readonly allSitePlugin: SitePluginConnection;
+  readonly directory: Maybe<Directory>;
+  readonly file: Maybe<File>;
+  readonly imageSharp: Maybe<ImageSharp>;
+  readonly markdownRemark: Maybe<MarkdownRemark>;
+  readonly site: Maybe<Site>;
+  readonly siteBuildMetadata: Maybe<SiteBuildMetadata>;
+  readonly siteFunction: Maybe<SiteFunction>;
+  readonly sitePage: Maybe<SitePage>;
+  readonly sitePlugin: Maybe<SitePlugin>;
+};
+
+
+type Query_allDirectoryArgs = {
+  filter: InputMaybe<DirectoryFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<DirectorySortInput>>>;
+};
+
+
+type Query_allFileArgs = {
+  filter: InputMaybe<FileFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<FileSortInput>>>;
+};
+
+
+type Query_allImageSharpArgs = {
+  filter: InputMaybe<ImageSharpFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<ImageSharpSortInput>>>;
+};
+
+
+type Query_allMarkdownRemarkArgs = {
+  filter: InputMaybe<MarkdownRemarkFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<MarkdownRemarkSortInput>>>;
+};
+
+
+type Query_allSiteArgs = {
+  filter: InputMaybe<SiteFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<SiteSortInput>>>;
+};
+
+
+type Query_allSiteBuildMetadataArgs = {
+  filter: InputMaybe<SiteBuildMetadataFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<SiteBuildMetadataSortInput>>>;
+};
+
+
+type Query_allSiteFunctionArgs = {
+  filter: InputMaybe<SiteFunctionFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<SiteFunctionSortInput>>>;
+};
+
+
+type Query_allSitePageArgs = {
+  filter: InputMaybe<SitePageFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<SitePageSortInput>>>;
+};
+
+
+type Query_allSitePluginArgs = {
+  filter: InputMaybe<SitePluginFilterInput>;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+  sort: InputMaybe<ReadonlyArray<InputMaybe<SitePluginSortInput>>>;
+};
+
+
+type Query_directoryArgs = {
+  absolutePath: InputMaybe<StringQueryOperatorInput>;
+  accessTime: InputMaybe<DateQueryOperatorInput>;
+  atime: InputMaybe<DateQueryOperatorInput>;
+  atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  base: InputMaybe<StringQueryOperatorInput>;
+  birthTime: InputMaybe<DateQueryOperatorInput>;
+  birthtime: InputMaybe<DateQueryOperatorInput>;
+  birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  changeTime: InputMaybe<DateQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  ctime: InputMaybe<DateQueryOperatorInput>;
+  ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  dev: InputMaybe<IntQueryOperatorInput>;
+  dir: InputMaybe<StringQueryOperatorInput>;
+  ext: InputMaybe<StringQueryOperatorInput>;
+  extension: InputMaybe<StringQueryOperatorInput>;
+  gid: InputMaybe<IntQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  ino: InputMaybe<FloatQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  mode: InputMaybe<IntQueryOperatorInput>;
+  modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  mtime: InputMaybe<DateQueryOperatorInput>;
+  mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  name: InputMaybe<StringQueryOperatorInput>;
+  nlink: InputMaybe<IntQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  prettySize: InputMaybe<StringQueryOperatorInput>;
+  rdev: InputMaybe<IntQueryOperatorInput>;
+  relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  relativePath: InputMaybe<StringQueryOperatorInput>;
+  root: InputMaybe<StringQueryOperatorInput>;
+  size: InputMaybe<IntQueryOperatorInput>;
+  sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  uid: InputMaybe<IntQueryOperatorInput>;
+};
+
+
+type Query_fileArgs = {
+  absolutePath: InputMaybe<StringQueryOperatorInput>;
+  accessTime: InputMaybe<DateQueryOperatorInput>;
+  atime: InputMaybe<DateQueryOperatorInput>;
+  atimeMs: InputMaybe<FloatQueryOperatorInput>;
+  base: InputMaybe<StringQueryOperatorInput>;
+  birthTime: InputMaybe<DateQueryOperatorInput>;
+  birthtime: InputMaybe<DateQueryOperatorInput>;
+  birthtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  blksize: InputMaybe<IntQueryOperatorInput>;
+  blocks: InputMaybe<IntQueryOperatorInput>;
+  changeTime: InputMaybe<DateQueryOperatorInput>;
+  childImageSharp: InputMaybe<ImageSharpFilterInput>;
+  childMarkdownRemark: InputMaybe<MarkdownRemarkFilterInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  childrenImageSharp: InputMaybe<ImageSharpFilterListInput>;
+  childrenMarkdownRemark: InputMaybe<MarkdownRemarkFilterListInput>;
+  ctime: InputMaybe<DateQueryOperatorInput>;
+  ctimeMs: InputMaybe<FloatQueryOperatorInput>;
+  dev: InputMaybe<IntQueryOperatorInput>;
+  dir: InputMaybe<StringQueryOperatorInput>;
+  ext: InputMaybe<StringQueryOperatorInput>;
+  extension: InputMaybe<StringQueryOperatorInput>;
+  gid: InputMaybe<IntQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  ino: InputMaybe<FloatQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  mode: InputMaybe<IntQueryOperatorInput>;
+  modifiedTime: InputMaybe<DateQueryOperatorInput>;
+  mtime: InputMaybe<DateQueryOperatorInput>;
+  mtimeMs: InputMaybe<FloatQueryOperatorInput>;
+  name: InputMaybe<StringQueryOperatorInput>;
+  nlink: InputMaybe<IntQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  prettySize: InputMaybe<StringQueryOperatorInput>;
+  publicURL: InputMaybe<StringQueryOperatorInput>;
+  rdev: InputMaybe<IntQueryOperatorInput>;
+  relativeDirectory: InputMaybe<StringQueryOperatorInput>;
+  relativePath: InputMaybe<StringQueryOperatorInput>;
+  root: InputMaybe<StringQueryOperatorInput>;
+  size: InputMaybe<IntQueryOperatorInput>;
+  sourceInstanceName: InputMaybe<StringQueryOperatorInput>;
+  uid: InputMaybe<IntQueryOperatorInput>;
+};
+
+
+type Query_imageSharpArgs = {
+  children: InputMaybe<NodeFilterListInput>;
+  fixed: InputMaybe<ImageSharpFixedFilterInput>;
+  fluid: InputMaybe<ImageSharpFluidFilterInput>;
+  gatsbyImageData: InputMaybe<GatsbyImageDataQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  original: InputMaybe<ImageSharpOriginalFilterInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  resize: InputMaybe<ImageSharpResizeFilterInput>;
+};
+
+
+type Query_markdownRemarkArgs = {
+  children: InputMaybe<NodeFilterListInput>;
+  excerpt: InputMaybe<StringQueryOperatorInput>;
+  excerptAst: InputMaybe<JSONQueryOperatorInput>;
+  fileAbsolutePath: InputMaybe<StringQueryOperatorInput>;
+  frontmatter: InputMaybe<MarkdownRemarkFrontmatterFilterInput>;
+  headings: InputMaybe<MarkdownHeadingFilterListInput>;
+  html: InputMaybe<StringQueryOperatorInput>;
+  htmlAst: InputMaybe<JSONQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  rawMarkdownBody: InputMaybe<StringQueryOperatorInput>;
+  tableOfContents: InputMaybe<StringQueryOperatorInput>;
+  timeToRead: InputMaybe<IntQueryOperatorInput>;
+  wordCount: InputMaybe<MarkdownWordCountFilterInput>;
+};
+
+
+type Query_siteArgs = {
+  buildTime: InputMaybe<DateQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
+  host: InputMaybe<StringQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  jsxRuntime: InputMaybe<StringQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  pathPrefix: InputMaybe<StringQueryOperatorInput>;
+  polyfill: InputMaybe<BooleanQueryOperatorInput>;
+  port: InputMaybe<IntQueryOperatorInput>;
+  siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
+  trailingSlash: InputMaybe<StringQueryOperatorInput>;
+};
+
+
+type Query_siteBuildMetadataArgs = {
+  buildTime: InputMaybe<DateQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  parent: InputMaybe<NodeFilterInput>;
+};
+
+
+type Query_siteFunctionArgs = {
+  absoluteCompiledFilePath: InputMaybe<StringQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  functionRoute: InputMaybe<StringQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  matchPath: InputMaybe<StringQueryOperatorInput>;
+  originalAbsoluteFilePath: InputMaybe<StringQueryOperatorInput>;
+  originalRelativeFilePath: InputMaybe<StringQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  pluginName: InputMaybe<StringQueryOperatorInput>;
+  relativeCompiledFilePath: InputMaybe<StringQueryOperatorInput>;
+};
+
+
+type Query_sitePageArgs = {
+  children: InputMaybe<NodeFilterListInput>;
+  component: InputMaybe<StringQueryOperatorInput>;
+  componentChunkName: InputMaybe<StringQueryOperatorInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  internalComponentName: InputMaybe<StringQueryOperatorInput>;
+  matchPath: InputMaybe<StringQueryOperatorInput>;
+  pageContext: InputMaybe<JSONQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  path: InputMaybe<StringQueryOperatorInput>;
+  pluginCreator: InputMaybe<SitePluginFilterInput>;
+};
+
+
+type Query_sitePluginArgs = {
+  browserAPIs: InputMaybe<StringQueryOperatorInput>;
+  children: InputMaybe<NodeFilterListInput>;
+  id: InputMaybe<StringQueryOperatorInput>;
+  internal: InputMaybe<InternalFilterInput>;
+  name: InputMaybe<StringQueryOperatorInput>;
+  nodeAPIs: InputMaybe<StringQueryOperatorInput>;
+  packageJson: InputMaybe<JSONQueryOperatorInput>;
+  parent: InputMaybe<NodeFilterInput>;
+  pluginFilepath: InputMaybe<StringQueryOperatorInput>;
+  pluginOptions: InputMaybe<JSONQueryOperatorInput>;
+  resolve: InputMaybe<StringQueryOperatorInput>;
+  ssrAPIs: InputMaybe<StringQueryOperatorInput>;
+  version: InputMaybe<StringQueryOperatorInput>;
+};
+
+type Site = Node & {
+  readonly buildTime: Maybe<Scalars['Date']>;
+  readonly children: ReadonlyArray<Node>;
+  readonly graphqlTypegen: Maybe<SiteGraphqlTypegen>;
+  readonly host: Maybe<Scalars['String']>;
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly jsxRuntime: Maybe<Scalars['String']>;
+  readonly parent: Maybe<Node>;
+  readonly pathPrefix: Maybe<Scalars['String']>;
+  readonly polyfill: Maybe<Scalars['Boolean']>;
+  readonly port: Maybe<Scalars['Int']>;
+  readonly siteMetadata: Maybe<SiteSiteMetadata>;
+  readonly trailingSlash: Maybe<Scalars['String']>;
+};
+
+
+type Site_buildTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type SiteBuildMetadata = Node & {
+  readonly buildTime: Maybe<Scalars['Date']>;
+  readonly children: ReadonlyArray<Node>;
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly parent: Maybe<Node>;
+};
+
+
+type SiteBuildMetadata_buildTimeArgs = {
+  difference: InputMaybe<Scalars['String']>;
+  formatString: InputMaybe<Scalars['String']>;
+  fromNow: InputMaybe<Scalars['Boolean']>;
+  locale: InputMaybe<Scalars['String']>;
+};
+
+type SiteBuildMetadataConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteBuildMetadataEdge>;
+  readonly group: ReadonlyArray<SiteBuildMetadataGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SiteBuildMetadata>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteBuildMetadataConnection_distinctArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataConnection_groupArgs = {
+  field: SiteBuildMetadataFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteBuildMetadataConnection_maxArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataConnection_minArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataConnection_sumArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+type SiteBuildMetadataEdge = {
+  readonly next: Maybe<SiteBuildMetadata>;
+  readonly node: SiteBuildMetadata;
+  readonly previous: Maybe<SiteBuildMetadata>;
+};
+
+type SiteBuildMetadataFieldSelector = {
+  readonly buildTime: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+};
+
+type SiteBuildMetadataFilterInput = {
+  readonly buildTime: InputMaybe<DateQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+};
+
+type SiteBuildMetadataGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteBuildMetadataEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<SiteBuildMetadataGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SiteBuildMetadata>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteBuildMetadataGroupConnection_distinctArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataGroupConnection_groupArgs = {
+  field: SiteBuildMetadataFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteBuildMetadataGroupConnection_maxArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataGroupConnection_minArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+
+type SiteBuildMetadataGroupConnection_sumArgs = {
+  field: SiteBuildMetadataFieldSelector;
+};
+
+type SiteBuildMetadataSortInput = {
+  readonly buildTime: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly parent: InputMaybe<NodeSortInput>;
+};
+
+type SiteConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteEdge>;
+  readonly group: ReadonlyArray<SiteGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<Site>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteConnection_distinctArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteConnection_groupArgs = {
+  field: SiteFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteConnection_maxArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteConnection_minArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteConnection_sumArgs = {
+  field: SiteFieldSelector;
+};
+
+type SiteEdge = {
+  readonly next: Maybe<Site>;
+  readonly node: Site;
+  readonly previous: Maybe<Site>;
+};
+
+type SiteFieldSelector = {
+  readonly buildTime: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenFieldSelector>;
+  readonly host: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly jsxRuntime: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly pathPrefix: InputMaybe<FieldSelectorEnum>;
+  readonly polyfill: InputMaybe<FieldSelectorEnum>;
+  readonly port: InputMaybe<FieldSelectorEnum>;
+  readonly siteMetadata: InputMaybe<SiteSiteMetadataFieldSelector>;
+  readonly trailingSlash: InputMaybe<FieldSelectorEnum>;
+};
+
+type SiteFilterInput = {
+  readonly buildTime: InputMaybe<DateQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenFilterInput>;
+  readonly host: InputMaybe<StringQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly jsxRuntime: InputMaybe<StringQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly pathPrefix: InputMaybe<StringQueryOperatorInput>;
+  readonly polyfill: InputMaybe<BooleanQueryOperatorInput>;
+  readonly port: InputMaybe<IntQueryOperatorInput>;
+  readonly siteMetadata: InputMaybe<SiteSiteMetadataFilterInput>;
+  readonly trailingSlash: InputMaybe<StringQueryOperatorInput>;
+};
+
+type SiteFunction = Node & {
+  readonly absoluteCompiledFilePath: Scalars['String'];
+  readonly children: ReadonlyArray<Node>;
+  readonly functionRoute: Scalars['String'];
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly matchPath: Maybe<Scalars['String']>;
+  readonly originalAbsoluteFilePath: Scalars['String'];
+  readonly originalRelativeFilePath: Scalars['String'];
+  readonly parent: Maybe<Node>;
+  readonly pluginName: Scalars['String'];
+  readonly relativeCompiledFilePath: Scalars['String'];
+};
+
+type SiteFunctionConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteFunctionEdge>;
+  readonly group: ReadonlyArray<SiteFunctionGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SiteFunction>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteFunctionConnection_distinctArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionConnection_groupArgs = {
+  field: SiteFunctionFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteFunctionConnection_maxArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionConnection_minArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionConnection_sumArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+type SiteFunctionEdge = {
+  readonly next: Maybe<SiteFunction>;
+  readonly node: SiteFunction;
+  readonly previous: Maybe<SiteFunction>;
+};
+
+type SiteFunctionFieldSelector = {
+  readonly absoluteCompiledFilePath: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly functionRoute: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly matchPath: InputMaybe<FieldSelectorEnum>;
+  readonly originalAbsoluteFilePath: InputMaybe<FieldSelectorEnum>;
+  readonly originalRelativeFilePath: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly pluginName: InputMaybe<FieldSelectorEnum>;
+  readonly relativeCompiledFilePath: InputMaybe<FieldSelectorEnum>;
+};
+
+type SiteFunctionFilterInput = {
+  readonly absoluteCompiledFilePath: InputMaybe<StringQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly functionRoute: InputMaybe<StringQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly matchPath: InputMaybe<StringQueryOperatorInput>;
+  readonly originalAbsoluteFilePath: InputMaybe<StringQueryOperatorInput>;
+  readonly originalRelativeFilePath: InputMaybe<StringQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly pluginName: InputMaybe<StringQueryOperatorInput>;
+  readonly relativeCompiledFilePath: InputMaybe<StringQueryOperatorInput>;
+};
+
+type SiteFunctionGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteFunctionEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<SiteFunctionGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SiteFunction>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteFunctionGroupConnection_distinctArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionGroupConnection_groupArgs = {
+  field: SiteFunctionFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteFunctionGroupConnection_maxArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionGroupConnection_minArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+
+type SiteFunctionGroupConnection_sumArgs = {
+  field: SiteFunctionFieldSelector;
+};
+
+type SiteFunctionSortInput = {
+  readonly absoluteCompiledFilePath: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly functionRoute: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly matchPath: InputMaybe<SortOrderEnum>;
+  readonly originalAbsoluteFilePath: InputMaybe<SortOrderEnum>;
+  readonly originalRelativeFilePath: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly pluginName: InputMaybe<SortOrderEnum>;
+  readonly relativeCompiledFilePath: InputMaybe<SortOrderEnum>;
+};
+
+type SiteGraphqlTypegen = {
+  readonly documentSearchPaths: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  readonly generateOnBuild: Maybe<Scalars['Boolean']>;
+  readonly typesOutputPath: Maybe<Scalars['String']>;
+};
+
+type SiteGraphqlTypegenFieldSelector = {
+  readonly documentSearchPaths: InputMaybe<FieldSelectorEnum>;
+  readonly generateOnBuild: InputMaybe<FieldSelectorEnum>;
+  readonly typesOutputPath: InputMaybe<FieldSelectorEnum>;
+};
+
+type SiteGraphqlTypegenFilterInput = {
+  readonly documentSearchPaths: InputMaybe<StringQueryOperatorInput>;
+  readonly generateOnBuild: InputMaybe<BooleanQueryOperatorInput>;
+  readonly typesOutputPath: InputMaybe<StringQueryOperatorInput>;
+};
+
+type SiteGraphqlTypegenSortInput = {
+  readonly documentSearchPaths: InputMaybe<SortOrderEnum>;
+  readonly generateOnBuild: InputMaybe<SortOrderEnum>;
+  readonly typesOutputPath: InputMaybe<SortOrderEnum>;
+};
+
+type SiteGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SiteEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<SiteGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<Site>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SiteGroupConnection_distinctArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteGroupConnection_groupArgs = {
+  field: SiteFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SiteGroupConnection_maxArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteGroupConnection_minArgs = {
+  field: SiteFieldSelector;
+};
+
+
+type SiteGroupConnection_sumArgs = {
+  field: SiteFieldSelector;
+};
+
+type SitePage = Node & {
+  readonly children: ReadonlyArray<Node>;
+  readonly component: Scalars['String'];
+  readonly componentChunkName: Scalars['String'];
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly internalComponentName: Scalars['String'];
+  readonly matchPath: Maybe<Scalars['String']>;
+  readonly pageContext: Maybe<Scalars['JSON']>;
+  readonly parent: Maybe<Node>;
+  readonly path: Scalars['String'];
+  readonly pluginCreator: Maybe<SitePlugin>;
+};
+
+type SitePageConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SitePageEdge>;
+  readonly group: ReadonlyArray<SitePageGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SitePage>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SitePageConnection_distinctArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageConnection_groupArgs = {
+  field: SitePageFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SitePageConnection_maxArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageConnection_minArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageConnection_sumArgs = {
+  field: SitePageFieldSelector;
+};
+
+type SitePageEdge = {
+  readonly next: Maybe<SitePage>;
+  readonly node: SitePage;
+  readonly previous: Maybe<SitePage>;
+};
+
+type SitePageFieldSelector = {
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly component: InputMaybe<FieldSelectorEnum>;
+  readonly componentChunkName: InputMaybe<FieldSelectorEnum>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly internalComponentName: InputMaybe<FieldSelectorEnum>;
+  readonly matchPath: InputMaybe<FieldSelectorEnum>;
+  readonly pageContext: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly path: InputMaybe<FieldSelectorEnum>;
+  readonly pluginCreator: InputMaybe<SitePluginFieldSelector>;
+};
+
+type SitePageFilterInput = {
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly component: InputMaybe<StringQueryOperatorInput>;
+  readonly componentChunkName: InputMaybe<StringQueryOperatorInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly internalComponentName: InputMaybe<StringQueryOperatorInput>;
+  readonly matchPath: InputMaybe<StringQueryOperatorInput>;
+  readonly pageContext: InputMaybe<JSONQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly path: InputMaybe<StringQueryOperatorInput>;
+  readonly pluginCreator: InputMaybe<SitePluginFilterInput>;
+};
+
+type SitePageGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SitePageEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<SitePageGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SitePage>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SitePageGroupConnection_distinctArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageGroupConnection_groupArgs = {
+  field: SitePageFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SitePageGroupConnection_maxArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageGroupConnection_minArgs = {
+  field: SitePageFieldSelector;
+};
+
+
+type SitePageGroupConnection_sumArgs = {
+  field: SitePageFieldSelector;
+};
+
+type SitePageSortInput = {
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly component: InputMaybe<SortOrderEnum>;
+  readonly componentChunkName: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly internalComponentName: InputMaybe<SortOrderEnum>;
+  readonly matchPath: InputMaybe<SortOrderEnum>;
+  readonly pageContext: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly path: InputMaybe<SortOrderEnum>;
+  readonly pluginCreator: InputMaybe<SitePluginSortInput>;
+};
+
+type SitePlugin = Node & {
+  readonly browserAPIs: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  readonly children: ReadonlyArray<Node>;
+  readonly id: Scalars['ID'];
+  readonly internal: Internal;
+  readonly name: Maybe<Scalars['String']>;
+  readonly nodeAPIs: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  readonly packageJson: Maybe<Scalars['JSON']>;
+  readonly parent: Maybe<Node>;
+  readonly pluginFilepath: Maybe<Scalars['String']>;
+  readonly pluginOptions: Maybe<Scalars['JSON']>;
+  readonly resolve: Maybe<Scalars['String']>;
+  readonly ssrAPIs: Maybe<ReadonlyArray<Maybe<Scalars['String']>>>;
+  readonly version: Maybe<Scalars['String']>;
+};
+
+type SitePluginConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SitePluginEdge>;
+  readonly group: ReadonlyArray<SitePluginGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SitePlugin>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SitePluginConnection_distinctArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginConnection_groupArgs = {
+  field: SitePluginFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SitePluginConnection_maxArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginConnection_minArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginConnection_sumArgs = {
+  field: SitePluginFieldSelector;
+};
+
+type SitePluginEdge = {
+  readonly next: Maybe<SitePlugin>;
+  readonly node: SitePlugin;
+  readonly previous: Maybe<SitePlugin>;
+};
+
+type SitePluginFieldSelector = {
+  readonly browserAPIs: InputMaybe<FieldSelectorEnum>;
+  readonly children: InputMaybe<NodeFieldSelector>;
+  readonly id: InputMaybe<FieldSelectorEnum>;
+  readonly internal: InputMaybe<InternalFieldSelector>;
+  readonly name: InputMaybe<FieldSelectorEnum>;
+  readonly nodeAPIs: InputMaybe<FieldSelectorEnum>;
+  readonly packageJson: InputMaybe<FieldSelectorEnum>;
+  readonly parent: InputMaybe<NodeFieldSelector>;
+  readonly pluginFilepath: InputMaybe<FieldSelectorEnum>;
+  readonly pluginOptions: InputMaybe<FieldSelectorEnum>;
+  readonly resolve: InputMaybe<FieldSelectorEnum>;
+  readonly ssrAPIs: InputMaybe<FieldSelectorEnum>;
+  readonly version: InputMaybe<FieldSelectorEnum>;
+};
+
+type SitePluginFilterInput = {
+  readonly browserAPIs: InputMaybe<StringQueryOperatorInput>;
+  readonly children: InputMaybe<NodeFilterListInput>;
+  readonly id: InputMaybe<StringQueryOperatorInput>;
+  readonly internal: InputMaybe<InternalFilterInput>;
+  readonly name: InputMaybe<StringQueryOperatorInput>;
+  readonly nodeAPIs: InputMaybe<StringQueryOperatorInput>;
+  readonly packageJson: InputMaybe<JSONQueryOperatorInput>;
+  readonly parent: InputMaybe<NodeFilterInput>;
+  readonly pluginFilepath: InputMaybe<StringQueryOperatorInput>;
+  readonly pluginOptions: InputMaybe<JSONQueryOperatorInput>;
+  readonly resolve: InputMaybe<StringQueryOperatorInput>;
+  readonly ssrAPIs: InputMaybe<StringQueryOperatorInput>;
+  readonly version: InputMaybe<StringQueryOperatorInput>;
+};
+
+type SitePluginGroupConnection = {
+  readonly distinct: ReadonlyArray<Scalars['String']>;
+  readonly edges: ReadonlyArray<SitePluginEdge>;
+  readonly field: Scalars['String'];
+  readonly fieldValue: Maybe<Scalars['String']>;
+  readonly group: ReadonlyArray<SitePluginGroupConnection>;
+  readonly max: Maybe<Scalars['Float']>;
+  readonly min: Maybe<Scalars['Float']>;
+  readonly nodes: ReadonlyArray<SitePlugin>;
+  readonly pageInfo: PageInfo;
+  readonly sum: Maybe<Scalars['Float']>;
+  readonly totalCount: Scalars['Int'];
+};
+
+
+type SitePluginGroupConnection_distinctArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginGroupConnection_groupArgs = {
+  field: SitePluginFieldSelector;
+  limit: InputMaybe<Scalars['Int']>;
+  skip: InputMaybe<Scalars['Int']>;
+};
+
+
+type SitePluginGroupConnection_maxArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginGroupConnection_minArgs = {
+  field: SitePluginFieldSelector;
+};
+
+
+type SitePluginGroupConnection_sumArgs = {
+  field: SitePluginFieldSelector;
+};
+
+type SitePluginSortInput = {
+  readonly browserAPIs: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly name: InputMaybe<SortOrderEnum>;
+  readonly nodeAPIs: InputMaybe<SortOrderEnum>;
+  readonly packageJson: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly pluginFilepath: InputMaybe<SortOrderEnum>;
+  readonly pluginOptions: InputMaybe<SortOrderEnum>;
+  readonly resolve: InputMaybe<SortOrderEnum>;
+  readonly ssrAPIs: InputMaybe<SortOrderEnum>;
+  readonly version: InputMaybe<SortOrderEnum>;
+};
+
+type SiteSiteMetadata = {
+  readonly description: Maybe<Scalars['String']>;
+  readonly title: Maybe<Scalars['String']>;
+};
+
+type SiteSiteMetadataFieldSelector = {
+  readonly description: InputMaybe<FieldSelectorEnum>;
+  readonly title: InputMaybe<FieldSelectorEnum>;
+};
+
+type SiteSiteMetadataFilterInput = {
+  readonly description: InputMaybe<StringQueryOperatorInput>;
+  readonly title: InputMaybe<StringQueryOperatorInput>;
+};
+
+type SiteSiteMetadataSortInput = {
+  readonly description: InputMaybe<SortOrderEnum>;
+  readonly title: InputMaybe<SortOrderEnum>;
+};
+
+type SiteSortInput = {
+  readonly buildTime: InputMaybe<SortOrderEnum>;
+  readonly children: InputMaybe<NodeSortInput>;
+  readonly graphqlTypegen: InputMaybe<SiteGraphqlTypegenSortInput>;
+  readonly host: InputMaybe<SortOrderEnum>;
+  readonly id: InputMaybe<SortOrderEnum>;
+  readonly internal: InputMaybe<InternalSortInput>;
+  readonly jsxRuntime: InputMaybe<SortOrderEnum>;
+  readonly parent: InputMaybe<NodeSortInput>;
+  readonly pathPrefix: InputMaybe<SortOrderEnum>;
+  readonly polyfill: InputMaybe<SortOrderEnum>;
+  readonly port: InputMaybe<SortOrderEnum>;
+  readonly siteMetadata: InputMaybe<SiteSiteMetadataSortInput>;
+  readonly trailingSlash: InputMaybe<SortOrderEnum>;
+};
+
+type SortOrderEnum =
+  | 'ASC'
+  | 'DESC';
+
+type StringQueryOperatorInput = {
+  readonly eq: InputMaybe<Scalars['String']>;
+  readonly glob: InputMaybe<Scalars['String']>;
+  readonly in: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
+  readonly ne: InputMaybe<Scalars['String']>;
+  readonly nin: InputMaybe<ReadonlyArray<InputMaybe<Scalars['String']>>>;
+  readonly regex: InputMaybe<Scalars['String']>;
+};
+
+type TransformOptions = {
+  readonly cropFocus: InputMaybe<ImageCropFocus>;
+  readonly duotone: InputMaybe<DuotoneGradient>;
+  readonly fit: InputMaybe<ImageFit>;
+  readonly grayscale: InputMaybe<Scalars['Boolean']>;
+  readonly rotate: InputMaybe<Scalars['Int']>;
+  readonly trim: InputMaybe<Scalars['Float']>;
+};
+
+type WebPOptions = {
+  readonly quality: InputMaybe<Scalars['Int']>;
+};
+
+type AboutTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type AboutTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null };
+
+type BlogPostsByUIDQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type BlogPostsByUIDQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly date: string | null, readonly title: string | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } | null };
+
+type BlogTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type BlogTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null, readonly posts: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly timeToRead: number | null, readonly frontmatter: { readonly uid: string | null, readonly date: string | null, readonly summary: string | null, readonly title: string | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+
+type ContactTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type ContactTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly email: string | null, readonly facebookid: string | null, readonly twitterid: string | null, readonly githubid: string | null } | null } | null };
+
+type EmojiTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type EmojiTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null };
+
+type FAQTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type FAQTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly membershipTab: string | null, readonly partnershipTab: string | null } | null } | null, readonly membership: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null } }> }, readonly partnership: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null } }> } };
+
+type GatsbyImageSharpFixedFragment = { readonly base64: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string };
+
+type GatsbyImageSharpFixed_noBase64Fragment = { readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string };
+
+type GatsbyImageSharpFixed_tracedSVGFragment = { readonly tracedSVG: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string };
+
+type GatsbyImageSharpFixed_withWebpFragment = { readonly base64: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null };
+
+type GatsbyImageSharpFixed_withWebp_noBase64Fragment = { readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null };
+
+type GatsbyImageSharpFixed_withWebp_tracedSVGFragment = { readonly tracedSVG: string | null, readonly width: number, readonly height: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null };
+
+type GatsbyImageSharpFluidFragment = { readonly base64: string | null, readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly sizes: string };
+
+type GatsbyImageSharpFluid_noBase64Fragment = { readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly sizes: string };
+
+type GatsbyImageSharpFluid_tracedSVGFragment = { readonly tracedSVG: string | null, readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly sizes: string };
+
+type GatsbyImageSharpFluid_withWebpFragment = { readonly base64: string | null, readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null, readonly sizes: string };
+
+type GatsbyImageSharpFluid_withWebp_noBase64Fragment = { readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null, readonly sizes: string };
+
+type GatsbyImageSharpFluid_withWebp_tracedSVGFragment = { readonly tracedSVG: string | null, readonly aspectRatio: number, readonly src: string, readonly srcSet: string, readonly srcWebp: string | null, readonly srcSetWebp: string | null, readonly sizes: string };
+
+type GatsbyImageSharpFluidLimitPresentationSizeFragment = { readonly maxHeight: number, readonly maxWidth: number };
+
+type HomeTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type HomeTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly contactCta: string | null, readonly projectsCta: string | null, readonly servicesTitle: string | null, readonly servicesSubtitle: string | null, readonly testimonialsTitle: string | null, readonly testimonialsSubtitle: string | null, readonly goodatTitle: string | null, readonly goodatSubtitle: string | null, readonly clientsSubtitle: string | null, readonly clientsTitle: string | null, readonly projectsSubtitle: string | null, readonly projectsTitle: string | null, readonly services: ReadonlyArray<{ readonly title: string | null, readonly text: string | null } | null> | null, readonly testimonials: ReadonlyArray<{ readonly text: string | null, readonly source: string | null, readonly span: boolean | null } | null> | null, readonly goodat: ReadonlyArray<{ readonly title: string | null, readonly text: string | null } | null> | null } | null } | null, readonly defaultCover: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> }, readonly clients: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly name: string | null, readonly score: number | null, readonly link: string | null, readonly logo: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly projects: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly active: boolean | null, readonly feature: boolean | null, readonly tagline: string | null, readonly code: string | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+
+type LandingTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type LandingTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly contactCta: string | null, readonly projectsCta: string | null } | null } | null };
+
+type MediaTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type MediaTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null, readonly mentions: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly date: string | null, readonly title: string | null, readonly link: string | null, readonly highlight: boolean | null, readonly publication: string | null, readonly source: string | null, readonly uid: string | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+
+type PeopleTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type PeopleTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null, readonly accomplicesHeading: string | null, readonly accomplicesDescr: string | null, readonly membersHeading: string | null, readonly membersDescr: string | null, readonly overlordsHeading: string | null, readonly overlordsDescr: string | null } | null } | null, readonly defaultAvatar: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> }, readonly overlords: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly members: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> }, readonly accomplices: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly html: string | null, readonly frontmatter: { readonly bluesky: string | null, readonly fname: string | null, readonly github: string | null, readonly lname: string | null, readonly mastodon: string | null, readonly quote: string | null, readonly score: number | null, readonly twitter: string | null, readonly website: string | null, readonly uid: string | null, readonly avatar: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+
+type PortfolioItemsByUIDQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type PortfolioItemsByUIDQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly active: boolean | null, readonly application: string | null, readonly bifpresents: string | null, readonly date: string | null, readonly link: string | null, readonly code: string | null, readonly source: string | null, readonly tagline: string | null, readonly timeframe: string | null, readonly title: string | null, readonly uid: string | null, readonly slides: ReadonlyArray<{ readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null> | null, readonly awards: ReadonlyArray<{ readonly name: string | null, readonly url: string | null, readonly description: string | null } | null> | null, readonly needs: { readonly code: boolean | null, readonly graphic: boolean | null, readonly money: boolean | null, readonly uxui: boolean | null, readonly users: boolean | null, readonly other: string | null } | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } | null, readonly defaultCover: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> } };
+
+type ProjectsTplQueryQueryVariables = Exact<{
+  uid: Scalars['String'];
+}>;
+
+
+type ProjectsTplQueryQuery = { readonly markdownRemark: { readonly html: string | null, readonly frontmatter: { readonly uid: string | null, readonly title: string | null, readonly heading: string | null, readonly subheading: string | null } | null } | null, readonly defaultCover: { readonly edges: ReadonlyArray<{ readonly node: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } }> }, readonly projects: { readonly edges: ReadonlyArray<{ readonly node: { readonly id: string, readonly frontmatter: { readonly uid: string | null, readonly date: string | null, readonly title: string | null, readonly active: boolean | null, readonly tagline: string | null, readonly code: string | null, readonly cover: { readonly childImageSharp: { readonly gatsbyImageData: import('gatsby-plugin-image').IGatsbyImageData } | null } | null } | null } }> } };
+
+
+}

From 95867779593327535758a1c3988df4797a476af4 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Thu, 5 Dec 2024 09:24:51 -0500
Subject: [PATCH 25/28] refactor(PersonModal): port typescript (see note)

this is a proof of concept for components that ingest graphql data.

graphql queries assume all fields are nullable by default. typescript would then
demand we handle all null values, which sucks and will make code less readable
unless we can guarantee the fields are never null in the graphql schema.
see here
https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/#non-nullable-types

in the case of people, we can guarantee certain fields, e.g. "html" is always present,
so is "frontmatter". fields like "bluesky" is definitely null-ish but i'm not sure if
it's actually null or just, say, empty string
---
 .../{PersonModal.js => PersonModal.tsx}       | 50 ++++++++++++-------
 1 file changed, 31 insertions(+), 19 deletions(-)
 rename lib/ui/templates/ofPeople/{PersonModal.js => PersonModal.tsx} (79%)

diff --git a/lib/ui/templates/ofPeople/PersonModal.js b/lib/ui/templates/ofPeople/PersonModal.tsx
similarity index 79%
rename from lib/ui/templates/ofPeople/PersonModal.js
rename to lib/ui/templates/ofPeople/PersonModal.tsx
index 4d720f21..1ed89add 100644
--- a/lib/ui/templates/ofPeople/PersonModal.js
+++ b/lib/ui/templates/ofPeople/PersonModal.tsx
@@ -1,6 +1,5 @@
-import { func, object, shape } from "prop-types";
-import { GatsbyImage } from "gatsby-plugin-image";
 import React from "react";
+import { GatsbyImage } from "gatsby-plugin-image";
 import styled from "styled-components";
 
 import { Action, Copy, Icon, Modal } from "ui/components";
@@ -14,7 +13,12 @@ const Person = styled.div`
     flex-direction: row;
   }
 `;
-const PersonPic = styled.div`
+
+interface PersonPicProps {
+  readonly $hasAvatar: boolean;
+}
+
+const PersonPic = styled.div<PersonPicProps>`
   background: ${({ $hasAvatar, theme }) =>
     !$hasAvatar ? theme.actionColor : ""};
   ${breakpoint.tabletUp} {
@@ -57,9 +61,20 @@ const PersonSocial = styled.div`
   }
 `;
 
-function Member(props) {
-  const { defaultAvatar } = props;
-  const { frontmatter, html } = props.data;
+interface PersonModalProps {
+  defaultAvatar: NonNullable<
+    Queries.PeopleTplQueryQuery["defaultAvatar"]["edges"][0]["node"]["childImageSharp"]
+  >;
+  data: NonNullable<Queries.PeopleTplQueryQuery["overlords"]["edges"][0]["node"]>;
+  toggleModal: VoidFunction;
+}
+
+const PersonModal: React.FC<PersonModalProps> = ({
+  defaultAvatar,
+  data,
+  toggleModal,
+}) => {
+  const { frontmatter, html } = data;
   const {
     avatar,
     bluesky,
@@ -69,14 +84,19 @@ function Member(props) {
     mastodon,
     quote,
     twitter,
-    website
+    website,
   } = frontmatter;
+
   return (
-    <Modal toggleModal={props.toggleModal}>
+    <Modal toggleModal={toggleModal}>
       <Person>
         <PersonPic $hasAvatar={avatar}>
           <GatsbyImage
-            image={avatar ? avatar.childImageSharp.gatsbyImageData : defaultAvatar.gatsbyImageData}
+            image={
+              avatar
+                ? avatar.childImageSharp.gatsbyImageData
+                : defaultAvatar.gatsbyImageData
+            }
             alt=""
           />
         </PersonPic>
@@ -85,7 +105,7 @@ function Member(props) {
             {fname} {lname}
           </PersonName>
           <PersonBio>
-            <Copy dangerouslySetInnerHTML={{ __html: html }} />
+            <Copy dangerouslySetInnerHTML={{ __html: html ?? "" }} />
           </PersonBio>
           <PersonQuote>{quote}</PersonQuote>
           <PersonSocial>
@@ -139,14 +159,6 @@ function Member(props) {
       </Person>
     </Modal>
   );
-}
-
-Member.propTypes = {
-  defaultAvatar: object.isRequired,
-  data: shape({
-    frontmatter: object.isRequired
-  }).isRequired,
-  toggleModal: func.isRequired
 };
 
-export default Member;
+export default PersonModal;

From 929fa4937883c9e38fb49df64caec382f1ecdda8 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Thu, 5 Dec 2024 09:28:44 -0500
Subject: [PATCH 26/28] refactor(Tile): polymorphic component typing proof of
 concept

i am kind of muddling through this attempt at making <Tile> work as a
polymorphic component because in some cases it renders out an <a> instead
of a <div>. right now it doesn't really cover the condition where if
`as="a"` is passed as a prop, then the html attributes of <a> are allowed
---
 lib/ui/components/tiles/Tile.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/ui/components/tiles/Tile.tsx b/lib/ui/components/tiles/Tile.tsx
index 749e9454..62994451 100644
--- a/lib/ui/components/tiles/Tile.tsx
+++ b/lib/ui/components/tiles/Tile.tsx
@@ -32,11 +32,12 @@ const Element = styled.div<ElementProps>`
       : ``};
 `;
 
-interface TileProps {
+interface TileProps<C extends React.ElementType> {
+  as?: C
   space: SpaceValue;
 }
 
-const Tile: React.FC<TileProps> = ({ space, ...props }) => (
+const Tile = <C extends React.ElementType = "div">({ space, ...props }: TileProps<C>) => (
   <SharedHexConsumer>
     {({ BIFHEX }) => (
       <ThemeProvider

From 2864fea36b5af8aa52e72c12105be236a68b6286 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Thu, 5 Dec 2024 09:30:24 -0500
Subject: [PATCH 27/28] refactor(actions): port typescript (see notes)

the problem here is that when <Action> is used, it can be a <Button> or a <Link>
or it can be an obfuscated version of those (see `withObfucscation`). What
it becomes is dependent on the combination of props and its values that passed to
<Action>. i'm either not good enough at typescript to know what to do here or
maybe we would have to revisit this approach????
---
 .../actions/{Action.js => Action.tsx}         | 24 ++---
 lib/ui/components/actions/Button.js           | 58 ------------
 lib/ui/components/actions/Button.tsx          | 92 +++++++++++++++++++
 .../components/actions/{Link.js => Link.tsx}  | 67 ++++++++------
 lib/ui/components/actions/withObfuscation.js  | 61 ------------
 lib/ui/components/actions/withObfuscation.tsx | 64 +++++++++++++
 6 files changed, 207 insertions(+), 159 deletions(-)
 rename lib/ui/components/actions/{Action.js => Action.tsx} (51%)
 delete mode 100644 lib/ui/components/actions/Button.js
 create mode 100644 lib/ui/components/actions/Button.tsx
 rename lib/ui/components/actions/{Link.js => Link.tsx} (53%)
 delete mode 100644 lib/ui/components/actions/withObfuscation.js
 create mode 100644 lib/ui/components/actions/withObfuscation.tsx

diff --git a/lib/ui/components/actions/Action.js b/lib/ui/components/actions/Action.tsx
similarity index 51%
rename from lib/ui/components/actions/Action.js
rename to lib/ui/components/actions/Action.tsx
index 1d57fb11..c153dbdc 100644
--- a/lib/ui/components/actions/Action.js
+++ b/lib/ui/components/actions/Action.tsx
@@ -1,31 +1,31 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { withTheme } from "styled-components";
 
 import Button from "./Button";
 import Link from "./Link";
 import withObfuscation from "./withObfuscation";
 
+interface ActionProps extends React.PropsWithChildren {
+  button: boolean
+  obfuscated: boolean
+}
+
 const ObfButton = withObfuscation(Button);
 const ObfLink = withObfuscation(Link);
 
-function Action(props) {
-  const { obfuscated, button, ...restProps } = props;
+const Action: React.FC<ActionProps> = ({ obfuscated = false, button = false, ...props }) => {
   if (obfuscated) {
     if (button) {
-      return <ObfButton {...restProps} />;
+      return <ObfButton {...props} />;
     }
-    return <ObfLink {...restProps} />;
+    return <ObfLink {...props} />;
   }
+
   if (button) {
-    return <Button {...restProps} />;
+    return <Button {...props} />;
   }
-  return <Link {...restProps} />;
-}
 
-Action.propTypes = {
-  button: PropTypes.bool,
-  obfuscated: PropTypes.bool
-};
+  return <Link {...props} />;
+}
 
 export default withTheme(Action);
diff --git a/lib/ui/components/actions/Button.js b/lib/ui/components/actions/Button.js
deleted file mode 100644
index 6535c7bf..00000000
--- a/lib/ui/components/actions/Button.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { array, func, object, oneOfType, shape, string } from "prop-types";
-import { Link as GatsbyButton } from "gatsby";
-import React from "react";
-import styled from "styled-components";
-
-import { defaultThm } from "ui/themes";
-import { font, time, track } from "ui/settings";
-import { setSpace } from "ui/mixins";
-
-const ButtonEl = styled.a`
-  ${setSpace("pam")};
-  background-color: ${({ theme, $primary }) =>
-    $primary ? theme.actionColor || defaultThm.actionColor : `transparent`};
-  border: 2px solid ${({ theme }) => theme.decor};
-  color: ${({ $primary, theme }) =>
-    $primary ? theme.background || defaultThm.background : theme.actionColor || defaultThm.actionColor};
-  cursor: pointer;
-  display: inline-block;
-  font-family: ${font.sans};
-  font-size: inherit;
-  font-weight: 800;
-  letter-spacing: ${track.x};
-  line-height: 1em;
-  outline: none;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: box-shadow ${time.s}, transform ${time.s};
-  white-space: nowrap;
-  width: ${({ block }) => (block ? `100%` : `auto`)};
-  &:hover {
-    box-shadow: 4px 4px 0 0 ${({ theme }) => theme.actionDecor};
-    transform: translateX(-1px) translateY(-1px);
-  }
-`;
-
-function Button(props) {
-  const { onClick, to, primary = false, ...restProps } = props;
-  if (to) {
-    return <ButtonEl as={GatsbyButton} to={to} theme={null} $primary={primary} {...restProps} />;
-  }
-  if (onClick) {
-    return <ButtonEl as="button" type="button" onClick={onClick} $primary={primary} {...restProps} />;
-  }
-  return <ButtonEl $primary={primary} {...restProps} />;
-}
-
-Button.propTypes = {
-  children: oneOfType([array, object, string]),
-  href: string,
-  onClick: func,
-  theme: shape({
-    actionColor: string
-  }),
-  to: string
-};
-
-export default Button;
diff --git a/lib/ui/components/actions/Button.tsx b/lib/ui/components/actions/Button.tsx
new file mode 100644
index 00000000..bda84cb0
--- /dev/null
+++ b/lib/ui/components/actions/Button.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import { Link as GatsbyButton } from "gatsby";
+import styled from "styled-components";
+
+import { defaultThm } from "ui/themes";
+import { font, time, track } from "ui/settings";
+import { setSpace } from "ui/mixins";
+
+interface ButtonElProps {
+  readonly $primary: boolean;
+  readonly $block: boolean;
+}
+
+interface ButtonProps extends React.PropsWithChildren {
+  href: string;
+  to: string;
+  primary?: boolean;
+  block?: boolean;
+  onClick: () => void;
+  theme?: {
+    actionColor: string;
+  };
+}
+
+const ButtonEl = styled.a<ButtonElProps>`
+  ${setSpace("pam")};
+  background-color: ${({ theme, $primary }) =>
+    $primary ? (theme.actionColor ?? defaultThm.actionColor) : `transparent`};
+  border: 2px solid ${({ theme }) => theme.decor};
+  color: ${({ $primary, theme }) =>
+    $primary
+      ? (theme.background ?? defaultThm.background)
+      : (theme.actionColor ?? defaultThm.actionColor)};
+  cursor: pointer;
+  display: inline-block;
+  font-family: ${font.sans};
+  font-size: inherit;
+  font-weight: 800;
+  letter-spacing: ${track.x};
+  line-height: 1em;
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    box-shadow ${time.s},
+    transform ${time.s};
+  white-space: nowrap;
+  width: ${({ $block }) => ($block ? `100%` : `auto`)};
+  &:hover {
+    box-shadow: 4px 4px 0 0 ${({ theme }) => theme.actionDecor};
+    transform: translateX(-1px) translateY(-1px);
+  }
+`;
+
+const Button: React.FC<ButtonProps> = ({
+  to,
+  onClick,
+  primary = false,
+  block = false,
+  ...props
+}) => {
+  if (to) {
+    return (
+      <ButtonEl
+        as={GatsbyButton}
+        to={to}
+        theme={undefined}
+        $primary={primary}
+        $block={block}
+        {...props}
+      />
+    );
+  }
+
+  if (onClick) {
+    return (
+      <ButtonEl
+        as="button"
+        type="button"
+        onClick={onClick}
+        $primary={primary}
+        $block={block}
+        {...props}
+      />
+    );
+  }
+
+  return <ButtonEl $primary={primary} $block={block} {...props} />;
+};
+
+export default Button;
diff --git a/lib/ui/components/actions/Link.js b/lib/ui/components/actions/Link.tsx
similarity index 53%
rename from lib/ui/components/actions/Link.js
rename to lib/ui/components/actions/Link.tsx
index abc9dc7e..3237ff36 100644
--- a/lib/ui/components/actions/Link.js
+++ b/lib/ui/components/actions/Link.tsx
@@ -1,17 +1,34 @@
-/* eslint jsx-a11y/anchor-has-content: 0 */
-import PropTypes from "prop-types";
-import { Link as GatsbyLink } from "gatsby";
 import React from "react";
+import { Link as GatsbyLink } from "gatsby";
 import styled from "styled-components";
 
 import { defaultThm } from "ui/themes";
 import { font, time, track } from "ui/settings";
 import { setSpace } from "ui/mixins";
 
-const LinkEl = styled.a`
+interface LinkElProps {
+  theme:
+    | {
+        actionColor: string;
+      }
+    | undefined;
+  readonly $isActive: boolean;
+}
+
+interface LinkProps extends React.PropsWithChildren {
+  href: string;
+  isActive: boolean;
+  theme?: {
+    actionColor: string;
+  };
+  onClick?: () => void;
+  to?: string;
+}
+
+const LinkEl = styled.a<LinkElProps>`
   ${setSpace("pvx")};
   background: transparent;
-  border-color: ${({ theme }) => theme.actionColorLt};
+  border-color: ${({ theme }) => theme.actionColorLt ?? null};
   border-style: solid;
   border-width: 0 0 2px;
   color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
@@ -24,7 +41,9 @@ const LinkEl = styled.a`
   line-height: inherit;
   text-align: center;
   text-transform: uppercase;
-  transition: border ${time.s}, transform ${time.s};
+  transition:
+    border ${time.s},
+    transform ${time.s};
   white-space: nowrap;
   &:hover {
     border-color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
@@ -32,36 +51,28 @@ const LinkEl = styled.a`
   }
   ${({ $isActive, theme }) =>
     $isActive
-      ? `
-        border-color: ${theme.actionColor ?? defaultThm.actionColor};
-  `
+      ? `border-color: ${theme.actionColor ?? defaultThm.actionColor};`
       : ``};
 `;
 
-function Link(props) {
-  const { onClick, to, isActive, ...restProps } = props;
+const Link: React.FC<LinkProps> = ({ to, onClick, isActive, ...props }) => {
   if (to) {
-    return <LinkEl to={to} as={GatsbyLink} $isActive={isActive} {...restProps} theme={null} />;
+    return (
+      <LinkEl
+        to={to}
+        as={GatsbyLink}
+        $isActive={isActive}
+        {...props}
+        theme={undefined}
+      />
+    );
   }
+
   if (onClick) {
-    return <LinkEl onClick={onClick} as="a" $isActive={isActive} {...restProps} />;
+    return <LinkEl onClick={onClick} as="a" $isActive={isActive} {...props} />;
   }
-  return <LinkEl $isActive={isActive} {...restProps} />;
-}
 
-Link.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object,
-    PropTypes.string
-  ]),
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  theme: PropTypes.shape({
-    actionColor: PropTypes.string
-  }),
-  to: PropTypes.string,
-  isActive: PropTypes.bool
+  return <LinkEl $isActive={isActive} {...props} />;
 };
 
 export default Link;
diff --git a/lib/ui/components/actions/withObfuscation.js b/lib/ui/components/actions/withObfuscation.js
deleted file mode 100644
index bf47a633..00000000
--- a/lib/ui/components/actions/withObfuscation.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { func } from "prop-types";
-
-const withObfuscation = ObfuscatedButton => props => {
-  const { email, headers, text, preText, children, ...others } = props;
-  const reverseString = s =>
-    s
-      .split("")
-      .reverse()
-      .join("");
-  const combineHeaders = (searchParams = {}) =>
-    Object.keys(searchParams)
-      .map(key => `${key}=${encodeURIComponent(searchParams[key])}`)
-      .join("&");
-  const createContactLink = (e, h) => {
-    let link;
-    if (e) {
-      link = `mailto:${e}`;
-      if (h) {
-        link += `?${combineHeaders(h)}`;
-      }
-    }
-    return link;
-  };
-  const handleClickObfuscatedClick = event => {
-    event.preventDefault();
-    window.location.href = createContactLink(email, headers);
-  };
-  const CustomTextButton = () => (
-    <ObfuscatedButton
-      {...others}
-      onClick={event => handleClickObfuscatedClick(event)}
-      href="obfuscated"
-    >
-      {text}
-    </ObfuscatedButton>
-  );
-  const AddressTextButton = () => (
-    <ObfuscatedButton
-      {...others}
-      onClick={event => handleClickObfuscatedClick(event)}
-      href="obfuscated"
-    >
-      {preText}{" "}
-      <span style={{ direction: "rtl", unicodeBidi: "bidi-override" }}>
-        {reverseString(email) || children}
-      </span>
-    </ObfuscatedButton>
-  );
-  return text ? <CustomTextButton /> : <AddressTextButton />;
-};
-
-export default withObfuscation;
-
-withObfuscation.propTypes = {
-  onClick: func
-};
-
-withObfuscation.defaultProps = {
-  onClick: null
-};
diff --git a/lib/ui/components/actions/withObfuscation.tsx b/lib/ui/components/actions/withObfuscation.tsx
new file mode 100644
index 00000000..96e417f4
--- /dev/null
+++ b/lib/ui/components/actions/withObfuscation.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+interface ObfuscatedProps extends React.PropsWithChildren {
+  email: string;
+  headers: Record<string, string>;
+  text: string;
+  preText: string;
+}
+
+const withObfuscation =
+  (ObfuscatedButton: React.FC): React.FC<ObfuscatedProps> =>
+  ({ email, headers, text, preText, children, ...props }) => {
+    const reverseString = (s: string) => s.split("").reverse().join("");
+
+    const combineHeaders = (searchParams: Record<string, string>) =>
+      Object.keys(searchParams)
+        .map((key) => `${key}=${encodeURIComponent(searchParams[key])}`)
+        .join("&");
+
+    const createContactLink = (e: string, h: Record<string, string>) => {
+      let link = "";
+
+      if (e) {
+        link = `mailto:${e}`;
+        if (h) {
+          link += `?${combineHeaders(h)}`;
+        }
+      }
+
+      return link;
+    };
+
+    const handleClickObfuscatedClick = (event: React.MouseEvent) => {
+      event.preventDefault();
+      window.location.href = createContactLink(email, headers);
+    };
+
+    const CustomTextButton = () => (
+      <ObfuscatedButton
+        {...props}
+        onClick={(event: React.MouseEvent) => handleClickObfuscatedClick(event)}
+        href="obfuscated"
+      >
+        {text}
+      </ObfuscatedButton>
+    );
+
+    const AddressTextButton = () => (
+      <ObfuscatedButton
+        {...props}
+        onClick={(event: React.MouseEvent) => handleClickObfuscatedClick(event)}
+        href="obfuscated"
+      >
+        {preText}{" "}
+        <span style={{ direction: "rtl", unicodeBidi: "bidi-override" }}>
+          {reverseString(email) || children}
+        </span>
+      </ObfuscatedButton>
+    );
+
+    return text ? <CustomTextButton /> : <AddressTextButton />;
+  };
+
+export default withObfuscation;

From 5d7b5e940c86854d49a76430652cd7bf256a8373 Mon Sep 17 00:00:00 2001
From: Lou Huang <lou@streetmix.net>
Date: Thu, 5 Dec 2024 09:37:08 -0500
Subject: [PATCH 28/28] refactor(Link): do not need to type theme parameter on
 styled components

---
 lib/ui/components/actions/Link.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/lib/ui/components/actions/Link.tsx b/lib/ui/components/actions/Link.tsx
index 3237ff36..552032b5 100644
--- a/lib/ui/components/actions/Link.tsx
+++ b/lib/ui/components/actions/Link.tsx
@@ -7,11 +7,6 @@ import { font, time, track } from "ui/settings";
 import { setSpace } from "ui/mixins";
 
 interface LinkElProps {
-  theme:
-    | {
-        actionColor: string;
-      }
-    | undefined;
   readonly $isActive: boolean;
 }