Displaying GitHub information on Elgato Streamdeck
Tags: github, tooling
Published: 2023-03-14 15:43:12

A few weeks ago I wrote about [using Elgato with Microsoft Teams](https://dev.to/kasuken/using-elgato-stream-deck-with-microsoft-teams-7hg).
I have the Elgato Streamdeck since many years right now and time to time I tried to optimize the usage with plugins and shortcuts.

In this article I will help you to configure the Streamdeck to display some information about your GitHub account.

First of all, please update the Stream Deck application to the latest version.
After that, navigate to the Plugins menu inside the application.

![Stream Deck](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv4974f9ada6q36lwb8n.png)

Search for "GitHub API" and install the plugin.

Now, in the main Stream Deck application window, you can see the new plugin in the list.

![GitHub API plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl4l2fdy0tqtd91dciyq.png)

Drag and drop the only one action available in a free key on the Stream Deck.
To interact with GitHub, you need a personal access token.
Navigate [here](https://github.com/settings/tokens) and create a new one just for the Stream Deck application.
You can select the minimum permissions that you need for security reasons.

In the text area below the token, you can add a GraphQL query to retrieve the information you want to display in the key.
For instance, the next query, display the total contributions in the last year.

```yaml
query {
  user(login: "kasuken") {
    contributionsCollection {
      contributionCalendar {
        totalContributions
      }
    }
  }
}
```

This is how the key configuration looks like:

![Key Configuration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezwaj0l1ou803nrezi4u.png)

To create new queries, I suggest to use GraphQL API explorer directly from the GitHub website: https://docs.github.com/en/graphql/overview/explorer

By scrolling down the key configuration screen, you can access to additional settings as the value you want to display in the key and the background color of the key, based on this value.

![colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd3w5pm5v85pi2cr8q0b.png)

In the picture above you can see some values from a key on my Stream Deck.

## My Queries
I share with you the query I use for my four buttons:

### Contributions in the last year

```yaml
query {
  user(login: "kasuken") {
    contributionsCollection {
      contributionCalendar {
        totalContributions
      }
    }
  }
}
```
value path: user.contributionsCollection.contributionCalendar.totalContributions

---

### Followers

```yaml
query {
user(login: "kasuken") {
  followers {
    totalCount
  }
}
```
value path: user.followers.totalCount

---

### My Issues

```yaml
{
  myOpenPrs: search(query: "type:issues author:kasuken is:open archived:false", type: ISSUE, first: 100) {
    issueCount
     edges {
        node {
          ... on Issue {
          title
          state
          url
        }
      }
    }    
  }
}
```
value path: myOpenPrs.issueCount

---
### My PR
{
  myOpenPrs: search(query: "type:pr author:@me is:open archived:false", type: ISSUE, first: 5) {
    issueCount
      edges {
        node {
          ... on PullRequest {
          title
          mergeable
          state
          url
        }
      }
    }
  }
  openPrsWithError: search(query: "type:pr author:@me is:open status:failure", type: ISSUE) {
    issueCount
  }
}
value path: myOpenPrs.issueCount

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}