DEV Community

James C Kimble Jr
James C Kimble Jr

Posted on

2

Using GitHub's Contribution Graph as a Desktop Background

Introduction

As developers, we take pride in our GitHub contribution graph, showcasing our commitment to open-source projects and personal coding projects. But have you ever thought about using your contribution graph in a different way? In this post, I will show you how to generate a customized desktop background image using your contribution graph.

Generating Background Image

Install Package

To make it easy to use, I have packaged the tool as an npm package. Simply install it by running the following command:

npm install -g @jckimble/github-graph-background
Enter fullscreen mode Exit fullscreen mode

Run Github Graph Background

My favorite theme is fullrandom:dark, which uses all the other themes with a dark background. Run the tool by executing the following command in your terminal:

github-graph-background --token ${GITHUB_TOKEN} --theme fullrandom:dark
Enter fullscreen mode Exit fullscreen mode

Create a script

Here's an example script that I use for Plasma:

#!/bin/bash

CACHE=${HOME}/.cache

if [ -z "$GITHUB_TOKEN" ]; then
    echo "GITHUB_TOKEN must be set"
    exit 1
fi

test -f "${CACHE}/background.png" && mv ${CACHE}/background.png ${CACHE}/background.old.png
test -f "${CACHE}/background.old.png" && plasma-apply-wallpaperimage ${CACHE}/background.old.png

npx @jckimble/github-graph-background --theme random:dark --output ${CACHE}/background.png

plasma-apply-wallpaperimage ${CACHE}/background.png
test -f "${CACHE}/background.old.png" && rm ${CACHE}/background.old.png
Enter fullscreen mode Exit fullscreen mode

Why Developers are Proud of Their Contribution Graph

Developers take pride in their contribution graph because it reflects the number of commits and contributions made over time. A filled-in graph demonstrates a high level of activity and dedication to coding, which is something that we strive for as developers. The contribution graph is a tangible representation of our commitment to the community and making a positive impact.

Conclusion

Creating a custom desktop background using your GitHub contribution graph is a fun and unique way to showcase your coding skills and dedication to the community. By following the steps outlined in this post, you can create a personalized desktop background that reflects your commitment to coding. Give it a try and let me know how it turns out!

Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay