search

pythonfluente / pythonfluente2e

Python Fluente, Segunda Edição
https://pythonfluente.com
Other
353 stars 79 forks source link

Download sob demanda das imagens no HTML #1

Open ramalho opened 1 year ago

ramalho commented 1 year ago

Seria excelente se o HTML gerado pelo asciidoctor tivesse um JS para baixar uma imagem somente quando a pessoa está vendo aquela parte da página. Assim economiza banda.

arturo32 commented 1 year ago

Já existe uma issue no asciidoctor sobre possibilitar adicionar o atributo HTML loading="lazy" nas imagens. Pelo visto só vai ser adicionado nas versões 2.1.x...

Umas das pessoas presentes na discussão da issue (que inclusive fez até um PR para a nova função) mostrou um comando (GNU/MAC) para substituir com regex as expressões <img para <img loading="lazy" no arquivo HTML. Eu pensei, então, em incluir o seguinte comando no workflow do github:

- name: Add lazy loading to images
  run: sed -i -e 's/<img/& loading="lazy" /g' index.html

# Pode ser no mesmo estágio do Build também

Para funcionar, as imagens teria que deixar de serem embutidas no HTML como "data URI" e usarem o atributo src com um caminho mesmo. Isso é facilmente feito removendo a linha que contém :data-uri: no arquivo livro.adoc.

Eu testei aqui e deu tudo certo. Se você aprovar essa maneira, eu posso fazer um PR com essas modificações. O único perigo que vejo é se, por algum motivo, existir um código HTML sendo usado como exemplo no seu livro.

Posso explicar com detalhes o que cada parte do comando faz, se isso for uma questão.

arturo32 commented 1 year ago

Eu não sei direito ainda como você "builda" o projeto atualmente (já que aparentemente o workflow do github não está funcionando). Supondo que você usa o script build.sh eu proponho três soluções diferentes (incluindo a do comentário anterior) que eu acabei transformando em 3 PR diferentes para melhor visualização:

  1. Para alterar a solução do meu comentário anterior para funcionar no arquivo bash.rc basta adicionar o comando sed logo após a geração do arquivo HTML pelo asciidoctor. Esta solução seria a mais simples e a menos robusta. (PR #30)

  2. Um passo em direção a mais segurança e boas práticas seria criar usar uma extensão de pós-processamento do asciidoctor. Ela ainda utiliza regex, o que pode gerar comportamentos imprevisíveis. (PR #29)

  3. A solução mais robusta que proponho é a de criar um conversor customizado do asciidoctor. Ele tem acesso direto aos elementos parseados pelo asciidoctor e consegue adicionar facilmente novos atributos. O código foi copiado quase que inteiramente de uma das pessoas da comunidade do asciidoctor (que por sua vez possui alterações mínimas em relação ao código fonte original) (PR #28).

Todas soluções são discutidas mais profundamente em seus respectivos PRs.