feat: new og image

docs/.vitepress/hooks/Template.vue

@@ -1,28 +1,13 @@
 <script setup lang="ts">
-defineProps<{ title: string; description?: string }>()
+defineProps<{ title: string; description?: string; image?: string }>()
 </script>
 
 <template>
   <span
     tw="w-full h-full bg-black flex flex-col"
-    style="
-      background-image: linear-gradient(
-        43deg,
-        #b794f4 2%,
-        #b18df2 7.5%,
-        #ab87ef 13%,
-        #9f7aea 24%,
-        #8c6ee2 32%,
-        #7864d8 40%,
-        #4c51bf 56%,
-        #4949ae 60.5%,
-        #46419b 65%,
-        #3c366b 74%,
-        #2f315d 80.5%,
-        #272d47 87%,
-        #1a202c 100%
-      );
-    "
+    :style="{
+      backgroundImage: `url(${image})`
+    }"
   >
     <span
       tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between"

docs/.vitepress/hooks/opengraph.ts

@@ -102,12 +102,13 @@ async function generateImage({
 
   // consola.info(url, title, description)
   const options: SatoriOptions = {
-    width: 1200,
-    height: 628,
+    width: 1800,
+    height: 900,
     fonts,
     props: {
       title,
-      description
+      description,
+      image: 'https://i.fmhy.net/og-base.jpg'
     }
   }
 

docs/.vitepress/hooks/satoriConfig.ts

@@ -51,13 +51,15 @@ const fonts: SatoriOptions['fonts'] = [
 ]
 
 export default defineSatoriConfig({
-  width: 1200,
-  height: 628,
+  width: 1800,
+  height: 900,
   fonts,
   props: {
     title: 'Title',
     description:
       'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
-    dir: '/j'
+    dir: '/j',
+    // I almost killed myself for this shit
+    image: 'https://i.fmhy.net/og-base.jpg'
   }
 })