This is a open-source project to generate dynamic Open-graph images using @vercel/og package.
The purpose is generate custom open-graph images passing an custom themes as param
-
๐ Demo 1 with default theme
- Ex.:
/api/ogimage?title=something&subtitle=Anything
- Ex.:
-
๐ Demo 2 with custom theme as param ( &theme=blog)
- Ex.:
/api/ogimage?title=something&subtitle=Anything&theme=blog
- Ex.:
- Node.js >16
The all themes are created on ./src/og-themes
folder. To create a new theme and keep available to use on api, follow these steps:
Go to ./src/og-themes
and create a new file. Ex.: EventTheme.tsx
// ./src/og-themes/EventTheme.tsx
interface EventThemeProps {
params: {
title: string,
subtitle: string
};
}
function EventTheme({ params }: EventThemeProps) {
return (
<div
style={{
width: 1200,
height: 630,
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
backgroundColor: '#ffcc00',
fontSize: 40
}}
>
{params.title}
<br />
{params.subtitle}
</div>
);
}
export { EventTheme };
After new theme already created, export it on ./src/og-themes/index.tsx
export { EventTheme } from '@themes/EventTheme';
And now you already to add the new theme to be available to use on api
Add a new case on ./src/pages/api/ogimage.tsx
// ./src/pages/api/ogimage.tsx
import { EventTheme } form '@themes/index';
...
switch (PARAMS.theme) {
case 'event':
selectedTheme = <EventTheme params={PARAMS} />;
break;
default:
selectedTheme = <DefaultTheme params={PARAMS} />;
break;
}
Now you can run and test your new theme at localhost
This project is running with NextJS, to run locally, install all dependencies I use yarn to run all commands, but you can use npm if you want
Install dependencies
$ yarn install
Run localhost
$ yarn dev
Sample
http://localhost:3000/api/ogimage?title=My awesome title&subtitle=Front-end Developer&theme=event