Using GitHub actions to enhance profile readmes
Tags: actionshackathon21
Published: 2021-11-26 14:19:48

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow

One of the coolest features of GitHub is [profile readmes](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme), It helps developers present their work in a cohesive manner and works as a gateway to showcase skill and dedication. 

From the start I was always intrigued by making the profile readmes more dynamic so that's why I built [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) It's been used by thousands of people and gives insights on their progress in open source. 

That's why I decided to create this github action, peerlist-profile-action. 

**You might ask what is peerlist?** 
[Peerlist.io](https://peerlist.io/) is a modern platform for developers to showcase their work, achievements and resume all at once place. It's a great platform it's currently in beta and shows great potential. 

peerlist-profile-action is a simple action which uses [puppeteer](https://github.com/puppeteer/puppeteer) to automate and generate dynamic resumes which you can embed in your profile readme as an image. 

![Anurag Hazra's peerlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rf7v22we21ms0qbdmr3.png)
 
It works by simply installing the action on your github profile readme, see [usage guide](https://github.com/anuraghazra/peerlist-profile-action#usage)

After the action is finished running, it will automatically upload and commit the dynamically generated profile readme png file to your repository which you can embed like so

```md
[![](./images/peerlist-profile.png)](https://peerlist.io/your_username)
```

## Features 
- Easy to setup
- Multiple themes
- Different sizes
- Options to customize 

### Themes

Simply pass `theme_name` option to the action inputs and you can change the theme of the card as you like. 
Here's the list of [all available themes.](https://github.com/anuraghazra/github-readme-stats/tree/master/themes)

![Anurag Hazra's peerlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn2vgs174kzt55cb8mt5.png)

### Multiple Sizes

Passing the `card_size` argument you can change the size of the card, currently we support "sm", "md", "lg" or any number.

![Anurag Hazra's peerlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irsbfet15028e06nn8tl.png)

### Customizations

If you want to customize the colors and build your own theme you can also do so by passing these inputs: 

- output_path - Output path to upload the image
- title_color - Card's title color (without #)
- text_color - Body text color (without #)
- bg_color - Card's background color (without #)
- branch - Branch which you want to upload the image, change it depending on your main branch (default: main)


[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)


### Submission Category: 

Wacky Wildcards


### Yaml File or Link to Code

Usage: 
Inside .github/workflows folder create a new workflow called peerlist-overview.yml and copy paste this content:

```yml
name: 'peerlist-overview'
on:
  schedule:
    # run every day at 12
    - cron: "0 0 * * *"
  
jobs:
  peerlist-run:
    name: Generate peerlist overview
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: browser-actions/setup-chrome@latest
      - uses: 'anuraghazra/peerlist-profile-action@master'
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          username: 'anuraghazra' # your peerlist username
```


{% github https://github.com/anuraghazra/peerlist-profile-action %}

### Additional Resources / Info

Open source libraries & action used in this project: 

- Since I used puppeteer, to install chrome in github action ci, I used browser-actions/setup-chrome action from 
https://github.com/browser-actions/setup-chrome