open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
main
manifold/og-image/CONTRIBUTING.md
Austin Chen 4b2412c49c
Set up a custom OpenGraph image generator for social media previews (#20) 
* Copy in og-image code

* Add "yarn start" command in lieu of vercel

* Don't require that images be sourced from vercel

* Load in Major Mono and Readex fonts

* Fix vercel config (?)

* Replace default image with Manifold's

* Add some brief instructions on getting started

* In the UI, use the default image

* Fix typescript errors

* More typescript fixing
2022-01-07 12:07:38 -08:00

1.4 KiB
Raw Permalink Blame History

Contributing

There are two pieces to og-image that are worth noting before you begin development.

  1. The backend image generator located in /api/index.ts
  2. The html/css template used to generate the image is located in /_lib/template.ts
  3. The frontend inputs located in /web/index.ts

Vercel handles routing in an elegant way for us so deployment is easy.

To start hacking, do the following:

  1. Clone this repo with git clone https://github.com/vercel/og-image
  2. Change directory with cd og-image
  3. Run yarn or npm install to install all dependencies
  4. Run locally with vercel dev and visit localhost:3000 (if nothing happens, run npm install -g vercel)
  5. If necessary, edit the exePath in options.ts to point to your local Chrome executable

Now you're ready to start local development!

You can set an environment variable to assist with debugging export OG_HTML_DEBUG=1. This will render the image as HTML so you can play around with your browser's dev tools before committing changes to the template.