From 3dd1ade5f5cc92efb564335213b13b19ec580bef Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Fri, 20 Jun 2025 11:32:21 -0400
Subject: [PATCH 1/4] Wraps p5.js code in ClientOnly

---
 pages/playground/palettes/mountains.vue |  9 +++-
 pages/playground/palettes/variance.vue  |  9 +++-
 pages/playground/plotter/index.vue      |  9 +++-
 pages/playground/stl-model-render.vue   |  9 +++-
 pages/playground/tiling/index.vue       |  9 +++-
 pages/playground/waves/index.vue        | 63 ++++++++++++++++---------
 6 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/pages/playground/palettes/mountains.vue b/pages/playground/palettes/mountains.vue
index 5958c5cd..4480e2a1 100644
--- a/pages/playground/palettes/mountains.vue
+++ b/pages/playground/palettes/mountains.vue
@@ -2,7 +2,14 @@
   <div class="select-none bg-gradient-to-b from-green-800 to-gray-800">
     <div class="m-6 grid h-2/3 place-items-center">
       <div class="font-mono text-white">
-        <div id="canvas" class="mb-2 h-96 border-2 border-white" />
+        <ClientOnly>
+          <div id="canvas" class="mb-2 h-96 border-2 border-white" />
+          <template #fallback>
+            <div class="mb-2 flex h-96 items-center justify-center border-2 border-white bg-gray-800">
+              <div class="text-white">Loading mountain visualization...</div>
+            </div>
+          </template>
+        </ClientOnly>
         <div class="my-2 w-48 text-center md:w-full">
           Click or tap anywhere to redraw the waves!
         </div>
diff --git a/pages/playground/palettes/variance.vue b/pages/playground/palettes/variance.vue
index 8486a9a9..ddbe425b 100644
--- a/pages/playground/palettes/variance.vue
+++ b/pages/playground/palettes/variance.vue
@@ -3,7 +3,14 @@
     <div class="grid h-screen place-items-center">
       <div class="font-mono text-white">
         <div class="mb-2 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading color palette...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
       </div>
     </div>
diff --git a/pages/playground/plotter/index.vue b/pages/playground/plotter/index.vue
index eb94f4ea..670be6b1 100644
--- a/pages/playground/plotter/index.vue
+++ b/pages/playground/plotter/index.vue
@@ -3,7 +3,14 @@
     <div class="m-8 grid place-items-center">
       <div class="font-mono text-white">
         <div id="canvas-container" class="mb-2 h-96 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading sequence plotter...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 md:w-full">
           <textarea
diff --git a/pages/playground/stl-model-render.vue b/pages/playground/stl-model-render.vue
index 15d752f4..399e96d5 100644
--- a/pages/playground/stl-model-render.vue
+++ b/pages/playground/stl-model-render.vue
@@ -17,7 +17,14 @@ definePageMeta({ layout: "none" });
       renderer.
     </div>
     <div class="h-96 border-2 border-white">
-      <ModelPreview path="/models/mac_mini_macbook_stand.stl" />
+      <ClientOnly>
+        <ModelPreview path="/models/mac_mini_macbook_stand.stl" />
+        <template #fallback>
+          <div class="flex h-full items-center justify-center bg-gray-800">
+            <div class="text-white">Loading 3D model...</div>
+          </div>
+        </template>
+      </ClientOnly>
     </div>
   </div>
 </template>
diff --git a/pages/playground/tiling/index.vue b/pages/playground/tiling/index.vue
index 4bdfbd2a..bb3e4e65 100644
--- a/pages/playground/tiling/index.vue
+++ b/pages/playground/tiling/index.vue
@@ -3,7 +3,14 @@
     <div class="grid h-screen place-items-center">
       <div class="font-mono text-white">
         <div class="mb-2 border-2 border-white">
-          <div id="canvas" />
+          <ClientOnly>
+            <div id="canvas" />
+            <template #fallback>
+              <div class="flex h-96 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading tiling visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 w-48 text-center md:w-full">
           m-ary tree based tiling
diff --git a/pages/playground/waves/index.vue b/pages/playground/waves/index.vue
index 50459744..d14ea452 100644
--- a/pages/playground/waves/index.vue
+++ b/pages/playground/waves/index.vue
@@ -29,33 +29,54 @@
           </div>
         </div>
         <div class="mb-2 border-2 border-white">
-          <PlaygroundWave
-            id="canvas1"
-            type="sin"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas1"
+              type="sin"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div>y(x) = A cos((2π / λ) x)</div>
         <div class="mb-2 border-2 border-white">
-          <PlaygroundWave
-            id="canvas2"
-            type="cos"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas2"
+              type="cos"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div>y(x) = A tan((2π / λ) x)</div>
         <div class="border-2 border-white">
-          <PlaygroundWave
-            id="canvas3"
-            type="tan"
-            :diameter="wave.diameter"
-            :amplitude="wave.amplitude"
-            :lambda="wave.lambda"
-          />
+          <ClientOnly>
+            <PlaygroundWave
+              id="canvas3"
+              type="tan"
+              :diameter="wave.diameter"
+              :amplitude="wave.amplitude"
+              :lambda="wave.lambda"
+            />
+            <template #fallback>
+              <div class="flex h-64 items-center justify-center bg-gray-800">
+                <div class="text-white">Loading wave visualization...</div>
+              </div>
+            </template>
+          </ClientOnly>
         </div>
         <div class="my-2 w-48 md:w-full">
           Click or tap anywhere to clear the canvas!

From 1c249a4b62ab36cb913af53776d9304faa97b8e7 Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Fri, 20 Jun 2025 11:38:42 -0400
Subject: [PATCH 2/4] Removes v-if='false' blocks

---
 components/section/AboutMe.vue    | 24 ------------------------
 components/section/BlogPosts.vue  |  8 --------
 components/section/Playground.vue |  8 --------
 pages/articles/index.vue          |  3 ---
 pages/index.vue                   |  6 ------
 pages/playground/matrix.vue       |  4 ----
 6 files changed, 53 deletions(-)

diff --git a/components/section/AboutMe.vue b/components/section/AboutMe.vue
index 0dad9fb0..3c2131f8 100644
--- a/components/section/AboutMe.vue
+++ b/components/section/AboutMe.vue
@@ -1,30 +1,6 @@
 <template>
   <section class="">
     <div class="lg:text-normal space-y-4 text-justify text-white sm:text-base">
-      <template v-if="false">
-        <div>
-          I am a
-          <span class="inline-block w-48">
-            <HeadlessTransitionRoot
-              as="template"
-              appear
-              :show="show"
-              enter="transition transform duration-300 ease-out"
-              enter-from="translate-y-2 opacity-0"
-              enter-to="translate-x-0 opacity-100"
-              leave="transition transform duration-300 ease-in"
-              leave-from="opacity-100"
-              leave-to="-translate-y-2 opacity-0"
-            >
-              <div
-                class="w-48 bg-white px-2 text-center font-extrabold tracking-wide text-black shadow-xl"
-              >
-                {{ occupation }}
-              </div>
-            </HeadlessTransitionRoot>
-          </span>
-        </div>
-      </template>
       <div>
         I help educate data engineers while building the future of data
         orchestration at
diff --git a/components/section/BlogPosts.vue b/components/section/BlogPosts.vue
index 1f0d1709..a238b24e 100644
--- a/components/section/BlogPosts.vue
+++ b/components/section/BlogPosts.vue
@@ -8,14 +8,6 @@ const props = defineProps({
 <template>
   <section class="bg-gradient-to-b from-background to-transparent py-2">
     <div class="container mx-auto space-y-4">
-      <template v-if="false">
-        <NuxtLink
-          to="/articles"
-          class="font-milk text-xl text-white hover:underline hover:decoration-orange-500 hover:decoration-2"
-        >
-          Blog Posts
-        </NuxtLink>
-      </template>
 
       <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
         <div v-for="(article, ix) of articles" :key="ix">
diff --git a/components/section/Playground.vue b/components/section/Playground.vue
index 36cbf403..8317fe15 100644
--- a/components/section/Playground.vue
+++ b/components/section/Playground.vue
@@ -101,14 +101,6 @@ const filtered_links = computed(() => {
 <template>
   <section class="bg-gradient-to-b from-transparent to-background text-white">
     <div class="container mx-auto space-y-4 py-8 text-white">
-      <template v-if="false">
-        <NuxtLink
-          to="/playground"
-          class="font-milk text-2xl text-white underline decoration-orange-500 decoration-2"
-        >
-          Experiments
-        </NuxtLink>
-      </template>
 
       <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <nuxt-link
diff --git a/pages/articles/index.vue b/pages/articles/index.vue
index 85c513df..d4f53033 100644
--- a/pages/articles/index.vue
+++ b/pages/articles/index.vue
@@ -87,9 +87,6 @@ function toggleCategory(cat) {
 
 <template>
   <section class="container mx-auto font-mono text-white">
-    <template v-if="false">
-      <h1 class="my-6 text-2xl font-extrabold">Blog</h1>
-    </template>
     <div class="grid grid-cols-4 gap-4">
       <div class="col-span-4 lg:col-span-3">
         <div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
diff --git a/pages/index.vue b/pages/index.vue
index 0eaa3c60..b1db5142 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,13 +7,7 @@ const data = await queryCollection("content")
 
 <template>
   <div>
-    <template v-if="false">
-      <SectionAboutMe />
-    </template>
     <div class="bg-emerald-950 bg-[url('/images/noise.svg')]">
-      <template v-if="false">
-        <SectionInterests />
-      </template>
       <SectionBlogPosts :articles="data" :show_dates="true" />
       <SectionPlayground :limit="9" showImages linkToPlayground />
     </div>
diff --git a/pages/playground/matrix.vue b/pages/playground/matrix.vue
index 814b330a..27d30434 100644
--- a/pages/playground/matrix.vue
+++ b/pages/playground/matrix.vue
@@ -146,10 +146,6 @@
       </div>
     </div>
 
-    <!-- Debug -->
-    <div v-if="false" class="border border-gray-400 p-2">
-      {{ step }}
-    </div>
   </div>
 </template>
 

From 7981e790c7d8204f3a882353ac08560d74d4d972 Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Fri, 20 Jun 2025 11:48:11 -0400
Subject: [PATCH 3/4] Use NuxtTime for hydration issues

---
 components/section/BlogPosts.vue | 18 ++++++++----------
 pages/articles/index.vue         | 10 +++++++---
 pages/talks.vue                  |  8 +++++++-
 utils/index.ts                   |  4 ++++
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/components/section/BlogPosts.vue b/components/section/BlogPosts.vue
index a238b24e..67712818 100644
--- a/components/section/BlogPosts.vue
+++ b/components/section/BlogPosts.vue
@@ -19,17 +19,15 @@ const props = defineProps({
                 <div class="flex-1 text-lg font-bold md:text-xl">
                   {{ article.title }}
                 </div>
-                <div v-if="show_dates" class="text-sm font-light text-gray-400">
-                  {{
-                    new Date(article.date).toLocaleDateString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                    })
-                  }}
-                </div>
+                <NuxtTime
+                  v-if="show_dates"
+                  :datetime="article.date" 
+                  class="text-sm font-light text-gray-400"
+                  year="numeric"
+                  month="short"
+                  day="2-digit"
+                />
               </div>
-
               <div class="line-clamp-3 text-sm text-gray-300">
                 {{ article.description }}
               </div>
diff --git a/pages/articles/index.vue b/pages/articles/index.vue
index d4f53033..fe96e61a 100644
--- a/pages/articles/index.vue
+++ b/pages/articles/index.vue
@@ -91,9 +91,13 @@ function toggleCategory(cat) {
       <div class="col-span-4 lg:col-span-3">
         <div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
           <template v-for="article in visibleArticles" :key="article._id">
-            <div class="col-span-10 lg:col-span-2">
-              {{ formatDate(article.date) }}
-            </div>
+            <NuxtTime
+              :datetime="article.date" 
+              class="col-span-10 lg:col-span-2"
+              year="numeric"
+              month="short"
+              day="2-digit"
+            />
             <div class="col-span-10 lg:col-span-8">
               <div class="flex-col space-y-2">
                 <NuxtLink class="text-orange-500" :to="article.path">{{
diff --git a/pages/talks.vue b/pages/talks.vue
index b87b566a..4136dfb2 100644
--- a/pages/talks.vue
+++ b/pages/talks.vue
@@ -73,7 +73,13 @@ const talks = [
     <h1 class="my-6 text-2xl font-extrabold">Talks</h1>
     <div class="grid grid-cols-10 gap-y-6">
       <template v-for="(talk, ix) in talks" :key="ix">
-        <div class="col-span-2">{{ formatDate(talk.date) }}</div>
+        <NuxtTime
+          :datetime="talk.date" 
+          class="col-span-2"
+          year="numeric"
+          month="short"
+          day="2-digit"
+        />
         <div class="col-span-8">
           <div class="flex-col space-y-2">
             <!-- <div class=""> -->
diff --git a/utils/index.ts b/utils/index.ts
index 4f802d59..05cdc5c8 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -1,3 +1,7 @@
+// Warning! This utility was created before becoming aware of <NuxtTime>.
+//
+// Date formatting can cause hydration issues due to the difference locale on server and client.
+// See: https://www.leopold.is/blog/nuxt-hydration-issues-and-dates/
 export const formatDate = function (date) {
   return new Date(date).toLocaleDateString("en-US", {
     month: "short",

From 4805f38ef7bd990b776414532d755f29e9fc9bb3 Mon Sep 17 00:00:00 2001
From: Colton Padden <colton.padden@fastmail.com>
Date: Fri, 20 Jun 2025 12:21:13 -0400
Subject: [PATCH 4/4] Sets body background using nuxt.config.js

---
 app.vue        | 8 +++-----
 nuxt.config.ts | 8 ++++++++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/app.vue b/app.vue
index 1ba5faac..fdf7a9d6 100644
--- a/app.vue
+++ b/app.vue
@@ -17,9 +17,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <body class="bg-background">
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </body>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4d055c07..9f9a597b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,14 @@ export default defineNuxtConfig({
   components: true,
   modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "nuxt-headlessui"],
 
+  app: {
+    head: {
+      bodyAttrs: {
+        class: 'bg-background'
+      }
+    }
+  },
+
   // Optionally change the default prefix.
   headlessui: {
     prefix: "Headless",