From 8d15107efd9b242e33a24e9d59072e1d721a8a43 Mon Sep 17 00:00:00 2001
From: Jason Nall <jsonnull@gmail.com>
Date: Sat, 11 Feb 2023 13:16:25 -0500
Subject: [PATCH 1/4] Update packages.

---
 package.json   |  36 +--
 pnpm-lock.yaml | 644 ++++++++++++++++++++++++++-----------------------
 2 files changed, 366 insertions(+), 314 deletions(-)

diff --git a/package.json b/package.json
index f0e6961..bb538cc 100644
--- a/package.json
+++ b/package.json
@@ -9,28 +9,28 @@
     "build:ci": "pnpm build"
   },
   "dependencies": {
-    "@headlessui/react": "^1.5.0",
-    "@popperjs/core": "^2.11.5",
-    "clsx": "^1.1.1",
+    "@headlessui/react": "^1.7.10",
+    "@popperjs/core": "^2.11.6",
+    "clsx": "^1.2.1",
     "gray-matter": "4.0.3",
-    "markdown-to-jsx": "7.1.7",
-    "next": "latest",
+    "markdown-to-jsx": "7.1.9",
+    "next": "^13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-feather": "^2.0.9",
-    "react-popper": "^2.2.5"
+    "react-feather": "^2.0.10",
+    "react-popper": "^2.3.0"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^4.3.1",
-    "@resvg/resvg-js": "^2.1.0",
-    "@types/node": "^18.11.4",
-    "@types/react": "^18.0.9",
-    "autoprefixer": "^10.4.4",
-    "postcss": "^8.4.12",
-    "prettier": "2.7.1",
-    "satori": "^0.0.44",
-    "tailwindcss": "3.2.3",
-    "ts-node": "^10.7.0",
-    "typescript": "^4.6.4"
+    "@netlify/plugin-nextjs": "^4.30.4",
+    "@resvg/resvg-js": "^2.4.0",
+    "@types/node": "^18.13.0",
+    "@types/react": "^18.0.28",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "prettier": "2.8.4",
+    "satori": "^0.2.3",
+    "tailwindcss": "3.2.6",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f01e8e5..b86f213 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,52 +1,52 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@headlessui/react': ^1.5.0
-  '@netlify/plugin-nextjs': ^4.3.1
-  '@popperjs/core': ^2.11.5
-  '@resvg/resvg-js': ^2.1.0
-  '@types/node': ^18.11.4
-  '@types/react': ^18.0.9
-  autoprefixer: ^10.4.4
-  clsx: ^1.1.1
+  '@headlessui/react': ^1.7.10
+  '@netlify/plugin-nextjs': ^4.30.4
+  '@popperjs/core': ^2.11.6
+  '@resvg/resvg-js': ^2.4.0
+  '@types/node': ^18.13.0
+  '@types/react': ^18.0.28
+  autoprefixer: ^10.4.13
+  clsx: ^1.2.1
   gray-matter: 4.0.3
-  markdown-to-jsx: 7.1.7
-  next: latest
-  postcss: ^8.4.12
-  prettier: 2.7.1
+  markdown-to-jsx: 7.1.9
+  next: ^13.1.6
+  postcss: ^8.4.21
+  prettier: 2.8.4
   react: 18.2.0
   react-dom: 18.2.0
-  react-feather: ^2.0.9
-  react-popper: ^2.2.5
-  satori: ^0.0.44
-  tailwindcss: 3.2.3
-  ts-node: ^10.7.0
-  typescript: ^4.6.4
+  react-feather: ^2.0.10
+  react-popper: ^2.3.0
+  satori: ^0.2.3
+  tailwindcss: 3.2.6
+  ts-node: ^10.9.1
+  typescript: ^4.9.5
 
 dependencies:
-  '@headlessui/react': 1.7.3_biqbaboplfbrettd7655fr4n2y
+  '@headlessui/react': 1.7.10_biqbaboplfbrettd7655fr4n2y
   '@popperjs/core': 2.11.6
   clsx: 1.2.1
   gray-matter: 4.0.3
-  markdown-to-jsx: 7.1.7_react@18.2.0
-  next: 13.0.2_biqbaboplfbrettd7655fr4n2y
+  markdown-to-jsx: 7.1.9_react@18.2.0
+  next: 13.1.6_biqbaboplfbrettd7655fr4n2y
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-feather: 2.0.10_react@18.2.0
   react-popper: 2.3.0_r6q5zrenym2zg7je7hgi674bti
 
 devDependencies:
-  '@netlify/plugin-nextjs': 4.27.3
-  '@resvg/resvg-js': 2.1.0
-  '@types/node': 18.11.4
-  '@types/react': 18.0.21
-  autoprefixer: 10.4.12_postcss@8.4.18
-  postcss: 8.4.18
-  prettier: 2.7.1
-  satori: 0.0.44
-  tailwindcss: 3.2.3_neo3lunb2qpadwxplzw7r2isgm
-  ts-node: 10.9.1_6hf6ijjdmrvgn4gwd23tocsh2m
-  typescript: 4.8.4
+  '@netlify/plugin-nextjs': 4.30.4
+  '@resvg/resvg-js': 2.4.0
+  '@types/node': 18.13.0
+  '@types/react': 18.0.28
+  autoprefixer: 10.4.13_postcss@8.4.21
+  postcss: 8.4.21
+  prettier: 2.8.4
+  satori: 0.2.3
+  tailwindcss: 3.2.6_aesdjsunmf4wiehhujt67my7tu
+  ts-node: 10.9.1_4bewfcp2iebiwuold25d6rgcsy
+  typescript: 4.9.5
 
 packages:
 
@@ -57,13 +57,14 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@headlessui/react/1.7.3_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==}
+  /@headlessui/react/1.7.10_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-1m66h/5eayTEZVT2PI13/2PG3EVC7a9XalmUtVSC8X76pcyKYMuyX1XAL2RUtCr8WhoMa/KrDEyoeU5v+kSQOw==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^16 || ^17 || ^18
       react-dom: ^16 || ^17 || ^18
     dependencies:
+      client-only: 0.0.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -296,26 +297,26 @@ packages:
       '@netlify/esbuild-windows-arm64': 0.14.39
     dev: true
 
-  /@netlify/functions/1.3.0:
-    resolution: {integrity: sha512-hN/Fgpz8XIOBfsBPLYUMxVKBlCopgeqGB0popayicnmkFLnvKByTTMYgF01wcF9DBtBQdV0H2h1kPFpMl34I8w==}
+  /@netlify/functions/1.4.0:
+    resolution: {integrity: sha512-gy7ULTIRroc2/jyFVGx1djCmmBMVisIwrvkqggq5B6iDcInRSy2Tpkm+V5C63hKJVkNRskKWtLQKm9ecCaQTjA==}
     engines: {node: '>=8.3.0'}
     dependencies:
       is-promise: 4.0.0
     dev: true
 
-  /@netlify/ipx/1.3.1:
-    resolution: {integrity: sha512-kjw26KYM1jLe+bGRnhqxWs0ACG8eg6kN6wV7uqUu1J8dE6QC73ksyVtCA6IAHl3/5qf5RyMUzquNCp0N0+lXEw==}
+  /@netlify/ipx/1.3.3:
+    resolution: {integrity: sha512-2rDdCGPDPW7cyJr57rwfvpouOJx34CLDgfa2yfqTKvPzqCMOqkCi1PN/rHGuvJ/k5trZ8rxmWnnZyEbeQaZcqA==}
     dependencies:
-      '@netlify/functions': 1.3.0
+      '@netlify/functions': 1.4.0
       etag: 1.8.1
-      fs-extra: 10.1.0
+      fs-extra: 11.1.0
       ipx: 0.9.11
       micromatch: 4.0.5
       mkdirp: 1.0.4
       murmurhash: 2.0.1
-      node-fetch: 2.6.7
-      ufo: 0.8.6
-      unstorage: 0.6.0
+      node-fetch: 2.6.9
+      ufo: 1.0.1
+      unstorage: 1.1.4
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -323,22 +324,23 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@netlify/plugin-nextjs/4.27.3:
-    resolution: {integrity: sha512-9g9oDBXjR4h4fXDCzHVnjGPHtiS8Ms4XA2+k5l3p/OjH4rlNZ/IGDZuCm+LWxBINvjjkFngxg9A/Os15lvEb+A==}
+  /@netlify/plugin-nextjs/4.30.4:
+    resolution: {integrity: sha512-Y72G0P2uKe4tJZuiKibBdIeBz69/0G00umzy8D96LHHs5jq4Yr/Wbp/u56YG3MA84E/qmOhBfyc20DGbPMe9tQ==}
     engines: {node: '>=12.0.0'}
     dependencies:
       '@netlify/esbuild': 0.14.39
-      '@netlify/functions': 1.3.0
-      '@netlify/ipx': 1.3.1
+      '@netlify/functions': 1.4.0
+      '@netlify/ipx': 1.3.3
       '@vercel/node-bridge': 2.2.2
       chalk: 4.1.2
-      destr: 1.2.0
+      destr: 1.2.2
       execa: 5.1.1
+      follow-redirects: 1.15.2
       fs-extra: 10.1.0
       globby: 11.1.0
       merge-stream: 2.0.0
-      moize: 6.1.3
-      node-fetch: 2.6.7
+      moize: 6.1.5
+      node-fetch: 2.6.9
       node-stream-zip: 1.15.0
       outdent: 0.8.0
       p-limit: 3.1.0
@@ -350,17 +352,18 @@ packages:
       tiny-glob: 0.2.9
     transitivePeerDependencies:
       - bufferutil
+      - debug
       - encoding
       - supports-color
       - utf-8-validate
     dev: true
 
-  /@next/env/13.0.2:
-    resolution: {integrity: sha512-Qb6WPuRriGIQ19qd6NBxpcrFOfj8ziN7l9eZUfwff5gl4zLXluqtuZPddYZM/oWjN53ZYcuRXzL+oowKyJeYtA==}
+  /@next/env/13.1.6:
+    resolution: {integrity: sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg==}
     dev: false
 
-  /@next/swc-android-arm-eabi/13.0.2:
-    resolution: {integrity: sha512-X54UQCTFyOGnJP//Z71dPPlp4BCYcQL2ncikKXQcPzVpqPs4C3m+tKC8ivBNH6edAXkppwsLRz1/yQwgSZ9Swg==}
+  /@next/swc-android-arm-eabi/13.1.6:
+    resolution: {integrity: sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [android]
@@ -368,8 +371,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-android-arm64/13.0.2:
-    resolution: {integrity: sha512-1P00Kv8uKaLubqo7JzPrTqgFAzSOmfb8iwqJrOb9in5IvTRtNGlkR4hU0sXzqbQNM/+SaYxze6Z5ry1IDyb/cQ==}
+  /@next/swc-android-arm64/13.1.6:
+    resolution: {integrity: sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
@@ -377,8 +380,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-arm64/13.0.2:
-    resolution: {integrity: sha512-1zGIOkInkOLRv0QQGZ+3wffYsyKI4vIy62LYTvDWUn7TAYqnmXwougp9NSLqDeagLwgsv2URrykyAFixA/YqxA==}
+  /@next/swc-darwin-arm64/13.1.6:
+    resolution: {integrity: sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -386,8 +389,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64/13.0.2:
-    resolution: {integrity: sha512-ECDAjoMP1Y90cARaelS6X+k6BQx+MikAYJ8f/eaJrLur44NIOYc9HA/dgcTp5jenguY4yT8V+HCquLjAVle6fA==}
+  /@next/swc-darwin-x64/13.1.6:
+    resolution: {integrity: sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -395,8 +398,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-freebsd-x64/13.0.2:
-    resolution: {integrity: sha512-2DcL/ofQdBnQX3IoI9sjlIAyLCD1oZoUBuhrhWbejvBQjutWrI0JTEv9uG69WcxWhVMm3BCsjv8GK2/68OKp7A==}
+  /@next/swc-freebsd-x64/13.1.6:
+    resolution: {integrity: sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
@@ -404,8 +407,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm-gnueabihf/13.0.2:
-    resolution: {integrity: sha512-Y3OQF1CSBSWW2vGkmvOIuOUNqOq8qX7f1ZpcKUVWP3/Uq++DZmVi9d18lgnSe1I3QFqc+nXWyun9ljsN83j0sw==}
+  /@next/swc-linux-arm-gnueabihf/13.1.6:
+    resolution: {integrity: sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -413,8 +416,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu/13.0.2:
-    resolution: {integrity: sha512-mNyzwsFF6kwZYEjnGicx9ksDZYEZvyzEc1BtCu8vdZi/v8UeixQwCiAT6FyYX9uxMPEkzk8qiU0t0u9gvltsKw==}
+  /@next/swc-linux-arm64-gnu/13.1.6:
+    resolution: {integrity: sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -422,8 +425,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl/13.0.2:
-    resolution: {integrity: sha512-M6SdYjWgRrY3tJBxz0663zCRPTu5BRONmxlftKWWHv9LjAJ59neTLaGj4rp0A08DkJglZIoCkLOzLrzST6TGag==}
+  /@next/swc-linux-arm64-musl/13.1.6:
+    resolution: {integrity: sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -431,8 +434,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu/13.0.2:
-    resolution: {integrity: sha512-pi63RoxvG4ES1KS06Zpm0MATVIXTs/TIbLbdckeLoM40u1d3mQl/+hSSrLRSxzc2OtyL8fh92sM4gkJrQXAMAw==}
+  /@next/swc-linux-x64-gnu/13.1.6:
+    resolution: {integrity: sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -440,8 +443,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl/13.0.2:
-    resolution: {integrity: sha512-9Pv91gfYnDONgjtRm78n64b/c54+azeHtlnqBLTnIFWSMBDRl1/WDkhKWIj3fBGPLimtK7Tko3ULR3og9RRUPw==}
+  /@next/swc-linux-x64-musl/13.1.6:
+    resolution: {integrity: sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -449,8 +452,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc/13.0.2:
-    resolution: {integrity: sha512-Nvewe6YZaizAkGHHprbMkYqQulBjZCHKBGKeFPwoPtOA+a2Qi4pZzc/qXFyC5/2A6Z0mr2U1zg9rd04WBYMwBw==}
+  /@next/swc-win32-arm64-msvc/13.1.6:
+    resolution: {integrity: sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -458,8 +461,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc/13.0.2:
-    resolution: {integrity: sha512-ZUBYGZw5G3QrqDpRq1EWi3aHmvPZM8ijK5TFL6UbH16cYQ0JpANmuG2P66KB93Qe/lWWzbeAZk/tj1XqwoCuPA==}
+  /@next/swc-win32-ia32-msvc/13.1.6:
+    resolution: {integrity: sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -467,8 +470,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc/13.0.2:
-    resolution: {integrity: sha512-fA9uW1dm7C0mEYGcKlbmLcVm2sKcye+1kPxh2cM4jVR+kQQMtHWsjIzeSpe2grQLSDan06z4n6hbr8b1c3hA8w==}
+  /@next/swc-win32-x64-msvc/13.1.6:
+    resolution: {integrity: sha512-Ls2OL9hi3YlJKGNdKv8k3X/lLgc3VmLG3a/DeTkAd+lAituJp8ZHmRmm9f9SL84fT3CotlzcgbdaCDfFwFA6bA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -494,15 +497,22 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.13.0
+      fastq: 1.15.0
     dev: true
 
+  /@planetscale/database/1.5.0:
+    resolution: {integrity: sha512-Qwh7Or1W5dB5mZ9EQqDkgvkDKhBBmQe58KIVUy0SGocNtr5fP4JAWtvZ6EdLAV6C6hVpzNlCA2xIg9lKTswm1Q==}
+    engines: {node: '>=16'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@popperjs/core/2.11.6:
     resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
     dev: false
 
-  /@resvg/resvg-js-android-arm-eabi/2.1.0:
-    resolution: {integrity: sha512-JtvWWtC6bYRhyth1qgUgcPQSP+jkwkmUzok/5b/IqKFb6cattMBFFdHnwM8AS+sgzXJKa8LhW48f3FmFQhfdrA==}
+  /@resvg/resvg-js-android-arm-eabi/2.4.0:
+    resolution: {integrity: sha512-AtsKxd4bxlaMvWNZev6IMSNVl48yOHYMuccoVNT1Kzg5L/uWsEtWw8YV16GPc5W08NeeAOPr9ErCszm+fXYcsg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [android]
@@ -510,8 +520,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-android-arm64/2.1.0:
-    resolution: {integrity: sha512-QXFEoTpoZJZjkFh4+aSD3l+Ivrij3nzgrr4FTayey0hsQypJXmbzB6nuqB1qZwMrXPYqYZ33BoRiwCFoJUw2Ww==}
+  /@resvg/resvg-js-android-arm64/2.4.0:
+    resolution: {integrity: sha512-i0uuOSRrloU15mEPX21kOIVMNwoYKhcmiDjF+Cfu1K3LCNgPpIevu5oZ+wDnDy3Camcmu1bIEIkZ472wStK3aA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
@@ -519,8 +529,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-darwin-arm64/2.1.0:
-    resolution: {integrity: sha512-OrYqlmn2g4Pu/dWr+M5t5W8GDKIX3zk0JxDySU1oNWwhqlmZXBuCrx3TP9dVrTpTYx86E5RQcTZWe64wz8dlIQ==}
+  /@resvg/resvg-js-darwin-arm64/2.4.0:
+    resolution: {integrity: sha512-9XoPblXClMaT+lxX2YVy+kjOClOKEWQf8ijtJMGwVLcn/kgiQoA1iDXL7KPm8cUh/PElUh/ANLIveESAoNkuvw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -528,8 +538,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-darwin-x64/2.1.0:
-    resolution: {integrity: sha512-95F9BoBS1th79n6Zy1tRMKhPlJuhznnQwAPxRhtw0v4DteRKMzaPFfVH6B9BBaoDCa5VMIxH/wYNKtOxCpYPuw==}
+  /@resvg/resvg-js-darwin-x64/2.4.0:
+    resolution: {integrity: sha512-Qb8JT/kYy4N0jfSR0kpzNeeDjMo2Os991SaPfWOqWE8RBXEYf6RUULwkfFzxRNsb5d/ohNF03VXKkiyLzQ/2ig==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -537,8 +547,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm-gnueabihf/2.1.0:
-    resolution: {integrity: sha512-8F0ugeAaYGNNZhSCYt+X4YgyKyKcFiH0tqfJmN69+Gqqmu/lmZcn78JVLyTGD/OGHbYfCCYJbxwV+txIOdVNkQ==}
+  /@resvg/resvg-js-linux-arm-gnueabihf/2.4.0:
+    resolution: {integrity: sha512-JcYAi4m0mgqWjkOHZFHQIVWb7/w9eQJ3jtWmUt14NZ/pvS4a98n+MbDKWNHO9qaCSDIEitQS8t09MhgO04yAAw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -546,8 +556,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm64-gnu/2.1.0:
-    resolution: {integrity: sha512-RveUS3sqvUp5eoBzz1QlPv7yBUNOjHtcWtbFo55gQrzBGT4XtnCaQzuXkN0q0j2o2ufxlmXmFI3g3e/0EWjNMg==}
+  /@resvg/resvg-js-linux-arm64-gnu/2.4.0:
+    resolution: {integrity: sha512-jYDMHQJ0au5JT8qt5abPyJySd4wRuoT9Y7A9l0thHPHVaNo8GO8kWLy8iC03N0CP+/Ber/s1kPo/NxkvkXev5w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -555,8 +565,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-arm64-musl/2.1.0:
-    resolution: {integrity: sha512-DzuRbZj5oVXYFAlo2PVbiaTSb14z/FDUlvgfzVFHiKEw3w6gT/soveLTIAvfeIlRYYkwYNHCiEPxFztyr7x/rw==}
+  /@resvg/resvg-js-linux-arm64-musl/2.4.0:
+    resolution: {integrity: sha512-YByXwG1dRWd5xetawMj9a2pbGtR8HuRSon5xKPCN30xHACTorXeCr8G0rtsMq/e8GkoHjgrvtA3QnPpB2d7z7Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -564,8 +574,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-x64-gnu/2.1.0:
-    resolution: {integrity: sha512-pa4MtKtAEXBj7tl3JXPMQLjgP+KghUYYoXMIX8tlf/xbfJJsOxHpWcwQe/bWPFO4K9hgt/yePkb3G4ydD0uT+g==}
+  /@resvg/resvg-js-linux-x64-gnu/2.4.0:
+    resolution: {integrity: sha512-OCWMeR9W55rkyxh6Gwnu04rr856uzEngUF4mXE1fqaTXLvGgNG++RpjwE7gQ64nKvSJF1stiL2QPqRB72LHPtw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -573,8 +583,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-linux-x64-musl/2.1.0:
-    resolution: {integrity: sha512-mkwGe4I9CmQ1GPSnFa22PHwKbE+TZnRk/ViCvO89UOwypW0I+X+KlQVzVbZn9ypvcrbvzotOvl3OkVRq5MgsBA==}
+  /@resvg/resvg-js-linux-x64-musl/2.4.0:
+    resolution: {integrity: sha512-JoFsQwg4T/1i+xjih5nFSSGF4RgcH1U5gbRVUL3YZW/HNO+7Mmmlv6F3HXCJI2xm9rVHoiNnzkFVD7AAXbG+ng==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -582,8 +592,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-arm64-msvc/2.1.0:
-    resolution: {integrity: sha512-DVloJcQsgd3rMAPemy5KjAA6R+RkRz2/xb7zP9px7lr+Gao+xVbNzRQrY7xwCZFM7O7hu9uHvLvkKCttPoL1aA==}
+  /@resvg/resvg-js-win32-arm64-msvc/2.4.0:
+    resolution: {integrity: sha512-SReuI+6PKgtd4NI491Y1epaEqerRz+Pf/O/3ePTSCiTYZaLQoUIJ0b7POIFbMKKW0el7Iv+CeSOMy2/TffbX9Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -591,8 +601,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-ia32-msvc/2.1.0:
-    resolution: {integrity: sha512-RtRQ8loZA4zib8kzD1QjoScb6VAaZTbajB3WU/O6raP2/f2zIk9v4FU2E/hiC0vi5DGhJL5GTmSrsWShbLPjZw==}
+  /@resvg/resvg-js-win32-ia32-msvc/2.4.0:
+    resolution: {integrity: sha512-vO1Hqt6/1MFL9+PBvBP7GoqxtyUWEsUvUG0FunreBIX2NCifh0cwZxKKAN5NFpyAD/0F+os5SxDpBwpf2BBotg==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -600,8 +610,8 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js-win32-x64-msvc/2.1.0:
-    resolution: {integrity: sha512-NVYuQn9Aj/ZmRufKON7a+1U1XS+jGKMcWO4J8ZH2xhSP3aNVgO7Nfl45DMgqxdCcn0ZzYhzP+mSQFbA/ENE/mg==}
+  /@resvg/resvg-js-win32-x64-msvc/2.4.0:
+    resolution: {integrity: sha512-JEX4gp+qm+v7LKw8vVS4zP04qGK135Ja11QWmbM3OOpFvyTQkOiKuqm3FS+CIw6DE1A6kqX+dEwN8wBXWGDDDQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -609,22 +619,22 @@ packages:
     dev: true
     optional: true
 
-  /@resvg/resvg-js/2.1.0:
-    resolution: {integrity: sha512-nR6uVR5ugXLT2jh7U141nhawzgUs4JBl8BpM4XH7/ughSsOA/+WRxVhMUfdtEsz7REpTMKe2Sat+1/eWAuQ04w==}
+  /@resvg/resvg-js/2.4.0:
+    resolution: {integrity: sha512-M8Oetgb1w7x062aJDZl7Sf859pcbLm+5jen+aT5ShrSQRcHqftEbFzCgeOggZkcsFr4D8i9pM0ZuhOOhZWrORQ==}
     engines: {node: '>= 10'}
     optionalDependencies:
-      '@resvg/resvg-js-android-arm-eabi': 2.1.0
-      '@resvg/resvg-js-android-arm64': 2.1.0
-      '@resvg/resvg-js-darwin-arm64': 2.1.0
-      '@resvg/resvg-js-darwin-x64': 2.1.0
-      '@resvg/resvg-js-linux-arm-gnueabihf': 2.1.0
-      '@resvg/resvg-js-linux-arm64-gnu': 2.1.0
-      '@resvg/resvg-js-linux-arm64-musl': 2.1.0
-      '@resvg/resvg-js-linux-x64-gnu': 2.1.0
-      '@resvg/resvg-js-linux-x64-musl': 2.1.0
-      '@resvg/resvg-js-win32-arm64-msvc': 2.1.0
-      '@resvg/resvg-js-win32-ia32-msvc': 2.1.0
-      '@resvg/resvg-js-win32-x64-msvc': 2.1.0
+      '@resvg/resvg-js-android-arm-eabi': 2.4.0
+      '@resvg/resvg-js-android-arm64': 2.4.0
+      '@resvg/resvg-js-darwin-arm64': 2.4.0
+      '@resvg/resvg-js-darwin-x64': 2.4.0
+      '@resvg/resvg-js-linux-arm-gnueabihf': 2.4.0
+      '@resvg/resvg-js-linux-arm64-gnu': 2.4.0
+      '@resvg/resvg-js-linux-arm64-musl': 2.4.0
+      '@resvg/resvg-js-linux-x64-gnu': 2.4.0
+      '@resvg/resvg-js-linux-x64-musl': 2.4.0
+      '@resvg/resvg-js-win32-arm64-msvc': 2.4.0
+      '@resvg/resvg-js-win32-ia32-msvc': 2.4.0
+      '@resvg/resvg-js-win32-x64-msvc': 2.4.0
     dev: true
 
   /@shuding/opentype.js/1.4.0-beta.0:
@@ -636,10 +646,10 @@ packages:
       string.prototype.codepointat: 0.2.1
     dev: true
 
-  /@swc/helpers/0.4.11:
-    resolution: {integrity: sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==}
+  /@swc/helpers/0.4.14:
+    resolution: {integrity: sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@tsconfig/node10/1.0.9:
@@ -658,16 +668,16 @@ packages:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
     dev: true
 
-  /@types/node/18.11.4:
-    resolution: {integrity: sha512-BxcJpBu8D3kv/GZkx/gSMz6VnTJREBj/4lbzYOQueUOELkt8WrO6zAcSPmp9uRPEW/d+lUO8QK0W2xnS1hEU0A==}
+  /@types/node/18.13.0:
+    resolution: {integrity: sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==}
     dev: true
 
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
     dev: true
 
-  /@types/react/18.0.21:
-    resolution: {integrity: sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==}
+  /@types/react/18.0.28:
+    resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
@@ -678,10 +688,6 @@ packages:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
     dev: true
 
-  /@types/yoga-layout/1.9.2:
-    resolution: {integrity: sha512-S9q47ByT2pPvD65IvrWp7qppVMpk9WGMbVq9wbWZOHg6tnXSD4vyhao6nOSBwwfDdV2p3Kx9evA9vI+XWTfDvw==}
-    dev: true
-
   /@vercel/node-bridge/2.2.2:
     resolution: {integrity: sha512-haGBC8noyA5BfjCRXRH+VIkHCDVW5iD5UX24P2nOdilwUxI4qWsattS/co8QBGq64XsNLRAMdM5pQUE3zxkF9Q==}
     dev: true
@@ -710,8 +716,8 @@ packages:
     hasBin: true
     dev: true
 
-  /acorn/8.8.0:
-    resolution: {integrity: sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==}
+  /acorn/8.8.2:
+    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
@@ -723,8 +729,8 @@ packages:
       color-convert: 2.0.1
     dev: true
 
-  /anymatch/3.1.2:
-    resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
+  /anymatch/3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
     dependencies:
       normalize-path: 3.0.0
@@ -754,19 +760,19 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /autoprefixer/10.4.12_postcss@8.4.18:
-    resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
+  /autoprefixer/10.4.13_postcss@8.4.21:
+    resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.21.4
-      caniuse-lite: 1.0.30001423
+      browserslist: 4.21.5
+      caniuse-lite: 1.0.30001451
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.18
+      postcss: 8.4.21
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -794,15 +800,15 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist/4.21.4:
-    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
+  /browserslist/4.21.5:
+    resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001423
-      electron-to-chromium: 1.4.284
-      node-releases: 2.0.6
-      update-browserslist-db: 1.0.10_browserslist@4.21.4
+      caniuse-lite: 1.0.30001451
+      electron-to-chromium: 1.4.295
+      node-releases: 2.0.10
+      update-browserslist-db: 1.0.10_browserslist@4.21.5
     dev: true
 
   /buffer/5.7.1:
@@ -828,8 +834,8 @@ packages:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
     dev: true
 
-  /caniuse-lite/1.0.30001423:
-    resolution: {integrity: sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==}
+  /caniuse-lite/1.0.30001451:
+    resolution: {integrity: sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==}
 
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
@@ -843,7 +849,7 @@ packages:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
     dependencies:
-      anymatch: 3.1.2
+      anymatch: 3.1.3
       braces: 3.0.2
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
@@ -876,8 +882,8 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /cluster-key-slot/1.1.1:
-    resolution: {integrity: sha512-rwHwUfXL40Chm1r08yrhU3qpUvdVlgkKNeyeGPOxnW8/SyVDvgRaed/Uz54AqWNaTCAThlj6QAs3TZcKI0xDEw==}
+  /cluster-key-slot/1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
     engines: {node: '>=0.10.0'}
     dev: true
 
@@ -949,8 +955,8 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /css-to-react-native/3.0.0:
-    resolution: {integrity: sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==}
+  /css-to-react-native/3.1.0:
+    resolution: {integrity: sha512-AryfkFA29b4I3vG7N4kxFboq15DxwSXzhXM37XNEjwJMgjYIc8BcqfiprpAqX0zadI5PMByEIwAMzXxk5Vcc4g==}
     dependencies:
       camelize: 1.0.1
       css-color-keywords: 1.0.0
@@ -999,8 +1005,8 @@ packages:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
     dev: true
 
-  /defu/6.1.0:
-    resolution: {integrity: sha512-pOFYRTIhoKujrmbTRhcW5lYQLBXw/dlTwfI8IguF1QCDJOcJzNH1w+YFjxqy6BAuJrClTy6MUE8q+oKJ2FLsIw==}
+  /defu/6.1.2:
+    resolution: {integrity: sha512-+uO4+qr7msjNNWKYPHqN/3+Dx3NFkmIzayk2L1MyZQlvgZb/J1A0fo410dpKrN2SnqFjt8n4JL8fDJE0wIgjFQ==}
     dev: true
 
   /denque/2.1.0:
@@ -1008,8 +1014,8 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
-  /destr/1.2.0:
-    resolution: {integrity: sha512-JG+cG4ZPB1L27sl2C2URg8MIOmIUtTbE5wEx02BpmrTCqg/hXxFKXsYsnODl5PdpqNRaS1KQGUQ56V8jk8XpYQ==}
+  /destr/1.2.2:
+    resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
     dev: true
 
   /detect-libc/2.0.1:
@@ -1024,7 +1030,7 @@ packages:
     dependencies:
       acorn-node: 1.8.2
       defined: 1.0.1
-      minimist: 1.2.7
+      minimist: 1.2.8
     dev: true
 
   /didyoumean/1.2.2:
@@ -1047,8 +1053,8 @@ packages:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: true
 
-  /electron-to-chromium/1.4.284:
-    resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
+  /electron-to-chromium/1.4.295:
+    resolution: {integrity: sha512-lEO94zqf1bDA3aepxwnWoHUjA8sZ+2owgcSZjYQy0+uOSEclJX0VieZC+r+wLpSxUHRd6gG32znTWmr+5iGzFw==}
     dev: true
 
   /emoji-regex/10.2.1:
@@ -1119,8 +1125,8 @@ packages:
       micromatch: 4.0.5
     dev: true
 
-  /fastq/1.13.0:
-    resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==}
+  /fastq/1.15.0:
+    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
       reusify: 1.0.4
     dev: true
@@ -1136,6 +1142,16 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /follow-redirects/1.15.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: true
+
   /fraction.js/4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
@@ -1153,6 +1169,15 @@ packages:
       universalify: 2.0.0
     dev: true
 
+  /fs-extra/11.1.0:
+    resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
+    engines: {node: '>=14.14'}
+    dependencies:
+      graceful-fs: 4.2.10
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs-memo/1.2.0:
     resolution: {integrity: sha512-YEexkCpL4j03jn5SxaMHqcO6IuWuqm8JFUYhyCep7Ao89JIYmB8xoKhK7zXXJ9cCaNXpyNH5L3QtAmoxjoHW2w==}
     dev: true
@@ -1175,6 +1200,10 @@ packages:
       fs-memo: 1.2.0
     dev: true
 
+  /get-port-please/3.0.1:
+    resolution: {integrity: sha512-R5pcVO8Z1+pVDu8Ml3xaJCEkBiiy1VQN9za0YqH8GIi1nIqD4IzQhzY6dDzMRtdS1lyiGlucRzm8IN8wtLIXng==}
+    dev: true
+
   /get-stream/6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -1209,7 +1238,7 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.2.12
-      ignore: 5.2.0
+      ignore: 5.2.4
       merge2: 1.4.1
       slash: 3.0.0
     dev: true
@@ -1232,13 +1261,15 @@ packages:
       strip-bom-string: 1.0.0
     dev: false
 
-  /h3/0.8.5:
-    resolution: {integrity: sha512-A+rVzJ+31e67JJzlRf2Ycphu/mvl2qknbpch38xRfrs9HuGSKTtOWuzPnpgaEGIfnzuD/BsDOfhQLJevXEm3ag==}
+  /h3/1.4.0:
+    resolution: {integrity: sha512-FWG+FUdW6XQnf/54L4AXzZs1KUYwSJk5cbdFvTM4EG96bEQiWDJ5003xW4S3UGgXI0VJJgyY6KCaDmAL75kjbA==}
     dependencies:
       cookie-es: 0.5.0
-      destr: 1.2.0
-      radix3: 0.2.1
-      ufo: 0.8.6
+      destr: 1.2.2
+      iron-webcrypto: 0.4.0
+      radix3: 1.0.0
+      ufo: 1.0.1
+      uncrypto: 0.1.2
     dev: true
 
   /has-flag/4.0.0:
@@ -1267,8 +1298,8 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
 
-  /ignore/5.2.0:
-    resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
+  /ignore/5.2.4:
+    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
     dev: true
 
@@ -1285,12 +1316,12 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: true
 
-  /ioredis/5.2.3:
-    resolution: {integrity: sha512-gQNcMF23/NpvjCaa1b5YycUyQJ9rBNH2xP94LWinNpodMWVUPP5Ai/xXANn/SM7gfIvI62B5CCvZxhg5pOgyMw==}
+  /ioredis/5.3.0:
+    resolution: {integrity: sha512-Id9jKHhsILuIZpHc61QkagfVdUj2Rag5GzG1TGEvRNeM7dtTOjICgjC+tvqYxi//PuX2wjQ+Xjva2ONBuf92Pw==}
     engines: {node: '>=12.22.0'}
     dependencies:
       '@ioredis/commands': 1.2.0
-      cluster-key-slot: 1.1.1
+      cluster-key-slot: 1.1.2
       debug: 4.3.4
       denque: 2.1.0
       lodash.defaults: 4.2.0
@@ -1312,18 +1343,22 @@ packages:
     hasBin: true
     dependencies:
       consola: 2.15.3
-      defu: 6.1.0
-      destr: 1.2.0
+      defu: 6.1.2
+      destr: 1.2.2
       etag: 1.8.1
       image-meta: 0.1.1
       listhen: 0.2.15
-      ohmyfetch: 0.4.20
+      ohmyfetch: 0.4.21
       pathe: 0.3.9
       sharp: 0.30.7
       ufo: 0.8.6
       xss: 1.0.14
     dev: true
 
+  /iron-webcrypto/0.4.0:
+    resolution: {integrity: sha512-5OG53gJ4dBTq4y3IJqK7MEG9CPZRsYn9EP9J4jjgH4TcP/ywdsSMAmqj9VTSzdXu0/xfUrqjGHU7WLUme2+k5Q==}
+    dev: true
+
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
     dev: true
@@ -1424,24 +1459,24 @@ packages:
     dependencies:
       clipboardy: 3.0.0
       colorette: 2.0.19
-      defu: 6.1.0
+      defu: 6.1.2
       get-port-please: 2.6.1
       http-shutdown: 1.2.2
       selfsigned: 2.1.1
       ufo: 0.8.6
     dev: true
 
-  /listhen/0.3.4:
-    resolution: {integrity: sha512-cuzWWoIWF8JvsPLmIurTkUXi27owH4RRKnBsbPswRJvB82uTv15W01yOOLaPvjxY5mMlftmW2p1XnxB835AdRA==}
+  /listhen/1.0.2:
+    resolution: {integrity: sha512-yXz0NIYfVJDBQK2vlCpD/OjSzYkur2mR44boUtlg0eES4holn7oYZf439y5JxP55EOzFtClZ8eZlMJ8a++FwlQ==}
     dependencies:
       clipboardy: 3.0.0
       colorette: 2.0.19
-      defu: 6.1.0
-      get-port-please: 2.6.1
+      defu: 6.1.2
+      get-port-please: 3.0.1
       http-shutdown: 1.2.2
       ip-regex: 5.0.0
       node-forge: 1.3.1
-      ufo: 0.8.6
+      ufo: 1.0.1
     dev: true
 
   /lodash.defaults/4.2.0:
@@ -1466,12 +1501,17 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /lru-cache/7.14.1:
+    resolution: {integrity: sha512-ysxwsnTKdAx96aTRdhDOCQfDgbHnt8SK0KY8SEjO0wHinhWOFTESbjVCMPbU1uGXg/ch4lifqx0wfjOawU2+WA==}
+    engines: {node: '>=12'}
+    dev: true
+
   /make-error/1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
     dev: true
 
-  /markdown-to-jsx/7.1.7_react@18.2.0:
-    resolution: {integrity: sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==}
+  /markdown-to-jsx/7.1.9_react@18.2.0:
+    resolution: {integrity: sha512-x4STVIKIJR0mGgZIZ5RyAeQD7FEZd5tS8m/htbcVGlex32J+hlSLj+ExrHCxP6nRKF1EKbcO7i6WhC1GtOpBlA==}
     engines: {node: '>= 10'}
     peerDependencies:
       react: '>= 0.14.0'
@@ -1488,8 +1528,8 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
-  /micro-memoize/4.0.11:
-    resolution: {integrity: sha512-CjxsaYe4j43df32DtzzNCwanPqZjZDwuQAZilsCYpa2ZVtSPDjHXbTlR4gsEZRyO9/twHs0b7HLjvy/sowl7sA==}
+  /micro-memoize/4.0.14:
+    resolution: {integrity: sha512-2tzWP1w2Hh+r7kCYa4f//jpBEA6dAueiuLco38NxfjF9Py3KCCI7wVOTdCvOhmTC043t+ulclVBdl3v+s+UJIQ==}
     dev: true
 
   /micromatch/4.0.5:
@@ -1510,8 +1550,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /minimist/1.2.7:
-    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
+  /minimist/1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
   /mkdir/0.0.2:
@@ -1529,11 +1569,11 @@ packages:
     hasBin: true
     dev: true
 
-  /moize/6.1.3:
-    resolution: {integrity: sha512-Cn+1T5Ypieeo46fn8X98V2gHj2VSRohVPjvT8BRvNANJJC3UOeege/G84xA/3S9c5qA4p9jOdSB1jfhumwe8qw==}
+  /moize/6.1.5:
+    resolution: {integrity: sha512-Fu46qKV9F8DOi2vXimR3yRw/JAJfFRQEFZeclvOFnG92AEFERqwFtu4PIxETYFtCghHGlU1itKcvvNioKgWGIw==}
     dependencies:
       fast-equals: 3.0.3
-      micro-memoize: 4.0.11
+      micro-memoize: 4.0.14
     dev: true
 
   /mri/1.2.0:
@@ -1558,8 +1598,8 @@ packages:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     dev: true
 
-  /next/13.0.2_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-uQ5z5e4D9mOe8+upy6bQdYYjo/kk1v3jMW87kTy2TgAyAsEO+CkwRnMgyZ4JoHEnhPZLHwh7dk0XymRNLe1gFw==}
+  /next/13.1.6_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw==}
     engines: {node: '>=14.6.0'}
     hasBin: true
     peerDependencies:
@@ -1576,50 +1616,53 @@ packages:
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.0.2
-      '@swc/helpers': 0.4.11
-      caniuse-lite: 1.0.30001423
+      '@next/env': 13.1.6
+      '@swc/helpers': 0.4.14
+      caniuse-lite: 1.0.30001451
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      styled-jsx: 5.1.0_react@18.2.0
-      use-sync-external-store: 1.2.0_react@18.2.0
+      styled-jsx: 5.1.1_react@18.2.0
     optionalDependencies:
-      '@next/swc-android-arm-eabi': 13.0.2
-      '@next/swc-android-arm64': 13.0.2
-      '@next/swc-darwin-arm64': 13.0.2
-      '@next/swc-darwin-x64': 13.0.2
-      '@next/swc-freebsd-x64': 13.0.2
-      '@next/swc-linux-arm-gnueabihf': 13.0.2
-      '@next/swc-linux-arm64-gnu': 13.0.2
-      '@next/swc-linux-arm64-musl': 13.0.2
-      '@next/swc-linux-x64-gnu': 13.0.2
-      '@next/swc-linux-x64-musl': 13.0.2
-      '@next/swc-win32-arm64-msvc': 13.0.2
-      '@next/swc-win32-ia32-msvc': 13.0.2
-      '@next/swc-win32-x64-msvc': 13.0.2
+      '@next/swc-android-arm-eabi': 13.1.6
+      '@next/swc-android-arm64': 13.1.6
+      '@next/swc-darwin-arm64': 13.1.6
+      '@next/swc-darwin-x64': 13.1.6
+      '@next/swc-freebsd-x64': 13.1.6
+      '@next/swc-linux-arm-gnueabihf': 13.1.6
+      '@next/swc-linux-arm64-gnu': 13.1.6
+      '@next/swc-linux-arm64-musl': 13.1.6
+      '@next/swc-linux-x64-gnu': 13.1.6
+      '@next/swc-linux-x64-musl': 13.1.6
+      '@next/swc-win32-arm64-msvc': 13.1.6
+      '@next/swc-win32-ia32-msvc': 13.1.6
+      '@next/swc-win32-x64-msvc': 13.1.6
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
     dev: false
 
-  /node-abi/3.28.0:
-    resolution: {integrity: sha512-fRlDb4I0eLcQeUvGq7IY3xHrSb0c9ummdvDSYWfT9+LKP+3jCKw/tKoqaM7r1BAoiAC6GtwyjaGnOz6B3OtF+A==}
+  /node-abi/3.33.0:
+    resolution: {integrity: sha512-7GGVawqyHF4pfd0YFybhv/eM9JwTtPqx0mAanQ146O3FlSh3pA24zf9IRQTOsfTSqXTNzPSP5iagAJ94jjuVog==}
     engines: {node: '>=10'}
     dependencies:
       semver: 7.3.8
     dev: true
 
-  /node-addon-api/5.0.0:
-    resolution: {integrity: sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==}
+  /node-addon-api/5.1.0:
+    resolution: {integrity: sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==}
     dev: true
 
   /node-fetch-native/0.1.8:
     resolution: {integrity: sha512-ZNaury9r0NxaT2oL65GvdGDy+5PlSaHTovT6JV5tOW07k1TQmgC0olZETa4C9KZg0+6zBr99ctTYa3Utqj9P/Q==}
     dev: true
 
-  /node-fetch/2.6.7:
-    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
+  /node-fetch-native/1.0.1:
+    resolution: {integrity: sha512-VzW+TAk2wE4X9maiKMlT+GsPU4OMmR1U9CrHSmd3DFLn2IcZ9VJ6M6BBugGfYUnPCLSYxXdZy17M0BEJyhUTwg==}
+    dev: true
+
+  /node-fetch/2.6.9:
+    resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==}
     engines: {node: 4.x || >=6.0.0}
     peerDependencies:
       encoding: ^0.1.0
@@ -1635,8 +1678,8 @@ packages:
     engines: {node: '>= 6.13.0'}
     dev: true
 
-  /node-releases/2.0.6:
-    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
+  /node-releases/2.0.10:
+    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
     dev: true
 
   /node-stream-zip/1.15.0:
@@ -1671,13 +1714,21 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /ohmyfetch/0.4.20:
-    resolution: {integrity: sha512-+c3/l+X91owrT1reTos1R13rb2j8NGZpKi0bRWwrnxIHlr1FZ8NzghIsNBKpUvk9nsnFoNK4phw+nTnXrcALzA==}
+  /ofetch/1.0.0:
+    resolution: {integrity: sha512-d40aof8czZFSQKJa4+F7Ch3UC5D631cK1TTUoK+iNEut9NoiCL+u0vykl/puYVUS2df4tIQl5upQcolIcEzQjQ==}
+    dependencies:
+      destr: 1.2.2
+      node-fetch-native: 1.0.1
+      ufo: 1.0.1
+    dev: true
+
+  /ohmyfetch/0.4.21:
+    resolution: {integrity: sha512-VG7f/JRvqvBOYvL0tHyEIEG7XHWm7OqIfAs6/HqwWwDfjiJ1g0huIpe5sFEmyb+7hpFa1EGNH2aERWR72tlClw==}
     dependencies:
-      destr: 1.2.0
+      destr: 1.2.2
       node-fetch-native: 0.1.8
       ufo: 0.8.6
-      undici: 5.11.0
+      undici: 5.18.0
     dev: true
 
   /once/1.4.0:
@@ -1739,29 +1790,29 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /postcss-import/14.1.0_postcss@8.4.18:
+  /postcss-import/14.1.0_postcss@8.4.21:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.18
+      postcss: 8.4.21
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
     dev: true
 
-  /postcss-js/4.0.0_postcss@8.4.18:
-    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+  /postcss-js/4.0.1_postcss@8.4.21:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
-      postcss: ^8.3.3
+      postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.18
+      postcss: 8.4.21
     dev: true
 
-  /postcss-load-config/3.1.4_neo3lunb2qpadwxplzw7r2isgm:
+  /postcss-load-config/3.1.4_aesdjsunmf4wiehhujt67my7tu:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -1774,23 +1825,23 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.0.6
-      postcss: 8.4.18
-      ts-node: 10.9.1_6hf6ijjdmrvgn4gwd23tocsh2m
+      postcss: 8.4.21
+      ts-node: 10.9.1_4bewfcp2iebiwuold25d6rgcsy
       yaml: 1.10.2
     dev: true
 
-  /postcss-nested/6.0.0_postcss@8.4.18:
+  /postcss-nested/6.0.0_postcss@8.4.21:
     resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.18
-      postcss-selector-parser: 6.0.10
+      postcss: 8.4.21
+      postcss-selector-parser: 6.0.11
     dev: true
 
-  /postcss-selector-parser/6.0.10:
-    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+  /postcss-selector-parser/6.0.11:
+    resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
@@ -1810,8 +1861,8 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
-  /postcss/8.4.18:
-    resolution: {integrity: sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==}
+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.4
@@ -1827,10 +1878,10 @@ packages:
       detect-libc: 2.0.1
       expand-template: 2.0.3
       github-from-package: 0.0.0
-      minimist: 1.2.7
+      minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 1.0.2
-      node-abi: 3.28.0
+      node-abi: 3.33.0
       pump: 3.0.0
       rc: 1.2.8
       simple-get: 4.0.1
@@ -1838,8 +1889,8 @@ packages:
       tunnel-agent: 0.6.0
     dev: true
 
-  /prettier/2.7.1:
-    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
+  /prettier/2.8.4:
+    resolution: {integrity: sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true
@@ -1873,8 +1924,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /radix3/0.2.1:
-    resolution: {integrity: sha512-FnhArTl5Tq7dodiLeSPKrDUyCQuJqEncP8cKdyy399g8F/cz7GH6FmzA3Rkosu2IZMkpswFFwXfb2ERSiL06pg==}
+  /radix3/1.0.0:
+    resolution: {integrity: sha512-6n3AEXth91ASapMVKiEh2wrbFJmI+NBilrWE0AbiGgfm0xet0QXC8+a3K19r1UVYjUjctUgB053c3V/J6V0kCQ==}
     dev: true
 
   /rc/1.2.8:
@@ -1883,7 +1934,7 @@ packages:
     dependencies:
       deep-extend: 0.6.0
       ini: 1.3.8
-      minimist: 1.2.7
+      minimist: 1.2.8
       strip-json-comments: 2.0.1
     dev: true
 
@@ -1998,17 +2049,17 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
-  /satori/0.0.44:
-    resolution: {integrity: sha512-WKUxXC2qeyno6J3ucwwLozPL6j1HXOZiN5wIUf7iqAhlx1RUC/6ePIKHi7iPc3Cy6DYuZcJriZXxXkSdo2FQHg==}
+  /satori/0.2.3:
+    resolution: {integrity: sha512-jl/+sFkz3pBfGip7034Uvn/Hp1FZq4prKXIZO28rV90DS3jTU6uXBV0FRX4ooYoO27f3rGNXKhSKyDST5FdmQA==}
     engines: {node: '>=16'}
     dependencies:
       '@shuding/opentype.js': 1.4.0-beta.0
       css-background-parser: 0.1.0
       css-box-shadow: 1.0.0-3
-      css-to-react-native: 3.0.0
+      css-to-react-native: 3.1.0
       emoji-regex: 10.2.1
       postcss-value-parser: 4.2.0
-      yoga-layout-prebuilt: 1.10.0
+      yoga-wasm-web: 0.3.1
     dev: true
 
   /scheduler/0.23.0:
@@ -2047,7 +2098,7 @@ packages:
     dependencies:
       color: 4.2.3
       detect-libc: 2.0.1
-      node-addon-api: 5.0.0
+      node-addon-api: 5.1.0
       prebuild-install: 7.1.1
       semver: 7.3.8
       simple-get: 4.0.1
@@ -2136,8 +2187,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /styled-jsx/5.1.0_react@18.2.0:
-    resolution: {integrity: sha512-/iHaRJt9U7T+5tp6TRelLnqBqiaIT0HsO0+vgyj8hK2KUk7aejFqRrumqPUlAqDwAj8IbS/1hk3IhBAAK/FCUQ==}
+  /styled-jsx/5.1.1_react@18.2.0:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'
@@ -2165,8 +2216,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /tailwindcss/3.2.3_neo3lunb2qpadwxplzw7r2isgm:
-    resolution: {integrity: sha512-Xt9D4PK4zuuQCEB8bwK9JUCKmTgUwyac/6b0/42Vqhgl6YJkep+Wf5wq+5uXYfmrupdAD0YY2NY1hyZp1HjRrg==}
+  /tailwindcss/3.2.6_aesdjsunmf4wiehhujt67my7tu:
+    resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     peerDependencies:
@@ -2186,12 +2237,12 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.18
-      postcss-import: 14.1.0_postcss@8.4.18
-      postcss-js: 4.0.0_postcss@8.4.18
-      postcss-load-config: 3.1.4_neo3lunb2qpadwxplzw7r2isgm
-      postcss-nested: 6.0.0_postcss@8.4.18
-      postcss-selector-parser: 6.0.10
+      postcss: 8.4.21
+      postcss-import: 14.1.0_postcss@8.4.21
+      postcss-js: 4.0.1_postcss@8.4.21
+      postcss-load-config: 3.1.4_aesdjsunmf4wiehhujt67my7tu
+      postcss-nested: 6.0.0_postcss@8.4.21
+      postcss-selector-parser: 6.0.11
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1
       resolve: 1.22.1
@@ -2237,7 +2288,7 @@ packages:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
 
-  /ts-node/10.9.1_6hf6ijjdmrvgn4gwd23tocsh2m:
+  /ts-node/10.9.1_4bewfcp2iebiwuold25d6rgcsy:
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -2256,20 +2307,20 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
-      '@types/node': 18.11.4
-      acorn: 8.8.0
+      '@types/node': 18.13.0
+      acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.8.4
+      typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
 
-  /tslib/2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
+  /tslib/2.5.0:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
     dev: false
 
   /tunnel-agent/0.6.0:
@@ -2278,8 +2329,8 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
-  /typescript/4.8.4:
-    resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
+  /typescript/4.9.5:
+    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
     engines: {node: '>=4.2.0'}
     hasBin: true
     dev: true
@@ -2288,8 +2339,16 @@ packages:
     resolution: {integrity: sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==}
     dev: true
 
-  /undici/5.11.0:
-    resolution: {integrity: sha512-oWjWJHzFet0Ow4YZBkyiJwiK5vWqEYoH7BINzJAJOLedZ++JpAlCbUktW2GQ2DS2FpKmxD/JMtWUUWl1BtghGw==}
+  /ufo/1.0.1:
+    resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
+    dev: true
+
+  /uncrypto/0.1.2:
+    resolution: {integrity: sha512-kuZwRKV615lEw/Xx3Iz56FKk3nOeOVGaVmw0eg+x4Mne28lCotNFbBhDW7dEBCBKyKbRQiCadEZeNAFPVC5cgw==}
+    dev: true
+
+  /undici/5.18.0:
+    resolution: {integrity: sha512-1iVwbhonhFytNdg0P4PqyIAXbdlVZVebtPDvuM36m66mRw4OGrCm2MYynJv/UENFLdP13J1nPVQzVE2zTs1OeA==}
     engines: {node: '>=12.18'}
     dependencies:
       busboy: 1.6.0
@@ -2300,45 +2359,41 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unstorage/0.6.0:
-    resolution: {integrity: sha512-X05PIq28pVNA1BypX6Y00YNqAsHM25MGemvpjHeYvwJ8/wg936GoO1YD+VdWlqm3LmVX4fNJ5tlC7uhXsMPgeg==}
+  /unstorage/1.1.4:
+    resolution: {integrity: sha512-nrnCoWN8ewaZrwz5yf7QGkMn0FDoVer6yGIR56wvocNzAmZi1vXOnCaBxueB3Uu/SqNSH5N/ww41t6jNT8XccA==}
     dependencies:
-      anymatch: 3.1.2
+      anymatch: 3.1.3
       chokidar: 3.5.3
-      destr: 1.2.0
-      h3: 0.8.5
-      ioredis: 5.2.3
-      listhen: 0.3.4
+      destr: 1.2.2
+      h3: 1.4.0
+      ioredis: 5.3.0
+      listhen: 1.0.2
+      lru-cache: 7.14.1
       mkdir: 0.0.2
       mri: 1.2.0
-      ohmyfetch: 0.4.20
-      ufo: 0.8.6
-      ws: 8.9.0
+      node-fetch-native: 1.0.1
+      ofetch: 1.0.0
+      ufo: 1.0.1
+      ws: 8.12.0
+    optionalDependencies:
+      '@planetscale/database': 1.5.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
     dev: true
 
-  /update-browserslist-db/1.0.10_browserslist@4.21.4:
+  /update-browserslist-db/1.0.10_browserslist@4.21.5:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.4
+      browserslist: 4.21.5
       escalade: 3.1.1
       picocolors: 1.0.0
     dev: true
 
-  /use-sync-external-store/1.2.0_react@18.2.0:
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -2376,12 +2431,12 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
-  /ws/8.9.0:
-    resolution: {integrity: sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==}
+  /ws/8.12.0:
+    resolution: {integrity: sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
+      utf-8-validate: '>=5.0.2'
     peerDependenciesMeta:
       bufferutil:
         optional: true
@@ -2422,9 +2477,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /yoga-layout-prebuilt/1.10.0:
-    resolution: {integrity: sha512-YnOmtSbv4MTf7RGJMK0FvZ+KD8OEe/J5BNnR0GHhD8J/XcG/Qvxgszm0Un6FTHWW4uHlTgP0IztiXQnGyIR45g==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@types/yoga-layout': 1.9.2
+  /yoga-wasm-web/0.3.1:
+    resolution: {integrity: sha512-J74OxJtRb5GLW/GH+ibYpb0/0zixk9qp0EOIuKKkavk0w0cMHIQ76YPkca4cRBUW+d+r+GFSM9Q3a+HXQd4b8g==}
     dev: true

From ebedc072f646511c795c7523c555331e3b622a1b Mon Sep 17 00:00:00 2001
From: Jason Nall <jsonnull@gmail.com>
Date: Sat, 11 Feb 2023 13:34:51 -0500
Subject: [PATCH 2/4] Fix local dev.

---
 package.json             |  2 +-
 src/components/Header.js | 34 +++++++++++++++++-----------------
 src/pages/blog/index.js  |  6 +++---
 src/pages/index.js       | 18 +++++++++---------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index bb538cc..1524737 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "format": "prettier --write 'src/**/*.js' './*.js'",
     "screenshots": "ts-node scripts/screenshots.tsx",
-    "dev": "next ./src",
+    "dev": "next dev",
     "build": "tailwindcss -i src/global.css -o .css/bundle.css && ts-node scripts/screenshots && next build",
     "build:ci": "pnpm build"
   },
diff --git a/src/components/Header.js b/src/components/Header.js
index 6d08cbd..ca1ef3d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -107,17 +107,17 @@ export const Header = () => {
           &nbsp;
         </div>
         <div className="z-1 flex items-center w-full z-10">
-          <Link href="/">
-            <a className={clsx(styles.underline)} ref={homeRef}>
-              <span className={clsx(styles.homeText, 'hidden sm:inline')}>
-                jsonnull
-              </span>
-              <Home
-                className={clsx('block sm:hidden', styles.text)}
-                width={18}
-                height={18}
-              />
-            </a>
+          <Link href="/" className={clsx(styles.underline)} ref={homeRef}>
+
+            <span className={clsx(styles.homeText, 'hidden sm:inline')}>
+              jsonnull
+            </span>
+            <Home
+              className={clsx('block sm:hidden', styles.text)}
+              width={18}
+              height={18}
+            />
+
           </Link>
           <Separator />
           <ul className="flex gap-3 sm:gap-6">
@@ -128,13 +128,13 @@ export const Header = () => {
             ].map(([url, title, ref]) => {
               return (
                 <li key={url}>
-                  <Link href={url}>
-                    <a className={clsx(styles.underline)} ref={ref}>
-                      {title}
-                    </a>
+                  <Link href={url} className={clsx(styles.underline)} ref={ref}>
+
+                    {title}
+
                   </Link>
                 </li>
-              )
+              );
             })}
           </ul>
           <Separator className="pr-1 sm:pr-4" />
@@ -161,5 +161,5 @@ export const Header = () => {
         </div>
       </nav>
     </div>
-  )
+  );
 }
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index 4b871e1..ccb22ca 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -28,12 +28,12 @@ const Posts = ({ posts }) => {
       {posts.map((post) => {
         return (
           <Link key={post.url} href={post.url}>
-            <a href={post.url}>{post.title}</a>
+            {post.title}
           </Link>
-        )
+        );
       })}
     </Wrapper>
-  )
+  );
 }
 
 Posts.getLayout = (page) => (
diff --git a/src/pages/index.js b/src/pages/index.js
index f275d98..917b0ba 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -56,18 +56,18 @@ const Home = () => {
       <Spacer medium />
       <div className="flex justify-center">
         <Link href="/projects">
-          <a>
-            <Button>
-              <div className="flex items-center underline-themed">
-                See my other projects
-                <ArrowRight size={18} className="ml-2" />
-              </div>
-            </Button>
-          </a>
+
+          <Button>
+            <div className="flex items-center underline-themed">
+              See my other projects
+              <ArrowRight size={18} className="ml-2" />
+            </div>
+          </Button>
+
         </Link>
       </div>
     </Wrapper>
-  )
+  );
 }
 
 Home.getLayout = (page) => (

From cda588a50b10ad6fbd96dc01364a82b2150618ba Mon Sep 17 00:00:00 2001
From: Jason Nall <jsonnull@gmail.com>
Date: Sat, 11 Feb 2023 14:36:34 -0500
Subject: [PATCH 3/4] Migrate to TypeScript.

---
 .gitignore                                    |  1 +
 src/components/{Button.js => Button.tsx}      |  3 +-
 src/components/{Footer.js => Footer.tsx}      |  2 -
 src/components/{Header.js => Header.tsx}      | 78 +++++++++++--------
 src/components/{Page.js => Page.tsx}          | 19 +++--
 src/components/{Project.js => Project.tsx}    |  7 ++
 .../{ProjectGrid.js => ProjectGrid.tsx}       |  9 ++-
 src/components/{Theme.js => Theme.tsx}        | 18 ++---
 src/components/{Title.js => Title.tsx}        |  4 +-
 src/components/index.js                       |  9 ---
 src/components/index.tsx                      | 38 +++++++++
 src/components/tailwind.js                    | 11 ---
 src/data/projects/index.ts                    |  2 +-
 src/data/projects/past.ts                     |  2 +-
 src/data/projects/types.ts                    |  5 --
 src/pages/{_app.js => _app.tsx}               |  3 +-
 src/pages/{_document.js => _document.tsx}     |  0
 src/pages/about/{index.js => index.tsx}       |  5 +-
 .../blog/{[...slug].js => [...slug].tsx}      | 27 +++++--
 src/pages/blog/{index.js => index.tsx}        | 23 +++---
 src/pages/{index.js => index.tsx}             | 12 ++-
 src/pages/projects/{index.js => index.tsx}    |  9 ++-
 src/types.ts                                  | 20 +++++
 23 files changed, 196 insertions(+), 111 deletions(-)
 rename src/components/{Button.js => Button.tsx} (65%)
 rename src/components/{Footer.js => Footer.tsx} (94%)
 rename src/components/{Header.js => Header.tsx} (75%)
 rename src/components/{Page.js => Page.tsx} (79%)
 rename src/components/{Project.js => Project.tsx} (89%)
 rename src/components/{ProjectGrid.js => ProjectGrid.tsx} (76%)
 rename src/components/{Theme.js => Theme.tsx} (85%)
 rename src/components/{Title.js => Title.tsx} (65%)
 delete mode 100644 src/components/index.js
 create mode 100644 src/components/index.tsx
 delete mode 100644 src/components/tailwind.js
 delete mode 100644 src/data/projects/types.ts
 rename src/pages/{_app.js => _app.tsx} (67%)
 rename src/pages/{_document.js => _document.tsx} (100%)
 rename src/pages/about/{index.js => index.tsx} (76%)
 rename src/pages/blog/{[...slug].js => [...slug].tsx} (53%)
 rename src/pages/blog/{index.js => index.tsx} (53%)
 rename src/pages/{index.js => index.tsx} (88%)
 rename src/pages/projects/{index.js => index.tsx} (88%)
 create mode 100644 src/types.ts

diff --git a/.gitignore b/.gitignore
index 4e826e0..0714fe0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ node_modules
 !/public/robots.txt
 /public/og-images/*
 !/src/public/og-images/.gitkeep
+tsconfig.tsbuildinfo
diff --git a/src/components/Button.js b/src/components/Button.tsx
similarity index 65%
rename from src/components/Button.js
rename to src/components/Button.tsx
index 4e5942f..a76278a 100644
--- a/src/components/Button.js
+++ b/src/components/Button.tsx
@@ -1,6 +1,7 @@
+import * as React from 'react';
 import clsx from 'clsx'
 
-export const Button = ({ children, className }) => {
+export const Button = ({ children, className }: { children: React.ReactNode, className?: string }) => {
   return (
     <div
       className={clsx(
diff --git a/src/components/Footer.js b/src/components/Footer.tsx
similarity index 94%
rename from src/components/Footer.js
rename to src/components/Footer.tsx
index bd60c5f..ae02d8d 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.tsx
@@ -1,5 +1,3 @@
-import Link from 'next/link'
-
 // "It is the power of the mind to be unconquerable." – Seneca
 
 export const Footer = () => (
diff --git a/src/components/Header.js b/src/components/Header.tsx
similarity index 75%
rename from src/components/Header.js
rename to src/components/Header.tsx
index ca1ef3d..2466aa0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.tsx
@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Home, GitHub, Twitter } from 'react-feather'
@@ -7,17 +13,26 @@ import clsx from 'clsx'
 
 const PADDING = 8
 
-const useNavigation = (theme) => {
-  const navRef = useRef()
-  const homeRef = useRef()
-  const projectsRef = useRef()
-  const aboutRef = useRef()
+const useNavigation = (theme: string) => {
+  const navRef = useRef<HTMLElement>()
+  const homeRef = useRef<HTMLElement>()
+  const projectsRef = useRef<HTMLElement>()
+  const aboutRef = useRef<HTMLElement>()
   const router = useRouter()
   const [bounds, setBounds] = useState({ left: 10000, width: 0 })
 
   const path = router.pathname
 
   const updateBounds = useCallback(() => {
+    if (
+      !navRef.current ||
+      !homeRef.current ||
+      !projectsRef.current ||
+      !aboutRef.current
+    ) {
+      return
+    }
+
     const root = navRef.current.getBoundingClientRect()
 
     let navBounds
@@ -58,7 +73,7 @@ const useNavigation = (theme) => {
   }
 }
 
-const Separator = ({ className }) => {
+const Separator = ({ className }: { className?: string }) => {
   return (
     <div className={clsx(className, 'px-3 sm:px-6')}>
       <div className="border-l w-0 border-solid border-zinc-500 dark:border-zinc-500">
@@ -76,15 +91,8 @@ const styles = {
 
 export const Header = () => {
   const [theme, setTheme] = useState('default')
-  const {
-    navRef,
-    homeRef,
-    projectsRef,
-    aboutRef,
-    left,
-    width,
-    updateNavigation,
-  } = useNavigation(theme)
+  const { navRef, homeRef, projectsRef, aboutRef, left, width } =
+    useNavigation(theme)
 
   return (
     <div
@@ -95,7 +103,7 @@ export const Header = () => {
     >
       <nav
         className="relative w-full sm:w-auto sm:mx-auto pl-4 pr-2 sm:px-6 sm:pr-4 py-4 backdrop-blur flex items-center bg-black/80 dark:bg-white/80 sm:rounded-md pointer-events-auto"
-        ref={navRef}
+        ref={navRef as any}
       >
         <div
           className="bg-black/90 dark:bg-zinc-400/90 rounded-lg h-8 absolute z-1 transition-[left,width] ease-in"
@@ -107,8 +115,11 @@ export const Header = () => {
           &nbsp;
         </div>
         <div className="z-1 flex items-center w-full z-10">
-          <Link href="/" className={clsx(styles.underline)} ref={homeRef}>
-
+          <Link
+            href="/"
+            className={clsx(styles.underline)}
+            ref={homeRef as any}
+          >
             <span className={clsx(styles.homeText, 'hidden sm:inline')}>
               jsonnull
             </span>
@@ -117,34 +128,35 @@ export const Header = () => {
               width={18}
               height={18}
             />
-
           </Link>
           <Separator />
           <ul className="flex gap-3 sm:gap-6">
-            {[
-              ['/projects/', 'projects', projectsRef],
-              // ['/blog/', 'blog'],
-              ['/about/', 'about', aboutRef],
-            ].map(([url, title, ref]) => {
+            {(
+              [
+                ['/projects/', 'projects', projectsRef],
+                // ['/blog/', 'blog'],
+                ['/about/', 'about', aboutRef],
+              ] as [string, string, MutableRefObject<HTMLAnchorElement>][]
+            ).map(([url, title, ref]) => {
               return (
                 <li key={url}>
                   <Link href={url} className={clsx(styles.underline)} ref={ref}>
-
                     {title}
-
                   </Link>
                 </li>
-              );
+              )
             })}
           </ul>
           <Separator className="pr-1 sm:pr-4" />
           <Theme onChange={(theme) => setTheme(theme)} />
           <Separator className="px-1 sm:px-4 hidden sm:block" />
           <ul className="flex gap-1 sm:gap-2 ml-auto leading-none items-center text-zinc-400 dark:text-zinc-600">
-            {[
-              [GitHub, 'https://github.com/jsonnull'],
-              [Twitter, 'https://twitter.com/jsonnull'],
-            ].map(([Icon, href]) => {
+            {(
+              [
+                [GitHub, 'https://github.com/jsonnull'],
+                [Twitter, 'https://twitter.com/jsonnull'],
+              ] as [any, string][]
+            ).map(([Icon, href]) => {
               return (
                 <a
                   href={href}
@@ -161,5 +173,5 @@ export const Header = () => {
         </div>
       </nav>
     </div>
-  );
+  )
 }
diff --git a/src/components/Page.js b/src/components/Page.tsx
similarity index 79%
rename from src/components/Page.js
rename to src/components/Page.tsx
index 3c67350..f445df6 100644
--- a/src/components/Page.js
+++ b/src/components/Page.tsx
@@ -1,6 +1,7 @@
+import * as React from 'react'
 import Head from 'next/head'
 import { Header } from './'
-import { Spacer } from './Spacer.tsx'
+import { Spacer } from './Spacer'
 
 export const Page = ({
   children,
@@ -8,6 +9,12 @@ export const Page = ({
   description = "Jason Nall's technical blog",
   pagePath,
   ogImagePath,
+}: {
+  children: React.ReactNode
+  title?: string
+  description?: string
+  pagePath: string
+  ogImagePath?: string
 }) => {
   const baseUrl =
     process.env.NEXT_PUBLIC_NETLIFY_URL &&
@@ -15,7 +22,7 @@ export const Page = ({
       ? process.env.NEXT_PUBLIC_NETLIFY_URL
       : process.env.NEXT_PUBLIC_SITE_URL
 
-  const domain = new URL(baseUrl).hostname
+  const domain = new URL(baseUrl!).hostname
   const pageUrl = new URL(pagePath, baseUrl)
 
   let ogImageURL
@@ -31,19 +38,19 @@ export const Page = ({
         <meta name="description" content={description} />
 
         {/* Open Graph meta tags */}
-        <meta property="og:url" content={pageUrl} />
+        <meta property="og:url" content={pageUrl.toString()} />
         <meta property="og:type" content="website" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
-        {ogImageURL && <meta property="og:image" content={ogImageURL} />}
+        {ogImageURL && <meta property="og:image" content={ogImageURL.toString()} />}
 
         {/* Twitter meta tags */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta property="twitter:domain" content={domain} />
-        <meta property="twitter:url" content={pageUrl} />
+        <meta property="twitter:url" content={pageUrl.toString()} />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />
-        {ogImageURL && <meta name="twitter:image" content={ogImageURL} />}
+        {ogImageURL && <meta name="twitter:image" content={ogImageURL.toString()} />}
       </Head>
       <Header />
       <div className="flex flex-col">{children}</div>
diff --git a/src/components/Project.js b/src/components/Project.tsx
similarity index 89%
rename from src/components/Project.js
rename to src/components/Project.tsx
index 2313096..a5e784c 100644
--- a/src/components/Project.js
+++ b/src/components/Project.tsx
@@ -7,6 +7,13 @@ export const Project = ({
   milestone,
   className,
   retired,
+}: {
+  name: string
+  description: string
+  progress?: number
+  milestone: string
+  className?: string
+  retired?: boolean
 }) => {
   return (
     <div className={clsx(className, 'flex flex-col', retired && 'text-dimmed')}>
diff --git a/src/components/ProjectGrid.js b/src/components/ProjectGrid.tsx
similarity index 76%
rename from src/components/ProjectGrid.js
rename to src/components/ProjectGrid.tsx
index f8675ec..928a80a 100644
--- a/src/components/ProjectGrid.js
+++ b/src/components/ProjectGrid.tsx
@@ -1,7 +1,14 @@
 import { Project } from './Project'
 import clsx from 'clsx'
+import { Project as ProjectType } from '../types'
 
-export const ProjectGrid = ({ projects, retired }) => {
+export const ProjectGrid = ({
+  projects,
+  retired,
+}: {
+  projects: ProjectType[]
+  retired?: boolean
+}) => {
   return (
     <div
       className={clsx('grid grid-cols-1 md:grid-cols-2 grid-flow-row gap-16')}
diff --git a/src/components/Theme.js b/src/components/Theme.tsx
similarity index 85%
rename from src/components/Theme.js
rename to src/components/Theme.tsx
index 2996641..95168f8 100644
--- a/src/components/Theme.js
+++ b/src/components/Theme.tsx
@@ -10,7 +10,7 @@ import { Sun, Monitor, Moon } from 'react-feather'
 import { usePopper } from 'react-popper'
 import clsx from 'clsx'
 
-const themes = [
+const themes: [string, any, string][] = [
   ['light', Sun, 'Light'],
   ['dark', Moon, 'Dark'],
   ['system', Monitor, 'System'],
@@ -19,7 +19,7 @@ const themes = [
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
-const applyTheme = (theme) => {
+const applyTheme = (theme: string) => {
   if (
     theme === 'dark' ||
     (theme === 'system' &&
@@ -31,7 +31,7 @@ const applyTheme = (theme) => {
   }
 }
 
-const useTheme = ({ onChange }) => {
+const useTheme = ({ onChange }: { onChange: (theme: string) => void }) => {
   const initialTheme =
     typeof window !== 'undefined' && 'theme' in localStorage
       ? localStorage.theme
@@ -40,7 +40,7 @@ const useTheme = ({ onChange }) => {
   const [theme, setThemeState] = useState(initialTheme)
 
   const setTheme = useCallback(
-    (theme) => {
+    (theme: string) => {
       setThemeState(theme)
       localStorage.theme = theme
       applyTheme(theme)
@@ -58,17 +58,17 @@ const useTheme = ({ onChange }) => {
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
-    mediaQuery.addEventListener('change', applyTheme)
+    mediaQuery.addEventListener('change', () => applyTheme(theme))
 
     return () => {
-      mediaQuery.removeEventListener('change', applyTheme)
+      mediaQuery.removeEventListener('change', () => applyTheme(theme))
     }
   }, [])
 
   return [theme, setTheme]
 }
 
-export const Theme = ({ onChange }) => {
+export const Theme = ({ onChange }: { onChange: (theme: string) => void }) => {
   const [theme, setTheme] = useTheme({ onChange })
   const [referenceElement, setReferenceElement] = useState(null)
   const [popperElement, setPopperElement] = useState(null)
@@ -77,14 +77,14 @@ export const Theme = ({ onChange }) => {
   return (
     <Listbox value={theme} onChange={setTheme}>
       <Listbox.Button
-        ref={setReferenceElement}
+        ref={setReferenceElement as any}
         className="p-2 rounded-full hover:bg-zinc-600 dark:hover:bg-zinc-400"
       >
         <Sun width={18} height={18} className="block dark:hidden" />
         <Moon width={18} height={18} className="hidden dark:block" />
       </Listbox.Button>
       <Listbox.Options
-        ref={setPopperElement}
+        ref={setPopperElement as any}
         className="rounded bg-black dark:bg-white text-white dark:text-black mb-3 overflow-hidden "
         style={styles.popper}
         {...attributes.popper}
diff --git a/src/components/Title.js b/src/components/Title.tsx
similarity index 65%
rename from src/components/Title.js
rename to src/components/Title.tsx
index 6d6204a..3c835d6 100644
--- a/src/components/Title.js
+++ b/src/components/Title.tsx
@@ -1,4 +1,6 @@
-export const Title = ({ children }) => {
+import * as React from 'react';
+
+export const Title = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex text-3xl font-mono tracking-tight">
       <h1 className="">{children}</h1>
diff --git a/src/components/index.js b/src/components/index.js
deleted file mode 100644
index 4127721..0000000
--- a/src/components/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './Footer'
-export * from './Header'
-export * from './Page'
-export * from './Title'
-import { tailwind } from './tailwind'
-
-export const Wrapper = tailwind('div', 'w-full max-w-[900px] inset-x-0 mx-auto px-8')
-
-export const Heading = tailwind('h1', 'text-3xl font-semibold tracking-tight')
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 0000000..c842275
--- /dev/null
+++ b/src/components/index.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import * as React from 'react'
+export * from './Footer'
+export * from './Header'
+export * from './Page'
+export * from './Title'
+
+export const Wrapper = (props: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  return (
+    <div
+      className={clsx(
+        'w-full max-w-[900px] inset-x-0 mx-auto px-8',
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export const Heading = (props: {
+  children: React.ReactNode
+  className?: string
+}) => {
+  return (
+    <h1
+      className={clsx(
+'text-3xl font-semibold tracking-tight',
+        props.className
+      )}
+    >
+      {props.children}
+    </h1>
+  )
+}
diff --git a/src/components/tailwind.js b/src/components/tailwind.js
deleted file mode 100644
index 85d5909..0000000
--- a/src/components/tailwind.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-export const tailwind = (el, tailwind) =>
-  ({ children = [], className = '' }) => {
-    return React.createElement(
-      el,
-      { className: [tailwind, className].filter(Boolean).join(' ') },
-      ...children
-    )
-  }
-
diff --git a/src/data/projects/index.ts b/src/data/projects/index.ts
index 2b48c8d..7be4fbf 100644
--- a/src/data/projects/index.ts
+++ b/src/data/projects/index.ts
@@ -1,4 +1,4 @@
-import type { Project } from './types'
+import type { Project } from '../../types'
 
 export const alea: Project = {
   name: 'Alea',
diff --git a/src/data/projects/past.ts b/src/data/projects/past.ts
index 803afda..c74e0ca 100644
--- a/src/data/projects/past.ts
+++ b/src/data/projects/past.ts
@@ -1,4 +1,4 @@
-import type { Project } from './types'
+import type { Project } from '../../types'
 
 export const reactRoutine: Project = {
   name: 'React Routine',
diff --git a/src/data/projects/types.ts b/src/data/projects/types.ts
deleted file mode 100644
index b40596d..0000000
--- a/src/data/projects/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Project {
-  name: string
-  description: string
-  milestones: { name: string; progress?: number }[]
-}
diff --git a/src/pages/_app.js b/src/pages/_app.tsx
similarity index 67%
rename from src/pages/_app.js
rename to src/pages/_app.tsx
index 748c205..887162e 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import '../global.css'
 import BaseApp from 'next/app'
 
@@ -5,7 +6,7 @@ class App extends BaseApp {
   render() {
     const { Component, pageProps } = this.props
 
-    const getLayout = Component.getLayout || ((page) => page)
+    const getLayout = Component.getLayout || ((page: React.ReactNode) => page)
 
     return getLayout(<Component {...pageProps} />, pageProps)
   }
diff --git a/src/pages/_document.js b/src/pages/_document.tsx
similarity index 100%
rename from src/pages/_document.js
rename to src/pages/_document.tsx
diff --git a/src/pages/about/index.js b/src/pages/about/index.tsx
similarity index 76%
rename from src/pages/about/index.js
rename to src/pages/about/index.tsx
index 1908aa8..cd2da7b 100644
--- a/src/pages/about/index.js
+++ b/src/pages/about/index.tsx
@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { Title, Page, Wrapper } from '../../components'
-import { Spacer } from '../../components/Spacer.tsx'
+import { Spacer } from '../../components/Spacer'
 
 const About = () => {
   return (
@@ -15,7 +16,7 @@ const About = () => {
   )
 }
 
-About.getLayout = (page) => (
+About.getLayout = (page: React.ReactNode) => (
   <Page title="About" pagePath="/about">
     {page}
   </Page>
diff --git a/src/pages/blog/[...slug].js b/src/pages/blog/[...slug].tsx
similarity index 53%
rename from src/pages/blog/[...slug].js
rename to src/pages/blog/[...slug].tsx
index c7fa30e..d905073 100644
--- a/src/pages/blog/[...slug].js
+++ b/src/pages/blog/[...slug].tsx
@@ -1,10 +1,12 @@
+import type { GetStaticPaths, GetStaticProps } from 'next'
 import { promises } from 'fs'
 import Markdown from 'markdown-to-jsx'
 import matter from 'gray-matter'
 import { Heading, Page, Wrapper } from '../../components'
 import { getPosts } from '../../lib/getPosts'
+import type { PostFrontMatter } from '../../types'
 
-export async function getStaticPaths() {
+export const getStaticPaths: GetStaticPaths = async () => {
   const paths = []
   for await (const { slug } of getPosts()) {
     paths.push({ params: { slug } })
@@ -16,17 +18,26 @@ export async function getStaticPaths() {
   }
 }
 
-export async function getStaticProps(context) {
-  const path = context.params.slug.join('/')
-  const slug = context.params.slug.join('-')
+interface PageProps {
+  data: PostFrontMatter
+  content: string
+  path: string
+  slug: string
+}
+
+export const getStaticProps: GetStaticProps = async (
+  context
+): Promise<{ props: PageProps }> => {
+  const path = (context.params?.slug as string[]).join('/')
+  const slug = (context.params?.slug as string[]).join('-')
 
   const { data, content } = await promises
     .readFile(`./content/blog/${path}.md`)
-    .then((buf) => matter(buf.toString(), { delims: '```' }))
+    .then((buf) => matter(buf.toString(), { delimiters: '```' }))
 
   return {
     props: {
-      data,
+      data: data as PostFrontMatter,
       content,
       path,
       slug,
@@ -34,7 +45,7 @@ export async function getStaticProps(context) {
   }
 }
 
-const Post = ({ data, content }) => {
+const Post = ({ data, content }: PageProps) => {
   return (
     <Wrapper>
       <Heading>{data.title}</Heading>
@@ -43,7 +54,7 @@ const Post = ({ data, content }) => {
   )
 }
 
-Post.getLayout = (page, { data, path, slug }) => (
+Post.getLayout = (page: React.ReactNode, { data, path }: PageProps) => (
   <Page
     title={data.title}
     pagePath={`/blog/${path}/`}
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.tsx
similarity index 53%
rename from src/pages/blog/index.js
rename to src/pages/blog/index.tsx
index ccb22ca..ccfa75f 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.tsx
@@ -1,17 +1,22 @@
+import * as React from 'react'
+import type { GetStaticProps } from 'next'
 import Link from 'next/link'
-import { ClearHeader, Heading, Page, Wrapper } from '../../components'
+import { Heading, Page, Wrapper } from '../../components'
 import { promises } from 'fs'
 import matter from 'gray-matter'
 import { getPosts } from '../../lib/getPosts'
+import type { Post } from '../../types';
 
-export async function getStaticProps(context) {
-  const posts = []
+export const getStaticProps: GetStaticProps = async (): Promise<{
+  props: { posts: Post[] }
+}> => {
+  const posts: Post[] = []
   for await (const { url, path } of getPosts()) {
     const { data } = await promises
       .readFile(path)
-      .then((buf) => matter(buf.toString(), { delims: '```' }))
+      .then((buf) => matter(buf.toString(), { delimiters: '```' }))
 
-    posts.push({ ...data, url })
+    posts.push({ ...data, url } as any)
   }
 
   return {
@@ -21,7 +26,7 @@ export async function getStaticProps(context) {
   }
 }
 
-const Posts = ({ posts }) => {
+const Posts = ({ posts }: { posts: Post[] }) => {
   return (
     <Wrapper>
       <Heading>Blog</Heading>
@@ -30,13 +35,13 @@ const Posts = ({ posts }) => {
           <Link key={post.url} href={post.url}>
             {post.title}
           </Link>
-        );
+        )
       })}
     </Wrapper>
-  );
+  )
 }
 
-Posts.getLayout = (page) => (
+Posts.getLayout = (page: React.ReactNode) => (
   <Page title="Blog" pagePath="/blog/">
     {page}
   </Page>
diff --git a/src/pages/index.js b/src/pages/index.tsx
similarity index 88%
rename from src/pages/index.js
rename to src/pages/index.tsx
index 917b0ba..01a528b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.tsx
@@ -3,14 +3,14 @@ import Link from 'next/link'
 import Image from 'next/image'
 import clsx from 'clsx'
 import { Heading, Page, Wrapper } from '../components'
-import { Spacer } from '../components/Spacer.tsx'
+import { Spacer } from '../components/Spacer'
 import { ProjectGrid } from '../components/ProjectGrid'
 import { Button } from '../components/Button'
 import { profileDataURI } from '../lib/profileDataURI'
-import { jsonnull, configuration } from '../data/projects/index.ts'
+import { jsonnull, configuration } from '../data/projects'
 import { ArrowRight } from 'react-feather'
 
-export const Title = ({ className }) => {
+export const Title = ({ className }: { className?: string }) => {
   return (
     <h1
       className={clsx(
@@ -56,21 +56,19 @@ const Home = () => {
       <Spacer medium />
       <div className="flex justify-center">
         <Link href="/projects">
-
           <Button>
             <div className="flex items-center underline-themed">
               See my other projects
               <ArrowRight size={18} className="ml-2" />
             </div>
           </Button>
-
         </Link>
       </div>
     </Wrapper>
-  );
+  )
 }
 
-Home.getLayout = (page) => (
+Home.getLayout = (page: React.ReactNode) => (
   <Page title="Home" pagePath="/" ogImagePath="/og-images/index.png">
     {page}
   </Page>
diff --git a/src/pages/projects/index.js b/src/pages/projects/index.tsx
similarity index 88%
rename from src/pages/projects/index.js
rename to src/pages/projects/index.tsx
index d71eccd..b3d7dbf 100644
--- a/src/pages/projects/index.js
+++ b/src/pages/projects/index.tsx
@@ -1,9 +1,10 @@
+import * as React from 'react'
 import { Heading, Page, Wrapper, Title } from '../../components'
-import { Spacer } from '../../components/Spacer.tsx'
+import { Spacer } from '../../components/Spacer'
 import { Project } from '../../components/Project'
 import { ProjectGrid } from '../../components/ProjectGrid'
-import { configuration, jsonnull, novel } from '../../data/projects/index.ts'
-import * as past from '../../data/projects/past.ts'
+import { configuration, jsonnull, novel } from '../../data/projects'
+import * as past from '../../data/projects/past'
 
 const Projects = () => {
   return (
@@ -43,7 +44,7 @@ const Projects = () => {
   )
 }
 
-Projects.getLayout = (page) => (
+Projects.getLayout = (page: React.ReactNode) => (
   <Page title="Projects" pagePath="/projects/">
     {page}
   </Page>
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..bf6d675
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,20 @@
+export interface PostFrontMatter {
+  template: string
+  title: string
+  date: string
+}
+
+export interface Post {
+  template: string
+  title: string
+  date: string
+  content: string
+  url: string
+}
+
+export interface Project {
+  name: string
+  description: string
+  milestones: { name: string; progress?: number }[]
+}
+

From 7ad66b1199e8d44934ce493bd262909cfdf8a404 Mon Sep 17 00:00:00 2001
From: Jason Nall <jsonnull@gmail.com>
Date: Sat, 11 Feb 2023 14:46:54 -0500
Subject: [PATCH 4/4] Update formatting options and run formatter.

---
 .prettierrc                                  |   3 -
 .prettierrc.js                               |  11 +
 content/blog/2020/04/test-post.md            |   6 +-
 package.json                                 |   4 +-
 pnpm-lock.yaml                               | 445 ++++++++++++++++++-
 scripts/screenshots.tsx                      |  13 +-
 src/components/Button.tsx                    |  34 +-
 src/components/Footer.tsx                    |  26 +-
 src/components/Header.tsx                    | 312 ++++++-------
 src/components/Page.tsx                      | 101 +++--
 src/components/Project.tsx                   |  78 ++--
 src/components/ProjectGrid.tsx               |  50 +--
 src/components/Spacer.tsx                    |  26 +-
 src/components/Theme.tsx                     | 182 ++++----
 src/components/Title.tsx                     |  16 +-
 src/components/index.tsx                     |  57 +--
 src/data/projects/index.ts                   |  37 +-
 src/data/projects/past.ts                    |  20 +-
 src/lib/openGraph/generateOpenGraphImage.tsx | 280 ++++++------
 src/pages/_app.tsx                           |  18 +-
 src/pages/_document.tsx                      |  38 +-
 src/pages/about/index.tsx                    |  40 +-
 src/pages/blog/[...slug].tsx                 | 104 +++--
 src/pages/blog/index.tsx                     |  80 ++--
 src/pages/index.tsx                          | 129 +++---
 src/pages/projects/index.tsx                 |  96 ++--
 src/types.ts                                 |  23 +-
 27 files changed, 1311 insertions(+), 918 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.js

diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 61377ff..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,3 +0,0 @@
-semi: false
-singleQuote: true
-proseWrap: 'always'
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..c19901c
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,11 @@
+module.exports = {
+    plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+    pluginSearchDirs: false,
+    printWidth: 100,
+    tabWidth: 4,
+    "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
+    importOrderSeparation: false,
+    importOrderSortSpecifiers: true,
+    proseWrap: "always",
+};
+
diff --git a/content/blog/2020/04/test-post.md b/content/blog/2020/04/test-post.md
index 5bcc6b3..cb45f21 100644
--- a/content/blog/2020/04/test-post.md
+++ b/content/blog/2020/04/test-post.md
@@ -1,8 +1,8 @@
 ```json
 {
-  "template": "post",
-  "title": "A Test Blog Post",
-  "date": "2020-04-11"
+    "template": "post",
+    "title": "A Test Blog Post",
+    "date": "2020-04-11"
 }
 ```
 
diff --git a/package.json b/package.json
index 1524737..04089c0 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "jsonnull.com",
   "private": true,
   "scripts": {
-    "format": "prettier --write 'src/**/*.js' './*.js'",
+    "format": "prettier --write '**/*.{ts,tsx,md}'",
     "screenshots": "ts-node scripts/screenshots.tsx",
     "dev": "next dev",
     "build": "tailwindcss -i src/global.css -o .css/bundle.css && ts-node scripts/screenshots && next build",
@@ -23,11 +23,13 @@
   "devDependencies": {
     "@netlify/plugin-nextjs": "^4.30.4",
     "@resvg/resvg-js": "^2.4.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/node": "^18.13.0",
     "@types/react": "^18.0.28",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "prettier": "2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "satori": "^0.2.3",
     "tailwindcss": "3.2.6",
     "ts-node": "^10.9.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b86f213..926d21a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ specifiers:
   '@netlify/plugin-nextjs': ^4.30.4
   '@popperjs/core': ^2.11.6
   '@resvg/resvg-js': ^2.4.0
+  '@trivago/prettier-plugin-sort-imports': ^4.0.0
   '@types/node': ^18.13.0
   '@types/react': ^18.0.28
   autoprefixer: ^10.4.13
@@ -14,6 +15,7 @@ specifiers:
   next: ^13.1.6
   postcss: ^8.4.21
   prettier: 2.8.4
+  prettier-plugin-tailwindcss: ^0.2.2
   react: 18.2.0
   react-dom: 18.2.0
   react-feather: ^2.0.10
@@ -38,11 +40,13 @@ dependencies:
 devDependencies:
   '@netlify/plugin-nextjs': 4.30.4
   '@resvg/resvg-js': 2.4.0
+  '@trivago/prettier-plugin-sort-imports': 4.0.0_prettier@2.8.4
   '@types/node': 18.13.0
   '@types/react': 18.0.28
   autoprefixer: 10.4.13_postcss@8.4.21
   postcss: 8.4.21
   prettier: 2.8.4
+  prettier-plugin-tailwindcss: 0.2.2_bwu25c6byziayi365gfglcp76m
   satori: 0.2.3
   tailwindcss: 3.2.6_aesdjsunmf4wiehhujt67my7tu
   ts-node: 10.9.1_4bewfcp2iebiwuold25d6rgcsy
@@ -50,6 +54,251 @@ devDependencies:
 
 packages:
 
+  /@ampproject/remapping/2.2.0:
+    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.1.1
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
+  /@babel/code-frame/7.18.6:
+    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: true
+
+  /@babel/compat-data/7.20.14:
+    resolution: {integrity: sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core/7.17.8:
+    resolution: {integrity: sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.17.7
+      '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.17.8
+      '@babel/helper-module-transforms': 7.20.11
+      '@babel/helpers': 7.20.13
+      '@babel/parser': 7.18.9
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+      convert-source-map: 1.9.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator/7.17.7:
+    resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.17.0
+      jsesc: 2.5.2
+      source-map: 0.5.7
+    dev: true
+
+  /@babel/generator/7.20.14:
+    resolution: {integrity: sha512-AEmuXHdcD3A52HHXxaTmYlb8q/xMEhoRP67B3T4Oq7lbmSoqroMZzjnGj3+i1io3pdnF8iBYVu4Ilj+c4hBxYg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-compilation-targets/7.20.7_@babel+core@7.17.8:
+    resolution: {integrity: sha512-4tGORmfQcrc+bvrjb5y3dG9Mx1IOZjsHqQVUz7XCNHO+iTmqxWnVg3KRygjGmpRLJGdQSKuvFinbIb0CnZwHAQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.20.14
+      '@babel/core': 7.17.8
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.5
+      lru-cache: 5.1.1
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.20.7
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/helper-module-imports/7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/helper-module-transforms/7.20.11:
+    resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.20.2
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.20.13
+      '@babel/types': 7.20.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-simple-access/7.20.2:
+    resolution: {integrity: sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/helper-string-parser/7.19.4:
+    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-option/7.18.6:
+    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers/7.20.13:
+    resolution: {integrity: sha512-nzJ0DWCL3gB5RCXbUO3KIMMsBY2Eqbx8mBpKGE/02PgyRQFcPQLbkQ1vyy596mZLaP+dAfD+R4ckASzNVmW3jg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.20.7
+      '@babel/traverse': 7.20.13
+      '@babel/types': 7.20.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight/7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
+  /@babel/parser/7.18.9:
+    resolution: {integrity: sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
+    dev: true
+
+  /@babel/parser/7.20.15:
+    resolution: {integrity: sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/template/7.20.7:
+    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.20.15
+      '@babel/types': 7.20.7
+    dev: true
+
+  /@babel/traverse/7.17.3:
+    resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.17.7
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.18.9
+      '@babel/types': 7.17.0
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/traverse/7.20.13:
+    resolution: {integrity: sha512-kMJXfF0T6DIS9E8cgdLCSAL+cuCK+YEZHWiLK0SXpTo8YRj5lpJu3CDNKiIBCne4m9hhTIqUg6SYTAI39tAiVQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.20.14
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.20.15
+      '@babel/types': 7.20.7
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types/7.17.0:
+    resolution: {integrity: sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
+  /@babel/types/7.20.7:
+    resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.19.4
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
   /@cspotcode/source-map-support/0.8.1:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -73,11 +322,33 @@ packages:
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
     dev: true
 
+  /@jridgewell/gen-mapping/0.1.1:
+    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
+  /@jridgewell/gen-mapping/0.3.2:
+    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.9
+    dev: true
+
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
     engines: {node: '>=6.0.0'}
     dev: true
 
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
   /@jridgewell/sourcemap-codec/1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
@@ -652,6 +923,24 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /@trivago/prettier-plugin-sort-imports/4.0.0_prettier@2.8.4:
+    resolution: {integrity: sha512-Tyuk5ZY4a0e2MNFLdluQO9F6d1awFQYXVVujEPFfvKPPXz8DADNHzz73NMhwCSXGSuGGZcA/rKOyZBrxVNMxaA==}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x
+    dependencies:
+      '@babel/core': 7.17.8
+      '@babel/generator': 7.17.7
+      '@babel/parser': 7.18.9
+      '@babel/traverse': 7.17.3
+      '@babel/types': 7.17.0
+      javascript-natural-sort: 0.7.1
+      lodash: 4.17.21
+      prettier: 2.8.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@tsconfig/node10/1.0.9:
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
     dev: true
@@ -722,6 +1011,13 @@ packages:
     hasBin: true
     dev: true
 
+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
   /ansi-styles/4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -837,6 +1133,15 @@ packages:
   /caniuse-lite/1.0.30001451:
     resolution: {integrity: sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w==}
 
+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -887,6 +1192,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -894,6 +1205,10 @@ packages:
       color-name: 1.1.4
     dev: true
 
+  /color-name/1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
   /color-name/1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
@@ -925,6 +1240,10 @@ packages:
     resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
     dev: true
 
+  /convert-source-map/1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: true
+
   /cookie-es/0.5.0:
     resolution: {integrity: sha512-RyZrFi6PNpBFbIaQjXDlFIhFVqV42QeKSZX1yQIl6ihImq6vcHNGMtqQ/QzY3RMPuYSkvsRwtnt5M9NeYxKt0g==}
     dev: true
@@ -1072,6 +1391,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
   /esprima/4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -1194,6 +1518,11 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /get-port-please/2.6.1:
     resolution: {integrity: sha512-4PDSrL6+cuMM1xs6w36ZIkaKzzE0xzfVBCfebHIJ3FE8iB9oic/ECwPw3iNiD4h1AoJ5XLLBhEviFAVrZsDC5A==}
     dependencies:
@@ -1227,6 +1556,11 @@ packages:
       is-glob: 4.0.3
     dev: true
 
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /globalyzer/0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
     dev: true
@@ -1272,6 +1606,11 @@ packages:
       uncrypto: 0.1.2
     dev: true
 
+  /has-flag/3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
   /has-flag/4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1424,9 +1763,12 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /javascript-natural-sort/0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+    dev: true
+
   /js-tokens/4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
-    dev: false
 
   /js-yaml/3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
@@ -1436,6 +1778,18 @@ packages:
       esprima: 4.0.1
     dev: false
 
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /json5/2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /jsonfile/6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
     dependencies:
@@ -1487,6 +1841,10 @@ packages:
     resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
     dev: true
 
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1494,6 +1852,12 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
+  /lru-cache/5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -1889,6 +2253,59 @@ packages:
       tunnel-agent: 0.6.0
     dev: true
 
+  /prettier-plugin-tailwindcss/0.2.2_bwu25c6byziayi365gfglcp76m:
+    resolution: {integrity: sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      '@prettier/plugin-php': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: '>=2.2.0'
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@prettier/plugin-php':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      '@trivago/prettier-plugin-sort-imports': 4.0.0_prettier@2.8.4
+      prettier: 2.8.4
+    dev: true
+
   /prettier/2.8.4:
     resolution: {integrity: sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==}
     engines: {node: '>=10.13.0'}
@@ -2083,6 +2500,11 @@ packages:
       node-forge: 1.3.1
     dev: true
 
+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+    dev: true
+
   /semver/7.3.8:
     resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
@@ -2149,6 +2571,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map/0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /sprintf-js/1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: false
@@ -2204,6 +2631,13 @@ packages:
       react: 18.2.0
     dev: false
 
+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
   /supports-color/7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2277,6 +2711,11 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
   /to-regex-range/5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2458,6 +2897,10 @@ packages:
     engines: {node: '>=0.4'}
     dev: true
 
+  /yallist/3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
diff --git a/scripts/screenshots.tsx b/scripts/screenshots.tsx
index 5b39584..ba555ec 100644
--- a/scripts/screenshots.tsx
+++ b/scripts/screenshots.tsx
@@ -1,8 +1,9 @@
-import { generateOpenGraphImage } from '../src/lib/openGraph/generateOpenGraphImage'
+import { generateOpenGraphImage } from "../src/lib/openGraph/generateOpenGraphImage";
 
 //
-;(async function generateOpenGraphImages() {
-  await generateOpenGraphImage({
-    slug: 'index',
-  })
-})()
+
+(async function generateOpenGraphImages() {
+    await generateOpenGraphImage({
+        slug: "index",
+    });
+})();
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a76278a..3ccd481 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,15 +1,21 @@
-import * as React from 'react';
-import clsx from 'clsx'
+import clsx from "clsx";
+import * as React from "react";
 
-export const Button = ({ children, className }: { children: React.ReactNode, className?: string }) => {
-  return (
-    <div
-      className={clsx(
-        'p-3 px-6 bg-zinc-900 dark:bg-zinc-200 text-white dark:text-black font-semibold dark:font-bold cursor-pointer',
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}
+export const Button = ({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) => {
+    return (
+        <div
+            className={clsx(
+                "cursor-pointer bg-zinc-900 p-3 px-6 font-semibold text-white dark:bg-zinc-200 dark:font-bold dark:text-black",
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ae02d8d..5129898 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,17 +1,17 @@
 // "It is the power of the mind to be unconquerable." – Seneca
 
 export const Footer = () => (
-  <div className="flex inset-x-0 text-xs text-zinc-500 p-8 pb-32 mt-auto bg-zinc-200">
-    <span className="font-mono">0x0000</span>
-    <div className="ml-auto flex">
-      <a
-        className="hover:underline decoration-zinc-500"
-        href="https://github.com/jsonnull/jsonnull.com"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Source on GitHub
-      </a>
+    <div className="inset-x-0 mt-auto flex bg-zinc-200 p-8 pb-32 text-xs text-zinc-500">
+        <span className="font-mono">0x0000</span>
+        <div className="ml-auto flex">
+            <a
+                className="decoration-zinc-500 hover:underline"
+                href="https://github.com/jsonnull/jsonnull.com"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                Source on GitHub
+            </a>
+        </div>
     </div>
-  </div>
-)
+);
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2466aa0..728459b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,177 +1,159 @@
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { Home, GitHub, Twitter } from 'react-feather'
-import { Theme } from './Theme'
-import clsx from 'clsx'
-
-const PADDING = 8
+import clsx from "clsx";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
+import { GitHub, Home, Twitter } from "react-feather";
+import { Theme } from "./Theme";
+
+const PADDING = 8;
 
 const useNavigation = (theme: string) => {
-  const navRef = useRef<HTMLElement>()
-  const homeRef = useRef<HTMLElement>()
-  const projectsRef = useRef<HTMLElement>()
-  const aboutRef = useRef<HTMLElement>()
-  const router = useRouter()
-  const [bounds, setBounds] = useState({ left: 10000, width: 0 })
-
-  const path = router.pathname
-
-  const updateBounds = useCallback(() => {
-    if (
-      !navRef.current ||
-      !homeRef.current ||
-      !projectsRef.current ||
-      !aboutRef.current
-    ) {
-      return
-    }
-
-    const root = navRef.current.getBoundingClientRect()
-
-    let navBounds
-
-    if (path === '/') {
-      navBounds = homeRef.current.getBoundingClientRect()
-    } else if (path === '/projects') {
-      navBounds = projectsRef.current.getBoundingClientRect()
-    } else if (path === '/about') {
-      navBounds = aboutRef.current.getBoundingClientRect()
-    } else {
-      setBounds({ left: 10000, width: 0 })
-      return
-    }
-
-    const left = navBounds.x - root.x
-    const width = navBounds.width
-
-    setBounds({ left, width })
-  }, [navRef, homeRef, projectsRef, aboutRef, setBounds, path])
-
-  useEffect(() => {
-    updateBounds()
-  }, [navRef, homeRef, projectsRef, aboutRef, setBounds, path, theme])
-
-  useEffect(() => {
-    window.addEventListener('resize', updateBounds)
-    return () => window.removeEventListener('resize', updateBounds)
-  }, [updateBounds])
-
-  return {
-    navRef,
-    homeRef,
-    projectsRef,
-    aboutRef,
-    left: bounds.left,
-    width: bounds.width,
-  }
-}
+    const navRef = useRef<HTMLElement>();
+    const homeRef = useRef<HTMLElement>();
+    const projectsRef = useRef<HTMLElement>();
+    const aboutRef = useRef<HTMLElement>();
+    const router = useRouter();
+    const [bounds, setBounds] = useState({ left: 10000, width: 0 });
+
+    const path = router.pathname;
+
+    const updateBounds = useCallback(() => {
+        if (!navRef.current || !homeRef.current || !projectsRef.current || !aboutRef.current) {
+            return;
+        }
+
+        const root = navRef.current.getBoundingClientRect();
+
+        let navBounds;
+
+        if (path === "/") {
+            navBounds = homeRef.current.getBoundingClientRect();
+        } else if (path === "/projects") {
+            navBounds = projectsRef.current.getBoundingClientRect();
+        } else if (path === "/about") {
+            navBounds = aboutRef.current.getBoundingClientRect();
+        } else {
+            setBounds({ left: 10000, width: 0 });
+            return;
+        }
+
+        const left = navBounds.x - root.x;
+        const width = navBounds.width;
+
+        setBounds({ left, width });
+    }, [navRef, homeRef, projectsRef, aboutRef, setBounds, path]);
+
+    useEffect(() => {
+        updateBounds();
+    }, [navRef, homeRef, projectsRef, aboutRef, setBounds, path, theme]);
+
+    useEffect(() => {
+        window.addEventListener("resize", updateBounds);
+        return () => window.removeEventListener("resize", updateBounds);
+    }, [updateBounds]);
+
+    return {
+        navRef,
+        homeRef,
+        projectsRef,
+        aboutRef,
+        left: bounds.left,
+        width: bounds.width,
+    };
+};
 
 const Separator = ({ className }: { className?: string }) => {
-  return (
-    <div className={clsx(className, 'px-3 sm:px-6')}>
-      <div className="border-l w-0 border-solid border-zinc-500 dark:border-zinc-500">
-        &nbsp;
-      </div>
-    </div>
-  )
-}
+    return (
+        <div className={clsx(className, "px-3 sm:px-6")}>
+            <div className="w-0 border-l border-solid border-zinc-500 dark:border-zinc-500">
+                &nbsp;
+            </div>
+        </div>
+    );
+};
 
 const styles = {
-  text: 'dark:font-semibold text-white dark:text-black',
-  homeText: 'font-semibold dark:font-bold',
-  underline: 'underline-themed',
-}
+    text: "dark:font-semibold text-white dark:text-black",
+    homeText: "font-semibold dark:font-bold",
+    underline: "underline-themed",
+};
 
 export const Header = () => {
-  const [theme, setTheme] = useState('default')
-  const { navRef, homeRef, projectsRef, aboutRef, left, width } =
-    useNavigation(theme)
-
-  return (
-    <div
-      className={clsx(
-        styles.text,
-        'fixed bottom-0 sm:bottom-8 inset-x-0 sm:inset-x-8 flex pointer-events-none'
-      )}
-    >
-      <nav
-        className="relative w-full sm:w-auto sm:mx-auto pl-4 pr-2 sm:px-6 sm:pr-4 py-4 backdrop-blur flex items-center bg-black/80 dark:bg-white/80 sm:rounded-md pointer-events-auto"
-        ref={navRef as any}
-      >
+    const [theme, setTheme] = useState("default");
+    const { navRef, homeRef, projectsRef, aboutRef, left, width } = useNavigation(theme);
+
+    return (
         <div
-          className="bg-black/90 dark:bg-zinc-400/90 rounded-lg h-8 absolute z-1 transition-[left,width] ease-in"
-          style={{
-            left: `${left - PADDING}px`,
-            width: `${width + PADDING * 2}px`,
-          }}
+            className={clsx(
+                styles.text,
+                "pointer-events-none fixed inset-x-0 bottom-0 flex sm:inset-x-8 sm:bottom-8"
+            )}
         >
-          &nbsp;
-        </div>
-        <div className="z-1 flex items-center w-full z-10">
-          <Link
-            href="/"
-            className={clsx(styles.underline)}
-            ref={homeRef as any}
-          >
-            <span className={clsx(styles.homeText, 'hidden sm:inline')}>
-              jsonnull
-            </span>
-            <Home
-              className={clsx('block sm:hidden', styles.text)}
-              width={18}
-              height={18}
-            />
-          </Link>
-          <Separator />
-          <ul className="flex gap-3 sm:gap-6">
-            {(
-              [
-                ['/projects/', 'projects', projectsRef],
-                // ['/blog/', 'blog'],
-                ['/about/', 'about', aboutRef],
-              ] as [string, string, MutableRefObject<HTMLAnchorElement>][]
-            ).map(([url, title, ref]) => {
-              return (
-                <li key={url}>
-                  <Link href={url} className={clsx(styles.underline)} ref={ref}>
-                    {title}
-                  </Link>
-                </li>
-              )
-            })}
-          </ul>
-          <Separator className="pr-1 sm:pr-4" />
-          <Theme onChange={(theme) => setTheme(theme)} />
-          <Separator className="px-1 sm:px-4 hidden sm:block" />
-          <ul className="flex gap-1 sm:gap-2 ml-auto leading-none items-center text-zinc-400 dark:text-zinc-600">
-            {(
-              [
-                [GitHub, 'https://github.com/jsonnull'],
-                [Twitter, 'https://twitter.com/jsonnull'],
-              ] as [any, string][]
-            ).map(([Icon, href]) => {
-              return (
-                <a
-                  href={href}
-                  key={href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:bg-zinc-600 hover:text-white dark:hover:text-black dark:hover:bg-zinc-400 p-2 rounded-full"
+            <nav
+                className="pointer-events-auto relative flex w-full items-center bg-black/80 py-4 pl-4 pr-2 backdrop-blur dark:bg-white/80 sm:mx-auto sm:w-auto sm:rounded-md sm:px-6 sm:pr-4"
+                ref={navRef as any}
+            >
+                <div
+                    className="z-1 absolute h-8 rounded-lg bg-black/90 transition-[left,width] ease-in dark:bg-zinc-400/90"
+                    style={{
+                        left: `${left - PADDING}px`,
+                        width: `${width + PADDING * 2}px`,
+                    }}
                 >
-                  <Icon width={18} height={18} />
-                </a>
-              )
-            })}
-          </ul>
+                    &nbsp;
+                </div>
+                <div className="z-1 z-10 flex w-full items-center">
+                    <Link href="/" className={clsx(styles.underline)} ref={homeRef as any}>
+                        <span className={clsx(styles.homeText, "hidden sm:inline")}>jsonnull</span>
+                        <Home
+                            className={clsx("block sm:hidden", styles.text)}
+                            width={18}
+                            height={18}
+                        />
+                    </Link>
+                    <Separator />
+                    <ul className="flex gap-3 sm:gap-6">
+                        {(
+                            [
+                                ["/projects/", "projects", projectsRef],
+                                // ['/blog/', 'blog'],
+                                ["/about/", "about", aboutRef],
+                            ] as [string, string, MutableRefObject<HTMLAnchorElement>][]
+                        ).map(([url, title, ref]) => {
+                            return (
+                                <li key={url}>
+                                    <Link href={url} className={clsx(styles.underline)} ref={ref}>
+                                        {title}
+                                    </Link>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                    <Separator className="pr-1 sm:pr-4" />
+                    <Theme onChange={(theme) => setTheme(theme)} />
+                    <Separator className="hidden px-1 sm:block sm:px-4" />
+                    <ul className="ml-auto flex items-center gap-1 leading-none text-zinc-400 dark:text-zinc-600 sm:gap-2">
+                        {(
+                            [
+                                [GitHub, "https://github.com/jsonnull"],
+                                [Twitter, "https://twitter.com/jsonnull"],
+                            ] as [any, string][]
+                        ).map(([Icon, href]) => {
+                            return (
+                                <a
+                                    href={href}
+                                    key={href}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="rounded-full p-2 hover:bg-zinc-600 hover:text-white dark:hover:bg-zinc-400 dark:hover:text-black"
+                                >
+                                    <Icon width={18} height={18} />
+                                </a>
+                            );
+                        })}
+                    </ul>
+                </div>
+            </nav>
         </div>
-      </nav>
-    </div>
-  )
-}
+    );
+};
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index f445df6..5c8bfb6 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -1,60 +1,59 @@
-import * as React from 'react'
-import Head from 'next/head'
-import { Header } from './'
-import { Spacer } from './Spacer'
+import Head from "next/head";
+import * as React from "react";
+import { Header } from "./";
+import { Spacer } from "./Spacer";
 
 export const Page = ({
-  children,
-  title = 'Welcome',
-  description = "Jason Nall's technical blog",
-  pagePath,
-  ogImagePath,
+    children,
+    title = "Welcome",
+    description = "Jason Nall's technical blog",
+    pagePath,
+    ogImagePath,
 }: {
-  children: React.ReactNode
-  title?: string
-  description?: string
-  pagePath: string
-  ogImagePath?: string
+    children: React.ReactNode;
+    title?: string;
+    description?: string;
+    pagePath: string;
+    ogImagePath?: string;
 }) => {
-  const baseUrl =
-    process.env.NEXT_PUBLIC_NETLIFY_URL &&
-    process.env.NEXT_PUBLIC_NETLIFY_URL !== ''
-      ? process.env.NEXT_PUBLIC_NETLIFY_URL
-      : process.env.NEXT_PUBLIC_SITE_URL
+    const baseUrl =
+        process.env.NEXT_PUBLIC_NETLIFY_URL && process.env.NEXT_PUBLIC_NETLIFY_URL !== ""
+            ? process.env.NEXT_PUBLIC_NETLIFY_URL
+            : process.env.NEXT_PUBLIC_SITE_URL;
 
-  const domain = new URL(baseUrl!).hostname
-  const pageUrl = new URL(pagePath, baseUrl)
+    const domain = new URL(baseUrl!).hostname;
+    const pageUrl = new URL(pagePath, baseUrl);
 
-  let ogImageURL
-  if (ogImagePath) {
-    ogImageURL = new URL(ogImagePath, baseUrl)
-  }
+    let ogImageURL;
+    if (ogImagePath) {
+        ogImageURL = new URL(ogImagePath, baseUrl);
+    }
 
-  return (
-    <div className="flex flex-col bg-white dark:bg-black text-black dark:text-zinc-200 min-h-screen">
-      <Head>
-        {/* Meta tags */}
-        <title>{title} | Jason Nall</title>
-        <meta name="description" content={description} />
+    return (
+        <div className="flex min-h-screen flex-col bg-white text-black dark:bg-black dark:text-zinc-200">
+            <Head>
+                {/* Meta tags */}
+                <title>{title} | Jason Nall</title>
+                <meta name="description" content={description} />
 
-        {/* Open Graph meta tags */}
-        <meta property="og:url" content={pageUrl.toString()} />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        {ogImageURL && <meta property="og:image" content={ogImageURL.toString()} />}
+                {/* Open Graph meta tags */}
+                <meta property="og:url" content={pageUrl.toString()} />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content={title} />
+                <meta property="og:description" content={description} />
+                {ogImageURL && <meta property="og:image" content={ogImageURL.toString()} />}
 
-        {/* Twitter meta tags */}
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta property="twitter:domain" content={domain} />
-        <meta property="twitter:url" content={pageUrl.toString()} />
-        <meta name="twitter:title" content={title} />
-        <meta name="twitter:description" content={description} />
-        {ogImageURL && <meta name="twitter:image" content={ogImageURL.toString()} />}
-      </Head>
-      <Header />
-      <div className="flex flex-col">{children}</div>
-      <Spacer extraWide />
-    </div>
-  )
-}
+                {/* Twitter meta tags */}
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta property="twitter:domain" content={domain} />
+                <meta property="twitter:url" content={pageUrl.toString()} />
+                <meta name="twitter:title" content={title} />
+                <meta name="twitter:description" content={description} />
+                {ogImageURL && <meta name="twitter:image" content={ogImageURL.toString()} />}
+            </Head>
+            <Header />
+            <div className="flex flex-col">{children}</div>
+            <Spacer extraWide />
+        </div>
+    );
+};
diff --git a/src/components/Project.tsx b/src/components/Project.tsx
index a5e784c..1f9598b 100644
--- a/src/components/Project.tsx
+++ b/src/components/Project.tsx
@@ -1,44 +1,44 @@
-import clsx from 'clsx'
+import clsx from "clsx";
 
 export const Project = ({
-  name,
-  description,
-  progress = 100,
-  milestone,
-  className,
-  retired,
+    name,
+    description,
+    progress = 100,
+    milestone,
+    className,
+    retired,
 }: {
-  name: string
-  description: string
-  progress?: number
-  milestone: string
-  className?: string
-  retired?: boolean
+    name: string;
+    description: string;
+    progress?: number;
+    milestone: string;
+    className?: string;
+    retired?: boolean;
 }) => {
-  return (
-    <div className={clsx(className, 'flex flex-col', retired && 'text-dimmed')}>
-      <div className="text-xl font-semibold pb-4 rounded-t">{name}</div>
-      <div className="pb-6 text-sm">{description}</div>
-      <div
-        className={clsx(
-          'flex mt-auto',
-          'border border-solid border-zinc-500',
-          'pattern-bg-transparent pattern-fg-zinc-500 pattern-lines'
-        )}
-      >
-        <div
-          className={clsx(
-            'flex items-center h-6 pl-2 pr-1 m-[-1px] min-w-[120px]',
-            'text-sm text-zinc-100 dark:text-black dark:font-bold',
-            'bg-zinc-900 dark:bg-zinc-200',
-            retired && 'bg-zinc-700 dark:bg-zinc-400'
-          )}
-          style={{ width: `calc(${progress}% + 2px)` }}
-        >
-          {milestone && <div>{milestone}</div>}
-          {progress !== 100 && <div className="ml-auto">{progress}%</div>}
+    return (
+        <div className={clsx(className, "flex flex-col", retired && "text-dimmed")}>
+            <div className="rounded-t pb-4 text-xl font-semibold">{name}</div>
+            <div className="pb-6 text-sm">{description}</div>
+            <div
+                className={clsx(
+                    "mt-auto flex",
+                    "border border-solid border-zinc-500",
+                    "pattern-lines pattern-bg-transparent pattern-fg-zinc-500"
+                )}
+            >
+                <div
+                    className={clsx(
+                        "m-[-1px] flex h-6 min-w-[120px] items-center pl-2 pr-1",
+                        "text-sm text-zinc-100 dark:font-bold dark:text-black",
+                        "bg-zinc-900 dark:bg-zinc-200",
+                        retired && "bg-zinc-700 dark:bg-zinc-400"
+                    )}
+                    style={{ width: `calc(${progress}% + 2px)` }}
+                >
+                    {milestone && <div>{milestone}</div>}
+                    {progress !== 100 && <div className="ml-auto">{progress}%</div>}
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
-}
+    );
+};
diff --git a/src/components/ProjectGrid.tsx b/src/components/ProjectGrid.tsx
index 928a80a..64221b1 100644
--- a/src/components/ProjectGrid.tsx
+++ b/src/components/ProjectGrid.tsx
@@ -1,30 +1,28 @@
-import { Project } from './Project'
-import clsx from 'clsx'
-import { Project as ProjectType } from '../types'
+import clsx from "clsx";
+import { Project as ProjectType } from "../types";
+import { Project } from "./Project";
 
 export const ProjectGrid = ({
-  projects,
-  retired,
+    projects,
+    retired,
 }: {
-  projects: ProjectType[]
-  retired?: boolean
+    projects: ProjectType[];
+    retired?: boolean;
 }) => {
-  return (
-    <div
-      className={clsx('grid grid-cols-1 md:grid-cols-2 grid-flow-row gap-16')}
-    >
-      {projects.map(({ name, description, milestones }) => {
-        return (
-          <Project
-            key={name}
-            name={name}
-            description={description}
-            milestone={milestones[0].name}
-            progress={milestones[0].progress}
-            retired={retired}
-          />
-        )
-      })}
-    </div>
-  )
-}
+    return (
+        <div className={clsx("grid grid-flow-row grid-cols-1 gap-16 md:grid-cols-2")}>
+            {projects.map(({ name, description, milestones }) => {
+                return (
+                    <Project
+                        key={name}
+                        name={name}
+                        description={description}
+                        milestone={milestones[0].name}
+                        progress={milestones[0].progress}
+                        retired={retired}
+                    />
+                );
+            })}
+        </div>
+    );
+};
diff --git a/src/components/Spacer.tsx b/src/components/Spacer.tsx
index f0f0558..332e362 100644
--- a/src/components/Spacer.tsx
+++ b/src/components/Spacer.tsx
@@ -1,16 +1,16 @@
-import clsx from 'clsx'
+import clsx from "clsx";
 
-export type SpacerProps = | { extraWide: true } | { wide: true } | { medium: true } | { small: true }
+export type SpacerProps = { extraWide: true } | { wide: true } | { medium: true } | { small: true };
 
 export const Spacer = (props: SpacerProps) => {
-  return (
-    <div
-      className={clsx(
-        'extraWide' in props && 'pb-48',
-        'wide' in props && 'pb-32',
-        'medium' in props && 'pb-16',
-        'small' in props && 'pb-8'
-      )}
-    />
-  )
-}
+    return (
+        <div
+            className={clsx(
+                "extraWide" in props && "pb-48",
+                "wide" in props && "pb-32",
+                "medium" in props && "pb-16",
+                "small" in props && "pb-8"
+            )}
+        />
+    );
+};
diff --git a/src/components/Theme.tsx b/src/components/Theme.tsx
index 95168f8..1c760c8 100644
--- a/src/components/Theme.tsx
+++ b/src/components/Theme.tsx
@@ -1,113 +1,103 @@
-import {
-  Fragment,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react'
-import { Listbox } from '@headlessui/react'
-import { Sun, Monitor, Moon } from 'react-feather'
-import { usePopper } from 'react-popper'
-import clsx from 'clsx'
+import { Listbox } from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { Monitor, Moon, Sun } from "react-feather";
+import { usePopper } from "react-popper";
 
 const themes: [string, any, string][] = [
-  ['light', Sun, 'Light'],
-  ['dark', Moon, 'Dark'],
-  ['system', Monitor, 'System'],
-]
+    ["light", Sun, "Light"],
+    ["dark", Moon, "Dark"],
+    ["system", Monitor, "System"],
+];
 
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
 const applyTheme = (theme: string) => {
-  if (
-    theme === 'dark' ||
-    (theme === 'system' &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-  }
-}
+    if (
+        theme === "dark" ||
+        (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+        document.documentElement.classList.add("dark");
+    } else {
+        document.documentElement.classList.remove("dark");
+    }
+};
 
 const useTheme = ({ onChange }: { onChange: (theme: string) => void }) => {
-  const initialTheme =
-    typeof window !== 'undefined' && 'theme' in localStorage
-      ? localStorage.theme
-      : 'system'
+    const initialTheme =
+        typeof window !== "undefined" && "theme" in localStorage ? localStorage.theme : "system";
 
-  const [theme, setThemeState] = useState(initialTheme)
+    const [theme, setThemeState] = useState(initialTheme);
 
-  const setTheme = useCallback(
-    (theme: string) => {
-      setThemeState(theme)
-      localStorage.theme = theme
-      applyTheme(theme)
-      if (onChange) {
-        onChange(theme)
-      }
-    },
-    [setThemeState]
-  )
+    const setTheme = useCallback(
+        (theme: string) => {
+            setThemeState(theme);
+            localStorage.theme = theme;
+            applyTheme(theme);
+            if (onChange) {
+                onChange(theme);
+            }
+        },
+        [setThemeState]
+    );
 
-  useIsomorphicLayoutEffect(() => {
-    applyTheme(initialTheme)
-  }, [])
+    useIsomorphicLayoutEffect(() => {
+        applyTheme(initialTheme);
+    }, []);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    useEffect(() => {
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
-    mediaQuery.addEventListener('change', () => applyTheme(theme))
+        mediaQuery.addEventListener("change", () => applyTheme(theme));
 
-    return () => {
-      mediaQuery.removeEventListener('change', () => applyTheme(theme))
-    }
-  }, [])
+        return () => {
+            mediaQuery.removeEventListener("change", () => applyTheme(theme));
+        };
+    }, []);
 
-  return [theme, setTheme]
-}
+    return [theme, setTheme];
+};
 
 export const Theme = ({ onChange }: { onChange: (theme: string) => void }) => {
-  const [theme, setTheme] = useTheme({ onChange })
-  const [referenceElement, setReferenceElement] = useState(null)
-  const [popperElement, setPopperElement] = useState(null)
-  const { styles, attributes } = usePopper(referenceElement, popperElement)
+    const [theme, setTheme] = useTheme({ onChange });
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes } = usePopper(referenceElement, popperElement);
 
-  return (
-    <Listbox value={theme} onChange={setTheme}>
-      <Listbox.Button
-        ref={setReferenceElement as any}
-        className="p-2 rounded-full hover:bg-zinc-600 dark:hover:bg-zinc-400"
-      >
-        <Sun width={18} height={18} className="block dark:hidden" />
-        <Moon width={18} height={18} className="hidden dark:block" />
-      </Listbox.Button>
-      <Listbox.Options
-        ref={setPopperElement as any}
-        className="rounded bg-black dark:bg-white text-white dark:text-black mb-3 overflow-hidden "
-        style={styles.popper}
-        {...attributes.popper}
-      >
-        {themes.map(([theme, Icon, display]) => {
-          return (
-            <Listbox.Option value={theme} key={theme} as={Fragment}>
-              {({ selected }) => {
-                return (
-                  <li
-                    className={clsx(
-                      'flex gap-2 py-2 px-4 items-center cursor-pointer hover:bg-zinc-900/50 dark:hover:bg-zinc-400/50',
-                      selected && 'text-sky'
-                    )}
-                  >
-                    <Icon className="block" width={18} height={18} /> {display}
-                  </li>
-                )
-              }}
-            </Listbox.Option>
-          )
-        })}
-      </Listbox.Options>
-    </Listbox>
-  )
-}
+    return (
+        <Listbox value={theme} onChange={setTheme}>
+            <Listbox.Button
+                ref={setReferenceElement as any}
+                className="rounded-full p-2 hover:bg-zinc-600 dark:hover:bg-zinc-400"
+            >
+                <Sun width={18} height={18} className="block dark:hidden" />
+                <Moon width={18} height={18} className="hidden dark:block" />
+            </Listbox.Button>
+            <Listbox.Options
+                ref={setPopperElement as any}
+                className="mb-3 overflow-hidden rounded bg-black text-white dark:bg-white dark:text-black "
+                style={styles.popper}
+                {...attributes.popper}
+            >
+                {themes.map(([theme, Icon, display]) => {
+                    return (
+                        <Listbox.Option value={theme} key={theme} as={Fragment}>
+                            {({ selected }) => {
+                                return (
+                                    <li
+                                        className={clsx(
+                                            "flex cursor-pointer items-center gap-2 py-2 px-4 hover:bg-zinc-900/50 dark:hover:bg-zinc-400/50",
+                                            selected && "text-sky"
+                                        )}
+                                    >
+                                        <Icon className="block" width={18} height={18} /> {display}
+                                    </li>
+                                );
+                            }}
+                        </Listbox.Option>
+                    );
+                })}
+            </Listbox.Options>
+        </Listbox>
+    );
+};
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index 3c835d6..e4b3adf 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 
 export const Title = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="flex text-3xl font-mono tracking-tight">
-      <h1 className="">{children}</h1>
-      <span className="text-zinc-400 dark:text-zinc-700">\0</span>
-    </div>
-  )
-}
+    return (
+        <div className="flex font-mono text-3xl tracking-tight">
+            <h1 className="">{children}</h1>
+            <span className="text-zinc-400 dark:text-zinc-700">\0</span>
+        </div>
+    );
+};
diff --git a/src/components/index.tsx b/src/components/index.tsx
index c842275..e740882 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,38 +1,23 @@
-import clsx from 'clsx'
-import * as React from 'react'
-export * from './Footer'
-export * from './Header'
-export * from './Page'
-export * from './Title'
+import clsx from "clsx";
+import * as React from "react";
 
-export const Wrapper = (props: {
-  children: React.ReactNode
-  className?: string
-}) => {
-  return (
-    <div
-      className={clsx(
-        'w-full max-w-[900px] inset-x-0 mx-auto px-8',
-        props.className
-      )}
-    >
-      {props.children}
-    </div>
-  )
-}
+export * from "./Footer";
+export * from "./Header";
+export * from "./Page";
+export * from "./Title";
 
-export const Heading = (props: {
-  children: React.ReactNode
-  className?: string
-}) => {
-  return (
-    <h1
-      className={clsx(
-'text-3xl font-semibold tracking-tight',
-        props.className
-      )}
-    >
-      {props.children}
-    </h1>
-  )
-}
+export const Wrapper = (props: { children: React.ReactNode; className?: string }) => {
+    return (
+        <div className={clsx("inset-x-0 mx-auto w-full max-w-[900px] px-8", props.className)}>
+            {props.children}
+        </div>
+    );
+};
+
+export const Heading = (props: { children: React.ReactNode; className?: string }) => {
+    return (
+        <h1 className={clsx("text-3xl font-semibold tracking-tight", props.className)}>
+            {props.children}
+        </h1>
+    );
+};
diff --git a/src/data/projects/index.ts b/src/data/projects/index.ts
index 7be4fbf..d3912d7 100644
--- a/src/data/projects/index.ts
+++ b/src/data/projects/index.ts
@@ -1,27 +1,26 @@
-import type { Project } from '../../types'
+import type { Project } from "../../types";
 
 export const alea: Project = {
-  name: 'Alea',
-  description: 'Building a modern online tabletop roleplaying experience.',
-  milestones: [{ name: 'v1', progress: 15 }],
-}
+    name: "Alea",
+    description: "Building a modern online tabletop roleplaying experience.",
+    milestones: [{ name: "v1", progress: 15 }],
+};
 
 export const jsonnull: Project = {
-  name: 'jsonnull.com',
-  description: 'My personal blog, where I share technical work.',
-  milestones: [{ name: 'Redesign', progress: 50 }],
-}
+    name: "jsonnull.com",
+    description: "My personal blog, where I share technical work.",
+    milestones: [{ name: "Redesign", progress: 50 }],
+};
 
 export const novel: Project = {
-  name: 'Novel',
-  description: "I'm writing an epic fantasy novel!",
-  milestones: [{ name: 'First draft', progress: 5 }],
-}
+    name: "Novel",
+    description: "I'm writing an epic fantasy novel!",
+    milestones: [{ name: "First draft", progress: 5 }],
+};
 
 export const configuration: Project = {
-  name: 'Configuration',
-  description:
-    'System configuration for all of my development machines, defined using Nix and home-manager.',
-  milestones: [{ name: 'Currently maintaining', progress: 100 }],
-}
-
+    name: "Configuration",
+    description:
+        "System configuration for all of my development machines, defined using Nix and home-manager.",
+    milestones: [{ name: "Currently maintaining", progress: 100 }],
+};
diff --git a/src/data/projects/past.ts b/src/data/projects/past.ts
index c74e0ca..3887e54 100644
--- a/src/data/projects/past.ts
+++ b/src/data/projects/past.ts
@@ -1,13 +1,15 @@
-import type { Project } from '../../types'
+import type { Project } from "../../types";
 
 export const reactRoutine: Project = {
-  name: 'React Routine',
-  description: 'Before React introduced hooks, I made this library which lets you write sharable component logic using generators (sagas) instead of lifecycle methods.',
-  milestones: [{ name: 'Released' }],
-}
+    name: "React Routine",
+    description:
+        "Before React introduced hooks, I made this library which lets you write sharable component logic using generators (sagas) instead of lifecycle methods.",
+    milestones: [{ name: "Released" }],
+};
 
 export const reactRedux: Project = {
-  name: 'React Redux',
-  description: 'React bindings for Redux using render props. These days you should use the official ones.',
-  milestones: [{ name: 'Released, archived' }],
-}
+    name: "React Redux",
+    description:
+        "React bindings for Redux using render props. These days you should use the official ones.",
+    milestones: [{ name: "Released, archived" }],
+};
diff --git a/src/lib/openGraph/generateOpenGraphImage.tsx b/src/lib/openGraph/generateOpenGraphImage.tsx
index 7bd70a0..f2bb049 100644
--- a/src/lib/openGraph/generateOpenGraphImage.tsx
+++ b/src/lib/openGraph/generateOpenGraphImage.tsx
@@ -1,165 +1,151 @@
-import { promises } from 'fs'
-import path from 'path'
-import satori from 'satori'
-import { Resvg } from '@resvg/resvg-js'
+import { Resvg } from "@resvg/resvg-js";
+import { promises } from "fs";
+import path from "path";
+import satori from "satori";
 
-const openSansRegular = path.resolve(
-  __dirname,
-  '../../../static/fonts/OpenSans-Regular.ttf'
-)
-const openSansSemiBold = path.resolve(
-  __dirname,
-  '../../../static/fonts/OpenSans-SemiBold.ttf'
-)
+const openSansRegular = path.resolve(__dirname, "../../../static/fonts/OpenSans-Regular.ttf");
+const openSansSemiBold = path.resolve(__dirname, "../../../static/fonts/OpenSans-SemiBold.ttf");
 
-const openSansRegularBuffer = promises.readFile(openSansRegular)
-const openSansSemiBoldBuffer = promises.readFile(openSansSemiBold)
+const openSansRegularBuffer = promises.readFile(openSansRegular);
+const openSansSemiBoldBuffer = promises.readFile(openSansSemiBold);
 
-const PROFILE_URL = 'http://localhost/profile.jpg'
-const profileImage = promises.readFile(
-  path.resolve(__dirname, '../../../static/img/photo.jpg')
-)
+const PROFILE_URL = "http://localhost/profile.jpg";
+const profileImage = promises.readFile(path.resolve(__dirname, "../../../static/img/photo.jpg"));
 
-const OUTER_PADDING = 20
+const OUTER_PADDING = 20;
 
 export const OpenGraph = ({ title }: { title?: string }) => {
-  return (
-    <div
-      style={{
-        fontFamily: '"Open Sans", sans-serif',
-        display: 'flex',
-        padding: `${OUTER_PADDING}px`,
-        width: 1200,
-        height: 632,
-        backgroundColor: 'black',
-      }}
-    >
-      <div
-        style={{
-          padding: '0 72px 72px',
-          backgroundColor: 'black',
-          border: '4px solid white',
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          height: '100%',
-        }}
-      >
+    return (
         <div
-          style={{
-            display: 'flex',
-            fontWeight: 600,
-            color: 'white',
-            fontSize: '48px',
-            lineHeight: '48px',
-            marginTop: `${632 / 2 - OUTER_PADDING * 2 - 48 / 2}px`,
-            letterSpacing: '-0.025em',
-          }}
+            style={{
+                fontFamily: '"Open Sans", sans-serif',
+                display: "flex",
+                padding: `${OUTER_PADDING}px`,
+                width: 1200,
+                height: 632,
+                backgroundColor: "black",
+            }}
         >
-          {title}
-          {!title && (
-            <>
-              Crafting
-              <span style={{ color: 'transparent' }}>.</span>
-              <span
+            <div
                 style={{
-                  backgroundImage: 'linear-gradient(90deg, #707EC4, #6D7599)',
-                  backgroundClip: 'text',
-                  color: 'transparent',
+                    padding: "0 72px 72px",
+                    backgroundColor: "black",
+                    border: "4px solid white",
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    height: "100%",
                 }}
-              >
-                experiences
-              </span>
-              <span style={{ color: 'transparent' }}>.</span>
-              with
-              <span style={{ color: 'transparent' }}>.</span>
-              code.
-            </>
-          )}
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            flex: 1,
-            width: '100%',
-            alignItems: 'flex-end',
-          }}
-        >
-          <div
-            style={{
-              color: 'white',
-              fontSize: '36px',
-                letterSpacing: '-0.025em',
-            }}
-          >
-            Jason Nall
-          </div>
-          <img
-            src={'data:profile'}
-            style={{
-              borderRadius: '50%',
-              marginLeft: 'auto',
-            }}
-            width={48}
-            height={48}
-          />
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        fontWeight: 600,
+                        color: "white",
+                        fontSize: "48px",
+                        lineHeight: "48px",
+                        marginTop: `${632 / 2 - OUTER_PADDING * 2 - 48 / 2}px`,
+                        letterSpacing: "-0.025em",
+                    }}
+                >
+                    {title}
+                    {!title && (
+                        <>
+                            Crafting
+                            <span style={{ color: "transparent" }}>.</span>
+                            <span
+                                style={{
+                                    backgroundImage: "linear-gradient(90deg, #707EC4, #6D7599)",
+                                    backgroundClip: "text",
+                                    color: "transparent",
+                                }}
+                            >
+                                experiences
+                            </span>
+                            <span style={{ color: "transparent" }}>.</span>
+                            with
+                            <span style={{ color: "transparent" }}>.</span>
+                            code.
+                        </>
+                    )}
+                </div>
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        flex: 1,
+                        width: "100%",
+                        alignItems: "flex-end",
+                    }}
+                >
+                    <div
+                        style={{
+                            color: "white",
+                            fontSize: "36px",
+                            letterSpacing: "-0.025em",
+                        }}
+                    >
+                        Jason Nall
+                    </div>
+                    <img
+                        src={"data:profile"}
+                        style={{
+                            borderRadius: "50%",
+                            marginLeft: "auto",
+                        }}
+                        width={48}
+                        height={48}
+                    />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
-}
+    );
+};
 
-export async function generateOpenGraphImage({
-  title,
-  slug,
-}: {
-  title?: string
-  slug: string
-}) {
-  let svg = await satori(<OpenGraph title={title} />, {
-    width: 1200,
-    height: 632,
-    fonts: [
-      {
-        name: 'Open Sans',
-        data: await openSansRegularBuffer,
-        weight: 400,
-        style: 'normal',
-      },
-      {
-        name: 'Open Sans',
-        data: await openSansSemiBoldBuffer,
-        weight: 600,
-        style: 'normal',
-      },
-    ],
-  })
+export async function generateOpenGraphImage({ title, slug }: { title?: string; slug: string }) {
+    let svg = await satori(<OpenGraph title={title} />, {
+        width: 1200,
+        height: 632,
+        fonts: [
+            {
+                name: "Open Sans",
+                data: await openSansRegularBuffer,
+                weight: 400,
+                style: "normal",
+            },
+            {
+                name: "Open Sans",
+                data: await openSansSemiBoldBuffer,
+                weight: 600,
+                style: "normal",
+            },
+        ],
+    });
 
-  svg = svg.replace('data:profile', PROFILE_URL)
+    svg = svg.replace("data:profile", PROFILE_URL);
 
-  const opts = {
-    background: 'white',
-    fitTo: {
-      mode: 'width' as const,
-      value: 1200,
-    },
-    font: {
-      fontFiles: [openSansRegular, openSansSemiBold],
-      loadSystemFonts: false,
-      defaultFontFamily: 'Open Sans',
-    },
-  }
+    const opts = {
+        background: "white",
+        fitTo: {
+            mode: "width" as const,
+            value: 1200,
+        },
+        font: {
+            fontFiles: [openSansRegular, openSansSemiBold],
+            loadSystemFonts: false,
+            defaultFontFamily: "Open Sans",
+        },
+    };
 
-  const resvg = new Resvg(svg, opts)
-  resvg.resolveImage(PROFILE_URL, await profileImage)
-  const pngData = resvg.render()
-  const pngBuffer = pngData.asPng()
+    const resvg = new Resvg(svg, opts);
+    resvg.resolveImage(PROFILE_URL, await profileImage);
+    const pngData = resvg.render();
+    const pngBuffer = pngData.asPng();
 
-  await promises.writeFile(
-    path.resolve(__dirname, `../../../public/og-images/${slug}.png`),
-    pngBuffer
-  )
+    await promises.writeFile(
+        path.resolve(__dirname, `../../../public/og-images/${slug}.png`),
+        pngBuffer
+    );
 
-  return `/og-images/${slug}.png`
+    return `/og-images/${slug}.png`;
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 887162e..7ded106 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
-import '../global.css'
-import BaseApp from 'next/app'
+import BaseApp from "next/app";
+import * as React from "react";
+import "../global.css";
 
 class App extends BaseApp {
-  render() {
-    const { Component, pageProps } = this.props
+    render() {
+        const { Component, pageProps } = this.props;
 
-    const getLayout = Component.getLayout || ((page: React.ReactNode) => page)
+        const getLayout = Component.getLayout || ((page: React.ReactNode) => page);
 
-    return getLayout(<Component {...pageProps} />, pageProps)
-  }
+        return getLayout(<Component {...pageProps} />, pageProps);
+    }
 }
 
-export default App
+export default App;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index c4fd6b4..d22126e 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,23 +1,23 @@
-import BaseDocument, { Html, Head, Main, NextScript } from 'next/document'
+import BaseDocument, { Head, Html, Main, NextScript } from "next/document";
 
 class Document extends BaseDocument {
-  render() {
-    return (
-      <Html>
-        <Head>
-          <script
-            defer
-            data-domain="jsonnull.com"
-            src="https://plausible.io/js/plausible.js"
-          ></script>
-        </Head>
-        <body className="bg-black">
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
+    render() {
+        return (
+            <Html>
+                <Head>
+                    <script
+                        defer
+                        data-domain="jsonnull.com"
+                        src="https://plausible.io/js/plausible.js"
+                    ></script>
+                </Head>
+                <body className="bg-black">
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
 }
 
-export default Document
+export default Document;
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index cd2da7b..dcde4a6 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
-import { Title, Page, Wrapper } from '../../components'
-import { Spacer } from '../../components/Spacer'
+import * as React from "react";
+import { Page, Title, Wrapper } from "../../components";
+import { Spacer } from "../../components/Spacer";
 
 const About = () => {
-  return (
-    <Wrapper>
-      <Spacer wide />
-      <div className="flex justify-center">
-        <Title>about</Title>
-      </div>
-      <Spacer wide />
-      <p>This site was generated by Next.js.</p>
-      <Spacer wide />
-    </Wrapper>
-  )
-}
+    return (
+        <Wrapper>
+            <Spacer wide />
+            <div className="flex justify-center">
+                <Title>about</Title>
+            </div>
+            <Spacer wide />
+            <p>This site was generated by Next.js.</p>
+            <Spacer wide />
+        </Wrapper>
+    );
+};
 
 About.getLayout = (page: React.ReactNode) => (
-  <Page title="About" pagePath="/about">
-    {page}
-  </Page>
-)
+    <Page title="About" pagePath="/about">
+        {page}
+    </Page>
+);
 
-export default About
+export default About;
diff --git a/src/pages/blog/[...slug].tsx b/src/pages/blog/[...slug].tsx
index d905073..90ecfe6 100644
--- a/src/pages/blog/[...slug].tsx
+++ b/src/pages/blog/[...slug].tsx
@@ -1,67 +1,65 @@
-import type { GetStaticPaths, GetStaticProps } from 'next'
-import { promises } from 'fs'
-import Markdown from 'markdown-to-jsx'
-import matter from 'gray-matter'
-import { Heading, Page, Wrapper } from '../../components'
-import { getPosts } from '../../lib/getPosts'
-import type { PostFrontMatter } from '../../types'
+import { promises } from "fs";
+import matter from "gray-matter";
+import Markdown from "markdown-to-jsx";
+import type { GetStaticPaths, GetStaticProps } from "next";
+import { Heading, Page, Wrapper } from "../../components";
+import { getPosts } from "../../lib/getPosts";
+import type { PostFrontMatter } from "../../types";
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = []
-  for await (const { slug } of getPosts()) {
-    paths.push({ params: { slug } })
-  }
+    const paths = [];
+    for await (const { slug } of getPosts()) {
+        paths.push({ params: { slug } });
+    }
 
-  return {
-    paths,
-    fallback: false,
-  }
-}
+    return {
+        paths,
+        fallback: false,
+    };
+};
 
 interface PageProps {
-  data: PostFrontMatter
-  content: string
-  path: string
-  slug: string
+    data: PostFrontMatter;
+    content: string;
+    path: string;
+    slug: string;
 }
 
-export const getStaticProps: GetStaticProps = async (
-  context
-): Promise<{ props: PageProps }> => {
-  const path = (context.params?.slug as string[]).join('/')
-  const slug = (context.params?.slug as string[]).join('-')
+export const getStaticProps: GetStaticProps = async (context): Promise<{ props: PageProps }> => {
+    const path = (context.params?.slug as string[]).join("/");
+    const slug = (context.params?.slug as string[]).join("-");
 
-  const { data, content } = await promises
-    .readFile(`./content/blog/${path}.md`)
-    .then((buf) => matter(buf.toString(), { delimiters: '```' }))
+    const { data, content } = await promises
+        .readFile(`./content/blog/${path}.md`)
+        .then((buf) => matter(buf.toString(), { delimiters: "```" }));
 
-  return {
-    props: {
-      data: data as PostFrontMatter,
-      content,
-      path,
-      slug,
-    },
-  }
-}
+    return {
+        props: {
+            data: data as PostFrontMatter,
+            content,
+            path,
+            slug,
+        },
+    };
+};
 
 const Post = ({ data, content }: PageProps) => {
-  return (
-    <Wrapper>
-      <Heading>{data.title}</Heading>
-      <Markdown>{content}</Markdown>
-    </Wrapper>
-  )
-}
+    return (
+        <Wrapper>
+            <Heading>{data.title}</Heading>
+            <Markdown>{content}</Markdown>
+        </Wrapper>
+    );
+};
 
 Post.getLayout = (page: React.ReactNode, { data, path }: PageProps) => (
-  <Page
-    title={data.title}
-    pagePath={`/blog/${path}/`}
-    // ogImagePath={`/og-images/${slug}.png`}
-  >
-    {page}
-  </Page>
-)
+    <Page
+        title={data.title}
+        pagePath={`/blog/${path}/`}
+        // ogImagePath={`/og-images/${slug}.png`}
+    >
+        {page}
+    </Page>
+);
 
-export default Post
+export default Post;
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index ccfa75f..c1087ed 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,50 +1,50 @@
-import * as React from 'react'
-import type { GetStaticProps } from 'next'
-import Link from 'next/link'
-import { Heading, Page, Wrapper } from '../../components'
-import { promises } from 'fs'
-import matter from 'gray-matter'
-import { getPosts } from '../../lib/getPosts'
-import type { Post } from '../../types';
+import { promises } from "fs";
+import matter from "gray-matter";
+import type { GetStaticProps } from "next";
+import Link from "next/link";
+import * as React from "react";
+import { Heading, Page, Wrapper } from "../../components";
+import { getPosts } from "../../lib/getPosts";
+import type { Post } from "../../types";
 
 export const getStaticProps: GetStaticProps = async (): Promise<{
-  props: { posts: Post[] }
+    props: { posts: Post[] };
 }> => {
-  const posts: Post[] = []
-  for await (const { url, path } of getPosts()) {
-    const { data } = await promises
-      .readFile(path)
-      .then((buf) => matter(buf.toString(), { delimiters: '```' }))
+    const posts: Post[] = [];
+    for await (const { url, path } of getPosts()) {
+        const { data } = await promises
+            .readFile(path)
+            .then((buf) => matter(buf.toString(), { delimiters: "```" }));
 
-    posts.push({ ...data, url } as any)
-  }
+        posts.push({ ...data, url } as any);
+    }
 
-  return {
-    props: {
-      posts,
-    },
-  }
-}
+    return {
+        props: {
+            posts,
+        },
+    };
+};
 
 const Posts = ({ posts }: { posts: Post[] }) => {
-  return (
-    <Wrapper>
-      <Heading>Blog</Heading>
-      {posts.map((post) => {
-        return (
-          <Link key={post.url} href={post.url}>
-            {post.title}
-          </Link>
-        )
-      })}
-    </Wrapper>
-  )
-}
+    return (
+        <Wrapper>
+            <Heading>Blog</Heading>
+            {posts.map((post) => {
+                return (
+                    <Link key={post.url} href={post.url}>
+                        {post.title}
+                    </Link>
+                );
+            })}
+        </Wrapper>
+    );
+};
 
 Posts.getLayout = (page: React.ReactNode) => (
-  <Page title="Blog" pagePath="/blog/">
-    {page}
-  </Page>
-)
+    <Page title="Blog" pagePath="/blog/">
+        {page}
+    </Page>
+);
 
-export default Posts
+export default Posts;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 01a528b..59fc4c9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,77 +1,72 @@
-import React from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
-import clsx from 'clsx'
-import { Heading, Page, Wrapper } from '../components'
-import { Spacer } from '../components/Spacer'
-import { ProjectGrid } from '../components/ProjectGrid'
-import { Button } from '../components/Button'
-import { profileDataURI } from '../lib/profileDataURI'
-import { jsonnull, configuration } from '../data/projects'
-import { ArrowRight } from 'react-feather'
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import { ArrowRight } from "react-feather";
+import { Heading, Page, Wrapper } from "../components";
+import { Button } from "../components/Button";
+import { ProjectGrid } from "../components/ProjectGrid";
+import { Spacer } from "../components/Spacer";
+import { configuration, jsonnull } from "../data/projects";
+import { profileDataURI } from "../lib/profileDataURI";
 
 export const Title = ({ className }: { className?: string }) => {
-  return (
-    <h1
-      className={clsx(
-        'pt-4 text-4xl sm:text-5xl font-semibold tracking-tight',
-        className
-      )}
-    >
-      Crafting{' '}
-      <span className="text-transparent bg-clip-text bg-gradient-to-r from-fog to-steel">
-        experiences
-      </span>{' '}
-      with code.
-    </h1>
-  )
-}
+    return (
+        <h1 className={clsx("pt-4 text-4xl font-semibold tracking-tight sm:text-5xl", className)}>
+            Crafting{" "}
+            <span className="bg-gradient-to-r from-fog to-steel bg-clip-text text-transparent">
+                experiences
+            </span>{" "}
+            with code.
+        </h1>
+    );
+};
 
 const TitleSection = () => {
-  return (
-    <div className="flex flex-col items-center">
-      <Image
-        src={profileDataURI}
-        alt="Picture of the author"
-        width="80"
-        height="80"
-        className="rounded-full"
-      />
-      <Title />
-    </div>
-  )
-}
+    return (
+        <div className="flex flex-col items-center">
+            <Image
+                src={profileDataURI}
+                alt="Picture of the author"
+                width="80"
+                height="80"
+                className="rounded-full"
+            />
+            <Title />
+        </div>
+    );
+};
 
 const Home = () => {
-  return (
-    <Wrapper>
-      <Spacer extraWide />
-      <TitleSection />
-      <Spacer extraWide />
-      <div className="flex flex-col items-center">
-        <Heading>Recent Projects</Heading>
-      </div>
-      <Spacer medium />
-      <ProjectGrid projects={[jsonnull, configuration]} />
-      <Spacer medium />
-      <div className="flex justify-center">
-        <Link href="/projects">
-          <Button>
-            <div className="flex items-center underline-themed">
-              See my other projects
-              <ArrowRight size={18} className="ml-2" />
+    return (
+        <Wrapper>
+            <Spacer extraWide />
+            <TitleSection />
+            <Spacer extraWide />
+            <div className="flex flex-col items-center">
+                <Heading>Recent Projects</Heading>
             </div>
-          </Button>
-        </Link>
-      </div>
-    </Wrapper>
-  )
-}
+            <Spacer medium />
+            <ProjectGrid projects={[jsonnull, configuration]} />
+            <Spacer medium />
+            <div className="flex justify-center">
+                <Link href="/projects">
+                    <Button>
+                        <div className="underline-themed flex items-center">
+                            See my other projects
+                            <ArrowRight size={18} className="ml-2" />
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+        </Wrapper>
+    );
+};
 
 Home.getLayout = (page: React.ReactNode) => (
-  <Page title="Home" pagePath="/" ogImagePath="/og-images/index.png">
-    {page}
-  </Page>
-)
+    <Page title="Home" pagePath="/" ogImagePath="/og-images/index.png">
+        {page}
+    </Page>
+);
 
-export default Home
+export default Home;
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index b3d7dbf..65032a8 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -1,53 +1,53 @@
-import * as React from 'react'
-import { Heading, Page, Wrapper, Title } from '../../components'
-import { Spacer } from '../../components/Spacer'
-import { Project } from '../../components/Project'
-import { ProjectGrid } from '../../components/ProjectGrid'
-import { configuration, jsonnull, novel } from '../../data/projects'
-import * as past from '../../data/projects/past'
+import * as React from "react";
+import { Heading, Page, Title, Wrapper } from "../../components";
+import { Project } from "../../components/Project";
+import { ProjectGrid } from "../../components/ProjectGrid";
+import { Spacer } from "../../components/Spacer";
+import { configuration, jsonnull, novel } from "../../data/projects";
+import * as past from "../../data/projects/past";
 
 const Projects = () => {
-  return (
-    <Wrapper>
-      <Spacer wide />
-      <div className="flex justify-center">
-        <Title>projects</Title>
-      </div>
-      <Spacer wide />
-      <Heading>Work In Progress</Heading>
-      <Spacer medium />
-      <ProjectGrid projects={[jsonnull, configuration]} />
-      <Spacer wide />
-      <Heading>Writing</Heading>
-      <Spacer medium />
-      {[novel].map(({ name, description, milestones }) => {
-        return (
-          <Project
-            key={name}
-            name={name}
-            description={description}
-            milestone={milestones[0].name}
-            progress={milestones[0].progress}
-          />
-        )
-      })}
-      <Spacer wide />
-      <Heading className="text-dimmed">Past Projects</Heading>
-      <Spacer small />
-      <p className="text-dimmed">
-        These are projects which I no longer maintain, or which aren{"'"}t
-        valuable enough for me to consider finishing at the moment.
-      </p>
-      <Spacer medium />
-      <ProjectGrid retired projects={[past.reactRoutine, past.reactRedux]} />
-    </Wrapper>
-  )
-}
+    return (
+        <Wrapper>
+            <Spacer wide />
+            <div className="flex justify-center">
+                <Title>projects</Title>
+            </div>
+            <Spacer wide />
+            <Heading>Work In Progress</Heading>
+            <Spacer medium />
+            <ProjectGrid projects={[jsonnull, configuration]} />
+            <Spacer wide />
+            <Heading>Writing</Heading>
+            <Spacer medium />
+            {[novel].map(({ name, description, milestones }) => {
+                return (
+                    <Project
+                        key={name}
+                        name={name}
+                        description={description}
+                        milestone={milestones[0].name}
+                        progress={milestones[0].progress}
+                    />
+                );
+            })}
+            <Spacer wide />
+            <Heading className="text-dimmed">Past Projects</Heading>
+            <Spacer small />
+            <p className="text-dimmed">
+                These are projects which I no longer maintain, or which aren{"'"}t valuable enough
+                for me to consider finishing at the moment.
+            </p>
+            <Spacer medium />
+            <ProjectGrid retired projects={[past.reactRoutine, past.reactRedux]} />
+        </Wrapper>
+    );
+};
 
 Projects.getLayout = (page: React.ReactNode) => (
-  <Page title="Projects" pagePath="/projects/">
-    {page}
-  </Page>
-)
+    <Page title="Projects" pagePath="/projects/">
+        {page}
+    </Page>
+);
 
-export default Projects
+export default Projects;
diff --git a/src/types.ts b/src/types.ts
index bf6d675..aef4980 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,20 +1,19 @@
 export interface PostFrontMatter {
-  template: string
-  title: string
-  date: string
+    template: string;
+    title: string;
+    date: string;
 }
 
 export interface Post {
-  template: string
-  title: string
-  date: string
-  content: string
-  url: string
+    template: string;
+    title: string;
+    date: string;
+    content: string;
+    url: string;
 }
 
 export interface Project {
-  name: string
-  description: string
-  milestones: { name: string; progress?: number }[]
+    name: string;
+    description: string;
+    milestones: { name: string; progress?: number }[];
 }
-