DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Halloween Themes for the user-statistician GitHub Action
Vincent A. Cicirello
Vincent A. Cicirello

Posted on

Halloween Themes for the user-statistician GitHub Action

Just in time for Halloween, and Hacktoberfest, I recently added a few Halloween themes to the user-statistician GitHub Action. I've posted about the user-statistician GitHub Action before. It generates an SVG with a detailed summary of your activity on GitHub suitable for inclusion in your GitHub Profile README or on a personal website. The intended use-case is to run on a schedule via a GitHub workflow in your GitHub Profile repository (repository with same name as your username). It is implemented in Python as a Container Action, and uses the GitHub CLI to query the GitHub GraphQL API to gather the data. For a more detailed summary of its functionality, see my earlier DEV post as well as other posts in this series:

The user-statistician GitHub Action includes several built-in color themes. Up until now all of the built-in color themes were based on GitHub's various themes as described in GitHub's Primer documentation. Recently, I added three new themes related to Halloween: halloween, halloween-light, and batty. Or if you prefer the existing GitHub-inspired themes, but just want to use the pumpkin (from the new halloween and halloween-light themes) or the bat (from the new batty theme) in place of the GitHub Octocat, then that is supported as well.

The rest of this post shows examples of the new themes, as well as providing example workflows to explain how to configure the new themes.

Table of Contents:

Dark Halloween Theme

Let's start with a GitHub workflow using the new halloween theme, but otherwise using all of the default inputs. The workflow below, if placed in a .yml file within the .github/workflows directory of a repository, will run daily at 3am (see the cron) and also runs manually via the workflow_dispatch event. The theme is configured with the colors input to the action. It needs the GITHUB_TOKEN as an environment variable in order to query the GitHub GraphQL API. The default permissions that are automatically granted to GITHUB_TOKEN are sufficient.

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

Since the above workflow uses the default location, the SVG that is generated will be committed to images/userstats.svg. The action has an input that can be used to change the location and/or name of the SVG file. Assuming that you keep the default, then the following Markdown can be used to insert the image into the README of your repository.

![My GitHub activity](images/userstats.svg)
Enter fullscreen mode Exit fullscreen mode

The halloween theme will look like the following sample:

Example with dark Halloween theme

Light Halloween Theme

The second of the new themes is halloween-light, which is a light theme using Halloween colors. Here's a sample workflow:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween-light
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

The halloween-light theme will look like the following sample:

Example with light Halloween theme

A Batty Theme

The third new theme is batty, which is a light theme with bats at the top. Here's a sample workflow:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: batty
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

The batty theme will look like the following sample:

Example with Batty theme

How to Use the Pumpkin or Bat with Another Theme

If you'd rather stick with one of the existing GitHub-inspired themes, and just want to use the jack-o'-lantern or the bat instead of the default GitHub Octocat, then that can be accomplished with the top-icon input, such as top-icon: pumpkin or top-icon: bat. Here's an example workflow showing how to use the jack-o'-lantern with the dark theme.

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: dark
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

The jack-o'-lantern should look good with the light themes as well. For that, you can either set colors: light explicitly or just leave the colors input out (it defaults to a light theme if you don't otherwise specify):

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

And here's a workflow for the default light theme, but with top-icon: bat:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: bat
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

Note, don't try to use top-icon: bat with any of the dark themes since the bat will just blend into the background.

How to Use the Pumpkin or Bat with Custom Colors

If you don't like any of the built-in themes, you can specify custom colors. Here's an example workflow specifying custom colors, but using the jack-o'-lantern, specified with top-icon: pumpkin, instead of the default GitHub Octocat:

name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: '#ffffff #368cf9 #0349b4 #0349b4 #0E1116'
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
Enter fullscreen mode Exit fullscreen mode

See the documentation of the colors input for complete details of how this input works. As in the prior examples, you can simply pass a theme name to this input. But you can also pass a sequence of five colors, each specified either with an SVG color name, or in this example with hex (both 6-digit and 3-digit hex colors are supported). The colors in this example happen to be those of the light-high-contrast theme, and are specified in the order: background color, border color, icons color, title color, and text color. The icons color only affects the icons for the various statistics, and is not used for the icons (e.g., Octocat, pumpkin, bat) in the top corners. If you use the default Octocat (e.g., by not specifying top-icon), the color of the Octocat is set to maximize contrast with your chosen background color. If you don't want any icon at the top, you can pass top-icon: none.

Where You Can Find Me

On the Web:

Vincent A. Cicirello - Professor of Computer Science

Vincent A. Cicirello - Professor of Computer Science at Stockton University - is a researcher in artificial intelligence, evolutionary computation, swarm intelligence, and computational intelligence, with a Ph.D. in Robotics from Carnegie Mellon University. He is an ACM Senior Member, IEEE Senior Member, AAAI Life Member, EAI Distinguished Member, and SIAM Member.

favicon cicirello.org

Follow me here on DEV:

Follow me on GitHub:

GitHub logo cicirello / cicirello

My GitHub Profile

Vincent A Cicirello

Vincent A. Cicirello

Sites where you can find me or my work
Web and social media Personal Website LinkedIn DEV Profile
Software development Github Maven Central PyPI Docker Hub
Publications Google Scholar ORCID DBLP ACM Digital Library IEEE Xplore ResearchGate arXiv

My bibliometrics

My GitHub Activity

If you want to generate the equivalent to the above for your own GitHub profile, check out the cicirello/user-statistician GitHub Action.




Top comments (1)

Collapse
 
cicirello profile image
Vincent A. Cicirello Author

The GitHub repository for the user-statistician GitHub Action is:

GitHub logo cicirello / user-statistician

Generate a GitHub stats SVG for your GitHub Profile README in GitHub Actions

user-statistician

user-statistician

Check out all of our GitHub Actions: actions.cicirello.org/

About user-statistician Mentioned in Awesome README

GitHub Actions GitHub release (latest by date) Count of Action Users
Build Status build samples CodeQL
Source Info License GitHub top language
Contributors GitHub contributors good first issue good first issue
Support GitHub Sponsors Liberapay Ko-Fi

The cicirello/user-statistician GitHub Action generates a detailed visual summary of your activity on GitHub in the form of an SVG suitable to display on your GitHub Profile README Although the intended use-case is to generate an SVG image for your GitHub Profile README you can also potentially link to the image from a personal website, or from anywhere else where you'd like to share a summary of your activity on GitHub. The SVG that the action generates includes statistics for the repositories that you own, your contribution statistics (e.g., commits, issues, PRs, etc), as well as the distribution of languages within public repositories that you own The user stats image can be customized, including the colors such as with one of the built-in themes or your own set of custom…

For quickly getting started using it, there is a directory within that repository of "quickstart" workflows, where you can pick the one closest to the configuration you want, and commit it to the .github/workflows directory in your GitHub Profile repository, after editing it for any customizations you want.

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›