Generates open graph images for your blog with Github Actions.

This github action scans your PR for changes to md or mdx files, reads frontmatter configuration from them and generates images for your SEO.

In your action file:

name: "Generate OG Images"
on: pull_request

jobs:
  generate_og_job:
    runs-on: ubuntu-latest
    name: Generate OG Images
    steps:
      - name: Checkout
        uses: actions/checkout@v1
      - name: Generate Image
        uses: BoyWithSilverWings/generate-og-image@1.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          GITHUB_CONTEXT: ${{ toJson(github) }}
        with:
          path: src/images/post-images/

For configuring the parameters, add following fields to the frontmatter:

---
ogImage:
  title: "Things you don't know"
  subtitle: "There must be something"
  imageUrl: "https://example.com/image-url.jpg"
  background: "yellow"
  fontColor: "rgb(0, 0, 0)"
  fontSize: "100%"
---

Works only with Pull Requests and md and mdx files.

These are props that you can configure in the action file to customise the working.

Frontmatter level props on a document always takes precedence over Repository level props.

The generator uses a web component to create the default output and provides a repository level prop to customise this web component.

The component currently being used is on Github and published on NPM. The default URL is from Unpkg with https://unpkg.com/@agney/og-image-element@0.2.0.

You can substitute the same with componentUrl input in your workflow file. For more info on creating this web component, visit source

1. Zeit OG Image

   Serverless based open graph image generator from zeit

2. Zeit NCC

3. Github Image Actions

   For some utils to copy from.