Generate a Breakout game SVG from a GitHub user's contributions graph
This project will grab your contribution graph through the GitHub API and generate images for light and dark mode:
You can use the provided GitHub Action to build the SVGs so you can display them like on my profile (github.com/cyprieng):
Generate the SVGs every day and commit them to your repository:
name:
generate breakout svg
on:
schedule:
-
cron:
"0 */24 * * *"
workflow_dispatch:
jobs:
generate-svg:
permissions:
contents:
write
runs-on:
ubuntu-latest
timeout-minutes:
5
steps:
-
name:
Checkout repository
uses:
actions/checkout@v4
-
name:
generate SVG
uses:
cyprieng/[email protected]
with:
github_username:
${{ github.repository_owner }}
-
name:
Move generated SVGs
run:
|
mkdir -p images
mv output/light.svg images/breakout-light.svg
mv output/dark.svg images/breakout-dark.svg
-
name:
Configure git
run:
|
git config user.name "github-actions[bot]"
git config user.email "github-actions[bot]@users.noreply.github.com"
-
name:
Commit and push SVGs
run:
|
git add images/breakout-light.svg images/breakout-dark.svg
git commit -m "chore: update breakout SVGs" || echo "No changes to commit"
git push
Add them to your README.md:
<picture>
<source
media="(prefers-color-scheme: dark)"
srcset="images/breakout-dark.svg"
/>
<source
media="(prefers-color-scheme: light)"
srcset="images/breakout-light.svg"
/>
<img alt="Breakout Game" src="images/breakout-light.svg" />
</picture>
You need to get a GitHub Token, then you can run the following command:
node dist/cli.js {username} {github token} {dark mode: true/false}
The package is currently not available on npm, so you can install it with:
npm i --save git+ssh://[email protected]:cyprieng/github-breakout.git
And then you can use it like this:
import { generateSVG } from "github-breakout";
await generateSVG(username, token, false);
You can try it here: www.cyprien.io/projects/github-breakout
.png)
3 months ago
1
