Narwhal Parade Maestro

    @akr4/gatsby-plugin-og-image

    1.0.5 • Public • Published

    @akr4/gatsby-plugin-og-image

    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.

    The image below is an example.

    example og:image

    How to install

    npm install @akr4/gatsby-plugin-og-image
    

    Examples of usage

    module.exports = {
      plugins: [{
        resolve: `@akr4/gatsby-plugin-og-image`,
        options: {
          siteUrl: `https://example.com`,
          render: renderOgImage,
          concurrency: 10,
        }
      ]
    };
    property default description
    siteUrl your site URL
    render a function to render og:image that takes ogImagePlugin property value in the page context.
    concurrency 3 the number of instances of Headless Chrome
    width 1200 view port width of Headless Chrome
    height 630 view port height of Headless Chrome

    The following is an example render function. It takes title and render it at the center of the page.

    const renderOgImage = ({ title }) => {
      return `<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body style="
      padding: 0;
      margin: 0;
    ">
    <div style="
      width: 1200px;
      height: 590px;
      background-color: #292D3F;
      color: #F1F0EE;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-bottom: 40px solid #6D757F;
      ">
      <div style="font-family: sans-serif; font-size: 60px; font-weight: bold; margin: 0 40px;">${title}</div>
      <div style="font-family: serif; font-size: 48px; margin: 160px 40px 0 auto;">example.com</div>
    </div>
    </body>
    </html>
    `;
    };

    The title argument comes from the ogImagePlugin property of the page context. For example, you can configure it by createPage.

    createPage({
      path: '/my-first-page',
      component: blogPost,
      context: {
        ogImagePlugin: {
          title: 'My first page',
        },
      },
    });

    You can set whatever you want to ogImagePlugin property and use them in the render function. ogImagePlugin property will be removed after generating an image.

    The following function is an example of how to configure when the source is markdown.

    exports.createPages = async ({ graphql, actions }) => {
      const { createPage } = actions;
    
      const blogPost = path.resolve(`./src/templates/blog-post.tsx`);
      const result = await graphql(
        `
          {
            allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1000) {
              edges {
                node {
                  fields {
                    slug
                  }
                  frontmatter {
                    title
                  }
                }
              }
            }
          }
        `,
      );
    
      if (result.errors) {
        throw result.errors;
      }
    
      const posts = result.data.allMarkdownRemark.edges;
    
      posts.forEach((post, index) => {
        let ogImagePluginContext;
        if (post.node.frontmatter && post.node.frontmatter.title) {
          ogImagePluginContext = {
            title: post.node.frontmatter.title,
          };
        }
    
        createPage({
          path: post.node.fields.slug,
          component: blogPost,
          context: {
            ogImagePlugin: ogImagePluginContext,
          },
        });
      });
    };

    Install

    npm i @akr4/gatsby-plugin-og-image

    DownloadsWeekly Downloads

    4

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • akr4