monkeytype-hub/monkeytype-readme

Monkeytype Readme transforms MonkeyType typing data into SVGs for your GitHub Readme and Share Your MonkeyType Story With The World

MonkeyType Readme

Monkeytype Readme transforms MonkeyType typing data into SVGs for your GitHub Readme.

Usage

Two way to generate MonkeyType Readme

1. Using GitHub Action from Marketplace

2. Setting Up Custom MonkeyType Readme GitHub Action

Using GitHub Action from Marketplace (MonkeyType Readme Github Action)

1. Add a monkeytype-readme.yml file in your repository's .github/workflows/ path.

2. Configure monkeytype-readme.yml with the following format:

   • Username: Change MONKEYTYPE_USERNAME to your username in MonkeyType.

   • Themes: Change MONKEYTYPE_THEME_NAME to your favorite theme in MonkeyType.
     If theme name have space, please change space to _.
     

     Example: nord light => nord_light

   • Target Branch: Change BRANCH_NAME to the branch you want to put MonkeyType Readme.

name: generate monkeytype readme svg

on:
    schedule:
        - cron: "0 */6 * * *" # every 6 hours
    workflow_dispatch:

jobs:
    download-svg:
        runs-on: ubuntu-latest

        steps:
            - name: Checkout code
              uses: actions/checkout@v4

            - name: Set up Node.js
              uses: actions/setup-node@v3
              with:
                  node-version: "20.x"

            - name: Generate Monkeytype Readme SVG
              uses: monkeytype-hub/[email protected]
              with:
                  username: MONKEYTYPE_USERNAME
                  themes: MONKEYTYPE_THEME_NAME
                  target-branch: BRANCH_NAME
                  github-token: ${{ secrets.GITHUB_TOKEN }}

3. Go to actions and run generate monkeytype readme svg workflow.

4. Done! Now, navigate to your target branch and you'll find the MonkeyType README file. You can also integrate it into your GitHub README.

Setting Up Custom MonkeyType Readme GitHub Action

1. Add a monkeytype-readme.yml file in your repository's .github/workflows/ path.

2. Configure monkeytype-readme.yml with the following format:

   Note: change YOUR_USERNAME to your MonkeyType username.

   Note: This workflow will auto to update your MonkeyType Readme.

   Themes

   Change THEMES to your favorite theme in MonkeyType.
   If theme name have space, please change space to _.
   

   Example: nord light => nord_light

   SVGs information

   

   With LeaderBoards: ?lb=true

   

   With PersonalBests: ?pb=true

   

   With LeaderBoards and PersonalBests: ?lbpb=true

   github actions

   name: generate monkeytype readme svg
   
   on:
       schedule:
           - cron: "0 */6 * * *" # every 6 hours
       workflow_dispatch:
   
   jobs:
       download-svg:
           runs-on: ubuntu-latest
           steps:
               - name: Checkout code
                 uses: actions/checkout@v3
   
               - name: Set up Node.js
                 uses: actions/setup-node@v3
                 with:
                     node-version: "20.x"
   
               - name: Download SVG
                 run: |
                     mkdir public
                     curl -o public/monkeytype-readme.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES
                     curl -o public/monkeytype-readme-lb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?lb=true
                     curl -o public/monkeytype-readme-pb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?pb=true
                     curl -o public/monkeytype-readme-lb-pb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?lbpb=true
   
               - name: push monkeytype-readme.svg to the monkeytype-readme branch
                 uses: crazy-max/[email protected]
                 with:
                     target_branch: monkeytype-readme
                     build_dir: public
                 env:
                     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

3. Add SVGs to your GitHub Readme.

   Note:
   change YOUR_MONKEYTYPE_USERNAME to your MonkeyType username.
   change YOUR_GITHUB_USERNAME to your Github username.
   change YOUR_GITHUB_REPOSITORY to your repository name.
   change SVG_NAME to the svg you want to use.
   

   original : monkeytype-readme.svg
   original + leader boards : monkeytype-readme-lb.svg
   original + personal bests : monkeytype-readme-pb.svg
   original + leader boards + personal bests : monkeytype-readme-lbpb.svg

    <a href="https://monkeytype.com/profile/YOUR_MONKEYTYPE_USERNAME">
      <img src="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPOSITORY/monkeytype-readme/SVG_NAME" alt="My Monkeytype profile" />
    </a>

4. Go to actions and run generate monkeytype readme svg workflow.

5. Done! Your MonkeyType Readme will show on your Readme.

Running Locally

To run MonkeyType Readme locally, follow these steps:

1. Clone this repository:

   git clone https://github.com/monkeytype-hub/monkeytype-readme.git

2. Store the MonkeyType APE keys in .env:

   cp .env.example .env

3. Install the dependencies:

   npm install

4. Run the application:

   npm run dev

5. Finally, visit http://localhost:3000 in your web browser.