Página de votação
A rota pública /vote/ é gerada por src/pages/vote/index.mdx, seguindo os padrões visuais do DESIGN.md. O Docusaurus fornece o layout externo; as seções ficam em componentes React reutilizáveis.
Estrutura
| Caminho | Responsabilidade |
|---|---|
src/pages/vote/index.mdx | Front matter, título e composição das seções |
src/pages/vote/vote.module.css | Largura editorial e espaçamento da página |
src/components/VoteList/ | Lista dinâmica dos sites, link de recompensas e ação de abrir todos |
src/components/BenefitsSection/ | Cards dos benefícios de votar |
src/components/HowToVoteSection/ | Passos de votação e dicas |
src/components/VoteRedirect/ | Redirecionamento de /vote?id=X com fallback manual |
static/api/armamc/others/vote-list.json | Fonte única dos sites de votação |
Cadastrar ou atualizar sites
Edite static/api/armamc/others/vote-list.json. Cada entrada deve possuir:
{
"id": 15,
"name": "Site 15",
"url": "https://exemplo.com/vote"
}
Os identificadores devem ser positivos e únicos. Use URLs HTTPS. O cartão aparecerá automaticamente na lista e estará disponível por /vote?id=15.
Redirecionamentos
/vote/: exibe a lista e todas as seções./vote?id=1: redireciona para a URL cadastrada com o ID 1.- IDs inexistentes ou inválidos: exibem a página completa, sem redirecionamento.
- Quando o navegador não conclui o redirecionamento, o visitante pode usar o link manual apresentado pelo componente.
A lista permite abrir cada site em uma nova aba. A ação Abrir todos os sites exige confirmação e solicita a abertura de todos os endereços cadastrados. O navegador pode bloquear algumas abas; por isso, a interface orienta a abrir sites individualmente quando necessário.
Design e acessibilidade
Os componentes usam CSS Modules com tokens de cores, superfícies, espaçamento e bordas do projeto. A página utiliza o container Standard (1200px), enquanto as grades de sites, benefícios e passos se adaptam a telas menores. Links externos utilizam rel="noopener noreferrer"; elementos interativos possuem estados de foco visíveis.
As seções permanecem editáveis separadamente. Os textos de benefícios e passos são mantidos em suas respectivas listas de dados para evitar duplicação na página MDX.
Validação
Após alterações na página ou em seus componentes, execute:
pnpm install
pnpm run typecheck
pnpm run test
pnpm run build
Teste manualmente /vote/, /vote?id=1 e /vote?id=999999, além de desktop e mobile, antes do merge.