feat: new og image

This commit is contained in:
taskylizard 2025-06-30 14:51:52 +00:00
parent 6f1b1f2e20
commit 5c6d4c3b41
No known key found for this signature in database
GPG key ID: 1820131ED1A24120
6 changed files with 30 additions and 38 deletions

View file

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

View file

@ -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"

View file

@ -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'
}
}

View file

@ -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'
}
})

View file

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

20
pnpm-lock.yaml generated
View file

@ -2435,8 +2435,8 @@ packages:
emoji-regex-xs@1.0.0:
resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
emoji-regex@10.3.0:
resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
emoji-regex@10.4.0:
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