GitHub Profile 3D Contrib

https://github.com/yoshi389111/github-profile-3d-contrib
Admin
GitHub Profile 3D Contrib is a GitHub Action that generates a 3D contribution calendar image for a...
Tokens:1,943
Snippets:23
Trust Score:9
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Configure Workflow Schedule

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Example of the cron syntax used to define the execution time of the workflow in UTC.

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

--------------------------------

### Set GitHub Token Environment Variable

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Configure the required authentication token before running the application.

```sh
export GITHUB_TOKEN=XXXXXXXXXXXXXXXXXXXXX
```

--------------------------------

### Execute Application Locally

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Commands to run the application using either ts-node or the built production files.

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

```sh
npm run build
node . USER_NAME
```

--------------------------------

### Configure 3D Contribution Chart Settings

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/EXAMPLES.md

Define the visual properties for day and night themes in a JSON configuration file.

```json
[
    {
        "type": "normal",
        "fileName": "day.svg",
        "backgroundColor": "#ffffff",
        "foregroundColor": "#00000f",
        "strongColor": "#111133",
        "weakColor": "gray",
        "radarColor": "#47a042",
        "growingAnimation": true,
        "contribColors": [
            "#efefef",
            "#d8e887",
            "#8cc569",
            "#47a042",
            "#1d6a23"
        ]
    },
    {
        "type": "rainbow",
        "fileName": "night.svg",
        "backgroundColor": "#00000f",
        "foregroundColor": "#eeeeff",
        "strongColor": "rgb(255,200,55)",
        "weakColor": "#aaaaaa",
        "radarColor": "rgb(255,200,55)",
        "growingAnimation": true,
        "saturation": "50%",
        "contribLightness": [
            "20%",
            "30%",
            "35%",
            "40%",
            "50%"
        ],
        "duration": "10s",
        "hueRatio": -7
    }
]
```

--------------------------------

### Automate Chart Generation with GitHub Actions

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/EXAMPLES.md

Workflow file to generate charts and push them to a specific branch for hosting.

```yaml
name: generate 3d chart for profile contributions

on:
  # run automatically every 24 hours
  schedule:
    - cron: "0 */24 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the main branch
  # don't forget to change if you're using 'master' branch
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v5
      - uses: yoshi389111/github-profile-3d-contrib@latest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
          SETTING_JSON: conf/github-profile-3d-contrib.json
          
      # push the content of <build_dir> to a branch
      # the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page
      - name: push SVGs to the output-3d branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output-3d-contrib
          build_dir: profile-3d-contrib
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

--------------------------------

### Create GitHub Actions Workflow File

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Defines the workflow configuration for the 3D contribution generator, including scheduling and environment variables.

```yaml
name: GitHub-Profile-3D-Contrib

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

permissions:
  contents: write

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

--------------------------------

### Embed Responsive Chart in README

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/EXAMPLES.md

Use the picture element to automatically switch between day and night SVG charts based on system theme.

```html
<p align="center" >
	<picture>
	  <source media="(prefers-color-scheme: dark)"  srcset="https://raw.githubusercontent.com/<github_user>/<repository>/output-3d-contrib/night.svg" />
	  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/<github_user>/<repository>/output-3d-contrib/day.svg" />
	  <img alt="github profile contributions chart"    src="https://raw.githubusercontent.com/<github_user>/<repository>/output-3d-contrib/day.svg" />
	</picture>
</p>
```

--------------------------------

### Update GITHUB_TOKEN to Personal Access Token

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Shows how to replace the default GITHUB_TOKEN with a custom personal access token for private repository access.

```diff
          env:
-           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+           GITHUB_TOKEN: ${{ secrets.MY_PERSONAL_ACCESS_TOKEN }}
            USERNAME: ${{ github.repository_owner }}
```

--------------------------------

### Embed 3D Contribution Image in Markdown

Source: https://github.com/yoshi389111/github-profile-3d-contrib/blob/main/README.md

Use this Markdown syntax to display the generated SVG image in your repository's README file.

```md
![](./profile-3d-contrib/profile-green-animate.svg)
```
Tokens:
Raw