Skip to content

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

Notifications You must be signed in to change notification settings

monkeytype-hub/monkeytype-readme

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

Repository files navigation

MonkeyType Readme

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

My Monkeytype profile

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/monkeytype-readme@v1.0.0
              with:
                  username: MONKEYTYPE_USERNAME
                  themes: MONKEYTYPE_THEME_NAME
                  target-branch: BRANCH_NAME
                  github-token: ${{ secrets.GITHUB_TOKEN }}
  1. Go to actions and run generate monkeytype readme svg workflow.

  2. 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

    My Monkeytype profile

    With LeaderBoards: ?lb=true

    My Monkeytype profile

    With PersonalBests: ?pb=true

    My Monkeytype profile

    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/ghaction-github-pages@v4.0.0
                  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.