LaPInf

O problema

O site antigo era uma única página HTML montada em 2019 sobre o template Bolt, com Bootstrap e jQuery, e mantida por sete anos com edições direto no código. Os projetos não tinham endereço próprio, os créditos ficavam em texto livre espalhados por cards, modais e até caixas de confirmação do navegador, e os registros do INPI eram uma montagem de imagens dos certificados, sem número que se pudesse copiar ou ligar ao projeto. Quem avalia o laboratório de fora, como gestores, parceiros e instituições, não conseguia entender rapidamente o que foi produzido, por quem e como conferir.

Minha contribuição

Extraí o conteúdo do site antigo para arquivos Markdown e YAML e reconstruí o site em Vue 3 com Vite SSG, que gera o HTML de cada rota e funciona sem JavaScript. Cada projeto ganhou página própria, com professores, alunos, parceiros, cursos e registros do INPI, e o acervo pode ser filtrado por curso, com o filtro guardado na URL. Projetos, avisos, parceiros e perguntas frequentes são editados pelo Pages CMS, sem mexer no código, e um plugin do Vite valida cada coleção com Zod durante o build, apontando o arquivo de origem quando um campo é inválido. Os avisos têm data de publicação, início e expiração no horário de Brasília. O HTML sai com os avisos vigentes no momento do build e o navegador reavalia a lista a cada 30 segundos, então um aviso entra e sai do ar sem novo deploy. Os testes unitários cobrem conteúdo, filtros, paginação, créditos e horários dos avisos, e os de ponta a ponta rodam no Chromium com verificação de acessibilidade pelo axe.

Destaques do projeto

• 34projetos no acervo
• 8registros do INPI verificáveis
• Sem JavaScriptHTML gerado para cada rota

Tecnologias

Vue 3, TypeScript, Vite SSG, Tailwind CSS v4, Zod, Pages CMS, Playwright