Thumbnails dinâmicas dos conteúdos

[filipedeschamps]

Esta implementação foi iniciada por @ErickCReis através do PR #463 e estou trazendo do fork para cá para continuar com os últimos ajustes, estamos quase lá 😍

[vercel]

@ErickCReis is attempting to deploy a commit to the TabNews Team on Vercel.

To accomplish this, @ErickCReis needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
tabnews	✅ Ready (Inspect)	Visit Preview	Jul 21, 2022 at 11:18PM (UTC)

[filipedeschamps]

@ErickCReis antes de tudo, eu analisei o que foi feito e que implementação sensacional!!! Parabéns e muito obrigado por ter aberto o PR original!

Ao cavucar nela, eu percebi que é de fato uma implementação que gera o PNG de forma muito rápida e leve, e nessa parte vai escalar muito bem. O que acredito que não irá escalar tão fácil é na manutenibilidade, principalmente na mudança de layout, então é provável que o futuro dessa feature seja usar aquela estratégia de renderizar o png com um browser headless. Mas eu fiquei tão empolgado com essa solução que vamos para produção com ela, vai ser massa 🤝

Então nos últimos commits eu fiz o seguinte:

1. Pinei a versão do resvg. Já tomei várias rasteiras no passado por não pinar e autores de módulos não respeitarem o semver.
2. Escrevi uma série de testes e achei muito massa que na sua implementação já considerou todas as variantes (até quando o conteúdo child de outro conteúdo child não possui parent_title e o parent_username é usado no lugar... muito muito bom! E estes foram os testes que fiz, todos eles checam o retorno da API contra um binário de png real:

3. Gerei novamente o measureText() com a fonte roboto, pois as dimensões estavam ficando erradas para o username, principalmente quando ele continha tinha caracteres em maiúsculo.
4. Ao invés de usar updated_at na data, estou usando published_at.
5. Então com isso, nos testes eu faço o mock da data para conseguir sempre gerar o mesmo binário, pois do contrário, a cada rodar do teste geraria uma data nova e um binário novo, e daí não daria para comparar.
6. Mexi em algumas coisas no template, como aumento da fonte, aumento na quantidade de caracteres para os títulos, e como reflexo removi algumas coisas para abrir mais espaço, como aquela barra lateral na esquerda.
7. E pela dificuldade de editar a posição dos SVG (dos ícones), tive que fazer outro sacrifício, como remover o balão de chat quando é um child content. Mas isso pode ser retomado, só atualizar o template e o binário dos testes.
8. Mexer no template foi o principal motivo que eu acredito que no futuro vamos usar uma solução headless, uma vez que o layout vai poder responder melhor a pequenas ou até grandes mudanças, fora simplificar uma parte da implementação (o parser), pois dá para usar propriedades de CSS para fazer o wrap do texto e até adicionar ...

Próximo passo

Agora que está coberto de testes, quero refatorar a implementação e aumentar o nível de abstração para o controller da rota ter menos informações sobre o que está acontecendo para gerar o PNG. Isso provavelmente vai envolver mover tudo que está dentro do _lib para o seu próprio model e deixar todas as regras (principalmente do parser) lá dentro 🤝

Outro detalhe é sobre a fonte, tentar entender poque em ambinete de Homologação não está funcionando:

https://tabnews-git-dynamic-thumbnails-tabnews.vercel.app/api/v1/contents/filipedeschamps/testando-deploy-com-nova-regra-de-slug-sobre-under-score-e-tambem-a-e-b-a-e-b/thumbnail

[filipedeschamps]

Hmm, to desconfiado que o CI também não está conseguindo carregar a fonte.

[filipedeschamps]

Sobre as fontes, esbarramos num problema: thx/resvg-js#101

The reason is that on Vercel I can't seem to use fonts because file system access is protected/complicated. I've also tried embedding the font in the svg with font-face/data-uri but this doesn't seem to be supported either.

[filipedeschamps]

Consegui fazer funcionar na Vercel, e agora a thumbnail carrega com todas as informações. Eu expliquei como foi feito nessa resposta.

Só tem um problema

Ainda não está funcionando dentro do ambiente das Github Actions e eu não faço a mínima ideia de como debuggar esse problema.

[filipedeschamps]

Oxi... configurei uma action para fazer o upload do artefato da thumbnail gerada, e gerou perfeito:

[filipedeschamps]

Encontrei o problema, era algo relacionado ao Timezone da data que vai ali em baixo 🤝

[filipedeschamps]

Pronto, com o commit fae743f movi toda a lógica para dentro de um novo model chamado thumbnail, isso limpou o controller de qualquer lógica interna para gerar uma thumbnail, e qualquer lugar do código consegue chamar essa abstração.

Vamos para produção? 😍

[ErickCReis]

@filipedeschamps sensacional, quanta informação nesse pr, acho que era impossível imaginar todos esse detalhes que foram surgindo. Acho que aprendi mais vendo esse resultado final do que fazendo a implementação inicial kkk.

---

8. Mexer no template foi o principal motivo que eu acredito que no futuro vamos usar uma solução headless, uma vez que o layout vai poder responder melhor a pequenas ou até grandes mudanças, fora simplificar uma parte da implementação (o parser), pois dá para usar propriedades de CSS para fazer o wrap do texto e até adicionar ...

Realmente essa é a pior parte, existem algumas opções aqui que ainda podemos tentar, mas acho que vai ser necessário uma boa análise sobre desempenho antes dessa mudança.

Pronto, com o commit fae743f movi toda a lógica para dentro de um novo model chamado thumbnail, isso limpou o controller de qualquer lógica interna para gerar uma thumbnail, e qualquer lugar do código consegue chamar essa abstração.

No início para mim era só a geração de algumas imagens, nem tinha pensado em testes, mas agora deu pra ver quanta lógica tem aí dentro.

[filipedeschamps]

Acho que aprendi mais vendo esse resultado final do que fazendo a implementação inicial kkk.

Que massa meu caro!! E eu aprendi bastante com a implementação inicial 🤝 🤝 🤝

Bom, vou fazer merge 👍

[filipedeschamps]

Merged! Let's goooooo!!!

[filipedeschamps]

Thumbnails em produção pra valer 👍

Root:
https://www.tabnews.com.br/api/v1/contents/filipedeschamps/50-hacks-de-produtividade-escolhidos-pela-internet/thumbnail

Child:
https://www.tabnews.com.br/api/v1/contents/filipedeschamps/8be8b883-ac58-4b9c-9940-e62447784b9e/thumbnail

Child do Child acima:
https://www.tabnews.com.br/api/v1/contents/agjunior/3f5c8a58-bc6f-40bb-9441-3f37928fc7da/thumbnail