Extract GitHub OpenGraph Images for Card Previews

Previously, when sharing GitHub on my blog, I always used GitHub Repository Card for sharing, but it doesn’t have good support for Chinese and doesn’t support line breaks.

ccbikai/cloudflare-worker-image - GitHub

Originally, I planned to create my own using @vercel/og, but I accidentally discovered that GitHub provides comprehensive and beautiful Open Graph images on Twitter. So, I wrote a script to extract and use them for blog previews.

Demo

nasa/fprime - GitHub

A framework for building Open Graph images

In addition to repositories, GitHub’s Open Graph also supports previews for Issue, Pull Request, Discussion, and Commit modules.

Usage

Modify .com to .html.zone on any GitHub page.

For example, https://github.com/vercel/next.js => https://github.html.zone/vercel/next.js.

Previews

Repo

Repo

Issue

Issue

Pull Request

Pull Request

Discussion

Discussion

Commit

Commit

Source Code

The code has been shared on GitHub for those interested to explore.

ccbikai/github-og-image - GitHub

Hardianto

© 2024 Hardianto.

Instagram Linkedln GitHub