agneym / generate-og-image

Generate open graph images with Github Action from Markdown files

Open Graph Image Generator

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.

If looks very bland without an image when you share the URL, but adding a cover pic with nothing do with your article also does not suit you well. Here is a Github Action based generator that got you covered.

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/[email protected]
        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%"
---

Frontmatter Props

Props	Description	Required	Default
title	Title in the image
subtitle	Subtitle in the image
imageUrl	The image thumbnail on the top
background	Background color, gradient or image url
fontColor	any css supported color
fontSize	the font size
fileName	name of the file		title prop in kebab case

Works only with Pull Requests and md and mdx files.

Repository level Props

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

Props	Description	Required
path	Path to place the image URL in	true
commitMsg	Commit message when image is added
background	Background color, gradient or image url
fontColor	any css supported color
fontSize	the font size
componentUrl	Web Component to be rendered for output.
botComments	Whether a comment with a preview image should be posted

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

How do I customise the output?

1. I need a gradient background

   Just as in CSS your frontmatter or Repo level prop can contain:

   background: 'linear-gradient(to right, #ec008c, #fc6767)'
   

2. What if I need an image as background?

   Write the CSS for it.

   background: 'url(https://example.com/image.png)'
   

3. What about font sizes?

   you can customise the repository level or frontmatter fontSize props which defaults to 100%. The heading and paragraph font sizes vary depending on it.

   fontSize: 120%;
   

4. I need an emoji instead of image

   You can pass in the unicode representation of the emoji from the List in imageUrl prop.

5. I need to format the title

   The title prop supports markdown, feel free to use it.

6. I don't want these preview image bot comments

   the botComments repo prop should be set to "no"

I need more customisation on the output.

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/[email protected].

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

Contributing

See docs

Credits

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.

generate-og-image's Issues

Strategy to handle existing files

By default, Replace an existing image file.

Provide a repository level prop to override this behavior and succeed in such a scenario.

Nodejs error do not set a non-zero exit-code

Built which error with

(node:1) UnhandledPromiseRejectionWarning: YAMLException: bad indentation of a mapping entry at line 9, column 2:
[542](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:543)
     ogImage:
[543](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:544)
     ^
[544](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:545)
    at generateError (/usr/local/src/generate-og-image/dist/index.js:28145:10)
[545](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:546)
    at throwError (/usr/local/src/generate-og-image/dist/index.js:28151:9)
[546](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:547)
    at readBlockMapping (/usr/local/src/generate-og-image/dist/index.js:29085:7)
[547](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:548)
    at composeNode (/usr/local/src/generate-og-image/dist/index.js:29337:12)
[548](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:549)
    at readDocument (/usr/local/src/generate-og-image/dist/index.js:29497:3)
[549](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:550)
    at loadDocuments (/usr/local/src/generate-og-image/dist/index.js:29553:5)
[550](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:551)
    at Object.load (/usr/local/src/generate-og-image/dist/index.js:29574:19)
[551](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:552)
    at parse (/usr/local/src/generate-og-image/dist/index.js:6512:27)
[552](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:553)
    at Object.extractor [as default] (/usr/local/src/generate-og-image/dist/index.js:6495:12)
[553](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:554)
    at /usr/local/src/generate-og-image/dist/index.js:61147:54
[554](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:555)
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
[555](https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true#step:4:556)
(node:1) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Do not set a proper exit-code and therefore the action is considered successful, even though it failed

https://github.com/staabm/staabm.github.io/runs/7235660879?check_suite_focus=true

Emoji in titles do not work

see the red square - instead of the emoji - in the preview redering

error 100

I recently realized that the action is running into errors

https://github.com/staabm/staabm.github.io/actions/runs/3748869269/jobs/6366696199

2022-12-21T11:28:50.5760954Z Building dependency tree...
2022-12-21T11:28:50.5761687Z Reading state information...
2022-12-21T11:28:50.6115410Z Some packages could not be installed. This may mean that you have
2022-12-21T11:28:50.6115921Z requested an impossible situation or if you are using the unstable
2022-12-21T11:28:50.6116385Z distribution that some required packages have not yet been created
2022-12-21T11:28:50.6116758Z or been moved out of Incoming.
2022-12-21T11:28:50.6117140Z The following information may help to resolve the situation:
2022-12-21T11:28:50.6117392Z 
2022-12-21T11:28:50.6117565Z The following packages have unmet dependencies:
2022-12-21T11:28:50.6570026Z  google-chrome-unstable : Depends: libdrm2 (>= 2.4.75) but 2.4.74-1 is to be installed
2022-12-21T11:28:50.6570662Z                           Depends: libgbm1 (>= 17.1.0~rc2) but 13.0.6-1+b2 is to be installed
2022-12-21T11:28:50.6571049Z                           Depends: libu2f-udev but it is not installable
2022-12-21T11:28:50.6649573Z �[91mE: Unable to correct problems, you have held broken packages.
2022-12-21T11:28:52.3248770Z The command '/bin/sh -c apt-get update      && apt-get install -yq libgconf-2-4 gconf-service  libasound2  libatk1.0-0  libc6  libcairo2  libcups2  libdbus-1-3  libexpat1  libfontconfig1  libgcc1  libgconf-2-4  libgdk-pixbuf2.0-0  libglib2.0-0  libgtk-3-0  libnspr4  libpango-1.0-0  libpangocairo-1.0-0  libstdc++6  libx11-6  libx11-xcb1  libxcb1  libxcomposite1  libxcursor1  libxdamage1  libxext6  libxfixes3  libxi6  libxrandr2  libxrender1  libxss1  libxtst6  ca-certificates  fonts-liberation  libappindicator1  libnss3  lsb-release  xdg-utils  wget      && apt-get install -y wget --no-install-recommends      && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -      && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'      && apt-get update      && apt-get install -y google-chrome-unstable --no-install-recommends      && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100
2022-12-21T11:28:52.3250605Z �[0m
2022-12-21T11:28:52.3251543Z ##[endgroup]
2022-12-21T11:28:52.3350006Z ##[error]Docker build failed with exit code 100

Images not regenerated on FrontMatter changes

It seems, most of the time, when changing FrontMatter ogImage contents the actiom does not reflect the changes and posts the very first version from the given PR again and again.
(Same for the images it commits into the PR)

see staabm/staabm.github.io#21 .. the last commit adds a subtitle but it doesnt show up in the preview post

please dont take all the issues I opened personally. I am noting what I experience on first use as a newcomer. When time allows I will see whether I can send fixes for some of the issues

Built errors

I guess caused by one of the dependeny updates in the latest release the docker container build fails with

> [email protected] build-release /usr/local/src/generate-og-image
[971](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:971)
  > ncc build src/main.ts
[972](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:972)
  
[973](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:973)
  ncc: Version 0.20.5
[974](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:974)
  ncc: Compiling file index.js
[975](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:975)
  ncc: Using [email protected] (local user-provided)
[976](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:976)
  Error: [tsl] ERROR in /usr/local/src/generate-og-image/src/generate-html.ts(1,20)
[977](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:977)
      **  TS2307: Cannot find module 'marked'.**
[978](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:978)
      at evalmachine.<anonymous>:1:[1483065](tel:[phone])
[979](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:979)
      at eval (eval at create (evalmachine.<anonymous>:1:273347), <anonymous>:13:1)
[980](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:980)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
[981](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:981)
  npm ERR! code ELIFECYCLE
[982](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:982)
  npm ERR! errno 1
[983](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:983)
  npm ERR! [email protected] build-release: `ncc build src/main.ts`
[984](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:984)
  npm ERR! Exit status 1
[985](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:985)
  npm ERR!
[986](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:986)
  npm ERR! Failed at the [email protected] build-release script.
[987](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:987)
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[988](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:988)
  
[989](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:989)
  npm ERR! A complete log of this run can be found in:
[990](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:990)
  npm ERR!     /root/.npm/_logs/2022-07-07T14_00_02_822Z-debug.log
[991](https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true#step:2:991)
  The command '/bin/sh -c npm run build-release' returned a non-zero code: 1

see https://github.com/staabm/staabm.github.io/runs/7234833282?check_suite_focus=true

Option to disable the PR bot comment

Just tried the action and it works well for me thanks.

I find those github action bot comments useless,.. is there a way to disable them?