https://github.com/nestdotland/og
📸 Open Graph Image Generator
https://github.com/nestdotland/og
nestland nextjs open-graph react
Last synced: 9 months ago
JSON representation
📸 Open Graph Image Generator
- Host: GitHub
- URL: https://github.com/nestdotland/og
- Owner: nestdotland
- License: mit
- Created: 2020-06-30T13:02:55.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-08T01:11:25.000Z (about 3 years ago)
- Last Synced: 2025-05-26T10:28:39.645Z (10 months ago)
- Topics: nestland, nextjs, open-graph, react
- Language: TypeScript
- Homepage: https://og.nest.land
- Size: 1.35 MB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nest OG Image Generator
Service that dynamically generates [Open Graph](https://ogp.me/) images for [Nest](https://nest.land) that looks something like
# ✨ How To Use
Use the generated image URL in the `` of your HTML document as the og:image meta property
```html
```
Whenever this image is requested (e.g. in link previews) the image will be generated on demand.
# 🧐 How It Works
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 `layoutName` query param
- `layout.getCSS` called with all query params
- `layout.Component` is rendered with all query params as `config` prop
- HTML page built, rendered with Puppeteer, and screenshot
- Screenshot returned with a long cache max age
## Layouts
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
# 🚀 Development
To start hacking, do the following:
1. [Fork](https://github.com/nestdotland/og/fork) this repo and clone it
2. Run `yarn` or `npm install` to install all dependencies
3. Run locally with `yarn dev` and visit [`localhost:3000`](http://localhost:3000)
Now you're ready to start local development!
The frontend is a [NextJS](https://nextjs.org) 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
```
# 🙌 Acknowledgement
Credit where credit is due. This started as a forked repo from [Railway's OG image generator](https://og.railway.app/)
# License
This project is distributed under [The MIT Licese](./LICENSE)