Customizando seu perfil do Github com a API "GitHub Readme Stats"
Tags: github, git, markdown, beginners
Published: 2022-08-09 03:26:02

Ter uma conta no Github é uma ótima forma de guardar os seus projetos na nuvem, compartilhar com quem você queira e ainda, para quem está em busca de um novo emprego, mostrar para o seu contratante uma espécie de histórico da sua evolução.

E hoje eu gostaria de compartilhar o **GitHub Readme Stats** uma API com diversas customizações disponíveis para deixar o seu README de perfil mais estiloso ;)
 
![Exemplo do GitHub Readme Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq8kymp78cy07nb660y0.gif)

Bom, e para começarmos você deve estar se perguntado... "o que diachos é esse negócio de README afinal ? " Calma que eu vo explicar xD.  

Basicamente o README é um arquivo com extensão .md, ou seja, ele é escrito em **Markdown**. No Github é utilizado para documentar o seu projeto, é possível por exemplo, escrever uma descrição ou instruções de como executar seu projeto com imagens e links. [Você pode ler mais sobre aqui.](https://www.alura.com.br/artigos/escrever-bom-readme)

![Exemplo de README](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ialoycv9vbl0kz8m28c.gif)



## Criando um README para a tela inicial do seu perfil

Primeiro precisamos criar um **repositório público** com exatamente o **mesmo nome de usuário** do seu perfil criado no GitHub.

Vá em **repositories** e clique em **New**.

![Novo repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltocb54zd05lwl3ykr60.png)


Na página de **"Create a new repository"** você precisará preencher os seguintes campos:

- Em **Repository name**, coloque seu **nome de usuário**. Neste exemplo utilizarei **salmomascarenhas**;

Após preencher você pode notar que irá mostrar uma mensagem especial:

> You found a secret! salmomascarenhas/salmomascarenhas is a ✨ special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.”

> Tradução: Você encontrou um segredo! salmomascarenhas/salmomascarenhas é um repositório ✨ especial ✨ que você pode usar para adicionar um README.md ao seu perfil do GitHub. Certifique-se de que seja público e inicialize-o com um README para começar.


- Depois marque **public** para tornar seu perfil público;

- Por último, marque **Add a README file** para adicionar o arquivo feito na linguagem de marcação Markdown e, para finalizar, clique em **Create repository**;

![Final da criação do repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebztzqnt5v9k2jm1f3qv.png)


Agora só sair editando o arquivo como quiser e ver como a API pode deixá-lo bonitão!

![Editar README](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5vpsd5mu89v09h6pxyu.png) 



## Entendendo o README de exemplo

Iremos utilizar o README do meu perfil como base. Assim nos ajuda a entender melhor o funcionamento da API. [Consulte o código do meu README aqui.](https://github.com/salmomascarenhas/salmomascarenhas/edit/master/README.md)

![código Markdown editável](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clr85ew85wwsub3sb4c4.png)


- Na **linha 1** temos um cabeçalho com o texto "👋 Hi there, my name is Salmo Mascarenhas 😊.". Uma cumprimentação com um texto de tamanho chamativo;

Da **linha 3 a 10** organizaremos a **estrutura** do Markdown, centralizando as imagens e tudo mais. Irei explicar um pouquinho o que é cada linha e como editar o código para que a API retorne uma imagem com as informações do seu perfil.

![Linha 3 a 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xju59ilwcau31f9wdrjh.png)


- Na linha 3 nós criamos uma **div** (uma caixa de agrupamento) que **centraliza tudo** que colocarmos dentro dela. No nosso caso, colocaremos duas imagens com os links para a API;

- Na linha 6 criamos uma **imagem** com a tag **img**. Definimos uma altura padrão (height="180em") e pedimos para que a tag busque a imagem a ser exibida na fonte **(src)** do **link da API**.

É nessa parte onde está o segredo 🤯.

Note que no link que colocamos no atributo **src** da tag **img** contém uns nomes como **"username=salmomascarenhas"**, **"show_icons=true"** e outros ?! Então, é aí que **"configuramos"** como e de qual **perfil do Github** a API irá buscar informações Retornando assim a imagem e mostrando no nosso README de perfil. 🎉🎉🎉

Basicamente o que precisa ser feito no link, é substituir o nome do meu usuário **salmomascarenhas** pelo nome do **seu usuário** e a mágica acontece! 🪄

![Edita username](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7939we1bkgk3hugz1k9j.png)


A API irá buscar informações nos repositórios e métricas do seu perfil, deixando tudo bem personalizado.

- A partir da **linha 8** é um outro caminho para a mesma API, porém, que retorna uma outra imagem com outras informações. E olha que legal! Você só precisa substituir o username (**salmomascarenhas**) pelo seu que a API se encarrega do resto.

Se você salvasse o seu README do jeito que está até agora, o resultado seria como algo assim:

![Resultado da API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnqo4fjjtmd21b2f98w1.gif)

Muito legal né ?!

## Explicação do resto do README

O resto do código se resume em criar um cabeçalho para destacar formas de me contactar. 

E para as imagens usei a técnica da **div** para agrupar as outras tags. Dentro da div coloquei uma tag **a** (que é de link) redirecionando para me enviar um email e para não ficar simplesmente um link feião, resolvi deixar a tag **a** envolvendo uma imagem da logomarca do gmail. 

A mesma ideia se repete para a imagem do Linkedin. 

![Markdown reachme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd77lczw5d3lqaza969o.png)


O resultado do Markdown das imagens é esse:

![Resultado reachme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skcf8eqgh3kkvu1ctq64.png)



## Outras costumizações

A API tem uma documentação com mais detalhes de costumização e exemplos. Bom, se aventura deixando o seu README com a sua cara e aproveita para conhecer também as outras modificações da API. [Link da documentação do GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_pt-BR.md)


Espero que tenham gostado tanto quanto eu dessa descoberta 😊

É isso galera, até uma próxima!

#keeplearning