{"id":15412899,"url":"https://github.com/ascorbic/og-edge","last_synced_at":"2025-04-14T12:40:55.115Z","repository":{"id":61509217,"uuid":"552120441","full_name":"ascorbic/og-edge","owner":"ascorbic","description":"Generate Open Graph images with Deno and Netlify Edge Functions, no framework needed.","archived":false,"fork":false,"pushed_at":"2023-10-19T08:09:59.000Z","size":105,"stargazers_count":102,"open_issues_count":4,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T01:50:57.378Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://og-examples.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ascorbic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-15T21:37:31.000Z","updated_at":"2025-03-27T11:55:52.000Z","dependencies_parsed_at":"2024-10-21T16:00:24.370Z","dependency_job_id":null,"html_url":"https://github.com/ascorbic/og-edge","commit_stats":{"total_commits":17,"total_committers":5,"mean_commits":3.4,"dds":"0.47058823529411764","last_synced_commit":"d533ef878801d7f808eb004f254e782ec6ba1e3c"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fog-edge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fog-edge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fog-edge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascorbic%2Fog-edge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ascorbic","download_url":"https://codeload.github.com/ascorbic/og-edge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248883024,"owners_count":21177137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T16:54:48.643Z","updated_at":"2025-04-14T12:40:55.084Z","avatar_url":"https://github.com/ascorbic.png","language":"TypeScript","readme":"# Open Graph Image Generation\n\nGenerate Open Graph images with Deno and Netlify Edge Functions, no framework\nneeded. This is a fork of the awesome\n[`@vercel/og`](https://www.npmjs.com/package/@vercel/og), ported to run on Deno.\n\n## Usage\n\nTo use on Netlify, create the following Edge Function:\n\n```jsx\n// /netlify/edge-functions/og.tsx\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'\n\nexport default async function handler(req: Request) {\n    return new ImageResponse(\n    (\n      \u003cdiv\n        style={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          fontSize: 128,\n          background: 'lavender',\n        }}\n      \u003e\n        Hello!\n      \u003c/div\u003e\n    )\n  )\n}\n```\n\nThen create a `netlify.toml` file with the following:\n\n```toml\n[[edge_functions]]\nfunction = \"og\"\npath = \"/og\"\n```\n\nMake sure you have the latest version of\n[the Netlify CLI](https://docs.netlify.com/cli/get-started/) installed.Then run\n`netlify dev` and load http://localhost:8888/og, the React element will be\nrendered and returned as a PNG. To deploy to Netlify's edge network, run\n`netlify deploy`.\n\nAlternatively, to use with the Deno CLI or Deno Deploy, create a file with the\nfollowing:\n\n```tsx\n// /og.tsx\n\nimport { serve } from \"https://deno.land/std@0.140.0/http/server.ts\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ImageResponse } from \"https://deno.land/x/og_edge/mod.ts\";\n\nasync function handler(req: Request) {\n  return new ImageResponse(\n    \u003cdiv\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontSize: 128,\n        background: \"lavender\",\n      }}\n    \u003e\n      Hello!\n    \u003c/div\u003e,\n  );\n}\n\nserve(handler);\n```\n\nThen run `deno run --allow-net --allow-env og.tsx`\n\nRead more about the API, supported features and check out the examples in the\nfollowing sections.\n\n## API Reference\n\nThe package exposes an `ImageResponse` constructor, with the following options\navailable:\n\n```jsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ImageResponse } from 'https://deno.land/x/og_edge/mod.ts'\n\n// ...\nnew ImageResponse(\n  element: ReactElement,\n  options: {\n    width?: number = 1200\n    height?: number = 630\n    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat' = 'twemoji',\n    fonts?: {\n      name: string,\n      data: ArrayBuffer,\n      weight: number,\n      style: 'normal' | 'italic'\n    }[]\n    debug?: boolean = false\n\n    // Options that will be passed to the HTTP response\n    status?: number = 200\n    statusText?: string\n    headers?: Record\u003cstring, string\u003e\n  },\n)\n```\n\nWhen running in production, these headers will be included by `og_edge`:\n\n```jsx\n'content-type': 'image/png',\n'cache-control': 'public, max-age=31536000, no-transform, immutable',\n```\n\nDuring development, the `cache-control: no-cache, no-store` header is used\ninstead.\n\n### Supported HTML and CSS Features\n\nPlease refer to\n[Satori’s documentation](https://github.com/vercel/satori#documentation) for a\nlist of supported HTML and CSS features.\n\nBy default, `og_edge` only has the Noto Sans font included. If you need to use\nother fonts, you can pass them in the `fonts` option. Check the **Custom Font**\nexample below for more details.\n\n## Examples\n\n- Embed SVG Image ·\n  [_source_](https://github.com/ascorbic/og-edge/blob/main//netlify/edge-functions/image-svg.tsx)\n  · [_demo_](https://og-examples.netlify.app/og/image-svg)\n- Dynamic PNG Image Based on URL Queries ·\n  [_source_](https://github.com/ascorbic/og-edge/blob/main//netlify/edge-functions/dynamic-image.tsx)\n  · [_demo_](https://og-examples.netlify.app/og/dynamic-image?username=ascorbic)\n- Custom Font ·\n  [_source_](https://github.com/ascorbic/og-edge/blob/main//netlify/edge-functions/custom-font.tsx)\n  · [_demo_](https://og-examples.netlify.app/og/custom-font)\n- Emoji ·\n  [_source_](https://github.com/ascorbic/og-edge/blob/main//netlify/edge-functions/emoji.tsx)\n  · [_demo_](https://og-examples.netlify.app/og/emoji)\n- Languages ·\n  [_source_](https://github.com/ascorbic/og-edge/blob/main//netlify/edge-functions/language.tsx)\n  · [_demo_](https://og-examples.netlify.app/og/language)\n\n## Development / Contributing\n\n## Acknowledgements\n\nBasically all of the credit for this goes to\n[shuding](https://github.com/shuding). I just ported it to Deno and added a few\ntweaks.\n\n## License\n\nMozilla Public Licence. Copyright Vercel and Matt Kane\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Fog-edge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fascorbic%2Fog-edge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascorbic%2Fog-edge/lists"}