Como adicionar o Snake Game (jogo da cobrinha) no seu perfil do Github 🐍

Tags: github
Published: 2022-01-04 17:58:30

Primeiramente devo deixar claro que esse artigo foi desenvolvido com base em vários outros artigos e reconstruído para deixar o mais claro possível a forma para inserir o Snake Game em seu perfil.

## Funcionamento. "Contributions in the last year":
Basicamente o Snake game funciona realizando uma coleta da sua tabela de contribuições no Github. ele faz a renderização dessas informações  e gera dois arquivos, um em formato gif e outro em svg. São esses arquivos que iremos utilizar para inserir a animação no perfil do Github.

Repositorio do projeto a ser utilizado: [Platane/snk](https://github.com/Platane/snk)


![Exemple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6al4nwm47kqlu3huuc7k.png)
 


## Requisito. "Repositório base":
Para que você possa prosseguir é necessário que você tenha o repositório do perfil (repositório com o mesmo nome de usuário), porém para gerar os arquivos também funciona em outro repositório.

## Actions. "Configuração inicial":
Inicialmente é necessário que você acesse o  seu repositório escolhido e vá em Settings.

![Configuração inicial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elqil5wb71tiefeznf84.png)

No menu vertical ao lado esquerdo selecione o menu Actions e em seguida ative a permissão “Allow all actions”. Também é possível selecionar diretamente o repositório.

![Ative a permissão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkyp4u1lo08xw32024vq.png)

## Actions. "Criando Gerador":
Agora que temos o repositório configurado iremos adicionar o "script" para gerar dos arquivos. No repositório, vá em Actions.

![Criando o gerador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dvoptvrkom69nxd54v5.png)

Em seguida vamos utilizar “Simple workflow” apenas com o mínimo necessário para rodar o codigo.

![Configurando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1ladd2p5w9qn62qn61d.png)

Agora é apenas alterar o nome do arquivo e colar o código da configuração com o seu usuário.

![Alterar jnome do arquivo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tz6po9pbnt5787903z05.png)

![alterando o username](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/domqp8mxi0u8f0q9rd47.png)

```
# Nome da Actions:  
name: Snake Game

# Controlador do tempo que sera feito a atualização dos arquivos.
on:
  schedule:
      # Será atualizado a cada 5 horas.
    - cron: "0 */5 * * *"

# Permite executar na na lista de Actions (utilizado para testes de build).
  workflow_dispatch:

# Regras
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
  
    # Checks repo under $GITHUB_WORKSHOP, so your job can access it
      - uses: actions/checkout@v2
      
    # Repositorio que será utilizado para gerar os arquivos.
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: nomeUsuario #Seu usuario
          gif_out_path: dist/github-contribution-grid-snake.gif
          svg_out_path: dist/github-contribution-grid-snake.svg
          
      - run: git status
          
      # Para as atualizações.
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: master
          force: true
          
      - uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          # the output branch we mentioned above
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

Retornando na opção Actions do repositório, clique em “Run workflow”:

![Repositorio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mciu9mesasazkn8k4iek.png)

## Pasta dos arquivos:

Em seu repositorio cliente em main e selecione a branch output:
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yndnoszu8e2df4wqnrk0.png)

E aqui estão os arquivos gerados que você pode utilizar como bem entender:

![Arquivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7aohreasgrnul3jcai5.png)


## Codigo Github para utilização:

`
![snake gif](https://github.com/SEU_USUARIO/SEU_REPOSITORIO/blob/output/github-contribution-grid-snake.svg)
`