Um reels para um editor de README

Estava rolando o feed e parei num reels de alguém mostrando uma foto de perfil transformada em arte ASCII, animada, dentro do README do GitHub. Achei aquilo incrível e pensei: preciso ter isso no meu perfil.

Fui atrás de como fazer e achei o crafter.run, um site que resolvia exatamente aquilo que eu tinha visto no reels: gerava a foto em ASCII animada para o README. Ele fazia bem esse único ponto, mas só esse ponto. O resto, geradores de estatísticas, badges, terminal fake, cada coisa continuava espalhada em outro lugar, com sua própria sintaxe.

Foi aí que pensei: e se eu fizesse um editor completo, que tivesse esse efeito ASCII como só mais uma das funcionalidades, junto com tudo o mais que já existia espalhado por aí?

Só que, no meio do caminho, percebi um problema maior do que a foto animada: a maioria de nós faz o README do perfil uma vez, deixa bonito, e nunca mais acompanha as novidades. Vão surgindo widgets novos, ideias novas, essas "modinhas" de perfil que eu mesmo só descobri por acaso num reels, e a gente simplesmente não fica sabendo que elas existem, ou sabe mas não tem tempo de ir atrás de como implementar.

Foi aí que a plataforminha de ASCII virou o GitAscii: um editor visual para montar o README do seu perfil, arrastando e soltando widgets, com o objetivo de dar luz a soluções externas da comunidade e facilitar a configuração delas num só lugar.

🔗 Repositório: github.com/Igorcbraz/GitAscii
🌐 Demo: gitascii.com

O problema que eu queria resolver

Quero deixar bem claro: o problema nunca foi o Markdown. Eu gosto de Markdown, e não é sobre substituí lo. Implementar a maioria dos widgets e geradores de imagem que existem por aí, na real, é bem fácil. O problema é descobrir que eles existem. Cada widget vive espalhado num repositório diferente, com sua própria sintaxe, sua própria forma de configurar, e fica difícil acompanhar o que está rolando de novo na comunidade.

O GitAscii entra aí: um lugar só para descobrir esses widgets e configurá los visualmente, com o bônus de já sair tudo pronto para colar no seu perfil.

Como a plataforma funciona de verdade

Aqui vale corrigir uma coisa importante: o GitAscii não te dá um link mágico que você cola e esquece. O que a plataforma gera é um arquivo JSON com a configuração do seu layout, esse JSON fica salvo no seu próprio repositório, e no seu README.md você coloca só uma linha apontando para ele. O GitAscii funciona como um renderizador desse JSON, ele lê a configuração e devolve a imagem final.

Cheguei nesse formato depois de testar outra arquitetura. No começo eu salvava tudo no storage da Vercel: o usuário ia atualizando o JSON por lá e colava uma linha no README apontando para o meu storage. Só que, como o projeto é open source, pensei em duas coisas: eu não queria gerar custo de infraestrutura para mim conforme mais gente usasse, e queria dar total autonomia para o usuário sobre os próprios dados. Faz mais sentido o JSON viver no repositório de quem está usando, não no meu.

Então hoje a plataforma funciona como uma espécie de proxy de renderização: ela lê o JSON que está no seu repositório e desenha a imagem a partir dele. Isso pode ser feito de forma manual, você mesmo edita o JSON e faz o commit, ou de forma automática, direto pelo editor, que cuida de tudo isso pra você. Ainda estou validando se essa é a melhor arquitetura a longo prazo, mas é o que está no ar hoje.

O editor de arrastar e soltar, onde você monta o layout do seu README.

O resultado final

Isso é o que sai do outro lado: um SVG gerado dinamicamente a partir do seu JSON, que fica visível direto no seu README.md.

Uma plataforma pensada para durar, e para a comunidade

Um ponto que fez muita diferença nas minhas decisões técnicas foi entender que eu não queria construir algo centralizado, que dependesse só de mim para crescer ou continuar existindo.

Por isso, o GitAscii já nasce com dois tipos de widgets:

• Widgets nativos, feitos e mantidos por mim, parte do core da plataforma.
• Widgets externos da comunidade, plugáveis, criados por outras pessoas.
  A ideia por trás disso é simples: incentivar novos projetos da comunidade dentro da plataforma, deixando eles crescerem lado a lado com os widgets nativos, e que vença o melhor. Isso torna o GitAscii menos dependente de mim como mantenedor único e mais um espaço vivo, onde outros desenvolvedores podem divulgar seus próprios projetos através de widgets.

E teve um caso que me deixou especialmente feliz: um dos widgets externos hoje é o Gitfest, um projeto pessoal mais antigo meu. Consegui linkar os dois, o GitAscii e o Gitfest, meus dois projetos, um dentro do outro. Não vou entrar em detalhes sobre o que o Gitfest faz aqui, guardo isso para outro post, mas achei bonito demais essa oportunidade de conectar dois projetos meus de épocas diferentes dentro da própria proposta do GitAscii de dar espaço para os outros.

Hoje o projeto é todo front-end. Não subi nenhuma API própria de propósito, para não dificultar a vida de quem quiser contribuir. Para tudo que precisa de autenticação e armazenamento eu uso OAuth do GitHub, GitHub Apps e o próprio repositório do usuário como storage. Assim, quem for mexer no código não precisa lidar com backend, banco de dados ou infraestrutura nenhuma, só com o editor em si.

Onde estou agora

O projeto está longe de estar finalizado. É open source (MIT) e segue bem ativo: hoje já tem editor visual funcionando, estatísticas em tempo real, tema adaptativo e o gerador de arte ASCII.

Se você mantém um perfil no GitHub e quer testar, dá uma olhada: gitascii.com. Se gostar, uma star no repositório ajuda bastante. E se você tem algum projeto seu que adiciona algo ao README de perfil, tenho uma issue específica para propostas de widget externo, é só abrir uma sugestão lá que posso avaliar a integração. Contribuições também são muito bem-vindas.

---

P.S. O Gitfest, que mencionei ali em cima, também tem sua própria história por trás. Fica a dica para o próximo post.