Skip to content

About

Instantly generate beautiful, dynamic social share images for your GitHub projects

Topics

Resources

Stars

3 stars

Watchers

1 watching

Forks

Latest commit

 

History

63 Commits

Folders and files

Repository files navigation

OG Image

Index

Features

  • Generates 1200x630 resolution PNG share images on the fly via serverless execution
  • Supports dynamic query parameters including description, output scale, and URL
  • Provides customizable color variants like primary and accent design templates
  • Ships with an integrated homepage UI to directly preview and copy generated URLs
  • Bundles fonts natively during the build phase to ensure perfect layout rendering

Project Structure

.
├── .gitignore
├── LICENSE
├── README.md
├── api
│   ├── index.ts
│   └── lib
│       ├── assets.ts
│       ├── config.ts
│       ├── query.ts
│       └── render-og.ts
├── bun.lock
├── package.json
├── public
│   ├── index.html
│   ├── favicon.svg
│   ├── Geist-Regular.ttf
│   ├── InstrumentSans-Medium.ttf
│   ├── accent-link.svg
│   ├── accent.svg
│   ├── og-home.png
│   ├── primary-link.svg
│   └── primary.svg
├── tsconfig.json
└── vercel.json

api/index.ts is now a thin router. Most customization lives in api/lib/config.ts.

Fork Customization (Quick Path)

For most forks, edit only api/lib/config.ts:

  • appConfig.files.fonts: switch to your own font filenames
  • appConfig.files.variants: map your variant names to SVG files; the homepage radios are generated from this list automatically
  • The homepage variant radios are hydrated from api/config.ts, so updating the variants list there updates the UI too
  • appConfig.og.textColor: set global text color
  • appConfig.og.layout: adjust x/y/width/line-height positions
  • appConfig.og.minScale / maxScale: change allowed scale range
  • Color values come from @amansanoj/brand through api/lib/brand.ts and /api/brand-css; swap that package if you want a different palette

Then replace visual assets in public/:

  • public/primary.svg, public/primary-link.svg
  • public/accent.svg, public/accent-link.svg
  • public/index.html (homepage content/styles)
  • public/favicon.svg

Local Development

To customize the generator or run your own instance locally, ensure you have Bun installed and use the Vercel CLI to boot the serverless environment:

bun install
bunx vercel dev

Deployment

Deployment is streamlined via Vercel. After modifying the core functionality, font assets, or SVG backgrounds, you can push the serverless function directly to production:

bunx vercel --prod

The application will instantly become available. When hosting your own fork, you can replace the deployed URL to consume the updated design logic.

Credits & License

Constructed using Satori and Hono. This codebase is open-source. Please check the included LICENSE file for redistribution rights and terms.

About

Instantly generate beautiful, dynamic social share images for your GitHub projects

Topics

Resources

Stars

3 stars

Watchers

1 watching

Forks

Used by

Contributors

Languages