Skip to content

๐Ÿ“Š An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!

License

Notifications You must be signed in to change notification settings

lowlighter/metrics

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ“Š GitHub metrics

Build

Generates your own GitHub metrics image that you can embed on your profile page or elsewhere !

GitHub metrics

But there's more with plugins and templates !

โฑ๏ธ Google PageSpeed plugin ๐Ÿ“… Isometric calendar plugin
Alternate version
Alternate version
๐ŸŽผ Favorite music tracks plugin ๐ŸŽง Recently listened music plugin
๐Ÿˆท๏ธ Most used languages plugin ๐ŸŽŸ๏ธ Follow-up plugin
๐Ÿ“Œ Starred topics plugin ๐Ÿ—‚๏ธ Active projects plugin
๐Ÿ‘จโ€๐Ÿ’ป Lines of code plugin ๐Ÿงฎ Repositories traffic plugin
๐Ÿ’ก Coding Habits plugin โœ’๏ธ Recent posts plugin
๐ŸŽซ Gists plugin
More to come soon !
Classic template Terminal template
More to come soon !

๐Ÿฆ‘ Interested to get your own ?

Try it now at metrics.lecoq.io with your GitHub username !

Because some plugins require additional configuration and setup, some of them are not available at metrics.lecoq.io. For a fully-featured experience, consider using this as a GitHub Action instead !

๐Ÿ“œ How to use ?

โš™๏ธ Using GitHub Action on your profile repository (~5 min setup)

Setup a GitHub Action which runs periodically and pushes your generated metrics image on your repository. See all supported options in action.yml.

Assuming your username is my-github-user, you can then embed your metrics in your repository readme like below :

![GitHub metrics](https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg)
๐Ÿ’ฌ How to setup ?

0. Prepare your personal repository

Create a repository with the same name as your GitHub username if it's not already done.

Setup personal repository

The README.md of it will be displayed on your user profile :

GitHub Profile Example

1. Create a GitHub token

From the Developer settings of your account settings, select Personal access tokens to create a new token.

No additional scopes are needed.

Setup a GitHub personal token

2. Set your GitHub token in your personal repository secrets

Go to the Settings of your personal repository to create a new secret and paste your freshly generated GitHub token there.

Setup a repository secret

3. Create a new GitHub Action workflow on your personal repository

Create a new workflow from the Actions tab of your personal repository and paste the following :

name: GitHub metrics
on:
  # Schedule updates
  schedule: [{cron: "0 * * * *"}]
  push: {branches: "master"}
jobs:
  github-metrics:
    runs-on: ubuntu-latest
    steps:
      # See action.yml for all options
      - uses: lowlighter/metrics@latest
        with:
          # Your GitHub token
          token: ${{ secrets.METRICS_TOKEN }}
          # GITHUB_TOKEN is a special auto-generated token restricted to current repository, which is used to push files in it
          committer_token: ${{ secrets.GITHUB_TOKEN }}

See all supported options in action.yml.

When using a token with additional permissions, it is advised to fork this repository to minimize security risks :

      - uses: my-github-username/metrics@latest

In this case, consider watching new releases of this repository to stay up-to-date and enjoy latest features !

If you prefer examples rather than theory, check out this workflow file which generates metrics daily.

Preview vs release

It is possible to use @master instead of @latest to use new features before their official release. Breaking changes may occur occasionally on @master, which could result in your metrics not being generated temporarily.

What will happen ?

A new metrics image will be generated and committed to your repository on each run.

Action update example

4. Embed the link into your README.md

Edit your repository readme and add your metrics image :

![GitHub metrics](https://github.com/my-github-user/my-github-user/blob/master/github-metrics.svg)

๐Ÿ’• Using the shared instance (~1 min setup, but with limitations)

For conveniency, you can use the shared instance available at metrics.lecoq.io without any additional setup.

Assuming your username is my-github-user, you can embed your metrics in your repository readme like below :

![GitHub metrics](https://metrics.lecoq.io/my-github-user)

Visit metrics.lecoq.io for more informations.

๐Ÿ’ฌ Restrictions and fair use

Since GitHub API has rate limitations, the shared instance has a few limitations :

  • Images are cached for 1 hour
    • Your generated metrics won't be updated during this amount of time when queried
  • A rate limiter is enabled, although it won't affect already cached users metrics
  • Plugins which consume additional requests, or require additional token scopes are disabled

If you're appreciating this project, consider using it as a GitHub Action instead.

๐Ÿ—๏ธ Deploying your own web instance (~15 min setup, depending on your sysadmin knowledge)

It is possible to setup your own instance if you don't want to use GitHub Actions or if you want to allow others users on your instance.

When sharing an instance, it is advised to restrict the number of users which can use it through the rate limiter or the access list, to avoid reaching the requests limit of GitHub APIs.

See all supported options in settings.example.json.

๐Ÿ’ฌ How to setup ?

0. Prepare your server

You will need a server where you can setup and run a NodeJS application.

1. Create a GitHub token

From the Developer settings of your account settings, select Personal access tokens to create a new token.

No additional scopes are needed, unless you want to include your private repositories metrics or if you want to use the traffic plugin.

Setup a GitHub personal token

Be sure to enable Include private contributions on my profile in your account settings to include your private repositories :

Enable "Include private contributions on my profile`"

2. Install dependencies

Connect to server and ensure NodeJS is installed (see tested version in workflow).

Run the following commands to clone this repository, install dependencies and copy configuration example file :

git clone https://github.com/lowlighter/metrics.git
cd metrics/
npm install --only=prod
cp settings.example.json settings.json

3. Configure your instance

Edit settings.json to configure your instance.

{
  //See settings.example.json for all options
  //GitHub API token
    "token":"****************************************"
}

See all supported options in settings.example.json.

4. Start your instance

Run the following command to start your instance once you've finished configuring it :

npm start

From your browser, you should be able to access your web instance on the port you provided in setting.json.

5. Embed the link into your README.md

Edit your repository readme and add your metrics image from your server domain :

![GitHub metrics](https://my-personal-domain.com/my-github-user)

6. (optional) Setup as service on your instance

To ensure that your instance will be restarted in case of reboots or crashs, you should setup it as a service. This is described below for linux-like systems which supports systemd.

Create a new service file /etc/systemd/system/github_metrics.service and paste the following after editing paths inside :

[Unit]
Description=GitHub metrics
After=network-online.target
Wants=network-online.target

[Service]
Type=simple
WorkingDirectory=/path/to/metrics
ExecStart=/usr/bin/node /path/to/metrics/index.mjs

[Install]
WantedBy=multi-user.target

Reload services, enable it, start it and check if it is up and running :

systemctl daemon-reload
systemctl enable github_metrics
systemctl start github_metrics
systemctl status github_metrics
โš ๏ธ HTTP errors code

The following errors code can be encountered on a web instance :

Error code Description
400 Bad request Invalid query (e.g. unsupported template)
403 Forbidden User not allowed in restricted users list
404 Not found GitHub API did not found the requested user
429 Too many requests Thrown when rate limiter is trigerred
500 Internal error Server error while generating metrics images (check logs for more details)
503 Service unavailable Maximum user capacity reached, only cached images can be accessed for now
๐Ÿ”— HTTP parameters

Generated metrics images from a web instance can be configured through url parameters.

Configuring base content

Base content is enabled by default, but passing ?base=0 will disable all base content. You can choose to selectively enable or disable a specific <section> with ?base.<section>=<1|0>.

For example, to opt-out from activity, community and metadata, append ?base.activity=0&base.community=0&base.metadata=0 to your metrics url.

Configuring plugins

Plugins are disabled by default, but passing ?<plugin>=1 will enable a specific <plugin>. Plugin options can be passed with ?<plugin>.<option>=<value>.

For example, to enable music plugin and configure music plugin, you could append the following to your metrics url : ?music=1&music.provider=spotify&music.mode=recent&music.limit=4.

Basically, most of action.yml options can actually be used by web instance, with plugin_ prefix dropped, and . instead of _.

๐Ÿ“š Documentation

๐Ÿ–ผ๏ธ Templates

Templates allows you to change the general appearance of your metrics images. Some metrics may be displayed differently, and all plugins may not be supported or behave the same from one template to another.

Consider trying them at metrics.lecoq.io !

Used template defaults to the classic one.

๐Ÿงฉ Plugins

Plugins are features which can provide additional metrics and features. In return, they may require additional configuration and consume additional API requests.

๐Ÿ—ƒ๏ธ Base content

Generated metrics contains a few sections that are enabled by default, such as recent activity, community stats and repositories stats. This can be configured by explicitely opt-out from them.

๐Ÿ’ฌ About

By default, generated metrics contains the following sections :

  • header, which usually contains your username, your two-week commits calendars and a few additional data
  • activity, which contains your recent activity (commits, pull requests, issues, etc.)
  • community, which contains your community stats (following, sponsors, organizations, etc.)
  • repositories, which contains your repositories stats (license, forks, stars, etc.)
  • metadata, which contains informations about generated metrics

You can explicitely opt-out from them, which can be useful if you only want to keep a few sections or to use a plugin as standalone.

For example, to keep only header and repositories sections, add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    base: "header, repositories" # opt-out from "activity", "community" and "metadata"

โฑ๏ธ PageSpeed

The pagespeed plugin adds the performances of the website attached mentioned on your account :

Pagespeed plugin

These are computed through Google's PageSpeed API, which yields the same results as web.dev.

๐Ÿ’ฌ About

Although not mandatory, you can generate an API key for PageSpeed API here to avoid 429 HTTP errors.

The website attached to the GitHub profile will be the one to be audited. Expect 10 to 30 seconds to generate the results.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_pagespeed: yes
    plugin_pagespeed_token: ${{ secrets.PAGESPEED_TOKEN }}

You can display a detailed report along with scores :

Pagespeed plugin (detailed)

See performance scoring and score calculator for more informations about how PageSpeed compute these statistics.

Add the following to your workflow instead :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_pagespeed: yes
    plugin_pagespeed_detailed: yes
    plugin_pagespeed_token: ${{ secrets.PAGESPEED_TOKEN }}

๐Ÿ“… Isometric calendar

The isocalendar plugin displays an isometric view of your commits calendar, along with a few stats like current streak and commit average per day.

Isocalendar plugin

๐Ÿ’ฌ About

It will consume two additional GitHub requests.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_isocalendar: yes

Use the following instead to display a full-year instead :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_isocalendar: yes
    plugin_isocalendar_duration: full-year

Isocalendar plugin (full year)

๐ŸŽผ Music

The music plugin can work in the following modes :

Playlist mode

Select randomly a few tracks from a given playlist so you can display your favorite tracks to your visitors.

Music plugin (playlist)

๐Ÿ’ฌ About

Select a music provider below for instructions.

Apple Music

Extract the embed url of the playlist you want to share.

To do so, connect to music.apple.com and select the playlist you want to share. From ... menu, select Share and Copy embed code.

Copy embed code of playlist

Extract the source link from the code pasted in your clipboard :

<iframe allow="" frameborder="" height="" style="" sandbox="" src="https://embed.music.apple.com/**/playlist/********"></iframe>

Finish the plugin setup by adding the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_music: yes
    plugin_music_provider: apple
    plugin_music_mode: playlist
    plugin_music_playlist: https://******** # Extracted source link
    plugin_music_limit: 4 # Set the number of tracks you want to display
Spotify

Extract the embed url of the playlist you want to share.

To do so, Open Spotify and select the playlist you want to share. From ... menu, select Share and Copy embed code.

Copy embed code of playlist

Extract the source link from the code pasted in your clipboard :

<iframe src="https://open.spotify.com/embed/playlist/********" width="" height="" frameborder="0" allowtransparency="" allow=""></iframe>

Finish the plugin setup by adding the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_music: yes
    plugin_music_provider: spotify
    plugin_music_mode: playlist
    plugin_music_playlist: https://******** # Extracted source link
    plugin_music_limit: 4

Recently played mode

Display tracks you played recently.

Music plugin (recently played)

๐Ÿ’ฌ About

Select a music provider below for additional instructions.

Apple Music

This mode is not supported for now.

I tried to find a way with smart playlists, shortcuts and other stuff but could not figure a workaround to do it without paying the 99$ fee for developper program.

So unfortunately this isn't available for now.

Spotify

Spotify does not have personal tokens, so it makes the process a bit longer because you're required to follow the authorization workflow... Follow the instructions below for a TL;DR to obtain a refresh_token.

Sign-in to the developer dashboard and create a new app. Keep your client_id and client_secret and let this tab open for now.

Add a redirect url

Open the settings and add a new Redirect url. Normally it is used to setup callbacks for apps, but just put https://localhost insteadd (it is mandatory as per the authorization guide, even if not used).

Forge the authorization url with your client_id and the encoded redirect_uri you whitelisted, and access it from your browser :

https://accounts.spotify.com/authorize?client_id=********&response_type=code&scope=user-read-recently-played&redirect_uri=https%3A%2F%2Flocalhost

When prompted, authorize your application.

Authorize application

Once redirected to redirect_uri, extract the generated authorization code from your url bar.

Extract authorization code from url

Go back to your developer dashboard tab, and open the web console of your browser to paste the following JavaScript code, with your own client_id, client_secret, authorization code and redirect_uri.

(async () => {
  console.log(await (await fetch("https://accounts.spotify.com/api/token", {
    method:"POST",
    headers:{"Content-Type":"application/x-www-form-urlencoded"},
    body:new URLSearchParams({
      grant_type:"authorization_code",
      redirect_uri:"https://localhost",
      client_id:"********",
      client_secret:"********",
      code:"********",
    })
  })).json())
})()

It should return a JSON response with the following content :

{
  "access_token":"********",
  "expires_in": 3600,
  "scope":"user-read-recently-played",
  "token_type":"Bearer",
  "refresh_token":"********"
}

With your client_id, client_secret and refresh_token you can finish the plugin setup by adding the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_music: yes
    plugin_music_provider: spotify
    plugin_music_token: "${{ secrets.SPOTIFY_CLIENT_ID }}, ${{ secrets.SPOTIFY_CLIENT_SECRET }}, ${{ secrets.SPOTIFY_REFRESH_TOKEN }}"
    plugin_music_mode: recent
    plugin_music_limit: 4

๐Ÿˆท๏ธ Languages

The languages plugin displays which programming languages you use the most across all your repositories.

Languages plugin

๐Ÿ’ฌ About

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_languages: yes

๐ŸŽŸ๏ธ Follow-up

The follow-up plugin displays the ratio of opened/closed issues and the ratio of opened/merged pull requests across all your repositories, which shows if they're well-maintened or not.

Follow-up plugin

๐Ÿ’ฌ About

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_followup: yes

๐Ÿ“Œ Topics

The topics plugin displays your starred topics. Check out GitHub topics to search interesting topics.

Topics plugin

๐Ÿ’ฌ About

This uses puppeteer to navigate through your starred topics page.

You can choose to display and order topics by :

  • Most stars
  • Recent activity
  • Recently starred by you
  • randomly

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_topics: yes
    plugin_topics_sort: stars
    plugin_topics_limit: 15

๐Ÿ—‚๏ธ Projects

The projects plugin displays the progress of your profile projects.

Projects plugin

๐Ÿ’ฌ About

It will consume an additional GitHub request.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_projects: yes
    plugin_projects_limit: 4

Note that by default, profile projects have progress tracking disabled. To enable it, open the โ‰ก Menu and edit the project to opt-in to Track project progress (it can be a bit confusing since it's actually not in the project settings).

Enable "Track project progress"

๐Ÿ’ฌ Create a personal project on GitHub

On your profile, select the Projects tab : Create a new project

Fill the informations and set visibility to public : Configure project

๐Ÿ‘จโ€๐Ÿ’ป Lines

The lines of code plugin displays the number of lines of code you added and removed across all of your repositories.

Lines plugin

๐Ÿ’ฌ About

It will consume an additional GitHub request per repository.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_lines: yes

๐Ÿงฎ Traffic

The repositories traffic plugin displays the number of pages views across your repositories.

Traffic plugin

โš ๏ธ This plugin requires a personal token with full repo scope.
๐Ÿ’ฌ About

It will consume an additional GitHub request per repository.

Because of GitHub REST API limitation, provided token requires full repo scope to access traffic informations.

Token with repo scope

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # Token with "repo" scope
    token: ${{ secrets.METRICS_TOKEN }}
    # ... other options
    plugin_traffic: yes

๐Ÿ’ก Habits

The coding habits add deduced coding habits based on your recent activity, from up to 100 events.

Habits plugin

๐Ÿ’ฌ About

It will consume an additional GitHub request per event fetched.

Because of GitHub REST API limitation, provided token requires full repo scope to access private events. Events that cannot be fetched will be ignored so it is still possible to use this plugin with a scope-less token.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_habits: yes
    plugin_habits_from: 100

โœ’๏ธ Posts

The recent posts plugin displays recent articles you wrote on an external source, like dev.to.

Posts plugin

๐Ÿ’ฌ About

Supported sources are :

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_posts: yes
    plugin_posts_source: ********

๐ŸŽซ Gists

The gists plugin displays your gists metrics.

Gists plugin

๐Ÿ’ฌ About

It will consume an additional GitHub request per gist fetched.

Add the following to your workflow :

- uses: lowlighter/metrics@latest
  with:
    # ... other options
    plugin_gists: yes

๐Ÿ’ช Contributing and customizing

To suggest a new feature, find a bug or need help, fill an issue describing your problem or your needs.

If you're motivated enough, you can submit a pull request to integrate new features or to solve open issues.

Read CONTRIBUTING.md for more information about this.

๐Ÿ“– Useful references

โœจ Inspirations