{"_id":"@akr4/gatsby-plugin-og-image","_rev":"4-8f7a4554539fe330b0f0649ccc2e7e0f","name":"@akr4/gatsby-plugin-og-image","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.2":{"name":"@akr4/gatsby-plugin-og-image","version":"1.0.2","author":{"name":"Ueda, Akira","email":"ue@gol.com"},"license":"MIT","dependencies":{"async":"^3.1.1","puppeteer":"^2.1.0","react-helmet":"^5.2.1"},"devDependencies":{"eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-react":"^7.18.0","prettier":"^1.19.1"},"scripts":{"format":"prettier --write \"**/*.{js,jsx,json,md}\"","lint":"eslint --fix \"**/*.{js,jsx}\""},"description":"Generates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akr4/gatsby-plugin-og-image.git"},"bugs":{"url":"https://github.com/akr4/gatsby-plugin-og-image/issues"},"homepage":"https://github.com/akr4/gatsby-plugin-og-image#readme","gitHead":"ac6ba26a51b1d179520eb423be5afedbcdb1178b","_id":"@akr4/gatsby-plugin-og-image@1.0.2","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-tgBR6C2Z6zOGjnRI10n5a9lqWJpXaQ5JBLV1MKpFgctcVibuwKifa+3VKTHJBMy8KzxZv+hjRlpXKBAXoDBzpg==","shasum":"064160f7fda33a5141c5f6f5650f00df85fd8cf2","tarball":"https://registry.npmjs.org/@akr4/gatsby-plugin-og-image/-/gatsby-plugin-og-image-1.0.2.tgz","fileCount":18,"unpackedSize":13387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM7BRCRA9TVsSAnZWagAAZXQP/17tqFadcKa5cEgdvu7x\nG4uPlj3UmbDG5G8C9dRejLp2DqPbQk2J0TR5YhcgthIxc/Qimfh4ZpkhOfi4\nVWydiyIW5aNYja9SOdujPU8w4Y5hwfbdYS+f/o7ApyR4qHtK4Al/rHxtrCar\nEn3iC82BhrACVz0PCMNyi8IFKpOpoPqYmEhHQ/DWFMP7jWBQqI4/CAd/odnz\n3g1XRxSSRE+TrSqDXGAY2tN1IDN+QVKfIymhXHcw/afF8+F1ceGAxnE9yfYi\nSL9mQP99CfoWEBnvB/EvalhOIQVCS3Pz9d9BsPVq+fZriutc0g1BRkr3lMjz\n45f4vTNY9Xxc8OPPKnmUhaGgWyRcm+my9TB/yGqdNqJxL/46hOEi0NPD649b\nhC7xNOnfiyh1WMI4183jFur2cEKV9V5LuwZTXOItnppxFpwQRV4oXwv26iBi\ngtIvNPty8CAG13Y/iZNQaHYo2g8RV8ke2BDp73VMjGGkuH/gGZNChMlzN7Xy\nzskXSBunJSaImz38RwiE5zWce6nWxZmsK/pACqzlkwtr6g2mybzEX3NVqeQ+\nhdG348TD3cd05u1gII15TzvHIpAmV1gihF1NVKIWCo3aDmD6Qls9TJB0zLCN\n0rV6RNiGKcdJiozgfH7H4FXXQAw4VJC3u2b7VKpfcr+2cdv8Aeglhifkrv8s\n7jwM\r\n=EWBr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw+Wd27cjRj1umEPj/MCDF60Le3uYU016vAjrCK35k7gIgVrvRmNlf+sHvqRUpU3wvuNAjUWInIimIin8SjxPbduo="}]},"maintainers":[{"name":"akr4","email":"ue@gol.com"}],"_npmUser":{"name":"akr4","email":"ue@gol.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-og-image_1.0.2_1580445777137_0.7373603312265022"},"_hasShrinkwrap":false},"1.0.3":{"name":"@akr4/gatsby-plugin-og-image","version":"1.0.3","author":{"name":"Ueda, Akira","email":"ue@gol.com"},"license":"MIT","keywords":["gatsby","gatsby-plugin"],"dependencies":{"async":"^3.1.1","puppeteer":"^2.1.0","react-helmet":"^5.2.1"},"devDependencies":{"eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-react":"^7.18.0","prettier":"^1.19.1"},"scripts":{"format":"prettier --write \"**/*.{js,jsx,json,md}\"","lint":"eslint --fix \"**/*.{js,jsx}\""},"description":"Generates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akr4/gatsby-plugin-og-image.git"},"bugs":{"url":"https://github.com/akr4/gatsby-plugin-og-image/issues"},"homepage":"https://github.com/akr4/gatsby-plugin-og-image#readme","gitHead":"185ebd60d7bd4e029eaa7816671c8d366a319192","_id":"@akr4/gatsby-plugin-og-image@1.0.3","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-xx687CvKTCO0lKsXiZkLdJo8CYzgoXxMtlPeeTQlb4CU6I+bFaPfugwmjcN6+6tLEZH7UJdmr+Dna44DUiFWgQ==","shasum":"f1ec5883785c7b6c4887f10847b706cf2b0b6771","tarball":"https://registry.npmjs.org/@akr4/gatsby-plugin-og-image/-/gatsby-plugin-og-image-1.0.3.tgz","fileCount":18,"unpackedSize":13584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM7HICRA9TVsSAnZWagAA/y8P/326aD8GjSC0tJmljLGD\nSB2zTGfqQs9ElL//BXGC0yMYEJtEbvPFedwvAstz3NQJHg+3fjEkrH5azj80\ny/DXsAo4g7mSmSgFpPzS0Gd+CAwowqTa7SMFukiKQbBfFPx/6kNG3PqZoGAi\nnYFilhJ+rFn+8zFy1VZexe/tg0gAB/F/E0Zd7RX1PKi6Xml8I2/Hbw9uw+mO\nMRjLnbb/oht+SQ2kLHeqdxx4n3DAWI57/FU4iLjvknwab3QU9sJMHRgFnqeM\nroC0yknh3xqkBGriImaZYKeSBLD0tCK0ndm4XJovIkL7sRqyNnXEuBDqY1da\n8kWOnpAwqn0Q8qGNWXapYVGBGWW1fGZl/4//J1kfoEDKfizZUIileupgpwZT\nkHUgBCF84Y6Tmt4xrNo/dJW0qrq5khJ0VV083ABixhVS9IU+ThUe78OWLQko\nGCSvGa/jXeNhI1PgSqwOxDZUl+PpVWKZeDXGfYsCdWicHGssjJhA3tgLF7+t\nRPK+rz7I2a6pQ/ahU5pUpvembIFaEt+z4yGQxG3YB2oU2agFM2AvlIF7INK0\nIEfAcap5+lQLQyemKuywFDN0s1RYcSdfpvvI/fLukhpF6OmfdnTGwq210EW6\nRC6qa3ANADqcFVgzZkODxby4loYtXPm22xF5ygSJnPGdfLsqNSd4rLLt2Mna\no/xa\r\n=PrQF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEx8//qhuAtf7Zv4BT6Lq0YqIHvSaCDMNh8FKhffJ4BwAiAgimPshXQmaVwGtRj36fFsRxfGUgZSQX+J/uTa9D/z3w=="}]},"maintainers":[{"name":"akr4","email":"ue@gol.com"}],"_npmUser":{"name":"akr4","email":"ue@gol.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-og-image_1.0.3_1580446151671_0.05636511237623609"},"_hasShrinkwrap":false},"1.0.4":{"name":"@akr4/gatsby-plugin-og-image","version":"1.0.4","author":{"name":"Ueda, Akira","email":"ue@gol.com"},"license":"MIT","keywords":["gatsby","gatsby-plugin"],"dependencies":{"async":"^3.1.1","puppeteer":"^2.1.0","lodash.isequal":"^4.5.0","react-helmet":"^5.2.1"},"devDependencies":{"eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-react":"^7.18.0","babel-eslint":"^10.0.3","prettier":"^1.19.1"},"scripts":{"format":"prettier --write \"**/*.{js,jsx,json,md}\"","lint":"eslint --fix \"**/*.{js,jsx}\""},"description":"Generates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akr4/gatsby-plugin-og-image.git"},"bugs":{"url":"https://github.com/akr4/gatsby-plugin-og-image/issues"},"homepage":"https://github.com/akr4/gatsby-plugin-og-image#readme","gitHead":"e925dfc4e6df2423b4e4d0a3b796e275b84c343a","_id":"@akr4/gatsby-plugin-og-image@1.0.4","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-M9fcalOn0A40vk9XXcUhRSf/HpEI62Y73uYmvYIzO4bpt89RFB8gH7HuTp2eiVa8D1PcEVudp84I22PBy9ToZg==","shasum":"95497cc67533c275942ffcc76e43b5271ff9e1d0","tarball":"https://registry.npmjs.org/@akr4/gatsby-plugin-og-image/-/gatsby-plugin-og-image-1.0.4.tgz","fileCount":18,"unpackedSize":16430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM9W6CRA9TVsSAnZWagAA4lQP/ioaksugmlabMIS/hguY\nRxtLbxx2/BmWcrcA86stoYZO7pzWs9thkcDnQruDAuoyKHRFoPJAb16bJkMI\n7xGGnG8FDwjc7EXNeIFFrz201DVEd779oRFz5i8buHg+OrIIIWv5ygaLyQkS\nEJBEUNj0IymZulhunQa/My/Q0jp5Pneh4yXFAnU3WQsPfHZQP2LCiITeVqIn\nNmgnAUtC80eKlqAZvQi4AzaSzfAdqwuDCVuP9whQDBPi3zZc8yQsQBgKafnA\n2Lc/cXpwipIu9DBHNtT3/AwJzLbuls42dnhPfMY+DwJGtqaQLEKXQxCJc50x\nVKJlDqoPvlEoFdnC3LoOOo4+YQd4QYvB80OV5Ds0HvEZcveQTmHebMCrZJxU\nFJt+xfWKa4ognL6DAiTTbf+48+BHPLdmRskttGWwU8+A6RhWLpKp0lfRdMHY\nABQW0C1lAe0nlkEBpYI6n05j6URg1sTS4qrxL2CcYkKvhJ+HuZ56xtr5nUlH\nlcLReHabXQxUbKMmW21O6kM9YdQenvf1b2ubmLicyvqnCLX2a8kBcba3v38M\nCcwkKrbyZX6HfTng7+Po920mecg+ZIn3/qffDek3V1FUjUFYzF5fUnyl2Kae\nmrjDLRV5EWNu9Kk9D1YqKv8YWqezs9LMDu3mpCZY0LqEJDLm/q5cOEDuPKt7\nUj1S\r\n=9REK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmRWCtuvJnm1JqldhrNUllLVZzX9UtFLDeo+yPaYJ5ygIhAKOqtvdjgv4yre8OrY3n68FIYaNU9g8bmtKr/i+QTEtj"}]},"maintainers":[{"name":"akr4","email":"ue@gol.com"}],"_npmUser":{"name":"akr4","email":"ue@gol.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-og-image_1.0.4_1580455353649_0.18518248982581342"},"_hasShrinkwrap":false},"1.0.5":{"name":"@akr4/gatsby-plugin-og-image","version":"1.0.5","author":{"name":"Ueda, Akira","email":"ue@gol.com"},"license":"MIT","keywords":["gatsby","gatsby-plugin"],"dependencies":{"async":"^3.1.1","puppeteer":"^2.1.0","lodash.isequal":"^4.5.0","react-helmet":"^5.2.1"},"devDependencies":{"eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-react":"^7.18.0","babel-eslint":"^10.0.3","prettier":"^1.19.1"},"scripts":{"format":"prettier --write \"**/*.{js,jsx,json,md}\"","lint":"eslint --fix \"**/*.{js,jsx}\""},"description":"Generates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akr4/gatsby-plugin-og-image.git"},"bugs":{"url":"https://github.com/akr4/gatsby-plugin-og-image/issues"},"homepage":"https://github.com/akr4/gatsby-plugin-og-image#readme","gitHead":"823efb4826d8add7470b02163c2d403f5bfb6917","_id":"@akr4/gatsby-plugin-og-image@1.0.5","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-FAYVbrMzM6CNUv7aFK3DrpnvsAa8CucyCT/pTVscjbEKCen39clTpeseB401DWZE8xBVsD1//tXPD0iffdOvng==","shasum":"c4de42c30e11ac4ec7d6e329375ecc508736adbe","tarball":"https://registry.npmjs.org/@akr4/gatsby-plugin-og-image/-/gatsby-plugin-og-image-1.0.5.tgz","fileCount":18,"unpackedSize":16810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM+NWCRA9TVsSAnZWagAAka4P/1To6AJRjN0sAyebo2BJ\n+zL26yd/OZjjBWS1P9+u7PDT65ox+k8xbSUnwds4F+hvODcZ554gfIsxAXoz\nO0QOLTLTUQ6GCMHf42AfNP5K2XirTzoxvWhdLKsfgKE4BgDb6Ub0/XZTNdkb\nDgAYLmGsUbHrHSn3Tp1kXlBZxJ+cZs7VTuj7Ic50G+7wrUpRe3QBejKMzbyw\nwjA947IdasopodlBFkVXMPtzLvnQur/Dx5Ci9VKE5rhyRxTQ88bPuuSodqEB\nmcxt8N0MLsxE6q+mf2CHGI9tORHl7TmVBO5GH466tX3ISAOwof4c+LBN/pxX\nLdnipHN4vq8RRawI7rbr+DhWgj38Y423uIxUo4ExWbp+9zXQ1lspzPc8OgU9\nug3fYIHErlyDc0Rdz55ZgI3Vkjy/nobVO3JBB/HjWgRv5xuHwDMAb+jtFQ/c\nWIME5IG9jUrPgGGAbsdP3WOnmeUL4BWG56NKqWgclSMFJnynmCvPXkuBQ3fR\nOT29iRBfzn1C17BvpKbyhRZgJGcA2ex7d+51ArHs3GlVRgZm0dp8cMeNHEk5\n/lXBvew1vmdic2mDNOFyKGMvU9+ar81QVXbMKqAdWG5hjUgW2icGmJ4pVKod\n2iENzZGn+ecM628/1R29K/wIAn6q+IzJSkgeZ8MOKZ7aQTm7jSOYBdY2k5tV\nefq6\r\n=YjDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAbOHxtXrXozZ20gTM/zAthC85N3LO+OgNUkceBozqKQIhAPlkx/FsFYSGquRJoEi5qUPO7LFCjTYtitZ6Gx1DfLQs"}]},"maintainers":[{"name":"akr4","email":"ue@gol.com"}],"_npmUser":{"name":"akr4","email":"ue@gol.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-plugin-og-image_1.0.5_1580458838216_0.9188400145892721"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-31T04:42:57.105Z","1.0.2":"2020-01-31T04:42:57.295Z","modified":"2022-04-04T12:31:14.532Z","1.0.3":"2020-01-31T04:49:11.833Z","1.0.4":"2020-01-31T07:22:33.803Z","1.0.5":"2020-01-31T08:20:38.439Z"},"maintainers":[{"name":"akr4","email":"ue@gol.com"}],"description":"Generates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.","homepage":"https://github.com/akr4/gatsby-plugin-og-image#readme","repository":{"type":"git","url":"git+https://github.com/akr4/gatsby-plugin-og-image.git"},"author":{"name":"Ueda, Akira","email":"ue@gol.com"},"bugs":{"url":"https://github.com/akr4/gatsby-plugin-og-image/issues"},"license":"MIT","readme":"# @akr4/gatsby-plugin-og-image\n\n[![](https://img.shields.io/npm/v/@akr4/gatsby-plugin-og-image)](https://www.npmjs.com/package/@akr4/gatsby-plugin-og-image)\n\n## Description\n\nGenerates images for og:image for pages and set `<meta property=\"og:image\">` in your HTML statically and dynamically. During build time, Headless Chrome renders your template HTML and makes the images.\n\nThe image below is an example.\n\n![example og:image](https://raw.githubusercontent.com/akr4/static-files/94f490d72eeef6fed80d35e1f1675140241647ec/gatsby-plugin-og-image/example-og-image.png)\n\n## How to install\n\n```\nnpm install @akr4/gatsby-plugin-og-image\n```\n\n## Examples of usage\n\n```javascript:title=gatsby-config.js\nmodule.exports = {\n  plugins: [{\n    resolve: `@akr4/gatsby-plugin-og-image`,\n    options: {\n      siteUrl: `https://example.com`,\n      render: renderOgImage,\n      concurrency: 10,\n    }\n  ]\n};\n```\n\n| property    | default | description                                                                                  |\n| ----------- | ------- | -------------------------------------------------------------------------------------------- |\n| siteUrl     |         | your site URL                                                                                |\n| render      |         | a function to render og:image that takes `ogImagePlugin` property value in the page context. |\n| concurrency | 3       | the number of instances of Headless Chrome                                                   |\n| width       | 1200    | view port width of Headless Chrome                                                           |\n| height      | 630     | view port height of Headless Chrome                                                          |\n\nThe following is an example `render` function. It takes `title` and render it at the center of the page.\n\n```javascript\nconst renderOgImage = ({ title }) => {\n  return `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n</head>\n<body style=\"\n  padding: 0;\n  margin: 0;\n\">\n<div style=\"\n  width: 1200px;\n  height: 590px;\n  background-color: #292D3F;\n  color: #F1F0EE;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-bottom: 40px solid #6D757F;\n  \">\n  <div style=\"font-family: sans-serif; font-size: 60px; font-weight: bold; margin: 0 40px;\">${title}</div>\n  <div style=\"font-family: serif; font-size: 48px; margin: 160px 40px 0 auto;\">example.com</div>\n</div>\n</body>\n</html>\n`;\n};\n```\n\nThe `title` argument comes from the `ogImagePlugin` property of the page context. For example, you can configure it by `createPage`.\n\n```javascript\ncreatePage({\n  path: '/my-first-page',\n  component: blogPost,\n  context: {\n    ogImagePlugin: {\n      title: 'My first page',\n    },\n  },\n});\n```\n\nYou can set whatever you want to `ogImagePlugin` property and use them in the `render` function. `ogImagePlugin` property will be removed after generating an image.\n\nThe following function is an example of how to configure when the source is markdown.\n\n```javascript:title=gatsby-node.js\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions;\n\n  const blogPost = path.resolve(`./src/templates/blog-post.tsx`);\n  const result = await graphql(\n    `\n      {\n        allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1000) {\n          edges {\n            node {\n              fields {\n                slug\n              }\n              frontmatter {\n                title\n              }\n            }\n          }\n        }\n      }\n    `,\n  );\n\n  if (result.errors) {\n    throw result.errors;\n  }\n\n  const posts = result.data.allMarkdownRemark.edges;\n\n  posts.forEach((post, index) => {\n    let ogImagePluginContext;\n    if (post.node.frontmatter && post.node.frontmatter.title) {\n      ogImagePluginContext = {\n        title: post.node.frontmatter.title,\n      };\n    }\n\n    createPage({\n      path: post.node.fields.slug,\n      component: blogPost,\n      context: {\n        ogImagePlugin: ogImagePluginContext,\n      },\n    });\n  });\n};\n```\n","readmeFilename":"README.md","keywords":["gatsby","gatsby-plugin"]}