fix(docs): 🔨 Fixed display issues with og:image

docs/components/OgImage/Page.vue

@@ -5,13 +5,13 @@ const shades = getColorShades("primary");
 </script>
 
 <template>
-  <div class="w-full" :style="{ background: shades[100] }">
+  <div class="w-full" :style="{ background: shades[200] }">
     <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>
+      <p class="text-4xl">{{ description }}</p>
 
       <div
-        class="absolute bottom-20 right-10 flex h-[200px] w-[200px] items-center justify-center rounded-full"
+        class="absolute bottom-20 right-10 h-[200px] w-[200px] rounded-full"
         :style="{
           background:
             'linear-gradient(45deg, ' + shades[500] + ', ' + shades[800] + ')',

docs/pages/index.vue

@@ -3,14 +3,10 @@ import { pastelTheme, type NotivueTheme } from "notivue";
 
 type ColorTheme = "dark" | "light";
 
-defineOgImageComponent(
-  "Page",
-  {
-    title: "Documentation",
-    description: "A simple wrapper for @phosphor-icons/vue in Nuxt",
-  },
-  { fonts: ["Lora:700", "Open Sans:400"] },
-);
+defineOgImageComponent("Page", {
+  description: "A simple wrapper for @phosphor-icons/vue in Nuxt",
+  title: "Documentation",
+});
 
 const colorTheme = useColorMode();
 const shades = getColorShades("primary");

docs/pages/release-notes.vue

@@ -1,12 +1,8 @@
 <script lang="ts" setup>
-defineOgImageComponent(
-  "Page",
-  {
-    title: "Release Notes",
-    description: "Don't miss out on improvements and new features",
-  },
-  { fonts: ["Lora:700", "Open Sans:400"] },
-);
+defineOgImageComponent("Page", {
+  description: "Don't miss out on improvements and new features",
+  title: "Release Notes",
+});
 </script>
 
 <template>