platane / snk

🟩⬜ Generates a snake game from a github user contributions graph and output a screen capture as animated svg or gif

snk

Generates a snake game from a github user contributions graph

Pull a github user's contribution graph. Make it a snake Game, generate a snake path where the cells get eaten in an orderly fashion.

Generate a gif or svg image.

Available as github action. It can automatically generate a new image each day. Which makes for great github profile readme

Usage

github action

- uses: Platane/snk@v3
  with:
    # github user name to read the contribution graph from (**required**)
    # using action context var `github.repository_owner` or specified user
    github_user_name: ${{ github.repository_owner }}

    # list of files to generate.
    # one file per line. Each output can be customized with options as query string.
    #
    #  supported options:
    #  - palette:     A preset of color, one of [github, github-dark, github-light]
    #  - color_snake: Color of the snake
    #  - color_dots:  Coma separated list of dots color.
    #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
    #                 Exactly 5 colors are expected.
    outputs: |
      dist/github-snake.svg
      dist/github-snake-dark.svg?palette=github-dark
      dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

example with cron job

If you are only interested in generating a svg, consider using this faster action: uses: Platane/snk/svg-only@v3

dark mode

For dark mode support on github, use this special syntax in your readme.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="github-snake.svg" />
  <img alt="github-snake" src="github-snake.svg" />
</picture>

interactive demo

platane.github.io/snk

local

npm install

npm run dev:demo

Implementation

solver algorithm

snk's Issues

Suggestion: Add user to push

Allow us to add an option like: USER which where we put a PAT token and instead of the default GitHub Actions bot pushing the svg, the other user will.

Like:
WilliamDavidHarrison pushed github-contribution-grid-snake.svg to output branch

Instead of:
github-actions[bot] pushed github-contribution-grid-snake.svg to output branch

Sorry if this isn't well explained.

UnAuthorized on fetching github user..

Hi, Is this problem came from me? or did u added some authorization module to this process ?

🎣 fetching github user contribution
Error: Action failed with "Unauthorized"

in the interactive website

add an dark mode selector thinking it would be much good

Export to more formats

Option to export for example to gif on web.

How to disable dark background.

Thanks for your work.
On Chrome Window 10, Dark Mode. Image is like

How to disable dark background of image. Thanks

Invalid type and bad indentation errors

I'm trying to do the svg-only version of this, so I put this in my file:

- uses: Platane/snk/svg-only@v2
  with:
    outputs:
      dist/github-snake.svg
      dist/github-snake-dark.svg?palette=github-dark

That gives me the error "Invalid type found: object was expected but an array was found"

So then I fixed that by remove the - before uses:, making it this:

uses: Platane/snk/svg-only@v2
  with:
    outputs:
      dist/github-snake.svg
      dist/github-snake-dark.svg?palette=github-dark

But then I get the error "bad indentation of a mapping entry"

Snake froze

My snake just stopped out of blue.

snake is always in `light` mode in README

Github in light mode

Github in dark mode

Error: Action failed with "Cannot read property 'trim' of undefined"

Hi @Platane , and thank you for developing and sharing this snake svg/gif repository 🚀

I got this error since morning when executing the daily github actions workflow of my profile:

/usr/bin/docker run --name platanesnklatest_4dfa34 --label 442333 --workdir /github/workspace --rm -e INPUT_GITHUB_USER_NAME -e INPUT_SVG_OUT_PATH -e INPUT_GIF_OUT_PATH -e HOME -e GITHUB_JOB -e GITHUB_REF -e GITHUB_SHA -e GITHUB_REPOSITORY -e GITHUB_REPOSITORY_OWNER -e GITHUB_RUN_ID -e GITHUB_RUN_NUMBER -e GITHUB_RETENTION_DAYS -e GITHUB_ACTOR -e GITHUB_WORKFLOW -e GITHUB_HEAD_REF -e GITHUB_BASE_REF -e GITHUB_EVENT_NAME -e GITHUB_SERVER_URL -e GITHUB_API_URL -e GITHUB_GRAPHQL_URL -e GITHUB_WORKSPACE -e GITHUB_ACTION -e GITHUB_EVENT_PATH -e GITHUB_ACTION_REPOSITORY -e GITHUB_ACTION_REF -e GITHUB_PATH -e GITHUB_ENV -e RUNNER_OS -e RUNNER_TOOL_CACHE -e RUNNER_TEMP -e RUNNER_WORKSPACE -e ACTIONS_RUNTIME_URL -e ACTIONS_RUNTIME_TOKEN -e ACTIONS_CACHE_URL -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/GuillaumeFalourd/GuillaumeFalourd":"/github/workspace" platane/snk:latest
🎣 fetching github user contribution
Error: Action failed with "Cannot read property 'trim' of undefined"

Any idea about how to resolve it ? I can't say if it's something related to personal configurations or not. For what I checked online based on the error message, it seems to be related to an unchecked error. But as I'm not familiar with TypeScript, I prefer opening this ISSUE to get some insights.

Error in GitHub Action

Error: Action failed with "Cannot read properties of undefined (reading 'split')"

Able to wipe git history for master/main branch

This needs to have a warning. The action should not destroy the commit history. Luckily GitHub support was able to recover my last commit.

Example:

name: Snake

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

# This command allows us to run the Action automatically from the Actions tab.
  workflow_dispatch:
  
  push:
    branches:
    - master

jobs:
  generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    
    steps:
      # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
      - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v2
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            snake/github-contribution-grid-snake.svg?color_snake=purple
            snake/github-contribution-grid-snake-dark.svg?palette=github-dark&color_snake=purple
      # 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 github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/[email protected]
        with:
          target_branch: master
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Feature Request: Count of Block Eaten By the Snake

Can you add the count of blocks eaten by a snake as a display on the top right of the GIF which will make the final GIF more informative in terms of the total number of contributions done in an aggregate by the user?
For Example:
Total Contributions: x

Is it possible to generate snake.svg on the master/main branch?

CORS error when trying to embed svg in Github Pages website

Is there a way to do that, or we can only have it in the github readme?

[Feature] Pertaining to the shape of a snake

I created the code for the triangle svg drawing. However, I have no idea how to proceed. Can you help me?

https://github.com/ramazansancar/snk_readme/blob/main/packages/types/point.ts#L10

export const aroundTriangle = [
  { x: 1, y: 0 },
  { x: -1, y: -1 },
  { x: -1, y: 1 },
] as const;

Can you make a dark theme version?

I love this project, but It would be great if It has a dark Theme. Because I fill a little alt of place in this image.

Action failed

Generate Action failed with "Cannot read properties of undefined (reading 'split')"
#74

Snake is allowed to leave GitHub?

It appears that the snake is allowed to leave the seven-day width at times:

Is this expected behavior? My expectation would be that the snake remains within the "arena" but I don't have particularly strong feelings about it :)

Fun tool! Thank you for sharing it!

API to change colors of the snake, points and the world

Description

It would be a really nice feature if it is possible to change the snake's and points' colors. Currently it's only green and hues. It is also great if there were pre-built themes!

How do I adapt for Halloween?

Hello,

Thanks for the amazing work and I've been using it for quite a long time. I wonder if can I somehow adapt the output for Halloween colors as shown below?

When running workflow, generates following error

Generates following annotation
Action failed with "Cannot find module 'canvas' Require stack: - /home/runner/work/_actions/Platane/snk/v2/svg-only/dist/index.js"

Snapshot attached for reference

[feature] changing colors on snek

so yes currently snek is purple on white squares. i want snek to be blue-yellow on dark-grey squares. when it'll be possible? (wanna do that cause i oftenly code in python and didnt wanted to make language cards ;p)

• i wanna save green contrib squares •w• this yes is cool

svg file ruined

Can anyone tell me why i am getting as output only small piece of the snake svg ?

https://github.com/AmirMGhanem/AmirMGhanem/blob/output/github-contribution-grid-snake.svg

• it worked before, today's workflow went like this.

@Platane

supports dark mode

example: https://github.com/jamiebuilds/dark-mode-github-readme-logos

I don't understand the GITHUB_TOKEN part

Hello. Thank you for your work. I am trying to get the GIF to generate on my page. I keep on getting errors. I did not create the GitHub token because I did not see any instructions for it. I just created a token with this name MY_GITHUB_TOKEN_GH_PAGES with a random value in my profile ReadMe Settings --> Secrets. Is this what I am supposed to do for this part: crazy-max/ghaction-github-pages?

why is the grid black

🧐🧐🧐🧐

Make snake grow with food

In the classic snake game from old b&w LCD screen phones, I remember that the snake used to grow in length as it ate food and so the game would become harder and harder as you tried to avoid biting your own tail...
It'd be nice if this could be included.

Haha，The program can eat my commit

LOL
It's really funny🤣

Github Action deprecating `set-output` command

I received a warning when my action to generate snake

The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/

Seem you need to upgrade actions/core version to 1.10.0 and change your set-output command usage

Suddenly commits doesn't appears and snake dont move

I have this snake since july and works prettie well but now does not show anything :(
If anyone knows what happens and can help I appreciate it!

Look like this ;-;

It won't show anything

I don't know what is wrong. Could someone help me?
https://github.com/luizamfsantos/luizamfsantos/blob/main/.github/workflows/main.yml

Is there a way to only count commits for a specific repository instead of a specific user?

Generate incomplete green dots

I'm using the svg-only version, but only part of the green dots can be generated, as shown in the following figure:

But my contribution is shown in the figure below, and the two are different:

my yaml: https://github.com/Yang-Shiqin/Yang-Shiqin/blob/main/.github/workflows/main.yml

The workflow didn't work as intended.

Hi, I've been using the workflow on my GitHub repository for months already, but earlier, I experienced an issue about the workflow's SVG output.

Here is my workflow's code: https://github.com/MarkCay/MarkCay/blob/main/.github/workflows/main.yml

Below is the SVG output:

Error: Action failed with "Cannot read properties of null (reading '1')"

The workflow I used in the beginning was like this:

name: github-contribution-grid-snake

on:
    schedule:
        - cron: "0 */12 * * *"
    push:
        branches: [ main ]
    workflow_dispatch:

jobs:
    generate:
        runs-on: ubuntu-latest
        timeout-minutes: 10
        
        steps:
            - name: generate animation.svg
              uses: Platane/snk@master
              with:
                  github_user_name: ${{ github.repository_owner }}
                  svg_out_path: dist/github-contribution-grid-snake.svg
            
            - name: push github-contribution-grid-snake.svg to the snake_branch branch
              uses: crazy-max/ghaction-github-pages@v3
              with:
                  target_branch: snake_branch
                  build_dir: dist
              env:
                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

It works fine, there is only one problem...

I didn't like the warning, so I tried to fix it. I noticed that the version I was using was Platane/snk@master, so I came here to try to find a more recent (Release) version, and I saw that the most recent Release was v2.1.0, so I changed the workflow to that:

name: github-contribution-grid-snake

on:
    schedule:
        - cron: "0 0 * * *"
    push:
        branches: [ main ]
    workflow_dispatch:

jobs:
    generate:
        runs-on: ubuntu-latest
        timeout-minutes: 10
        
        steps:
            - name: generate animation.svg
              uses: Platane/[email protected]
              with:
                  github_user_name: ${{ github.repository_owner }}
                  # list of files to generate.
                  # one file per line. Each output can be customized with options as query string.
                  #
                  #  supported options:
                  #  - palette:     A preset of color, one of [github, github-dark, github-light]
                  #  - color_snake: Color of the snake
                  #  - color_dots:  Coma separated list of dots color.
                  #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
                  #                 Exactly 5 colors are expected.
                  outputs: |
                    dist/github-contribution-grid-snake.svg
                    dist/github-contribution-grid-snake-dark.svg?palette=github-dark
                    dist/github-contribution-grid-snake-ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9
            
            - name: push github-contribution-grid-snake.svg to the snake_branch branch
              uses: crazy-max/ghaction-github-pages@v3
              with:
                  target_branch: snake_branch
                  build_dir: dist
              env:
                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Then it doesn't work and generates an error.

I noticed that a similar question was raised earlier in #35, but that's obviously a different question from mine.

Failure to run action.

I thought 4th time would be the charm 😭

As per the marketplace instructions, I clicked 'Use latest version'.
Next, I copied the text it told me to, and headed over to my profile repo.
I went to Github Actions and clicked "set up a workflow yourself".
I dumped the text into the "main.yml" file and committed the changes.
I head back to Actions and get this:

Please help! I do feel instructions could be more detailed/clearer, but maybe it's just me :P

Add supported query string options to README

Description

Supported query string options that can be used in the script are listed in action.yml, but this is not noticed most of the time.
Instead it should be listed in the README.md or a new doc dedicated to the usage and instructions.

snk/action.yml

Lines 21 to 25 in 8f14813

	supported query string options:
	- palette: a preset of color, one of [github, github-dark, github-light]
	- color_snake: color of the snake
	- color_dots: coma separated list of dots color. The first one is the empty cell color, the second one is the lightest shade, the third one is the second lightest shade ect ...

hey，It's funning.

dear author, It's really cool. 👍

SVG Animation Not Working

Something is wrong with my Workflow:

https://github.com/ZachJMurphy/ZachJMurphy/blob/main/.github/workflows/snake.yml

My snake animation on my README which can be found here: https://github.com/ZachJMurphy/ZachJMurphy has the snake shown as frozen and not moving.

assets for documentation

Dark mode

The dark mode only works while using Firefox. I'd appreciate if it worked on Chrome...

[Bug] Snake rendering Bug

I'm having a little trouble creating a snake. Can you help me?

Same situation in svg and gif.

https://github.com/ramazansancar/ramazansancar/blob/output/github-contribution-grid-snake.svg

Actions + Interactive Website Not Working

The screenshot is from the Actions tab of your profile repo. A similar error shows up on my workflows too. The interactive website just says: "error :("

Kindly let me know what the issue is and how I can fix it (I'm assuming one of the libraries or frameworks you use changed). Thank you.

Simply not working

snk doesn't seem to be working - Any GitHub profile that used to have a snake contribution grid now shows this:

Any GitHub Profile includes, unfortunately, yours. In fact, the screenshot is from your profile.

There are two explanations. Either snk stopped working, or this has something to do with my setup (browser, PC, etc). Since there are no recent commits, maybe an update to GitHub Actions broke the code. If you are able to see the animation though, the issue is at my end. I tried with a Mac, PC, and an Android phone, and none of them show the animation. Maybe it has something to with my ISP, but I doubt it. Kindly let me know if you have the same issue, or what you think could be the issue. Thanks!

Doesn't generate snake anymore

Hello,
for a reason I can not explain my yml file does not generate the snake game properly.
Here is my code :

# GitHub Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

# Controls when the action will run. This action runs every 6 hours.

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

# This command allows us to run the Action automatically from the Actions tab.
  workflow_dispatch:

# The sequence of runs in this workflow:
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:

    # Checks repo under $GITHUB_WORKSHOP, so your job can access it
      - uses: actions/checkout@v2

    # Generates the snake  
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: mishmanners
          # these next 2 lines generate the files on a branch called "output". This keeps the main branch from cluttering up.
          gif_out_path: dist/github-contribution-grid-snake.gif
          svg_out_path: dist/github-contribution-grid-snake.svg

     # show the status of the build. Makes it easier for debugging (if there's any issues).
      - run: git status

      # Push the changes
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: master
          force: true

      - uses: crazy-max/[email protected]
        with:
          # the output branch we mentioned above
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Here is an example of image generated : https://github.com/LucasColas/lucascolas/blob/output/github-contribution-grid-snake.svg

service died

Hi, I notice that my snake workflow not work well, is there any problem?
My action return green icon, see here -> https://github.com/zlaazlaa/zlaazlaa/actions/runs/5675308603
but the gif is broken, see here -> https://github.com/zlaazlaa/zlaazlaa/blob/main/assets/github-contribution-grid-snake.gif

Blue dots

This happens when I run the code, any ideas on how to fix this?

Select year

Can you update the action so it's possible to select the year or another date range?

Cannot link output to readme file

the output url seems to have the commit ID in it, and the url https://raw.githubusercontent.com/[user]/[user]/output/github-contribution-grid-snake-dark.svg doesn't seem to work

Github Action build fail

Workflows:

name: generate animation

on:
  # run automatically every 6 hours
  schedule:
    - cron: "0 */8 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - main
    
  

jobs:
  generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    
    steps:
      # generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>
      - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v2
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark

      # 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 github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/[email protected]
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Action log:

2022-07-02T11:52:54.5622356Z Job defined at: xunfeng1980/xunfeng1980/.github/workflows/snake.yml@refs/heads/main
2022-07-02T11:52:54.5622379Z Waiting for a runner to pick up this job...
2022-07-02T11:52:54.8570548Z Job is waiting for a hosted runner to come online.
2022-07-02T11:52:58.9342876Z Job is about to start running on the hosted runner: Hosted Agent (hosted)
2022-07-02T11:53:01.1930525Z Current runner version: '2.294.0'
2022-07-02T11:53:01.1955607Z ##[group]Operating System
2022-07-02T11:53:01.1956113Z Ubuntu
2022-07-02T11:53:01.1956682Z 20.04.4
2022-07-02T11:53:01.1956968Z LTS
2022-07-02T11:53:01.1957256Z ##[endgroup]
2022-07-02T11:53:01.1957586Z ##[group]Virtual Environment
2022-07-02T11:53:01.1958107Z Environment: ubuntu-20.04
2022-07-02T11:53:01.1958430Z Version: 20220626.1
2022-07-02T11:53:01.1958867Z Included Software: https://github.com/actions/virtual-environments/blob/ubuntu20/20220626.1/images/linux/Ubuntu2004-Readme.md
2022-07-02T11:53:01.1959489Z Image Release: https://github.com/actions/virtual-environments/releases/tag/ubuntu20%2F20220626.1
2022-07-02T11:53:01.1960281Z ##[endgroup]
2022-07-02T11:53:01.1960587Z ##[group]Virtual Environment Provisioner
2022-07-02T11:53:01.1960889Z 1.0.0.0-main-20220616-1
2022-07-02T11:53:01.1961163Z ##[endgroup]
2022-07-02T11:53:01.1961980Z ##[group]GITHUB_TOKEN Permissions
2022-07-02T11:53:01.1962572Z Actions: write
2022-07-02T11:53:01.1963031Z Checks: write
2022-07-02T11:53:01.1963400Z Contents: write
2022-07-02T11:53:01.1963820Z Deployments: write
2022-07-02T11:53:01.1964132Z Discussions: write
2022-07-02T11:53:01.1964419Z Issues: write
2022-07-02T11:53:01.1964654Z Metadata: read
2022-07-02T11:53:01.1964974Z Packages: write
2022-07-02T11:53:01.1965273Z Pages: write
2022-07-02T11:53:01.1965518Z PullRequests: write
2022-07-02T11:53:01.1965834Z RepositoryProjects: write
2022-07-02T11:53:01.1966163Z SecurityEvents: write
2022-07-02T11:53:01.1966494Z Statuses: write
2022-07-02T11:53:01.1966754Z ##[endgroup]
2022-07-02T11:53:01.1971405Z Secret source: Actions
2022-07-02T11:53:01.1972205Z Prepare workflow directory
2022-07-02T11:53:01.2872012Z Prepare all required actions
2022-07-02T11:53:01.3066675Z Getting action download info
2022-07-02T11:53:01.5824624Z Download action repository 'Platane/snk@v2' (SHA:d078b2d231ad307c3e5efe7a3e0d630141ce54a8)
2022-07-02T11:53:02.4029924Z Download action repository 'crazy-max/[email protected]' (SHA:a117e4aa1fb4854d021546d2abdfac95be568a3a)
2022-07-02T11:53:03.2905177Z ##[group]Run Platane/snk/svg-only@v2
2022-07-02T11:53:03.2905518Z with:
2022-07-02T11:53:03.2906039Z   github_user_name: xunfeng1980
2022-07-02T11:53:03.2906520Z   outputs: dist/github-contribution-grid-snake.svg
dist/github-contribution-grid-snake-dark.svg?palette=github-dark

2022-07-02T11:53:03.2906921Z ##[endgroup]
2022-07-02T11:53:03.5628815Z 🎣 fetching github user contribution
2022-07-02T11:53:03.8860629Z ##[error]Action failed with "Cannot read properties of undefined (reading 'split')"
2022-07-02T11:53:03.9257400Z Cleaning up orphan processes```