feat: new og image

.mise.toml

@@ -1,6 +1,7 @@
 # https://github.com/vitejs/vite/issues/17291
 [tools]
-node = "21"
+node = "latest"
+pnpm = "latest"
 
 [tasks]
 d = "nrr docs:dev --host"

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="
+    :style="{
-      background-image: linear-gradient(
+      backgroundImage: `url(${image})`
-        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%
-      );
-    "
   >
     <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,
+    width: 1800,
-    height: 628,
+    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,
+  width: 1800,
-  height: 628,
+  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'
   }
 })

package.json

@@ -17,7 +17,7 @@
     "docs:preview": "vitepress preview docs/",
     "format": "prettier -w --cache --check .",
     "licenser": "deno run --allow-read jsr:@kt3k/license-checker@3.3.1/main",
-    "og:dev": "x-satori -t ./docs/.vitepress/hooks/Template.vue -c ./.vitepress/hooks/satoriConfig.ts --dev"
+    "og:dev": "x-satori -t ./docs/.vitepress/hooks/Template.vue -c ./docs/.vitepress/hooks/satoriConfig.ts --dev"
   },
   "dependencies": {
     "@fmhy/colors": "^0.0.11",
@@ -75,6 +75,9 @@
         "@algolia/client-search",
         "search-insights"
       ]
-    }
+    },
+    "onlyBuiltDependencies": [
+      "vue-demi"
+    ]
   }
 }