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"
+    ]
   }
 }

pnpm-lock.yaml

@@ -2435,8 +2435,8 @@ packages:
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
-  emoji-regex@10.3.0:
+  emoji-regex@10.4.0:
-    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3763,12 +3763,12 @@ packages:
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
-  ultrahtml@1.5.2:
-    resolution: {integrity: sha512-qh4mBffhlkiXwDAOxvSGxhL0QEQsTbnP9BozOK3OYPEGvPvdWzvAUaXNtUSMdNsKDtuyjEbyVUPFZ52SSLhLqw==}
-
   ultrahtml@1.5.3:
     resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==}
 
+  ultrahtml@1.6.0:
+    resolution: {integrity: sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw==}
+
   unconfig@7.0.0:
     resolution: {integrity: sha512-G5CJSoG6ZTxgzCJblEfgpdRK2tos9+UdD2WtecDUVfImzQ0hFjwpH5RVvGMhP4pRpC9ML7NrC4qBsBl0Ttj35A==}
 
@@ -6174,7 +6174,7 @@ snapshots:
 
   emoji-regex-xs@1.0.0: {}
 
-  emoji-regex@10.3.0: {}
+  emoji-regex@10.4.0: {}
 
   emoji-regex@8.0.0: {}
 
@@ -7396,7 +7396,7 @@ snapshots:
 
   satori-html@0.3.2:
     dependencies:
-      ultrahtml: 1.5.2
+      ultrahtml: 1.6.0
 
   satori@0.10.14:
     dependencies:
@@ -7404,7 +7404,7 @@ snapshots:
       css-background-parser: 0.1.0
       css-box-shadow: 1.0.0-3
       css-to-react-native: 3.2.0
-      emoji-regex: 10.3.0
+      emoji-regex: 10.4.0
       escape-html: 1.0.3
       linebreak: 1.1.0
       parse-css-color: 0.2.1
@@ -7690,10 +7690,10 @@ snapshots:
 
   ufo@1.5.4: {}
 
-  ultrahtml@1.5.2: {}
-
   ultrahtml@1.5.3: {}
 
+  ultrahtml@1.6.0: {}
+
   unconfig@7.0.0:
     dependencies:
       '@antfu/utils': 8.1.1