chore: add vite serve playground

examples/vue/.npmrc → examples/run-esm-script/.npmrc

@@ -1,5 +1,5 @@
 ignore-workspace-root-check=true
 shell-emulator=true
+public-hoist-pattern[]=*@vue*
 public-hoist-pattern[]=*vite*
 public-hoist-pattern[]=*eslint*
-public-hoist-pattern[]=*@vue*

playground/a.js → examples/run-esm-script/gen-png.mts

@@ -1,15 +1,17 @@
 import { fileURLToPath } from 'node:url'
-import { readFile } from 'node:fs/promises'
+import { readFile, writeFile } from 'node:fs/promises'
 import { dirname, resolve } from 'path'
-import { satoriVue } from 'x-satori/vue'
+import { renderAsync } from '@resvg/resvg-js'
+import { type SatoriOptions, satoriVue } from 'x-satori/vue'
 
-export async function gen() {
+(async function () {
     const _DIRNAME = typeof __dirname !== 'undefined'
         ? __dirname
         : dirname(fileURLToPath(import.meta.url))
+    const _OUTPUT = resolve(_DIRNAME, './image/og.png')
 
     const templateStr = await readFile(resolve(_DIRNAME, './Template.vue'), 'utf8')
-    const opt = {
+    const opt: SatoriOptions = {
         height: 628,
         width: 1200,
         fonts: [
@@ -33,11 +35,21 @@ export async function gen() {
             },
         ],
         props: {
-            title: 'hello nice',
-            desc: 'example',
+            title: 'hello world',
+            desc: 'examples',
             site: 'https://qbb.sh',
         },
     }
     const strSVG = await satoriVue(opt, templateStr)
-    return strSVG
-}
+
+    const render = await renderAsync(strSVG, {
+        fitTo: {
+            mode: 'width',
+            value: 1200,
+        },
+    })
+    return await writeFile(_OUTPUT, render.asPng())
+}()).catch((err: Error) => {
+    console.error(err)
+    process.exit(1)
+})

examples/vue/to-svg.mts → examples/run-esm-script/gen-svg.mts

@@ -1,10 +1,9 @@
-import { satoriVue, type SatoriOptions } from 'x-satori/vue'
 import { fileURLToPath } from 'node:url'
 import { readFile, writeFile } from 'node:fs/promises'
 import { dirname, resolve } from 'path'
+import { type SatoriOptions, satoriVue } from 'x-satori/vue'
 
-(async function() {
-
+(async function () {
     const _DIRNAME = typeof __dirname !== 'undefined'
         ? __dirname
         : dirname(fileURLToPath(import.meta.url))
@@ -37,13 +36,12 @@ import { dirname, resolve } from 'path'
         props: {
             title: 'hello world',
             desc: 'examples',
-            site: 'https://qbb.sh'
-        }
+            site: 'https://qbb.sh',
+        },
     }
     const strSVG = await satoriVue(opt, templateStr)
 
     await writeFile(_OUTPUT, strSVG)
-
 }()).catch((err: Error) => {
     console.error(err)
     process.exit(1)

examples/vue/package.json → examples/run-esm-script/package.json

@@ -1,11 +1,11 @@
 {
   "name": "demo-vue",
-  "version": "1.0.0",
   "type": "module",
+  "version": "1.0.0",
   "description": "use Vue file to generate Open Graph SVG or PNG by satori",
   "scripts": {
-    "to:svg": "tsx to-svg.mts",
-    "to:png": "tsx to-png.mts"
+    "gen:svg": "tsx gen-svg.mts",
+    "gen:png": "tsx gen-png.mts"
   },
   "dependencies": {
     "vue": "^3.2.47"

package.json

@@ -64,8 +64,6 @@
     "demo:vue:png": "pnpm -C examples/vue to:png"
   },
   "dependencies": {
-    "@esbuild-kit/cjs-loader": "^2.4.2",
-    "@esbuild-kit/esm-loader": "^2.5.5",
     "express": "^4.18.2",
     "minimist": "^1.2.8",
     "satori": "^0.4.3",
@@ -74,7 +72,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.35.3",
-    "@rollup/plugin-replace": "^5.0.2",
     "@types/express": "^4.17.17",
     "@types/express-serve-static-core": "^4.17.17",
     "@types/minimist": "^1.2.2",
@@ -86,7 +83,7 @@
     "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",
     "pathe": "^1.1.0",
-    "pnpm": "^7.29.3",
+    "pnpm": "^7.30.0",
     "simple-git-hooks": "^2.8.1",
     "tsx": "^3.12.5",
     "typescript": "^5.0.2",

playground/.npmrc

@@ -0,0 +1,5 @@
+ignore-workspace-root-check=true
+shell-emulator=true
+public-hoist-pattern[]=*@vue*
+public-hoist-pattern[]=*vite*
+public-hoist-pattern[]=*eslint*

playground/Template.vue

@@ -4,8 +4,8 @@ defineProps<{ title: string; desc: string; site: string }>()
 
 <template>
   <div
-    style="background-image: linear-gradient(120deg, rgb(27, 26, 28), rgb(6, 6, 7) 30%, rgb(25, 95, 60) 70%, rgb(16, 15, 16));color: #ffffff;"
-    tw="w-full h-full text-1.4rem flex flex-col items-center justify-between px-2rem py-2rem"
+    style="background-image: linear-gradient(135deg, rgb(30, 30, 30), rgb(6, 6, 7) 20%, rgb(25, 95, 60) 70%, rgb(20, 20, 20));"
+    tw="w-full h-full text-1.4rem text-white flex flex-col items-center justify-between px-2rem py-2rem"
   >
     <div tw="flex w-full">
       <svg height="72" viewBox="0 0 24 24">
@@ -15,7 +15,7 @@ defineProps<{ title: string; desc: string; site: string }>()
     <div tw="w-full flex relative mt--20 px-30 flex-col justify-center items-center">
       <div tw="text-4rem font-bold" style="white-space: pre-wrap;" v-html="title" />
       <div tw="text-2.4rem text-neutral-200" style="white-space: pre-wrap;">
-        This is a example
+        description
       </div>
     </div>
     <div tw="w-full flex items-center justify-end">

playground/config.ts

@@ -31,8 +31,7 @@ export default defineSatoriConfig({
         },
     ],
     props: {
-        title: 'hello nice',
-        desc: 'example',
+        title: 'Hello World',
         site: 'https://qbb.sh',
     },
 })

playground/gen-png.mts

@@ -0,0 +1,27 @@
+import { fileURLToPath } from 'node:url'
+import { readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'path'
+import { renderAsync } from '@resvg/resvg-js'
+import { satoriVue } from 'x-satori/vue'
+
+(async function () {
+    const _DIRNAME = typeof __dirname !== 'undefined'
+        ? __dirname
+        : dirname(fileURLToPath(import.meta.url))
+    const _OUTPUT = resolve(_DIRNAME, './image/og.png')
+
+    const templateStr = await readFile(resolve(_DIRNAME, './Template.vue'), 'utf8')
+    const satoriConfig = (await import('./config')).default
+    const strSVG = await satoriVue(satoriConfig, templateStr)
+
+    const render = await renderAsync(strSVG, {
+        fitTo: {
+            mode: 'width',
+            value: 1200,
+        },
+    })
+    return await writeFile(_OUTPUT, render.asPng())
+}()).catch((err: Error) => {
+    console.error(err)
+    process.exit(1)
+})

playground/gen-svg.mts

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url'
+import { readFile, writeFile } from 'node:fs/promises'
+import { dirname, resolve } from 'path'
+import { satoriVue } from 'x-satori/vue'
+
+(async function () {
+    const _DIRNAME = typeof __dirname !== 'undefined'
+        ? __dirname
+        : dirname(fileURLToPath(import.meta.url))
+    const _OUTPUT = resolve(_DIRNAME, './image/og.svg')
+
+    const templateStr = await readFile(resolve(_DIRNAME, './Template.vue'), 'utf8')
+    const satoriConfig = (await import('./config')).default
+    const strSVG = await satoriVue(satoriConfig, templateStr)
+
+    await writeFile(_OUTPUT, strSVG)
+}()).catch((err: Error) => {
+    console.error(err)
+    process.exit(1)
+})

playground/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "playground-x-satori",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "use Vue file to generate Open Graph SVG or PNG by satori. Run script or use CLI",
+  "scripts": {
+    "cli:dev:": "  x-satori -t ./playground/Template.vue -c ./playground/config.ts --dev",
+    "cli:build:": "x-satori -t ./playground/Template.vue -c ./playground/config.ts -o image.svg",
+    "gen:svg": "tsx gen-svg.mts",
+    "gen:png": "tsx gen-png.mts"
+  },
+  "dependencies": {
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@resvg/resvg-js": "^2.4.1",
+    "@types/node": "^18.15.3",
+    "tsx": "^3.12.5",
+    "vite": "^4.2.0",
+    "x-satori": "0.0.4"
+  }
+}