fix(a11y): describe informative post images and shrink decorative GIFs (ENG-159)

content/posts/16-livros-para-desenvolvedores-ler-em-2022.mdx

@@ -93,7 +93,7 @@ Entender sobre algoritmos é uma das tarefas fundamentais para qualquer Dev, est
 
 * * *
 
-[![](/media/posts/16-livros-para-desenvolvedores-ler-em-2022/extreme-programming.jpg)](https://amzn.to/35iXvEx)
+[![Extreme Programming](/media/posts/16-livros-para-desenvolvedores-ler-em-2022/extreme-programming.jpg)](https://amzn.to/35iXvEx)
 
 ## Extreme Programming
 

content/posts/como-criar-um-aplicativo-com-react-native-e-expo.mdx

@@ -149,7 +149,7 @@ Após executar o comando você precisa escolher o template que deseja aplicar no
 
 <figure>
 
-![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image.png)
+![Seleção de template do expo init, com blank (TypeScript) marcado](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image.png)
 
 <figcaption>
 
@@ -181,7 +181,7 @@ Para avançar em nossa demo, **escolha a opção blank (TypeScript)**.
 
 Após finalizar a execução do script você deve ver uma tela como esta:
 
-![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-1.png)
+![Terminal do expo init com o projeto pronto e os comandos yarn](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-1.png)
 
 Agora para abrir o projeto, vamos seguir as instruções, execute `cd app-exemplo` e depois o comando `yarn start`. Você deve ver um resumo da sua aplicação em execução, um qr-code e uma lista de comandos úteis.
 
@@ -224,7 +224,7 @@ Para abrir a pasta no VSCode via terminal, digite: `code .`
 
 A estrutura deste template do Expo deve se parecer com esta imagem:
 
-![](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-3-1024x777.png)
+![Explorer do VS Code com a estrutura do projeto app-exemplo](/media/posts/como-criar-um-aplicativo-com-react-native-e-expo/image-3-1024x777.png)
 
 O arquivo **App.tsx** é o ponto de inicio do seu aplicativo. Para teste, altere o texto que veio junto com este template e inicie novamente o expo no seu terminal.
 

content/posts/como-enviar-sms-em-nodejs-com-sns-aws.mdx

@@ -272,7 +272,7 @@ Agora vamos finalizar, adicione o script para start da sua app no package.json.
 
 Agora é só digitar **npm start** no seu terminal e ver sua app rodar.
 
-![](/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.gif)
+![](/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp)
 
 Este tutorial é um micro-serviço para rodar em qualquer ambiente nodejs. Você precisa apenas adicionar itens na fila de envio e deixar em execução. Embora este script apenas envie uma mensagem transacional, você pode customizar. Confira a documentação na AWS e adapte a sua necessidade.
 

content/posts/como-usar-pm2-com-node-js-em-producao.mdx

@@ -136,7 +136,7 @@ pm2 start app.js --watch
 
 Agora, a saída no terminal deve ser como está imagem, com o modo Watching **_enabled_**.
 
-![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-w-1024x98.png)
+![Tabela do PM2 com o processo app online e watching enabled](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-w-1024x98.png)
 
 Vamos adicionar uma nova rota no código para testar se está funcionando como esperado.
 
@@ -168,7 +168,7 @@ Você deve ver duas linhas com a mensagem: App listening on port 3000!
 
 Inclusive, quando algum erro acontecer na aplicação, você poderá inspecionar a mensagem que sair no terminal com este comando, a baixo um exemplo de mensagem, forcei um erro na rota /timestamp e instantes depois o PM2 reiniciou o processo.
 
-![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-1024x389.png)
+![Logs do PM2 com um RangeError e App listening on port 3000](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-1024x389.png)
 
 Caso você tenha muitas linhas sendo retornadas, você pode limitar a quantidade de linhas usando a propriedade --lines <quantidade>, ficando assim:
 
@@ -210,7 +210,7 @@ pm2 start app02.js --watch --name app-02
 
 A partir de agora você deverá ter dois processos em execução como nesta imagem:
 
-![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-2process-1024x113.png)
+![Tabela do PM2 com app-01 e app-02 online em modo fork](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-logs-2process-1024x113.png)
 
 Algo que também pode ser útil para limitar o consumo de memória de um processo é atribuir um limite de uso, com o PM2 é possível definir o máximo de memória que o processo pode usar do servidor, quando este limite é atingido, o processo é reiniciado.
 
@@ -258,7 +258,7 @@ Você pode especificar a quantidade de CPUs que o processo vai usar <numero> ou
 
 <figure>
 
-![](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-cluster-1024x154.png)
+![Tabela do PM2 com quatro instâncias de app-01 em modo cluster](/media/posts/como-usar-pm2-com-node-js-em-producao/pm2-output-start-cluster-1024x154.png)
 
 <figcaption>
 

content/posts/construindo-um-web-scraping-em-nodejs.mdx

@@ -350,7 +350,7 @@ Uma vez adicionada a base do nosso método com html carregado, veja que estou pa
 
 Uma dica para identificar o seletor correto é usar o modo Inspect do Google Chrome, com ele aberto você pode copiar o seletor ao inspecionar o html:
 
-![](/media/posts/construindo-um-web-scraping-em-nodejs/tutorial-web-scraper-inspecionar-elemento-300x174.png)
+![Inspecionar elemento no Chrome com Copy selector no card do produto](/media/posts/construindo-um-web-scraping-em-nodejs/tutorial-web-scraper-inspecionar-elemento-300x174.png)
 
 Descobrimos que o **li** contém algumas classes e está dentro do **ul** com identificador **searchResults**. Com isso podemos iterar na lista. Veja que o seletor ideal é:
 
@@ -440,7 +440,7 @@ Por fim, adicione o script start no seu package.json.
 
 Agora basta digitar **npm start** no seu terminal para a mágica acontecer.
 
-![](/media/posts/construindo-um-web-scraping-em-nodejs/magic.gif)
+![](/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp)
 
 Este meu exemplo é básico,  ainda é possível melhorar os tratamentos de erros, otimizar as funções e usar outras bibliotecas. Puppeteer ou PhantomJS são outras opções, caso você queira aprender mais.
 

content/posts/css-flexbox-guia-pratico.mdx

@@ -31,7 +31,7 @@ Vamos dar uma analisada nestas imagens:
 
 <figure>
 
-![](/media/posts/css-flexbox-guia-pratico/01-container.svg)
+![Diagrama do contêiner flexível em roxo com três caixas dentro](/media/posts/css-flexbox-guia-pratico/01-container.svg)
 
 <figcaption>
 
@@ -43,7 +43,7 @@ Container em Roxo
 
 <figure>
 
-![](/media/posts/css-flexbox-guia-pratico/02-items.svg)
+![Diagrama dos flex items, três caixas laranja marcadas como item](/media/posts/css-flexbox-guia-pratico/02-items.svg)
 
 <figcaption>
 

content/posts/postgresql-e-pgadmin-com-docker-compose.mdx

@@ -27,7 +27,7 @@ docker --version
 
 O resultado esperado é a versão do Docker instalado, semelhante a este print:
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-version-300x65.png)
+![Terminal com docker --version e a versão 24.0.2](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-version-300x65.png)
 
 A segunda etapa é criar uma rede para nossos Containers, geralmente gosto de adotar essa estratégia para manter os containers de um projeto, dentro de uma rede especifica para ele, rode o seguinte comando:
 
@@ -37,7 +37,7 @@ docker network create local-network
 
 Após executar o comando, você deve ver um ID alfanúmerico no terminal, semelhante a este:
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-network-created.png)
+![Terminal com o ID da rede local-network recém-criada](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-network-created.png)
 
 ## Configurando o PostgreSQL com Docker
 
@@ -80,7 +80,7 @@ Uma informação extra, caso você esteja usando um Macbook com M1 ou M2, recome
 
 Isto ajuda na compatibilidade da imagem Docker com o Apple Silicon, um problema que eu tive logo que comecei a trabalhar com os M2.
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-property-platform.png)
+![Compose com platform linux/x86_64 no serviço dcs-postgres](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-property-platform.png)
 
 Agora com o serviço definido, podemos executar nosso Compose, no terminal execute:
 
@@ -92,7 +92,7 @@ Após rodar o comando, o Docker vai fazer o download da imagem do PostgreSQL, in
 
 No final, você deve ver uma imagem semelhante a esta.
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-compose-postgres-started.png)
+![Log do PostgreSQL 15.3 pronto para conexões na porta 5432](/media/posts/postgresql-e-pgadmin-com-docker-compose/docker-compose-postgres-started.png)
 
 Agora o que resta é testar a conexão.
 
@@ -150,13 +150,13 @@ Agora para testar, pare o container atual (CTRL+C) no seu terminal e execute nov
 
 O resultado no seu terminal deve ser semelhante a este:
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-container-runing.png)
+![Containers dcs-postgres e dcs-pgadmin no ar, pgAdmin na porta 80](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-container-runing.png)
 
 Para testar se o serviço do pgAdmin está funcionando acesse http://localhost:8080 no seu navegador, haverá uma tela de autenticação, você deverá informar o usuário e senha que defimos no Composer e se preferir você poderá trocar o idioma da aplicação.
 
 A tela deve ser semelhante a esta:
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-ui-web-1024x421.png)
+![Tela de login do pgAdmin com o e-mail user@localhost.com](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-ui-web-1024x421.png)
 
 Autenticado, agora vamos adicionar nosso servidor e testar a conexão.
 
@@ -180,19 +180,19 @@ Existem também outras configurações úteis, mas para este cenário, vamos con
 
 Após salvar, se você seguiu todas as etapas até aqui, o resultado é um Dashboard com as informações do banco de dados que você está conectado.
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-database-connection-1024x390.png)
+![Dashboard do pgAdmin conectado ao Server Projeto A](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-database-connection-1024x390.png)
 
 Por fim, agora vamos criar nosso database, clique com botão direito em Bancos de dados
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database.png)
+![Menu Criar Banco de dados no Object Explorer do pgAdmin](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database.png)
 
 Informe um nome para seu banco de dados e clique em Salvar para continuar.
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-modal.png)
+![Diálogo de criação do banco meu-db no pgAdmin](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-modal.png)
 
 Finalizado, na aba Object Explorer, você deverá ver o seu novo banco de dados listado.  
 
-![](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-view.png)
+![Object Explorer com o banco meu-db criado](/media/posts/postgresql-e-pgadmin-com-docker-compose/pgadmin-new-database-view.png)
 
 Pronto! Chegamos ao fim e agora você tem um ambiente com PostgreSQL e o pgAdmin web.
 

content/posts/reactjs-para-iniciantes.mdx

@@ -392,7 +392,7 @@ export function Card(props) {
 
 Visualmente o resultado é o mesmo, mas ao inspecionar o HTML, vamos notar a diferença:
 
-![](/media/posts/reactjs-para-iniciantes/react-css-module-html-gerado.png)
+![HTML gerado com a classe do CSS Module no elemento do card](/media/posts/reactjs-para-iniciantes/react-css-module-html-gerado.png)
 
 Esta classe **\_card\_1wwp0\_1** voi gerada durante a compilação do JavaScript.
 

lib/content/migrated-posts.test.ts

@@ -60,6 +60,31 @@ function bodyMediaPaths(raw: string): string[] {
   )
 }
 
+const decorativeEmptyAlts = new Set([
+  '/media/posts/como-enviar-sms-em-nodejs-com-sns-aws/giphy.webp',
+  '/media/posts/construindo-um-web-scraping-em-nodejs/magic.webp',
+])
+
+function bodyOutsideFences(raw: string): string {
+  const lines = matter(raw).content.split('\n')
+  const kept: string[] = []
+  let inFence = false
+  for (const line of lines) {
+    if (line.startsWith('```')) {
+      inFence = !inFence
+      continue
+    }
+    if (!inFence) kept.push(line)
+  }
+  return kept.join('\n')
+}
+
+function emptyAltPaths(raw: string): string[] {
+  return [...bodyOutsideFences(raw).matchAll(/!\[]\(([^)\s]+)/g)].map((match) =>
+    normalizePublicPath(match[1] ?? ''),
+  )
+}
+
 function citedPaths(raw: string): Set<string> {
   const cited = new Set(bodyMediaPaths(raw))
   const cover = coverPath(raw)
@@ -136,3 +161,15 @@ test('posts do not reference wp-content', () => {
   )
   expect(hits).toEqual([])
 })
+
+test('empty image alts are limited to decorative reactions', () => {
+  const unexpected: string[] = []
+  for (const filename of postFiles()) {
+    for (const urlPath of emptyAltPaths(readPost(filename))) {
+      if (!decorativeEmptyAlts.has(urlPath)) {
+        unexpected.push(`${filename}: ${urlPath}`)
+      }
+    }
+  }
+  expect(unexpected).toEqual([])
+})