Skip to content

Commit ed3d7b8

Browse files
cmpaddencmpadden
authored
Merge pull request #77 from cmpadden/colton/p5-client-only
Fix hydration mismatch errors
2 parents 16ea522 + 4805f38 commit ed3d7b8

16 files changed

Lines changed: 119 additions & 98 deletions

File tree

‎app.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ useSeoMeta({
1717
</script>
1818

1919
<template>
20-
<body class="bg-background">
21-
<NuxtLayout>
22-
<NuxtPage />
23-
</NuxtLayout>
24-
</body>
20+
<NuxtLayout>
21+
<NuxtPage />
22+
</NuxtLayout>
2523
</template>

‎components/section/AboutMe.vue‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,6 @@
11
<template>
22
<section class="">
33
<div class="lg:text-normal space-y-4 text-justify text-white sm:text-base">
4-
<template v-if="false">
5-
<div>
6-
I am a
7-
<span class="inline-block w-48">
8-
<HeadlessTransitionRoot
9-
as="template"
10-
appear
11-
:show="show"
12-
enter="transition transform duration-300 ease-out"
13-
enter-from="translate-y-2 opacity-0"
14-
enter-to="translate-x-0 opacity-100"
15-
leave="transition transform duration-300 ease-in"
16-
leave-from="opacity-100"
17-
leave-to="-translate-y-2 opacity-0"
18-
>
19-
<div
20-
class="w-48 bg-white px-2 text-center font-extrabold tracking-wide text-black shadow-xl"
21-
>
22-
{{ occupation }}
23-
</div>
24-
</HeadlessTransitionRoot>
25-
</span>
26-
</div>
27-
</template>
284
<div>
295
I help educate data engineers while building the future of data
306
orchestration at

‎components/section/BlogPosts.vue‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@ const props = defineProps({
88
<template>
99
<section class="bg-gradient-to-b from-background to-transparent py-2">
1010
<div class="container mx-auto space-y-4">
11-
<template v-if="false">
12-
<NuxtLink
13-
to="/articles"
14-
class="font-milk text-xl text-white hover:underline hover:decoration-orange-500 hover:decoration-2"
15-
>
16-
Blog Posts
17-
</NuxtLink>
18-
</template>
1911

2012
<div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
2113
<div v-for="(article, ix) of articles" :key="ix">
@@ -27,17 +19,15 @@ const props = defineProps({
2719
<div class="flex-1 text-lg font-bold md:text-xl">
2820
{{ article.title }}
2921
</div>
30-
<div v-if="show_dates" class="text-sm font-light text-gray-400">
31-
{{
32-
new Date(article.date).toLocaleDateString("en-US", {
33-
month: "long",
34-
day: "numeric",
35-
year: "numeric",
36-
})
37-
}}
38-
</div>
22+
<NuxtTime
23+
v-if="show_dates"
24+
:datetime="article.date"
25+
class="text-sm font-light text-gray-400"
26+
year="numeric"
27+
month="short"
28+
day="2-digit"
29+
/>
3930
</div>
40-
4131
<div class="line-clamp-3 text-sm text-gray-300">
4232
{{ article.description }}
4333
</div>

‎components/section/Playground.vue‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,6 @@ const filtered_links = computed(() => {
101101
<template>
102102
<section class="bg-gradient-to-b from-transparent to-background text-white">
103103
<div class="container mx-auto space-y-4 py-8 text-white">
104-
<template v-if="false">
105-
<NuxtLink
106-
to="/playground"
107-
class="font-milk text-2xl text-white underline decoration-orange-500 decoration-2"
108-
>
109-
Experiments
110-
</NuxtLink>
111-
</template>
112104

113105
<div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
114106
<nuxt-link

‎nuxt.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ export default defineNuxtConfig({
33
components: true,
44
modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "nuxt-headlessui"],
55

6+
app: {
7+
head: {
8+
bodyAttrs: {
9+
class: 'bg-background'
10+
}
11+
}
12+
},
13+
614
// Optionally change the default prefix.
715
headlessui: {
816
prefix: "Headless",

‎pages/articles/index.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,17 @@ function toggleCategory(cat) {
8787

8888
<template>
8989
<section class="container mx-auto font-mono text-white">
90-
<template v-if="false">
91-
<h1 class="my-6 text-2xl font-extrabold">Blog</h1>
92-
</template>
9390
<div class="grid grid-cols-4 gap-4">
9491
<div class="col-span-4 lg:col-span-3">
9592
<div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
9693
<template v-for="article in visibleArticles" :key="article._id">
97-
<div class="col-span-10 lg:col-span-2">
98-
{{ formatDate(article.date) }}
99-
</div>
94+
<NuxtTime
95+
:datetime="article.date"
96+
class="col-span-10 lg:col-span-2"
97+
year="numeric"
98+
month="short"
99+
day="2-digit"
100+
/>
100101
<div class="col-span-10 lg:col-span-8">
101102
<div class="flex-col space-y-2">
102103
<NuxtLink class="text-orange-500" :to="article.path">{{

‎pages/index.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@ const data = await queryCollection("content")
77

88
<template>
99
<div>
10-
<template v-if="false">
11-
<SectionAboutMe />
12-
</template>
1310
<div class="bg-emerald-950 bg-[url('/images/noise.svg')]">
14-
<template v-if="false">
15-
<SectionInterests />
16-
</template>
1711
<SectionBlogPosts :articles="data" :show_dates="true" />
1812
<SectionPlayground :limit="9" showImages linkToPlayground />
1913
</div>

‎pages/playground/matrix.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,6 @@
146146
</div>
147147
</div>
148148

149-
<!-- Debug -->
150-
<div v-if="false" class="border border-gray-400 p-2">
151-
{{ step }}
152-
</div>
153149
</div>
154150
</template>
155151

‎pages/playground/palettes/mountains.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,14 @@
22
<div class="select-none bg-gradient-to-b from-green-800 to-gray-800">
33
<div class="m-6 grid h-2/3 place-items-center">
44
<div class="font-mono text-white">
5-
<div id="canvas" class="mb-2 h-96 border-2 border-white" />
5+
<ClientOnly>
6+
<div id="canvas" class="mb-2 h-96 border-2 border-white" />
7+
<template #fallback>
8+
<div class="mb-2 flex h-96 items-center justify-center border-2 border-white bg-gray-800">
9+
<div class="text-white">Loading mountain visualization...</div>
10+
</div>
11+
</template>
12+
</ClientOnly>
613
<div class="my-2 w-48 text-center md:w-full">
714
Click or tap anywhere to redraw the waves!
815
</div>

‎pages/playground/palettes/variance.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
<div class="grid h-screen place-items-center">
44
<div class="font-mono text-white">
55
<div class="mb-2 border-2 border-white">
6-
<div id="canvas" />
6+
<ClientOnly>
7+
<div id="canvas" />
8+
<template #fallback>
9+
<div class="flex h-96 items-center justify-center bg-gray-800">
10+
<div class="text-white">Loading color palette...</div>
11+
</div>
12+
</template>
13+
</ClientOnly>
714
</div>
815
</div>
916
</div>

0 commit comments

Comments
 (0)