94 lines
3.9 KiB
Markdown
94 lines
3.9 KiB
Markdown
# snk
|
|
|
|
[](https://github.com/Platane/Platane/actions/workflows/main.yml)
|
|
[](https://github.com/platane/snk/releases/latest)
|
|
[](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)
|
|
|
|
|
|
|
|
Generates a snake game from a github user contributions graph
|
|
|
|
<picture>
|
|
<source
|
|
media="(prefers-color-scheme: dark)"
|
|
srcset="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake-dark.svg"
|
|
/>
|
|
<source
|
|
media="(prefers-color-scheme: light)"
|
|
srcset="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg"
|
|
/>
|
|
<img
|
|
alt="github contribution grid snake animation"
|
|
src="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg"
|
|
/>
|
|
</picture>
|
|
|
|
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](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.gif) or [svg](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.svg) image.
|
|
|
|
Available as github action. It can automatically generate a new image each day. Which makes for great [github profile readme](https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme)
|
|
|
|
## Usage
|
|
|
|
**github action**
|
|
|
|
```yaml
|
|
- 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](https://github.com/Platane/Platane/blob/master/.github/workflows/main.yml#L26-L33)
|
|
|
|
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](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to) in your readme.
|
|
|
|
```html
|
|
<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**
|
|
|
|
<a href="https://platane.github.io/snk">
|
|
<img height="300px" src="https://user-images.githubusercontent.com/1659820/121798244-7c86d700-cc25-11eb-8c1c-b8e65556ac0d.gif" ></img>
|
|
</a>
|
|
|
|
[platane.github.io/snk](https://platane.github.io/snk)
|
|
|
|
**local**
|
|
|
|
```
|
|
npm install
|
|
|
|
npm run dev:demo
|
|
```
|
|
|
|
## Implementation
|
|
|
|
[solver algorithm](./packages/solver/README.md)
|