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 ;)
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.
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.
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;
Agora só sair editando o arquivo como quiser e ver como a API pode deixá-lo bonitão!
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.
- 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.
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! 🪄
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:
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.
O resultado do Markdown das imagens é esse:
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
Espero que tenham gostado tanto quanto eu dessa descoberta 😊
É isso galera, até uma próxima!
Top comments (0)