{"id":13809660,"url":"https://github.com/svycal/og-image","last_synced_at":"2025-04-12T21:35:43.644Z","repository":{"id":237276987,"uuid":"792827144","full_name":"svycal/og-image","owner":"svycal","description":"An open graph image generator, by SavvyCal ✨","archived":false,"fork":false,"pushed_at":"2024-11-14T14:57:38.000Z","size":803,"stargazers_count":286,"open_issues_count":0,"forks_count":19,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T01:38:14.117Z","etag":null,"topics":["og-image","opengraph-images","opengraphprotocol"],"latest_commit_sha":null,"homepage":"https://og-image.savvycal.com","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svycal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-04-27T16:58:36.000Z","updated_at":"2025-03-19T18:08:56.000Z","dependencies_parsed_at":"2024-12-18T13:01:29.818Z","dependency_job_id":"8bc65b68-562a-436c-9cd8-64c9e37e6c9d","html_url":"https://github.com/svycal/og-image","commit_stats":null,"previous_names":["svycal/og-image"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svycal%2Fog-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svycal%2Fog-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svycal%2Fog-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svycal%2Fog-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svycal","download_url":"https://codeload.github.com/svycal/og-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637199,"owners_count":21137530,"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":["og-image","opengraph-images","opengraphprotocol"],"created_at":"2024-08-04T02:00:33.806Z","updated_at":"2025-04-12T21:35:43.623Z","avatar_url":"https://github.com/svycal.png","language":"Elixir","funding_links":[],"categories":["Elixir","Image Generation \u0026 Editing"],"sub_categories":[],"readme":"# Open Graph Image Generator by [SavvyCal](https://savvycal.com/?utm_source=github\u0026utm_medium=oss\u0026utm_campaign=og-image)\n\n`og-image` is a web service for generating [Open Graph images](https://opengraphprotocol.org/) for your webpages. \nThis project was originally inspired by [Vercel OG image](https://github.com/vercel/og-image), with some additional features:\n\n✅ Extensible templating system \\\n✅ [Tailwind CSS](https://tailwindcss.com/) for styling image templates \\\n✅ Emoji support \\\n✅ Ready for deployment to [Fly](https://fly.io/)\n\nThe result: beautiful open graph images like this one, generated from custom HTML/CSS templates!\n\n![OG image example](https://og-image.savvycal.com/image?template=simple_green\u0026text=The+fresh+way+to+find+a+time+to+meet.)\n\nSource: https://og-image.savvycal.com/image?template=simple_green\u0026text=The+fresh+way+to+find+a+time+to+meet.\n\n## Getting started\n\nFork this repository and clone it locally. You'll need the following prerequisites installed:\n\n- [Elixir](https://elixir-lang.org/install.html)\n- [Google Chrome](https://www.google.com/chrome/index.html)\n- [Node.js (18.x)](https://github.com/nvm-sh/nvm#installing-and-updating)\n\nRun the bootstrap script to install dependencies:\n\n```bash\nscript/bootstrap\n```\n\nThen, run the following to boot the server:\n\n```bash\nscript/server\n```\n\nVisit [http://localhost:4000/image?template=light\u0026text=Hello+World!](http://localhost:4000/image?template=light\u0026text=Hello+World!) to see it in action!\n\n## Creating your own templates\n\nThis projects contains `light` and `dark` templates that display a logo and some user-supplied text. These are just a starting point to give you a sense for how it works. Adding new templates and modifying existing ones is easy!\n\nTo get started, open the [`OgImageWeb.ImageController`](https://github.com/svycal/og-image/blob/main/lib/og_image_web/controllers/image_controller.ex) file.\n\n```elixir\ndefmodule OgImageWeb.ImageController do\n  use OgImageWeb, :controller\n\n  import OgImageWeb.ImageHelpers\n  import OgImageWeb.ImageRenderer\n\n  # Match on the `template` param to decide which template to render. The\n  # `render_image` function is a special helper that either renders the PNG\n  # (when path is `/image`) or renders the HTML (when path is `/preview`).\n\n  def show(conn, %{\"template\" =\u003e \"light\", \"text\" =\u003e text}) do\n    conn\n    |\u003e assign(:text, prepare_html(text))\n    |\u003e render_image(:light)\n  end\n\n  def show(conn, %{\"template\" =\u003e \"dark\", \"text\" =\u003e text}) do\n    conn\n    |\u003e assign(:text, prepare_html(text))\n    |\u003e render_image(:dark)\n  end\n\n  # -- Add more templates here --\n\n  def show(conn, _params) do\n    render_image(conn, :fallback)\n  end\nend\n```\n\nThe template markup is defined in the [`OgImageWeb.ImageHTML`](https://github.com/svycal/og-image/blob/main/lib/og_image_web/controllers/image_html.ex) module.\n\n```elixir\ndefmodule OgImageWeb.ImageHTML do\n  use OgImageWeb, :html\n\n  @doc \"\"\"\n  A logo and text on a light background.\n  \"\"\"\n  def light(assigns) do\n    ~H\"\"\"\n    \u003cbody class=\"bg-[#F8F2E6] flex flex-col h-screen\"\u003e\n      \u003cdiv class=\"shrink-0 pt-24 px-20 text-gray-900\"\u003e\n        \u003c.savvycal_logo /\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"grow flex items-center px-20\"\u003e\n        \u003ch1 class=\"font-extrabold text-gray-900 text-[7rem] leading-[1.2]\"\u003e\n          \u003c%= @text %\u003e\n        \u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/body\u003e\n    \"\"\"\n  end\n\n  # -- truncated for brevity --\nend\n```\n\nThese templates are wired up for Tailwind CSS by default. You're welcome to define reuable components and helper functions (like we've done with the `\u003c.savvycal_logo /\u003e` component, which is defined in the `OgImageWeb.SharedComponents` module).\n\nThe image controller serves content over two different routes:\n\n- `/preview` for an HTML preview of the image contents\n- `/image` for the actual rendered image (in PNG format)\n\n\u003e [!TIP]\n\u003e Use the Responsive Mode and set the viewport to `1200 x 630` pixels to see the HTML preview in the same dimensions as the PNG image. This is great for testing and dialing in your designs quickly (without re-rendering the PNG on every change).\n\n## Customizing styles\n\nThe CSS styles for image templates are defined in the [`OgImageWeb.Layouts.image_template_styles/1`](https://github.com/svycal/og-image/blob/main/lib/og_image_web/components/layouts.ex) component. For performance, all definitions (including fonts) are inlined inside a `\u003cstyle\u003e` tag and rendered directly on page (so that the headless browser doesn't need to make any network requests when rendering the image).\n\n## Deploying to Fly\n\nThis application is ready for Fly deployment with a pre-configured Dockerfile and release scripts. \n\nIn short, you'll need to install the Fly CLI, sign up (or log in to your existing) Fly account, run the launch command for initial deployment, and the deploy command for subsequent deployments.\n\n```bash\n$ fly auth login\n$ fly launch\n$ fly deploy\n```\n\nFor a complete guide to deploying Phoenix applications (like this one), check out the guide: [https://hexdocs.pm/phoenix/fly.html](https://hexdocs.pm/phoenix/fly.html).\n\n## How It (Technically) Works\n\nWe're employing a time-honored technique of screenshotting the contents of a headless browser (via [Puppeteer](https://pptr.dev/)) to generate images. Since the rest of the project is implemented in Elixir, we rely on the [nodejs](https://hexdocs.pm/nodejs/readme.html#content) hex package to interface with a pool of Node.js processes.\n\nWe define two Node.js functions:\n\n* [`emojify`](https://github.com/svycal/og-image/blob/main/priv/js/emojify.js) for converting emoji to images\n* [`takeScreenshot`](https://github.com/svycal/og-image/blob/main/priv/js/take-screenshot.js) for rendering templates in a Puppeteer browser and capturing a screenshot\n\nThe [`OgImageWeb.ImageRenderer.render_image/2`](https://github.com/svycal/og-image/blob/main/lib/og_image_web/controllers/image_renderer.ex) function is responsible for dispatching requests the `takeScreenshot` function and returning the image data via the `Plug.Conn`.\n\n## Observability\n\n### New Relic\n\nTo enable New Relic monitoring, add your license key to your Fly secrets.\n\n```bash\nfly secrets set NEW_RELIC_LICENSE_KEY=...\n```\n\nIf desired, update `NEW_RELIC_APP_NAME` in `fly.toml` to something of your choosing.\n\n### Honeybadger\n\nTo enable Honeybadger monitoring, add your API key to your Fly secrets.\n\n```bash\nfly secrets set HONEYBADGER_API_KEY=...\n```\n\n### Logflare\n\nTo enable Logflare, add your source ID and API key to your Fly secrets.\n\n```bash\nfly secrets set LOGFLARE_SOURCE_ID=...\nfly secrets set LOGFLARE_API_KEY=...\n```\n\n---\n\nMaintained with ♥️ by the [SavvyCal](https://savvycal.com/?utm_source=github\u0026utm_medium=oss\u0026utm_campaign=og-image) team\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvycal%2Fog-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvycal%2Fog-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvycal%2Fog-image/lists"}