fix: fix docs ssr compability

aircodelabs · Sep 15, 2023 · e691225 · e691225
1 parent 84c34b1
commit e691225
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 30 deletions.
diff --git a/docs/.vitepress/theme/components/FeaturePattern.vue b/docs/.vitepress/theme/components/FeaturePattern.vue
@@ -46,14 +46,16 @@ const style = computed<{ maskImage: string, WebKitMaskImage: string}>(
 <template>
   <div class="pointer-events-none" :data-y="pattern.y">
     <div class="absolute inset-0 rounded-xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
-      <GridPattern
-        :width="72"
-        :height="56"
-        x="50%"
-        :y="pattern.y"
-        :squares="pattern.squares"
-        class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
-      />
+      <ClientOnly>
+        <GridPattern
+          :width="72"
+          :height="56"
+          x="50%"
+          :y="pattern.y"
+          :squares="pattern.squares"
+          class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
+        />
+      </ClientOnly>
     </div>
     <div
       class="absolute inset-0 rounded-xl bg-gradient-to-r from-[#38BDF8]/10 to-[#0EA5E9]/10 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#38BDF8]/15 dark:to-[#0EA5E9]/15"
@@ -62,14 +64,16 @@ const style = computed<{ maskImage: string, WebKitMaskImage: string}>(
       class="absolute inset-0 rounded-xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
       :style="style"
     >
-      <GridPattern
-        :width="72"
-        :height="56"
-        x="50%"
-        :y="pattern.y"
-        :squares="pattern.squares"
-        class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
-      />
+      <ClientOnly>
+        <GridPattern
+          :width="72"
+          :height="56"
+          x="50%"
+          :y="pattern.y"
+          :squares="pattern.squares"
+          class="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
+        />
+      </ClientOnly>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/HeroPattern.vue b/docs/.vitepress/theme/components/HeroPattern.vue
@@ -6,19 +6,21 @@ import GridPattern from './GridPattern.vue'
 <div class="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
   <div class="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
     <div class="absolute inset-0 bg-gradient-to-r from-[#38BDF8] to-[#0EA5E9] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#38BDF8]/30 dark:to-[#0EA5E9]/30 dark:opacity-100">
-      <GridPattern
-        :width="72"
-        :height="56"
-        :x="-12"
-        :y="4"
-        :squares="[
-          [4, 3],
-          [2, 1],
-          [7, 3],
-          [10, 6],
-        ]"
-        class="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
-      />
+      <ClientOnly>
+        <GridPattern
+          :width="72"
+          :height="56"
+          :x="-12"
+          :y="4"
+          :squares="[
+            [4, 3],
+            [2, 1],
+            [7, 3],
+            [10, 6],
+          ]"
+          class="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
+        />
+      </ClientOnly>
     </div>
     <svg
       viewBox="0 0 1113 440"

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -27,7 +27,7 @@ export default {
         '71137b4efb8f425b8ce4addea9900216',
         {
           debug: import.meta.env.DEV,
-          persitence: 'localStorage',
+          persistence: 'localStorage',
         },
       )
       mixpanel.register({