Service that dynamically generates Open Graph images for Nest that looks something like
Use the generated image URL in the <head> of your HTML document as the og:image meta property
<meta
property="og:image"
content="https://og.nest.land/api/image?layoutName=Pattern&Text=Hello+World"
/>Whenever this image is requested (e.g. in link previews) the image will be generated on demand.
Images are generated through the /api/image route. When you hit this route the following happens
- Query params are parsed
- Layout is looked up in list of layouts using the
layoutNamequery param layout.getCSScalled with all query paramslayout.Componentis rendered with all query params asconfigprop- HTML page built, rendered with Puppeteer, and screenshot
- Screenshot returned with a long cache max age
This service can generate images using multiple layouts. A layout is defined as a
- Collection of properties that are user configurable. The UI for these properties is auto genearted
- Function that takes in layout config and returns CSS needed to render
- A React component that takes in layout config as a prop
To start hacking, do the following:
- Fork this repo and clone it
- Run
yarnornpm installto install all dependencies - Run locally with
yarn devand visitlocalhost:3000
Now you're ready to start local development!
The frontend is a NextJS site and the image generation happens in an API route.
# Start local development server
yarn dev
# Build for production
yarn build
# Start in production
yarn start
Credit where credit is due. This started as a forked repo from Railway's OG image generator
This project is distributed under The MIT Licese