fix(docs): Fixed hydration mismatch errors

style(docs): Switched to monochromatic theme
oyedejioyewole · Jan 4, 2024 · 326d4c4 · 326d4c4
1 parent ba382d3
commit 326d4c4
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 68 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -6,6 +6,6 @@
 
 <style lang="scss">
 body {
-  @apply bg-accent-100;
+  @apply bg-primary-100 selection:bg-primary-300;
 }
 </style>
diff --git a/docs/components/IntroBanner.vue b/docs/components/IntroBanner.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import iconList from "#build/nuxt-phosphor-icons.json";
 
-const icons = ref<string[]>([]);
+const { data: icons } = useAsyncData(async () => generateIcons());
 const { copy } = useClipboard({ legacy: true });
 
-icons.value = generateIconNames();
-
 useIntervalFn(async () => {
-  const newIcons = generateIconNames();
-
+  const newIcons = generateIcons();
   await prefetchComponents(newIcons);
-
   icons.value = newIcons;
 }, 5000);
 
-function generateIconNames() {
-  const generatedIcons = [] as string[];
+async function copyToClipboard(text: string) {
+  await copy(text);
+  push.success("Copied!");
+}
+
+function generateIcons() {
+  const generatedIcons: string[] = [];
 
   for (let index = 0; index < 4; index++) {
     const icon = `${iconList[Math.floor(Math.random() * iconList.length)]}`;
@@ -31,19 +32,14 @@ function generateIconNames() {
 
   return generatedIcons;
 }
-
-async function copyToClipboard(text: string) {
-  await copy(text);
-  push.success("Copied!");
-}
 </script>
 
 <template>
   <header
     class="mx-auto grid h-screen w-[90%] place-content-center gap-y-20 lg:w-3/4"
   >
-    <h1 class="text-center font-serif text-5xl text-copy-900 lg:text-7xl">
-      <span class="text-accent-500">Phosphor Icons</span> meets
+    <h1 class="font-serif text-5xl text-primary-900 lg:text-7xl">
+      <span class="text-primary-500">Phosphor Icons</span> meets
       <span class="text-primary-500">Nuxt</span>
     </h1>
 
@@ -52,43 +48,28 @@ async function copyToClipboard(text: string) {
       class="will-change-content grid grid-cols-2 place-items-center gap-4 lg:grid-cols-4 lg:gap-x-4"
     >
       <div
-        class="rounded-lg bg-accent-500 bg-opacity-20 p-10 lg:p-20"
-        v-auto-animate
-      >
-        <component :is="icons[0]" size="50" />
-      </div>
-      <div
-        class="rounded-lg bg-accent-500 bg-opacity-20 p-10 lg:p-20"
-        v-auto-animate
-      >
-        <component :is="icons[1]" size="50" />
-      </div>
-      <div
-        class="rounded-lg bg-accent-500 bg-opacity-20 p-10 lg:p-20"
-        v-auto-animate
-      >
-        <component :is="icons[2]" size="50" />
-      </div>
-      <div
-        class="rounded-lg bg-accent-500 bg-opacity-20 p-10 lg:p-20"
+        class="rounded-lg bg-primary-300 p-10 lg:p-20"
         v-auto-animate
+        v-for="(icon, index) of icons"
+        :key="index"
       >
-        <component :is="icons[3]" size="50" />
+        <component :is="icon" size="50" />
       </div>
     </div>
 
-    <!-- Try now -->
     <div class="flex flex-col justify-between gap-y-4 lg:flex-row">
+      <!-- Copy code -->
       <button
-        class="flex w-full items-center justify-center gap-x-2 rounded-lg bg-primary-500 py-3 text-sm text-copy-900 lg:w-3/4 lg:gap-x-4"
+        class="flex w-full items-center justify-center gap-x-2 rounded-lg bg-primary-400 py-3 text-sm text-primary-900 lg:w-3/4 lg:gap-x-4"
         @click="copyToClipboard(($event.target as HTMLElement).innerText)"
       >
         <LazyPhosphorIconCode size="25" />
         <code>pnpm add -D nuxt-phosphor-icons</code>
       </button>
 
+      <!-- Go to release notes -->
       <NuxtLink
-        class="flex w-full items-center justify-center gap-x-2 rounded-full border border-accent-500 p-3 text-accent-500 transition hover:bg-accent-500 hover:text-copy-900 lg:w-[200px] lg:justify-around lg:gap-x-0"
+        class="flex w-full items-center justify-center gap-x-2 rounded-full border border-primary-500 p-3 text-primary-500 transition hover:bg-primary-500 hover:text-primary-900 lg:w-[200px] lg:justify-around lg:gap-x-0"
         to="/release-notes"
         >Release Notes <LazyPhosphorIconArrowRight size="20"
       /></NuxtLink>

diff --git a/docs/components/OgImage/Page.vue b/docs/components/OgImage/Page.vue
@@ -3,7 +3,7 @@ defineProps<{ title: string; description: string }>();
 </script>
 
 <template>
-  <div class="w-full bg-accent-100">
+  <div class="w-full bg-primary-100">
     <div class="relative mx-auto h-screen w-[90%] py-20">
       <h1 class="text-5xl font-extrabold">{{ title }} · nuxt-phosphor-icons</h1>
       <p class="font-sans text-3xl">{{ description }}</p>
@@ -17,7 +17,6 @@ defineProps<{ title: string; description: string }>();
             rgba(135, 142, 84, 0.6)
           );
         "
-        id="glowing-sphere"
       >
         <PhosphorIconPhosphorLogo size="100" />
       </div>

diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
@@ -3,7 +3,7 @@
     <slot />
 
     <footer class="mx-auto flex items-center justify-between py-10 lg:w-1/2">
-      <h1 class="text-lg tracking-wide text-copy-900">
+      <h1 class="text-lg tracking-wide text-primary-900">
         Made with 🧋 · Hosted on Vercel
       </h1>
 

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -38,6 +38,7 @@ export default defineNuxtConfig({
   site: {
     url: "https://nuxt-phosphor-icons.vercel.app",
   },
+  tailwindcss: { exposeConfig: true },
   typescript: {
     shim: false,
   },

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+//@ts-ignore
+import colors from "#build/tailwind.config/theme/accentColor";
 import { pastelTheme, type NotivueTheme } from "notivue";
 
 defineOgImageComponent(
@@ -12,9 +14,9 @@ defineOgImageComponent(
 
 const theme: NotivueTheme = {
   ...pastelTheme,
-  "--nv-success-accent": "#2d271d",
-  "--nv-success-bg": "#a5986a",
-  "--nv-success-fg": "#2d271d",
+  "--nv-success-accent": colors.primary[900],
+  "--nv-success-bg": colors.primary[300],
+  "--nv-success-fg": colors.primary[900],
 };
 </script>
 
@@ -36,23 +38,23 @@ const theme: NotivueTheme = {
 <style lang="scss">
 #documentation {
   a {
-    @apply text-accent-500 hover:underline;
+    @apply text-primary-500 hover:underline;
   }
 
   code {
-    @apply rounded-lg bg-accent-500 px-3 py-1 text-sm;
+    @apply rounded-lg bg-primary-500 px-3 py-1 text-sm;
   }
 
   h1,
   h2,
   h3,
   h4 {
     a {
-      @apply font-serif text-copy-900;
+      @apply font-serif text-primary-900;
     }
   }
   h1 {
-    @apply font-serif text-4xl text-copy-900 lg:text-6xl;
+    @apply font-serif text-4xl text-primary-900 lg:text-6xl;
   }
 
   h2 {
@@ -67,24 +69,24 @@ const theme: NotivueTheme = {
     @apply text-xl font-bold lg:text-2xl;
 
     code {
-      @apply rounded-lg bg-accent-500 p-3;
+      @apply rounded-lg bg-primary-500 p-3;
     }
   }
 
   ol {
     @apply list-inside list-decimal space-y-8 text-lg;
 
     li {
-      @apply space-y-4 text-copy-900;
+      @apply space-y-4 text-primary-900;
     }
   }
 
   p {
-    @apply text-pretty text-lg leading-loose tracking-wide text-copy-900;
+    @apply text-pretty text-lg leading-loose tracking-wide text-primary-900;
   }
 
   pre {
-    @apply overflow-x-scroll rounded-lg bg-accent-900 p-5 text-sm lg:p-7;
+    @apply overflow-x-scroll rounded-lg bg-primary-900 p-5 text-sm lg:p-7;
 
     code {
       @apply rounded-none bg-transparent;
@@ -95,7 +97,7 @@ const theme: NotivueTheme = {
     @apply list-inside list-disc space-y-8 text-lg;
 
     li {
-      @apply space-y-4 text-copy-900;
+      @apply space-y-4 text-primary-900;
     }
   }
 }

diff --git a/docs/pages/release-notes.vue b/docs/pages/release-notes.vue
@@ -13,33 +13,34 @@ defineOgImageComponent(
   <main class="mx-auto min-h-screen w-[90%] space-y-20 py-20 lg:w-1/2">
     <NuxtLink
       to="/"
-      class="flex w-fit items-center gap-x-1 rounded-full border border-accent-500 p-3 text-accent-500 transition hover:bg-accent-500 hover:text-copy-900"
-      ><LazyPhosphorIconArrowLeft size="20" /> Go back</NuxtLink
+      class="flex w-fit items-center gap-x-1 rounded-full border border-primary-500 p-3 text-primary-500 transition hover:bg-primary-500 hover:text-primary-900"
     >
+      <LazyPhosphorIconArrowLeft size="20" /> Go back
+    </NuxtLink>
     <ContentDoc class="space-y-8" id="release-notes" path="/release-notes" />
   </main>
 </template>
 
 <style lang="scss">
 #release-notes {
   a {
-    @apply text-accent-500 hover:underline;
+    @apply text-primary-500 hover:underline;
   }
 
   code {
-    @apply rounded-lg bg-accent-500 px-3 py-1 text-sm;
+    @apply rounded-lg bg-primary-500 px-3 py-1 text-sm;
   }
 
   h1,
   h2,
   h3,
   h4 {
     a {
-      @apply font-serif text-copy-900;
+      @apply font-serif text-primary-900;
     }
   }
   h1 {
-    @apply font-serif text-4xl text-copy-900 lg:text-6xl;
+    @apply font-serif text-4xl text-primary-900 lg:text-6xl;
   }
 
   h2 {
@@ -55,7 +56,7 @@ defineOgImageComponent(
   }
 
   p {
-    @apply text-pretty  text-lg leading-loose tracking-wide text-accent-900;
+    @apply text-pretty  text-lg leading-loose tracking-wide text-primary-900;
   }
 
   ul {

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -6,8 +6,8 @@ export default {
   theme: {
     extend: {
       colors: tailwindcssPaletteGenerator({
-        colors: ["#b5ac83", "#00DC82", "#0a100d"],
-        names: ["accent", "primary", "copy"],
+        colors: ["#3c402b"],
+        names: ["primary"],
       }),
       fontFamily: {
         mono: ["Courier Prime", "monospace"],

diff --git a/playground/app.vue b/playground/app.vue
@@ -48,9 +48,9 @@ async function copyToClipboard(text: string) {
     class="grid grid-rows-2 lg:grid-cols-2 content-center min-h-screen mx-auto w-[90%] gap-x-10"
   >
     <div class="space-y-10 flex flex-col justify-center">
-      <h1 class="font-serif text-5xl text-copy-900">Playground</h1>
+      <h1 class="font-serif text-5xl text-primary-900">Playground</h1>
       <input
-        class="border-accent-500 border-2 w-full p-3 rounded-lg"
+        class="border-primary-500 border-2 w-full p-3 rounded-lg"
         placeholder="e.g. address-book"
         type="text"
         v-model="icon"
@@ -64,7 +64,7 @@ async function copyToClipboard(text: string) {
         <p class="text-lg">
           View available icons
           <NuxtLink
-            class="text-accent-500"
+            class="text-primary-500"
             target="_blank"
             to="https://phosphoricons.com"
             >here</NuxtLink
@@ -78,7 +78,7 @@ async function copyToClipboard(text: string) {
       v-auto-animate
     >
       <button
-        class="p-10 bg-accent-500 rounded-lg w-fit flex items-center"
+        class="p-10 bg-primary-500 rounded-lg w-fit flex items-center"
         v-for="(icon, index) of displayedIcons"
         v-if="typeof displayedIcons === 'object' && displayedIcons.length > 1"
         :key="index"
@@ -88,7 +88,7 @@ async function copyToClipboard(text: string) {
       </button>
 
       <button
-        class="p-10 bg-accent-500 rounded-lg mx-auto"
+        class="p-10 bg-primary-500 rounded-lg mx-auto"
         v-else-if="
           typeof displayedIcons === 'object' && displayedIcons.length === 1
         "