Embellish your GitHub readme profile with 20+ metrics, PageSpeed stats, music you've listened to and more !
Tags: github, markdow, devops, showdev
Published: 2020-10-27 00:04:44

So it's been a while since GitHub introduced its [profile readme](https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme) feature which lets you customize your user profile. Since then, a lot of people have been creative with it, and have been developping on components like [github-readme-stats](https://github.com/anuraghazra/github-readme-stats), [github-profile-trophy](https://github.com/ryo-ma/github-profile-trophy) or [waka-readme-stats](https://github.com/anmol098/waka-readme-stats).

Today, I'm introducing [metrics](https://github.com/lowlighter/metrics), a set of various plugins that generates SVG images that you can embed in your user profile to make it even more prettier ! It can be setup either as a GitHub action or as a web server.

### 📊 20+ metrics about you !

The main plugin lets you display your account metrics, listed in three categories : *Activity*, *Community* and *Repositories*. Some common stats are included like number of commits, stars, contributions, ... But also a few more exotic ones like your prefered license !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7ya5vdra42rggh7d2svh.png)

You can configure it to hide some parts if you find it too cluttered. A lot of numbers can be intimidating for some people (unless it's on a paycheck haha).

Also, generated SVGs are transparents with a color font that blends well with both light and dark mode, so your visitors will be able to see it whichever side they are !

### 🚀 Faster than light with the PageSpeed plugin

If you have a website linked to your account, you can also display its [PageSpeed](https://web.dev/measure/) performance scores and shows that you've mastered the web.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j5690dm392bw40cu5zid.png)

### 🎼 Show what you listen to with the music plugin

If you're using *Apple Music* or *Spotify* to listen music, you can use the *Music plugin* to display randomly music tracks from one of your favorite playlist. You'll just need to provide its embed url.

![Suggested tracks](https://dev-to-uploads.s3.amazonaws.com/i/btdjlxe75re0qyb248ra.png)

If you're brave enough to create a *Spotify* token, it's possible to display the track you recently listened to instead.

![Recently listened](https://dev-to-uploads.s3.amazonaws.com/i/0abz0amko6i7t4fko8i2.png)

### 🎨 Reveal the artist in you with templates 

The generated SVGs are rendered through [EJS](https://github.com/mde/ejs), which means you can actually use HTML, CSS and JS to template your metrics from the data gathered through the various GitHub APIs and plugins.

For instance, I made a more nerdy alternative template based on an unix terminal : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0fisewj0sczq1nyljnup.png)

But if you're comfortable enough with web, you'll be fine making your own template. Don't hesitate to share it if you made something awesome !

### 🦑 Intrigued ?

There are even more at [lowlighter/metrics](https://github.com/lowlighter/metrics), including documentation and source code. Try it now at [metrics.lecoq.io](https://metrics.lecoq.io) !

Thanks for reading !