Faz pouco mais de um ano que resolvi fazer uso do domínio “felipelima.net”, que eu já tinha registrado há algum tempo. Criei uma interface simples de lista de links e contei essa história no post “Fiz meu próprio ‘linktr.ee’“. Com o passar do tempo, fiz algumas melhorias no código para que a lista ficasse mais inteligente. Vou comentar neste artigo sobre essas mudanças e o aprendizado que tive com elas. Vou falar bastante sobre tecnologia, então isso deve ser interessante para os entusiastas e, principalmente, para os iniciantes em programação.
NextJS
Quando resolvi usar NextJS para a construção do site, foi pela simplicidade em lidar com rotas. Não escolhi pelas tecnologias oferecidas (risos), mas porque não é necessário configurar e escrever muitas linhas de código para criar páginas na aplicação. Basta criar arquivos/pastas com os nomes das rotas.
Depois de começar a usar o NextJS, entendi a diferença entre apps client side e server side. Passei a apreciar mais as vantagens e facilidades dos apps server side. Como comecei no mundo da tecnologia construindo sites e ajudando clientes a aparecerem no Google, queria continuar com isso, e o NextJS vendeu bem essa ideia. É uma das melhores tecnologias JavaScript para construção de sites estáticos, mas com o poder do client side, possibilitando também sites dinâmicos.
A primeira versão do felipelima.net feita em NextJS ainda usava a versão 12. Alguns meses depois, atualizei para a versão 13 e que dor de cabeça foi fazer isso. Eu já tinha um bom entendimento do React client side, e ver que algumas coisas não funcionaram de primeira quando atualizei me deixou um tanto frustrado. Mesmo lendo as breaking changes na documentação, não foi simples atualizar. Passei dias lendo a documentação para entender como resolver diversos erros que iam aparecendo.
Foi por causa do NextJS que aprendi o que um programador deve fazer: ler e entender a documentação da tecnologia. Quando comecei no NextJS 13, ainda não havia tradução em português da documentação oficial e, pior, não havia tutorial no YouTube para me ajudar com o que eu queria exatamente fazer no meu site. Todos os tutoriais ainda eram muito básicos quando se tratava de componentes para servidor.
A lista de links estava “hard code”, ou seja, tudo era modificado no código fonte do site, e eu estava tentando dinamizar isso, usando o banco de dados Google Firebase, o Firestore, para atualizar a lista de links sem precisar editar o código fonte do site. Me expressando melhor: já tinha alguma noção do que era client side e server side, mas ver isso funcionando de maneira integrada ainda não era muito claro na minha mente.
Depois de muito esforço, entendi que podia colocar a chamada do banco de dados diretamente no código fonte da página que eu estava criando, sem a necessidade de usar a função getServerSideProps ou criar uma rota de API para isso. Consegui, e finalmente podia editar os links pelo Firebase; tudo estava funcionando no ambiente de desenvolvimento. Fiz commit do código e subi as alterações para a Vercel. Depois do build, fui testar. Modifiquei o título de um link e, para minha surpresa, nenhuma modificação aconteceu no site.
Foram meses de frustração até entender que todas as páginas eram cacheadas no momento do build e que era necessário fazer a revalidação, exportando uma constante revalidate no arquivo da página.
Depois de todo esse tempo, projetos nasceram e morreram usando NextJS, e absorvi muito conhecimento nesses processos.
Segunda grande atualização
Em abril deste ano, lancei a segunda grande atualização que estava planejando havia alguns meses. Acontece que esse site é um projeto pessoal, e em alguns momentos eu não posso priorizá-lo, então cuido dele nas minhas horas livres.
Atualização da interface
Desde que consegui fazer os links dinâmicos funcionarem, comecei a pensar em uma interface com um design mais consistente. Pensei em cores, fontes e tudo o que uma interface tem direito.
Não é porque é um projeto pessoal e que tenho pouco tempo para trabalhar nele que vou ser desleixado, não é?
Em alguns projetos que trabalhei recentemente usei o shadcn/ui, um kit de interface pronto e poderia muito bem replicar e continuar usando no meu site, mas queria dar um toque mas pessoal nisso, afinal é o meu site.
A paleta de cores atual do site, eu gerei através do Huemint, pensei em um site com no máximo duas cores para não precisar gastar muita energia tentando harmonizar com outras cores. O Huemint me entregou duas cores e eu apenas trabalhei tons dessas cores, dei um nome pra elas, e pronto:
Contagem de cliques
Nessa atualização implementei uma contagem de cliques nos links da lista de uma forma muito simples.
Basicamente os links redirecionam para uma api route do NextJS antes de encaminhar o usuário para o link clicado, essa api recebe como parâmetro a identificação do link que está sendo acessado, busca o link na base do Firestore, incrementa + 1 no campo clicks e redireciona o usuário para o link equivalente.
Ainda não descobri se essa é melhor forma de fazer essa implementação, mas no momento é assim que está acontecendo.
Creio que o design ficou mais consistente depois da atualização, mesmo sendo mudanças sutis, acho que o visual ficou menos poluído, e o espaçamento entre os elementos deixou a aparência mais agradável.
E então chegou o blog
Pode não parecer, mas escrevo bastante para manter minhas ideias em ordem. Uso bastante o Notion e o Obsidian para isso. Escrevo realmente muita coisa. as vezes até sem propósito só para descontrair. Por isso, tenho bastante material, e alguns textos que acho interessantes acabo publicando por aqui. Inclusive, tenho uma lista de posts para publicar, mas ainda não revisei a escrita por falta de tempo.
Comecei nessa vida de blog usando o wordpress.com, pois acho a plataforma muito formidável e fácil de usar. Mais da metade da web usa o WordPress, e eu não me incomodava em usar a versão gratuita sem hospedagem gerenciada para escrever. No entanto, a plataforma começou a poluir meu blog com anúncios, e dos bem desagradáveis, tipo clickbait.
Quando mudei para o NextJS 13, já havia comunicado aqui que estava procurando outra plataforma. Por isso, deixei de postar por um tempo. Com o tempo limitado, não tive como postar e cheguei a pesquisar por outra plataforma. Inscrevi-me no Substack, mas por não ter conteúdo, não cheguei a publicar nada lá. Na verdade, eu queria integrar o blog no meu site; não fazia sentido deixar meu conteúdo separado dele.
Pensando justamente na integração, lembrei que o WordPress tem uma API pública, então eu poderia continuar usando o próprio WordPress para publicar e usar a API para apresentar o conteúdo diretamente no meu site. Assim, os anúncios não viriam junto.
Fiz algumas adaptações de layout e interface e, no início deste mês (02/06/2024), consegui integrar o blog do WordPress no meu site e logo comuniquei isso.
O processo de integração
Todo o código fonte do meu site está aberto no meu perfil do GitHub para quem quiser ver, mas acho que preciso comentar um pouco de como foi a experiência.
Lendo a documentação da API do WordPress vi que ela entrega em formato JSON, até aí tudo bem, mas a parte do conteúdo das postagens, além do meu texto tinha um emaranhado de caracteres que eu sabia que era HTML.
Quando criei a lista de links, já tinha feito uma primeira integração com essa API e até comentei sobre isso em um post anterior:
O texto do título das postagens aparecia limpo no site porque fiz uma expressão regular para limpar os caracteres estranhos. No entanto, eu não sabia como resolver o problema completamente. O que passava pela minha mente era: “Será que vou ter que criar uma expressão regular para limpar tudo isso e extrair só o texto?”. Foi então que me debrucei em pesquisas para descobrir como isso era tratado e acabei encontrando a biblioteca Cheerio para fazer o parse de HTML. Assim, implementei a função para passar o texto do “content” e do “title” pelo Cheerio.
No entanto, no site, o conteúdo do post era exibido apenas como um único bloco de texto, perdendo todos os links e estilos. Como eu resolveria isso?
Com mais pesquisas, descobri a propriedade dangerouslySetInnerHTML do React. Então, criei uma tag <article> e passei todo o “content” para essa propriedade, sem fazer o parse pelo Cheerio. Novamente, não sei se é a melhor e mais segura forma de fazer isso, mas foi como resolvi. Durante as pesquisas, descobri que se tudo ocorrer do lado do servidor, estará seguro.
Depois, criei uma folha de estilos específica para a página de postagens, visto que ela tem suas próprias classes definidas pelo tema que uso no WordPress. Tudo deu certo.
Implementei o sistema de comentários do Disqus e pronto, meu blog já estava completo no meu site.
Antes de voltar a escrever
Precisava resolver o SEO das postagens do blog, não estava feliz caso eu precisasse compartilhar o link do meu site com alguém, não ficava convidativo, mas isso foi simples de resolver usando a função generateMetadata do NextJS.
Antes, criei uma rota para gerar uma uma imagem automática para as postagens que não tem uma imagem destacada, e ficou bem legal: olha só um teste.
Mesmo com projetos simples, temos muito a aprender, e não precisa aplicar tanta tecnologia para o que é simples. Todo código tem seu dia 1, e ele pode ser evoluído constantemente de acordo com a necessidade.