feat: script para baixar o avatar de todos os colaboradores

[thenriquedb]

Na issue #23 foi sugerido a criação de uma tela de "Em construção" com os avatares dos colaboradores. Nó vídeo exclusivo para membros postados no dia 23/05 o Filipe disse que ainda não tinha nenhuma ideia de como fazer isso.

Com isso criei um script bem simples escrito em JS que utiliza o API pública do Github para acessar o repositório e realizar o download do avatar de cada um dos colaboradores.

Como executar?

1. Devido o repositório ser privado é necessário utilizar um access token para acessar as informações. Para gerá-lo bastar acessar https://github.com/settings/tokens e clicar no botão Generate New Token.
2. Crie um arquivo .env na raiz deste projeto com o seguinte formato AUTH_TOKEN=SEU_TOKEN_AQUI. Substitua SEU_TOKEN_AQUI pelo token que foi gerado anteriormente.
3. Instale as depedências com yarn ou npm install.
4. Execute o script dev

O codígo foi desenvolvido o padrão de projeto factory, onde cada funcão é divida em um modúlo separado. Caso não conheça esse padrão o Filipe já postou um vídeo no canal explicando passo a passo seu funcionamento.

PS: Esse é oficialmente minha primeira contribuição para um projeto público, me avisem caso eu fiz alguma coisa errada kk.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/filipedeschamps/tabnews/5kc5yfGeZHBmYhcpq2rCpGsAieHi
✅ Preview: https://tabnews-git-fork-thenriquedb-main-filipedeschamps.vercel.app

[francopan]

Oi @thenriquedb! Fiz algumas modificações no seu PR. Primeiramente, mudei seu script para que o token seja buscado de uma variavel de ambiente. Como esse repositório é compartilhado com outras pessoas, não queremos que elas tenham acesso ao nosso token, correto?

Além disso, a pasta contents não estava sendo criada. Com o ajuste que fiz, ela será criada automaticamente caso não exista.

[danwhat]

Meu deus! Como eu não vi isso antes? Só estava acompanhando as Issues e esqueci dos PRs
Muito bom! Não sei se foge muito do escopo mais acho que além das imagens, poderíamos guardar algumas outras informações como URL, User, etc em um JSON.
Vai que a gente queira fazer alguma funcionalidade a mais como um mouseover com mais informações.

[filipedeschamps]

Que contribuição sensacional!!! 😍 Vai ser fundamental para conseguirmos concluir a Milestone 0 🤝 Estou marcando Request changes por ter detalhes que realmente seriam interessante seguir 👍

[filipedeschamps]

Meu deus! Como eu não vi isso antes? Só estava acompanhando as Issues e esqueci dos PRs
Muito bom! Não sei se foge muito do escopo mais acho que além das imagens, poderíamos guardar algumas outras informações como URL, User, etc em um JSON.
Vai que a gente queira fazer alguma funcionalidade a mais como um mouseover com mais informações.

Essa sugestão do @danwhat faz bastante sentido, ainda mais após a sugestão da página se manter após a inauguração do site 👍

[felipe-ds-lima]

Utilizando mais o next.js, eu recomendaria criar a página de contrução com os contribuidores, utilizando o getStaticProps, e utilizar a foto diretamente do github, e daria para resgatar vários dos dados dos contribuidores passando pelas props da página, sem precisar guardar as imagens e nem dados dos contribuidores, utilizando diretamente a api do github.

Da pra continuar utilizando as funções criadas por você, mas sendo chamadas direto da página pelo getStaticProps, ou ainda qualquer outra página.

Como o getStaticProps só é executado do lado do servidor, não tem problema nenhum em realizar o fetch dos dados privados por lá.

[thenriquedb]

Fiz um novo commit com as mudanças sugeridas pelo @filipedeschamps. Agora o token do Github é setado em um arquivo .env que é carregado pela biblioteca dotenv. O valor definido pode ser acessado através de process.env.AUTH_TOKEN. Também atualizei o arquivo README para corresponder a nova estratégia.

[filipedeschamps]

Utilizando mais o next.js, eu recomendaria criar a página de contrução com os contribuidores, utilizando o getStaticProps, e utilizar a foto diretamente do github, e daria para resgatar vários dos dados dos contribuidores passando pelas props da página, sem precisar guardar as imagens e nem dados dos contribuidores, utilizando diretamente a api do github.

@felipe-ds-lima eu tinha pensado exatamente a mesma coisa 😍 mas a ideia dessa página é o resultado dela ficar congelado no tempo, então dado a isso acredito que nada no final possa ser dinâmico (nem gerado em builds futuros, nem imagens mudando ou ficando indisponíveis por algum motivo). É realmente para ser uma página histórica. Faz sentido?

[filipedeschamps]

@thenriquedb para testar o script aqui localmente, tive que dar a permissão de repo ao meu token (diferente do que está instruído no README de apenas criar o token). E ao rodar, ele baixa somente o avatar desses usuários:

Será que está faltando alguma permissão no meu token? 🤝

[felipe-ds-lima]

@felipe-ds-lima eu tinha pensado exatamente a mesma coisa 😍 mas a ideia dessa página é o resultado dela ficar congelado no tempo, então dado a isso acredito que nada no final possa ser dinâmico (nem gerado em builds futuros, nem imagens mudando ou ficando indisponíveis por algum motivo). É realmente para ser uma página histórica. Faz sentido?

Faz todo sentido, e bacana a ideia

[thenriquedb]

@filipedeschamps tava dando uma olhada com mais calma na documentação da API do Github e descobri que por padrão é retornado apenas 30 items por consulta e por isso não está fazendo o download do avatar de todos.

A quantidade de items por consulta pode ser definida com valor máximo igual a 100, ainda assim não será possível obter todos os colaboradores em uma única requisição, desse modo será necessário realizar a implementação da paginação.

Documentação relacionada a listagem de contribuidores de um repositório.
https://docs.github.com/en/rest/reference/repos#list-repository-contributors

[filipedeschamps]

@thenriquedb quando puder, veja esse PR: #38