Experiment to leverage satori and SvelteKit to generate dynamic open graph images for Geizhals product pages. This application houses both the image generation part as well as an Editor for testing/debugging purposes.
The content of the generated image can be set by specifying GET parameters (eg. /og?title=this%20is%20a%20title).
To change the content and design of the og image, modify the contents of src/lib/Card.svelte.
The list of parameters is defined in src/routes/og/extract-params.js. Changes to the parameters also need to be applied to the markup in Card.svelte as well as in Form.svelte (for the editor).
This example uses Inter font. If you want to use a different font, place the woff files in $lib/fonts and load them in src/routes/og/+server.js.
Install dependencies with npm install (or pnpm install or yarn), then start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openBy default, the dev server will available at http://localhost:5173/
With the (dev) server running, visit http://localhost:5173/og/ and append the parameters for required for the image, e.g. http://localhost:5173/og?title=Nintendo+Switch+OLED+schwarz%2Fwei%C3%9F&image=https%3A%2F%2Fgzhls.at%2Fi%2F76%2F69%2F2557669-n0.jpg&variants=true&ratings=5&ratings_count=7
For better testing and developing, a simple editor interface can be found at http://localhost:5173/og/editor/
When any of the inputs values change, the image is re-generated. While working on the Card.svelte component, you can also activate "Auto Refresh", which will refresh the image every 4 seconds to show the result of Card.svelte with the current parameters.
To create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
See https://kit.svelte.dev/docs/adapters on how to deploy the application. Currently this application uses adapter-vercel for deployments to vercel. Change as required.
- SvelteKit project setup is based on SvelteKit Starter (Preprocess, PostCSS, AutoPrefixer).
- satori by vercel
- satori-html by Nate Moore / Astro
- Create dynamic social card images with Svelte components by Geoff Rich