yoshi389111 / github-profile-3d-contrib

This GitHub Action creates a GitHub contribution calendar on a 3D profile image.

GitHub Profile 3D Contrib.

日本語 | Español

Overview

This GitHub Action creates a GitHub contribution calendar on a 3D profile image.

How to use (GitHub Actions) - Basic

This action generate your github profile 3d contribute calendar and make a commit to your repo. You can also trigger action by yourself after add this action.

step 1. Create special repository.

Create a repository on GitHub with the same name as your user name.

• e.g. If the user name is octocat, create a repository named octocat/octocat.
• ref. Managing your profile README

In this repository, do the following.

step 2. Create workflow file.

Create a workflow file like the one below.

• .github/workflows/profile-3d.yml

The schedule is set to start once a day. Please correct the startup time to a convenient time.

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add -A .
          git commit -m "generated"
          git push

Note: If you also want to include the private repository, register the "personal access token" in the repository and set it to GITHUB_TOKEN specified in the workflow file.

This will add the action to the repository.

Environment variables

• GITHUB_TOKEN : (required) access token
• USERNAME : (required) target user name (or specify with an argument).
• MAX_REPOS : (optional) max repositories, default 100 - since ver. 0.2.0
• SETTING_JSON : (optional) settings json file path. See sample-settings/*.json and src/type.ts in yoshi389111/github-profile-3d-contrib repository for details. - since ver. 0.6.0

step 3. Manually launch the action

Launch the added action.

• Actions -> GitHub-Profile-3D-Contrib -> Run workflow

The profile image is generated with the following paths.

• profile-3d-contrib/profile-green-animate.svg
• profile-3d-contrib/profile-green.svg
• profile-3d-contrib/profile-season-animate.svg
• profile-3d-contrib/profile-season.svg
• profile-3d-contrib/profile-south-season-animate.svg
• profile-3d-contrib/profile-south-season.svg
• profile-3d-contrib/profile-night-view.svg
• profile-3d-contrib/profile-night-green.svg
• profile-3d-contrib/profile-night-rainbow.svg
• profile-3d-contrib/profile-gitblock.svg

Alternatively, if SETTING_JSON is specified, the following image will be generated.

• profile-3d-contrib/profile-customize.svg

example: green version

example: season version (Northern Hemisphere.)

example: season version (Southern Hemisphere.)

example: night view version

example: night green version

example: night rainbow version

example: git block version

step 4. Add image to README.md

Add the path of the generated image to the readme file.

e.g.

![](./profile-3d-contrib/profile-green-animate.svg)

How to use (GitHub Actions) - Advanced examples

More info in EXAMPLES.md

How to use (local)

Set the GITHUB_TOKEN environment variable to the value of "personal access token".

export GITHUB_TOKEN=XXXXXXXXXXXXXXXXXXXXX

Run it with your GitHub user specified.

node_modules/.bin/ts-node src/index.ts USER_NAME

or

npm run build
node . USER_NAME

Licence

MIT License

(C) 2021 SATO, Yoshiyuki

github-profile-3d-contrib's Issues

Show the number of posts as a tooltip

Show the number of contributes as a tooltip

Use the title element of SVG

---

コントリビュート数をツールチップとして表示する

SVG の title 要素を使用する

Allow the number of repositories to be aggregated to be defined by environment variables.

problem

The maximum number of repositories to be aggregated is 100.

Countermeasures

Allow the number of repositories to be aggregated to be defined by environment variables.

If no environment variable is defined, the default is 100.

- query ($login: String!) {
+ query ($login: String!, $maxRepos: Int!) {
    user(login: $login) {
      contributionsCollection {
-       commitContributionsByRepository(maxRepositories: 100) {
+       commitContributionsByRepository(maxRepositories: $maxRepos) {
          // ...
        }
      }
-     repositories(first: 100) {
+     repositories(first: $maxRepos) {
        // ...
      }
    }
  }

---

問題

集計対象のリポジトリが最大数は100件である。

対策

集計されるリポジトリの数を環境変数で定義可能にする

環境変数が定義されていない場合、デフォルトは100件とする。

Setting time span via config parameter

Would it be possible to set time span via config parameter e.g. 6 months instead of 1 year period? It is also a feature used for similar component and I think it would be useful.

Height of bars in days with more than 50 contributions is always 153

Describe the bug
Height of days with more than 50 contributions is always 153.
const calHeight = Math.min(50, cal.contributionCount) * 3 + 3;
https://github.com/formidablae/github-profile-3d-contrib/blob/210fbaf3147b61d63405df0a043af830a252bfe5/src/create-3d-contrib.ts#L219

To Reproduce
Steps to reproduce the behavior:

1. Do 51 contributions in a day.
2. Do 65 contributions in the next day.
3. Generate the 3D contributions svg image.
4. Both days will have same height.

Expected behavior
Days with different contributions should have different heights.
Days with more contributions should have taller bars than days with fewer contributions.
Days with same number of contributions (in the last 365 days) should have same height of the bar.

Screenshots
Is now:

even though those days have different contribution numbers.

A possibile solution
Since some users might have days with hundreds of contributions and other days with very few - therefore the bar height difference would be huge and not nice to show linearly, I propose the usage of logarithmic height for the bars. ( in the form of height = log(num_contribs * constant_a + constant_b).
constant_b helps keep decent the height of days with a small number of contributions. When a users starts having more and more contribs, constant_b starts having less influence on the height.
Example (number of contributions -> corresponding height):
1 contribution -> log(1 contrib * 5 + 10) = log(15) = 1.18
2 contribs -> log(2 * 5 + 10) = 1.3
5 contribs -> log(35) = 1.54
10 contribs -> log(60) = 1.78 (going from 1 contribs to 10, increases height by 0.6, +50%)
20 contribs -> log(110) = 2.04
50 contribs -> log(260) = 2.41
100 contribs -> log(510) = 2.71 (going from 10 contribs to 100, increases height by 0.93, +52%)
200 contribs -> log(1010) = 3.00
500 contribs -> log(2510) = 3.40
1000 contribs -> log(5010) = 3.70 (going from 100 contribs to 1000, increases height by 0.99, +37%)
10000 contribs -> log(50010) = 4.70 (going from 100 contribs to 1000, increases height by 1, +27%)
For each order of 10 increase, there would be approximately an increase in height of 1 with relative percentage increase continually decreasing.
This way infinity isn't avoided but height difference between days is preserved and visually it might be nice(r) (play with the constants for a better result - maybe add some other constant related to the average of contributions in the last 365 days).

Save the generated images to different directory

Currently, it is profile-3d-contrib, I have a directory named images.
How to change the commit directory to images ?

Workflow run is failing

Description : Workflow runs when I run it manually but fails in automatic run.

Availability to configure lang?

Is your feature request related to a problem? Please describe.
Hi! First of all thanks for this epic software. It really adds tons of info even for displaying on personal websites!

For the very same reason, I think it can be very useful if the language of the generated svg could be changed, and the path of the files too.

Describe the solution you'd like
To enable i18n, the following key can be added to json (Spanish):

{
  "type": "normal",
  ...
  "i18n": {
      "commit": "Commit",
      "repo": "Repositorios",
      "review": "Revisiones",
      "pullreq": "Pull/Req",
      "issue": "Issues",
      "contributions": "contribuciones",
  },
  "exportpath": "profile-3d-contrib-es"
}

Thus, I'd have two different paths, 1 for english (default), and another for Spanish entries, and so on...
Thanks!

401

hi. im trying to use github-profile-3d-contrib.
im created a github action and this is my profile-3d.yml :
`
name: GitHub-Profile-3D-Contrib

on:
schedule: # 03:00 JST == 18:00 UTC
- cron: "0 18 * * *"
workflow_dispatch:

jobs:
build:
runs-on: ubuntu-latest
name: generate-github-profile-3d-contrib
steps:
- uses: actions/checkout@v3
- uses: yoshi389111/[email protected]
env:
GITHUB_TOKEN: my-token
USERNAME: xandner
- name: Commit & Push
run: |
git config user.name github-actions
git config user.email [email protected]
git add -A .
git commit -m "generated"
git push
`
but when i run the action get a :
Request failed with status code 401

Node.js 12 actions are deprecated. How to upgrade?

Describe the bug
When I deployed according to the readme of https://github.com/yoshi389111/github-profile-3d-contrib, the following error message occurred:

Node.js 12 actions are deprecated. Please update the following actions to use Node.js 16: yoshi389111/[email protected]. For more information see: https://github.blog/changelog/2022 -09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/.

I would like to know how to solve this problem, properly deploy and run the project "generate-github-profile-3d-contrib".

Screenshots

Desktop (please complete the following information):

• OS: [Windows 10 Professional Edition]
• Browser [Chrome]
• Version [111.0.5563.147 (official release) (64-bit)]

How to hide the daily push by the Github Actions？

Hi there!

Your repo is gorgeous. Thanks for sharing.
But I have some questions about it.
You see, your Github Actions push a new generated svg everyday, but I can't see the push in your contribution box as well as your newly generated svg, just like below.

I can only suppose you did something special that can filter the automatic push.
Could you share your method of how you doing that? I will be really appreciate it.

The user name can also be specified from the argument.

problem

The user name can only be specified in an environment variable.

Countermeasures

The user name can also be specified from the argument.

If not specified in the argument, use the environment variable USERNAME.

---

問題

ユーザー名は環境変数でしか指定できない

対策

ユーザー名を引数からも指定可能とする。

引数に指定されていない場合には、環境変数 USERNAME を使用する。

Deprecation Warning for Node.js 16 in GitHub Actions: Update Required

Describe the bug
When running GitHub Actions with the generate-github-profile-3d-contrib workflow, there is a deprecation warning indicating that Node.js 16 actions are deprecated. The recommendation is to update to Node.js 20. The specific actions mentioned in the warning are actions/checkout@v3 and yoshi389111/[email protected].

To Reproduce
Steps to reproduce the behavior:

1. Set up a GitHub Actions workflow using actions/checkout@v3 and yoshi389111/[email protected].
2. Run the workflow.
3. Observe the deprecation warning in the GitHub Actions log.

Expected behavior
The GitHub Actions workflow should run without deprecation warnings. Updating the underlying Node.js version used by the actions to Node.js 20 is expected to resolve the warning.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro
• Browser Google Chrome
• Version 123.0.6312.123

Upgrade to Node 16

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Process completed with exit code 128

Can you help me to fix this?

[Feature] Add border/stroke

Is it possible to add the border/stroke option (be able to set its colour - and define its corner radius as well)?

Like:

How to change rainbow to 'day mode'?

Hi,

First of all, thank you for your wonderful project!

I've set up rainbow theme with custom JSON. For night theme, it looks great. But the 'day' theme looks like this:

My code now looks like

{
  "type": "rainbow",
  "fileName": "3d-contrib-profile-day.svg",
  "backgroundColor": "#ffffff",
  "foregroundColor": "#00000f",
  "strongColor": "rgb(255,200,55)",
  "weakColor": "#aaaaaa",
  "radarColor": "#40bcd8",
  "growingAnimation": true,
  "saturation": "80%",
  "contribLightness": [
	  "50%",
	  "40%",
	  "35%",
	  "30%",
	  "20%"
  ],
  "duration": "5s",
  "hueRatio": 7
}

(tried to play with hueRatio, saturation and contribLightness, but without any effect.

Is it possible somehow to make the isometric timeline look 'more appropriate' for day mode (a bit lighter/brighter)?

[Feature][Question] add stats integration for private projects with wakatime

Hello yoshi389111,

wakatime can be integrated on several ide and provides github-like stats on technos used, a commits calendar and much more.

it might be cool to be able to integrate it into the graph to integrate stats on all projects that can't be made public (corporate projects among others).

Supports Halloween mode on github

Supports Halloween mode on github.

GraphQL

user {
  contributionsCollection {
    isHalloween
  }
}

---

githubのハロウィンモードに対応する。

3D contrib seems not to be working with snake contributions

Hello,
I tried to add your action.
However it doesn't seem to work when there is already snake contributions.

Steps to reproduce the behavior:
Use the Github Action snake contributions.
Create another .yml file containing :

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v2
      - uses: yoshi389111/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add -A .
          git commit -m "generated"
          git push

Everytime there is no workflow running.

[Feature][Question] Display another profile contribution as well

Is your feature request related to a problem? Please describe.
I mostly use my work GitHub account and all of my contributions and commits are there. Is it possible to also show the chart for the other account? or is it possible to merge the works from two accounts and display them in one chart?

nothing to commit, working tree clean

Describe the bug
if there are no commits it breaks

To Reproduce
Steps to reproduce the behavior:
it tries to build graph from GitHub actions and breaks please check the attached Screenshot

Expected behavior
graph should be created regardless there is a commit or not.

Screenshots

Desktop (please complete the following information):

• MacOS:
• Chrome

Change the winter color of the four seasons mode to whiter

Change the winter color of the four seasons mode to whiter

---

四季モードの冬の色をより白く変更する

Cannot read properties of null (reading 'repositories')

Describe the bug
I am not sure if it is indeed a bug, I believe it might be a mistake on my part, I hope you can help me 😅. See below:

TypeError: Cannot read properties of null (reading 'repositories')
    at Object.fetchData (/home/runner/work/_actions/yoshi389111/github-profile-3d-contrib/0.7.1/dist/index.js:1430:31)
Error: error
    at processTicksAndRejections (node:internal/process/task_queues:9[6](https://github.com/pranavelric/pranavelric/actions/runs/5378419004/jobs/9758190077#step:3:7):5)
    at async Object.main (/home/runner/work/_actions/yoshi389111/github-profile-3d-contrib/0.[7](https://github.com/pranavelric/pranavelric/actions/runs/5378419004/jobs/9758190077#step:3:8).1/dist/index.js:1507:26)

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Successful build

Screenshots

Desktop (please complete the following information):

• OS: [MacOs]
• Browser [Opera]
• Version [99.0.4788.65]

Additional context
profile-3d.yml :

name: GitHub-Profile-3D-Contrib

on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.METRICS_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name ${{ github.repository_owner }}
          git config user.email [email protected]
          git add -A .
          git commit -m "GitHub 3D Profile"
          git push

How do the contribution circle calculated?

Hi

I am not a front-end guy so I was really surprised when I see my circle here. Most of my repos are for Python and Jupyter-notebook. I really have no idea why the other part and html part took so much space.

Could you shed some light on how those contributions are calculated?

Thanks a lot!

[Bug] Variable name cannot start with "GITHUB_" prefix.

Describe the bug
Variable name cannot start with "GITHUB_" prefix.

To Reproduce
Steps to reproduce the behavior:

1. Go to Settings > Environments > Add.. Environment variables > Add variable "GITHUB_TOKEN"
2. See error: Variable name cannot start with "GITHUB_" prefix.

Expected behavior
Note: If you also want to include the private repository, register the "personal access token" in the repository and set it to GITHUB_TOKEN specified in the workflow file.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Pro (22H2 22621.2428)
• Browser: Google Chrome
• Version: 117.0.5938.150 (Build oficial) (64 bits)

Count private repo changes

Hi I am getting this error can u help me solve it.

Run git config user.name github-actions
[main 65d4775] generated
10 files changed, 10 insertions(+)
create mode 100644 profile-3d-contrib/profile-gitblock.svg
create mode 100644 profile-3d-contrib/profile-green-animate.svg
create mode 100644 profile-3d-contrib/profile-green.svg
create mode 100644 profile-3d-contrib/profile-night-green.svg
create mode 100644 profile-3d-contrib/profile-night-rainbow.svg
create mode 100644 profile-3d-contrib/profile-night-view.svg
create mode 100644 profile-3d-contrib/profile-season-animate.svg
create mode 100644 profile-3d-contrib/profile-season.svg
create mode 100644 profile-3d-contrib/profile-south-season-animate.svg
create mode 100644 profile-3d-contrib/profile-south-season.svg
remote: Permission to XGavinp/XGavinp.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/XGavinp/XGavinp/': The requested URL returned error: 403
Error: Process completed with exit code 128.

[Feature] Add ability to filter out languages

An environment variable that can take a comma-delimited list of languages to filter out would be useful. For example, I have tons of old code from 20 years ago in classic ASP or Visual Basic 6 that I don't want showing up as a significant portion of my percentage and giving people the impression that I still code in those languages.

How to added custom height and width to the card

Is your feature request related to a problem? Please describe.
I cant able to adjust the width of the card as i like.

Describe the solution you'd like
you can give any parameter for the height and the width of card

TypeError: Cannot read property 'repositories' of null

Describe the bug

TypeError: Cannot read property 'repositories' of null
    at Object.fetchData (/home/runner/work/_actions/yoshi389111/github-profile-3d-contrib/0.[7](https://github.com/xgqfrms/xgqfrms/actions/runs/3360733405/jobs/5570284550#step:3:8).0/dist/index.js:1430:31)
Error: error
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Object.main (/home/runner/work/_actions/yoshi3[8](https://github.com/xgqfrms/xgqfrms/actions/runs/3360733405/jobs/5570284550#step:3:9)[9](https://github.com/xgqfrms/xgqfrms/actions/runs/3360733405/jobs/5570284550#step:3:10)111/github-profile-3d-contrib/0.7.0/dist/index.js:1507:26)

https://github.com/xgqfrms/xgqfrms/actions/runs/3360733405

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

fix this error, and success build.

Screenshots

Desktop (please complete the following information):

• OS: [macOS]
• Browser [Chrome]
• Version [Version 108.0.5359.19 (Official Build) dev (x86_64)]

Additional context

workflow.yml

name: GitHub-Profile-3D-Contrib
on:
  schedule: [{cron: "59 23 * * *"}]
  workflow_dispatch:
  push: {branches: ["master"]}

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      # - uses: actions/checkout@v3
      - uses: actions/checkout@v2
      # - uses: yoshi389111/github-profile-3d-contrib@latest
      - uses: yoshi389111/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.METRICS_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
          MAX_REPOS: 250

      - name: Print env ❓
        run: env | sort
      - name: Commit & Push
        run: |
          git config user.name ${{ github.repository_owner }}
          git config user.email [email protected]
          git add -A .
          git commit -m "feat: update GitHub 3D Profile"
          git push

Feature Request: Separate contribution plot and language breakdown

Is your feature request related to a problem? Please describe.
I love your 3D contribution graph. My request is kinda simple. Is it possible to make 2 separate images for the radar chart and pie chart for ReadMe?

Describe the solution you'd like
I would like to be able to add radar chart and pie chart separately without a contribution graph.

Describe alternatives you've considered
A separate workflow that can add radar chart and pie chart separately

Additional context
Explanation in screenshots

Unsuccessful run

Hi!

First of all, I don't know if it is indeed a bug, I believe it is indeed a mistake on my part, but I don't know which one (lol). I'll put the error that occurred here, I hope you can help me 😅. See below:

remote: Permission to mthsBelloni/mthsBelloni.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/mthsBelloni/mthsBelloni/': The requested URL returned error: 403
Error: Process completed with exit code 128.

And here is the code of the "profile-3d.yml" file:

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 15:00 BRT == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/[email protected]
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email [email protected]
          git add -A .
          git commit -m "generated"
          git push

[Bug] Wrong language detection

Describe the bug
It doesn't detect the used languages. I have Java and Kotlin but, it only detected TypeScript and Python!

Profile green animate dark svg

I would prefer to have also another svg that has

• color green
• animation
• dark mode

Label the radar chart scale with "1-, 10, 100, 1K, 10K+".

problem

There is no label on the radar chart scale.

Countermeasures

Label the radar chart scale with "1-, 10, 100, 1K, 10K+".

---

問題

レーダーチャートの目盛りにラベルがない。

対策

レーダーチャートの目盛りに「1-, 10, 100, 1K, 10K+」のラベルを付ける。

Make the colors of the four seasons mode every week and make a gradation.

problem

The colors of the four seasons mode change depending on the month.

Countermeasures

Make the colors of the four seasons mode every week and make a gradation.

---

問題

四季モードの色を、月で切り替えている。

対策

四季モードの色を週単位にして、グラデーションにする。

[Feature] Add Environment Variable to exclude some repos' commits.

Is your feature request related to a problem? Please describe.
As you known, some people use sprayer github actions to auto commit code. for those commits are full of repeated commitment. just like me, i let github action make commit everyday with some shell scripts change. I just want to exclude those repos. so that the final result won't calculate those useless commits.

Describe the solution you'd like
add environment variables. let user to pass repo urls. and when doing calculate work, exclude those repos' commits.

Describe alternatives you've considered
no need other alternatives.

Additional context
check my profile 3d contribution picture. you can see the problem is there.

The repositories to be aggregated are only those owned by the user.

problem

The repositories for which stars and forks are aggregated include non-personal repositories.

Countermeasures

The repositories to be aggregated are only those owned by the user.

• ref. GraphQL Object - User

    user(login: $login) {
      // ...
-     repositories(first: 100) {
+     repositories(first: 100, ownerAffiliations: OWNER) { 
        nodes {
          forkCount
          stargazerCount
        }
      }
    }

---

問題

星やフォークの集計対象となるリポジトリに、個人のリポジトリ以外も含まれている。

対策

集計対象となるリポジトリは、ユーザーがオーナーの物だけを対象とする。