- Notifications
You must be signed in to change notification settings - Fork32
Open Graph image generator for Railway
License
railwayapp/og
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Service that dynamically generatesOpen Graph images forRailway starters that looks something like
Use the generated image URL in the<head> of your HTML document as the og:image meta property
<metaproperty="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.Componentis rendered with all query params asconfigprop- SVG is created from the component usingSatori
- Optionally, a PNG is created from the SVG withresvg-js
This service can generate images using multiplelayouts. 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 onog.railway.app is defined as
importReactfrom"react";import{z}from"zod";import{ILayout}from"./types";constsimpleLayoutConfig=z.object({text:z.string(),});exporttypeSimpleLayoutConfig=z.infer<typeofsimpleLayoutConfig>;constComponent:React.FC<{config:SimpleLayoutConfig}>=({ config})=>{return(<divtw="flex items-center justify-center text-center px-4 w-full h-full text-8xl text-white font-bold"style={{background:"linear-gradient(to bottom right, tomato, deeppink)",}}>{config.text}</div>);};exportconstsimpleLayout:ILayout<typeofsimpleLayoutConfig>={name:"simple",config:simpleLayoutConfig,properties:[{type:"text",name:"text",default:"Hello, world!",placeholder:"Text to display",},], Component,};
This will render as
You can fork this repo ordeploy to Railway to make it your own, customize, and use in your own projects.
The frontend is aNextJS site and the image generation happens in an API route.
# Start local development serveryarn dev# Build for productionyarn build# Start in productionyarn start