Notion Cover Image Image Generator

Service that dynamically generates cover images for gallery view databases in Notion. These look something like

🧐 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:

One-click Deploy

Use the button below to fork this repo and deploy to Vercel straight away!

Advanced Users

1. 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

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

🙌 Acknowledgement

Credit where credit is due. This started as a forked repo from Nest's OpenGraph image generator

License

This project is distributed under The MIT Licese