Service that dynamically generates Open Graph images for Railway starters 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.railway.app/api/image?fileType=png&layoutName=Simple&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
For example, the "Simple" layout on og.railway.app is defined as
import { GetCSSFn, ILayout, LayoutComponent } from "../types";
import { gString, Markdown } from "./utils";
const getCSS: GetCSSFn = config => {
return `
body {
font-size: 200px;
color: white;
background: linear-gradient(to bottom right, tomato, deeppink);
}
`;
};
const Component: LayoutComponent = ({ config }) => {
const text = gString(config, "Text");
return <h1>{text}</h1>;
};
export const simpleLayout: ILayout = {
name: "Simple",
properties: [{ name: "Text", type: "text", default: "**Hello** _World_" }],
getCSS,
Component,
};This will render as
You can fork this repo or deploy to Railway to make it your own, customize, and use in your own projects.
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 Vercel's OG image generator. The main differences are
- Multiple configurable layouts
- Content of image written in JSX (as opposed to a template string)
- Headless Chrome configuration modified to deploy on Railway
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent