@vercel/og 0.0.13-beta.0 → 0.0.13-beta.2

package/README.md

@@ -1,10 +1,10 @@
-# @vercel/og
+# Open Graph Image Generation
 
 Generate Open Graph images with Vercel’s [Edge Function](https://vercel.com/docs/concepts/functions/edge-functions).
 
-## Basic Usage
+## Quick Start
 
-Install `@vercel/og`, then use it inside Edge API routes in your Next.js project:
+Install `@vercel/og`, then use it inside an API route with **Edge Runtime** configured in your Next.js project:
 
 ```jsx
 // /pages/api/og.jsx
@@ -19,10 +19,13 @@ export default function () {
     (
       <div
         style={{
-          fontSize: 128,
-          background: 'white',
           width: '100%',
           height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 128,
+          background: 'lavender',
         }}
       >
         Hello!
@@ -32,7 +35,11 @@ export default function () {
 }
 ```
 
-The React element will be rendered and responded as a PNG from that Edge Function endpoint. For more details and restrictions in image generation, see [Satori](https://github.com/vercel/satori).
+Then run `next dev` and access localhost:3000/api/og, the React element will be rendered and responded as a PNG from that endpoint:
+
+![Rendered OG image](.github/demo.png)
+
+Read more about the API, supported features and check out the examples in the following sections.
 
 ## API Reference
 
@@ -49,7 +56,7 @@ new ImageResponse(
   options: {
     width?: number = 1200
     height?: number = 630
-    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji',
+    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',
     fonts?: {
       name: string,
       data: ArrayBuffer,
@@ -75,199 +82,19 @@ When running in production, these headers will be included by `@vercel/og`:
 
 During development, the `cache-control: no-cache, no-store` header is used instead.
 
-You can see the **Code Examples** section below to see more details.
-
-## Code Examples
-
-### Hello World
+## Supported HTML and CSS Features
 
-```jsx
-// /pages/api/og.jsx
-
-import { ImageResponse } from '@vercel/og'
-
-export const config = {
-  runtime: 'experimental-edge',
-}
+Please refer to [Satori’s documentation](https://github.com/vercel/satori#documentation) for a list of supported HTML and CSS features.
 
-export default function () {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 128,
-          background: 'white',
-          width: '100%',
-          height: '100%',
-        }}
-      >
-        Hello!
-      </div>
-    )
-  )
-}
-```
+## Examples
 
-### Dynamic Image
-
-```jsx
-import { ImageResponse } from '@vercel/og'
-
-export const config = {
-  runtime: 'experimental-edge',
-}
-
-export default async function (req) {
-  const { searchParams } = req.nextUrl
-  const username = searchParams.get('username')
-  if (!username) {
-    return new ImageResponse(<>Visit with "?username=vercel"</>)
-  }
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 60,
-          color: 'black',
-          background: '#f6f6f6',
-          width: '100%',
-          height: '100%',
-          paddingTop: 50,
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <img
-          width='256'
-          height='256'
-          src={`https://github.com/${username}.png`}
-          style={{
-            borderRadius: 128,
-          }}
-        />
-        <p>github.com/{username}</p>
-      </div>
-    )
-  )
-}
-```
-
-### Emoji
-
-```jsx
-import { ImageResponse } from '@vercel/og'
-
-export const config = {
-  runtime: 'experimental-edge',
-}
-
-export default async function () {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 100,
-          color: 'black',
-          background: 'white',
-          width: '100%',
-          height: '100%',
-          padding: '0 200px',
-          textAlign: 'center',
-          justifyContent: 'center',
-          alignContent: 'center',
-        }}
-      >
-        👋, 🌎
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 600,
-      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji'
-      // Default to 'twemoji'
-      emoji: 'twemoji',
-    }
-  )
-}
-```
-
-### Image SVG
-
-```jsx
-import { ImageResponse } from '@vercel/og'
-
-export const config = {
-  runtime: 'experimental-edge',
-}
-
-export default async function () {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 40,
-          color: 'black',
-          background: 'white',
-          width: '100%',
-          height: '100%',
-          padding: '0 200px',
-          textAlign: 'center',
-          justifyContent: 'center',
-          alignContent: 'center',
-        }}
-      >
-        <svg
-          height={80}
-          viewBox="0 0 75 65"
-          fill="black"
-          style={{ margin: '0 75px' }}
-        >
-          <path d="M37.59.25l36.95 64H.64l36.95-64z"></path>
-        </svg>
-      </div>
-    )
-  )
-}
-```
-
-### Different Languages
-
-```jsx
-import { ImageResponse } from '@vercel/og'
-
-export const config = {
-  runtime: 'experimental-edge',
-}
-
-export default async function () {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          fontSize: 40,
-          color: 'black',
-          background: 'white',
-          width: '100%',
-          height: '100%',
-          padding: '0 200px',
-          textAlign: 'center',
-          justifyContent: 'center',
-          alignContent: 'center',
-        }}
-      >
-        👋 Hello 你好 नमस्ते こんにちは สวัสดีค่ะ 안녕 добрий день Hallá
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 600,
-    }
-  )
-}
-```
+- Basic · [_source_](/examples/next/pages/api/vercel.tsx) · [_demo_](https://og-examples.vercel.sh/api/vercel)
+- Embed SVG Image · [_source_](/examples/next/pages/api/image-svg.tsx) · [_demo_](https://og-examples.vercel.sh/api/image-svg)
+- Dynamic PNG Image Based on URL Queries · [_source_](/examples/next/pages/api/dynamic-image.tsx) · [_demo_](https://og-examples.vercel.sh/api/dynamic-image?username=vercel)
+- Custom Font · [_source_](/examples/next/pages/api/custom-font.tsx) · [_demo_](https://og-examples.vercel.sh/api/custom-font)
+- Emoji · [_source_](/examples/next/pages/api/emoji.tsx) · [_demo_](https://og-examples.vercel.sh/api/emoji)
+- Languages · [_source_](/examples/next/pages/api/language.tsx) · [_demo_](https://og-examples.vercel.sh/api/language)
+- Encrypted Token · [_source_](/examples/next/pages/api/encrypted.tsx) · [_demo_](https://og-examples.vercel.sh/encrypted/a)
 
 ## Acknowledgements
 
@@ -277,3 +104,9 @@ This project will not be possible without the following projects:
 - [Twemoji](https://github.com/twitter/twemoji)
 - [Google Fonts](https://fonts.google.com) and [Noto Sans](https://www.google.com/get/noto/)
 - [Resvg](https://github.com/RazrFalcon/resvg) and [Resvg.js](https://github.com/yisibl/resvg-js)
+
+---
+
+<a aria-label="Vercel logo" href="https://vercel.com">
+  <img src="https://badgen.net/badge/icon/Made%20by%20Vercel?icon=zeit&label&color=black&labelColor=black">
+</a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.0.13-beta.0",
+  "version": "0.0.13-beta.2",
   "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
   "type": "module",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
   "license": "MPL-2.0",
   "dependencies": {
     "@resvg/resvg-wasm": "2.0.0-alpha.4",
-    "satori": "0.0.34",
+    "satori": "0.0.37",
     "yoga-wasm-web": "0.1.2"
   },
   "devDependencies": {