{"id":13725023,"url":"https://github.com/codepunkt/gatsby-remark-opengraph","last_synced_at":"2025-06-30T08:32:56.464Z","repository":{"id":54176454,"uuid":"325852541","full_name":"codepunkt/gatsby-remark-opengraph","owner":"codepunkt","description":"Generate beautiful open graph images for Gatsby","archived":false,"fork":false,"pushed_at":"2021-04-09T21:39:46.000Z","size":296,"stargazers_count":9,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-14T05:06:02.676Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/codepunkt.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}},"created_at":"2020-12-31T18:17:26.000Z","updated_at":"2023-11-22T11:59:29.000Z","dependencies_parsed_at":"2022-08-13T08:20:54.207Z","dependency_job_id":null,"html_url":"https://github.com/codepunkt/gatsby-remark-opengraph","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/codepunkt/gatsby-remark-opengraph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fgatsby-remark-opengraph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fgatsby-remark-opengraph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fgatsby-remark-opengraph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fgatsby-remark-opengraph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codepunkt","download_url":"https://codeload.github.com/codepunkt/gatsby-remark-opengraph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codepunkt%2Fgatsby-remark-opengraph/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261815389,"owners_count":23213827,"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-08-03T01:02:10.098Z","updated_at":"2025-06-30T08:32:56.438Z","avatar_url":"https://github.com/codepunkt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n \u003cbr\u003e\n \u003ca href=\"https://github.com/codepunkt/gatsby-remark-opengraph\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/codepunkt/gatsby-remark-opengraph/master/docs/logo.png\" alt=\"gatsby-remark-opengraph logo\" width=\"250\"\u003e\u003c/a\u003e\n \u003cbr\u003e\n gatsby-remark-opengraph \n \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eGenerate beautiful open graph images for Gatsby\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://badge.fury.io/js/gatsby-remark-opengraph\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/gatsby-remark-opengraph.svg?logo=npm\u0026style=popout\"/\u003e\n \u003c/a\u003e\n \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/l/gatsby-remark-opengraph.svg?style=popout\u0026logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIzIDMgMjYgMjYiPgogIDxwYXRoIGZpbGw9IiMzZGE2MzkiIGQ9Ik0xNiA1LjU1OWMtNi4xMTggMC0xMS4wNzggNC45Ni0xMS4wNzggMTEuMDc5IDAgNC43NDkgMi45ODkgOC43OTkgNy4xODggMTAuMzc0bDIuNTUzLTYuODA4YTMuODA4IDMuODA4IDAgMSAxIDIuNjc0IDBsMi41NTMgNi44MDhjNC4xOTktMS41NzUgNy4xODgtNS42MjUgNy4xODgtMTAuMzc0IDAtNi4xMTktNC45Ni0xMS4wNzktMTEuMDc5LTExLjA3OXoiLz4KPC9zdmc+Cg==\u0026colorB=lightgray\" alt=\"License: MIT\"/\u003e\n \u003c/a\u003e\n \u003ca href=\"https://www.npmtrends.com/gatsby-remark-opengraph\" title=\"Downloads\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/gatsby-remark-opengraph.svg?style=popout\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#motivation\"\u003eMotivation\u003c/a\u003e •\n \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n \u003ca href=\"#how-to-use\"\u003eHow to use\u003c/a\u003e •\n \u003ca href=\"#options\"\u003eOptions\u003c/a\u003e •\n \u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\n\u003c/p\u003e\n\n# Motivation\n\nIf your website is shared, you’ll want to present the contents of your page in an optimal way to encourage people to pay it a visit. Open graph makes links to your website \"unfold\" into an image, title, and description.\n\nIf you want to find out more about this, read my article:\u003cbr/\u003e\u003cbr/\u003e\n\u003ca href=\"https://codepunkt.de/writing/generating-beautiful-open-graph-images-with-nodejs/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/codepunkt/gatsby-remark-opengraph/master/docs/article.jpg\" alt=\"codepunkt.de open graph image\" width=\"600\" /\u003e\u003c/a\u003e\n\n# Key Features\n\nThis plugin allows you to create beautiful open graph images for your Gatsby site at build time, tailor-made to your content.\n\n- Choose a background image or color\n- Layout any number of texts on top of that background\n- Choose font, size, color and alignment for every text\n- Choose custom image dimensions and restrict your text to bounding boxes\n\n# Installation\n\nInstall `gatsby-remark-opengraph` as a development dependency to your current project\n\n#### npm\n\n```bash\nnpm install -D gatsby-remark-opengraph\n```\n\n#### yarn\n\n```bash\nyarn add -D gatsby-remark-opengraph\n```\n\n# How to use\n\nThe default usage of this package is as a gatsby remark plugin.\n\nHowever, you can also use it as a Node.js package to generate open graph images for any other usecase, for example for your Gatsby homepage or in a FaaS setup for your server side rendered site.\n\n## As a gatsby remark plugin\n\nUse `gatsby-remark-opengraph` in the remark plugins array of your `gatsby-config.js`:\n\n```js\nplugins: [\n {\n resolve: 'gatsby-transformer-remark',\n options: {\n plugins: [\n {\n resolve: 'gatsby-remark-opengraph',\n options: {\n background: '#bada55',\n // if you create post-specific open graph images, be sure to prefix `./public`\n outputPath: (node) =\u003e path.join('./public', node.fields.slug),\n texts: [\n {\n text: (node) =\u003e node.frontmatter.title,\n font: require.resolve('./src/assets/yourFont.ttf')\n }\n ]\n },\n },\n ],\n },\n },\n],\n```\n\n## Options\n\n| Name | Type | Description | |\n| :--------------- | :----------------- | :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| **`background`** | string | _Required_ | Either a 6 digit hex RGB color code or the absolute path to a background image. |\n| **`texts`** | Text[] | _Required_ | An array of `Text` configuration objects. Can be empty. See table below! |\n| **`filename`** | string | Default `'og-image.jpg'` | Filename the open graph image is saved as. |\n| **`width`** | number | Default: `1200` | Width of open graph image in pixels.\u003cbr /\u003e Must be equal to the background image width, if a background image is used. |\n| **`height`** | number | Default: `630` | Height of open graph image in pixels.\u003cbr /\u003e Must be equal to the background image height, if a background image is used. |\n| **`outputPath`** | string \\| function | Default: `'./public'` | Path the open graph image is saved to.\u003cbr /\u003eCalled with the current markdown node if a function is given.\u003cbr/\u003eIs concatenated with the `filename` option to form a full path. If you change this and you're using Gatsby, don't forget to prefix `'.public'`! |\n| **`log`** | boolean | Default: `true` | Toggles output logging. |\n\n### `Text` options\n\nFor each text that you want to write on top of your background, add an object to the array of texts.\n\nFor each entry, you must at least provide the `text` itself and a `font` file:\n\n| Name | Type | Description | |\n| :-------------------- | :-------------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **`text`** | string \\| function | _Required_ | Your text. Called with the current markdown node if a function is given. |\n| **`font`** | string | _Required_ | Absolute path to a TrueType `.ttf` font. |\n| **`fontSize`** | number | Default `64` | Font size of your text. |\n| **`color`** | string | Default: `'#000000'` | 6 digit hex RGB color code. |\n| **`x`** | number | Default: `0` | X position of your text in Pixels. |\n| **`y`** | number | Default: `0` | Y position of your text in Pixels. |\n| **`maxWidth`** | number | Default: Image width | Max width of your text. After reaching it, text will break to a new line. |\n| **`maxHeight`** | number | Default: Image height | Max height of your text. After reaching it, an error will be thrown! |\n| **`horizontalAlign`** | 'left' / 'center' / 'right' | Default: `'left'` | Horizontal alignment of your text.\u003cbr/\u003e\u003cul\u003e\u003cli\u003e`left`: text will grow to the right from it's `x` position\u003c/li\u003e\u003cli\u003e`center`: text will grow to left and right from it's `x` position\u003c/li\u003e\u003cli\u003e`right`: text will grow to the left from it's `x` position\u003c/li\u003e\u003c/ul\u003e |\n| **`verticalAlign`** | 'top' / 'center' / 'bottom' | Default: `'top'` | Vertical alignment of your text.\u003cbr/\u003e\u003cul\u003e\u003cli\u003e`top`: text will grow to the bottom from it's `y` position\u003c/li\u003e\u003cli\u003e`center`: text will grow to top and bottom from it's `y` position\u003c/li\u003e\u003cli\u003e`bottom`: text will grow to the top from it's `y` position\u003c/li\u003e\u003c/ul\u003e |\n\n## General usage\n\nThe plugin also exports a named function that accepts the same options as the remark plugin shown above, but function options are called with `null` instead of a markdownNode so it's a good idea to provide strings for `outputPath` and `Text.text`.\n\nIf you're using Gatsby, you can use this in your `gatsby-node.js` to generate a generic open graph image for your site:\n\n```js\nconst { createImage } = require('gatsby-remark-opengraph')\n\nexports.createPages = async ({\n actions,\n graphql,\n reporter,\n}) =\u003e {\n await createImage({\n /**\n * OPTIONS, see above!\n */\n })\n}\n```\n\n# Examples\n\nPlease provide me with examples of the open graph images that you generated! 😀\n\nI will choose a few beautiful examples and then show them here with a link to your site.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodepunkt%2Fgatsby-remark-opengraph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodepunkt%2Fgatsby-remark-opengraph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodepunkt%2Fgatsby-remark-opengraph/lists"}