manifold/og-image/README.md

# Quickstart

1. To get started: `yarn install`
2. To test locally: `yarn start`
   The local image preview is broken for some reason; but the service works.
   E.g. try `http://localhost:3000/manifold.png`
3. To deploy: push to Github

For more info, see Contributing.md

- note2: You may have to configure Vercel the first time:

  ```
  $ yarn start
  yarn run v1.22.10
  $ cd .. && vercel dev
  Vercel CLI 23.1.2 dev (beta) — https://vercel.com/feedback
  ? Set up and develop “~/Code/mantic”? [Y/n] y
  ? Which scope should contain your project? Mantic Markets
  ? Found project “mantic/mantic”. Link to it? [Y/n] n
  ? Link to different existing project? [Y/n] y
  ? What’s the name of your existing project? manifold-og-image
  ```

- note2: (Not `dev` because that's reserved for Vercel)
- note3: (Or `cd .. && vercel --prod`, I think)

(Everything below is from the original repo)

# [Open Graph Image as a Service](https://og-image.vercel.app)

<a href="https://twitter.com/vercel">
    <img align="right" src="https://og-image.vercel.app/tweet.png" height="300" />
</a>

Serverless service that generates dynamic Open Graph images that you can embed in your `<meta>` tags.

For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.

See the image embedded in the tweet for a real use case.

## What is an Open Graph Image?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?
How did your social network know how to "unfurl" the URL and get an image?
The answer is in your `<head>`.

The [Open Graph protocol](http://ogp.me) says you can put a `<meta>` tag in the `<head>` of a webpage to define this image.

It looks like the following:

```html
<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>
```

## Why use this service?

The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter.

That's where `og-image.vercel.app` comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!

It looks like the following:

```html
<head>
  <title>Hello World</title>
  <meta
    property="og:image"
    content="https://og-image.vercel.app/Hello%20World.png"
  />
</head>
```

Now try changing the text `Hello%20World` to the title of your choosing and watch the magic happen ✨

## Deploy your own

You'll want to fork this repository and deploy your own image generator.

1. Click the fork button at the top right of GitHub
2. Clone the repo to your local machine with `git clone URL_OF_FORKED_REPO_HERE`
3. Change directory with `cd og-image`
4. Make changes by swapping out images, changing colors, etc (see [contributing](https://github.com/vercel/og-image/blob/main/CONTRIBUTING.md) for more info)
5. Remove all configuration inside `vercel.json` besides `rewrites`
6. Run locally with `vercel dev` and visit [localhost:3000](http://localhost:3000) (if nothing happens, run `npm install -g vercel`)
7. Deploy to the cloud by running `vercel` and you'll get a unique URL
8. Connect [Vercel for GitHub](https://vercel.com/github) to automatically deploy each time you `git push` 🚀

## Authors

- Steven ([@styfle](https://twitter.com/styfle)) - [Vercel](https://vercel.com)
- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [Vercel](https://vercel.com)
-												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 20:07:38 +00:00
+								# Quickstart
 . To get started: `yarn install`
 . To test locally: `yarn start`
 								   The local image preview is broken for some reason; but the service works.
 								   E.g. try `http://localhost:3000/manifold.png`
 . To deploy: push to Github
 								For more info, see Contributing.md
-												Fix local dev setup

											
										
										
											2022-01-07 19:56:06 +00:00
+								- note2: You may have to configure Vercel the first time:
 								  ```
 								  $ yarn start
 								  yarn run v1.22.10
 								  $ cd .. && vercel dev
 								  Vercel CLI 23.1.2 dev (beta) — https://vercel.com/feedback
 								  ? Set up and develop “~/Code/mantic”? [Y/n] y
 								  ? Which scope should contain your project? Mantic Markets
 								  ? Found project “mantic/mantic”. Link to it? [Y/n] n
 								  ? Link to different existing project? [Y/n] y
 								  ? What’s the name of your existing project? manifold-og-image
 								  ```
 								- note2: (Not `dev` because that's reserved for Vercel)
 								- note3: (Or `cd .. && vercel --prod`, I think)
-												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 20:07:38 +00:00
 								(Everything below is from the original repo)
 								# [Open Graph Image as a Service](https://og-image.vercel.app)
 								<a href="https://twitter.com/vercel">
 								    <img align="right" src="https://og-image.vercel.app/tweet.png" height="300" />
 								</a>
 								Serverless service that generates dynamic Open Graph images that you can embed in your `<meta>` tags.
 								For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.
 								See the image embedded in the tweet for a real use case.
 								## What is an Open Graph Image?
 								Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup?
 								How did your social network know how to "unfurl" the URL and get an image?
 								The answer is in your `<head>`.
 								The [Open Graph protocol](http://ogp.me) says you can put a `<meta>` tag in the `<head>` of a webpage to define this image.
 								It looks like the following:
 								```html
 								<head>
 								  <title>Title</title>
 								  <meta property="og:image" content="http://example.com/logo.jpg" />
 								</head>
 								```
 								## Why use this service?
 								The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter.
 								That's where `og-image.vercel.app` comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!
 								It looks like the following:
 								```html
 								<head>
 								  <title>Hello World</title>
 								  <meta
 								    property="og:image"
 								    content="https://og-image.vercel.app/Hello%20World.png"
 								  />
 								</head>
 								```
 								Now try changing the text `Hello%20World` to the title of your choosing and watch the magic happen ✨
 								## Deploy your own
 								You'll want to fork this repository and deploy your own image generator.
 . Click the fork button at the top right of GitHub
 . Clone the repo to your local machine with `git clone URL_OF_FORKED_REPO_HERE`
 . Change directory with `cd og-image`
 . Make changes by swapping out images, changing colors, etc (see [contributing](https://github.com/vercel/og-image/blob/main/CONTRIBUTING.md) for more info)
 . Remove all configuration inside `vercel.json` besides `rewrites`
 . Run locally with `vercel dev` and visit [localhost:3000](http://localhost:3000) (if nothing happens, run `npm install -g vercel`)
 . Deploy to the cloud by running `vercel` and you'll get a unique URL
 . Connect [Vercel for GitHub](https://vercel.com/github) to automatically deploy each time you `git push` 🚀
 								## Authors
 								- Steven ([@styfle](https://twitter.com/styfle)) - [Vercel](https://vercel.com)
 								- Evil Rabbit ([@evilrabbit](https://twitter.com/evilrabbit_)) - [Vercel](https://vercel.com)