chore: updated og images

Author: Flowko

app/app.vue

@@ -24,8 +24,8 @@ useHead({
 useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
-  ogImage: 'https://docs-template.nuxt.dev/social-card.png',
-  twitterImage: 'https://docs-template.nuxt.dev/social-card.png',
+  ogImage: 'https://vuemail.net/social-preview.jpg',
+  twitterImage: 'https://vuemail.net/social-preview.jpg',
   twitterCard: 'summary_large_image'
 })
 

app/components/OgImage/OgImageDocs.vue

@@ -11,19 +11,77 @@ defineProps({
   description: {
     type: String,
     required: true
+  },
+  headline: {
+    type: String,
+    default: ''
   }
 })
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
-    <div class="relative">
-      <h1 class="text-8xl mb-4 text-white">
-        {{ title }}
+  <div class="w-full h-full flex flex-col justify-center bg-[#020420]">
+    <svg
+      class="absolute right-0 top-0"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="#5FDEFF"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[700px] pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1 class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center">
+        <span>{{ title }}</span>
       </h1>
-      <p class="text-5xl text-gray-200 leading-tight">
-        {{ description }}
+      <p class="text-[32px] text-[#E4E4E7] leading-tight">
+        {{ description.slice(0, 200) }}
       </p>
     </div>
+    <img
+      src="/og-icon-vue-email.png"
+      class="absolute top-[160px] right-[90px]"
+      width="340"
+      height="340"
+    >
   </div>
 </template>

package.json

@@ -12,16 +12,16 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/solar": "^1.1.9",
     "@iconify-json/heroicons": "^1.1.21",
+    "@iconify-json/ph": "^1.1.13",
     "@iconify-json/simple-icons": "^1.1.106",
+    "@iconify-json/solar": "^1.1.9",
     "@nuxt/content": "^2.13.0",
     "@nuxt/fonts": "^0.7.0",
     "@nuxt/image": "^1.7.0",
     "@nuxt/ui-pro": "^1.3.0",
     "nuxt": "^3.12.2",
-    "nuxt-og-image": "^3.0.0-rc.54"
+    "nuxt-og-image": "3.0.0-rc.54"
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.3.13",