120 lines
3.9 KiB
Markdown
120 lines
3.9 KiB
Markdown
# Website APP - Associação Portuguesa de Powerlifting
|
|
|
|
## Visão Geral
|
|
|
|
Site oficial da Associação Portuguesa de Powerlifting, construído com tecnologias modernas e com foco em acessibilidade e desempenho.
|
|
|
|
**Stack Tecnológico:**
|
|
- Next.js 16 (App Router) com TypeScript
|
|
- Tailwind CSS 4 para estilos
|
|
- React 19.2
|
|
- Markdown com remark e rehype para processamento de conteúdo
|
|
- Integração com OpenPowerlifting para dados de provas
|
|
|
|
**Características Principais:**
|
|
- Acessibilidade rigorosa (WCAG 2.1 AA) com suporte completo a leitores de ecrã
|
|
- Suporte bilingue: Português (predefinido) e Inglês
|
|
- Conteúdo em Markdown com Tabela de Conteúdos fixa na navegação lateral
|
|
- Integração com OpenPowerlifting (scraping de provas + análise CSV de resultados)
|
|
- Proteção contra bots com Cloudflare Turnstile na página Contactos
|
|
|
|
## Começar
|
|
|
|
### Pré-requisitos
|
|
- Node.js 18+ instalado
|
|
- npm ou yarn
|
|
|
|
### Instalação
|
|
|
|
1. Instalar dependências:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Configurar variáveis de ambiente em `.env.local`:
|
|
|
|
```bash
|
|
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key_here
|
|
```
|
|
|
|
Contacte a equipa para obter a chave do Turnstile.
|
|
|
|
3. Executar o servidor de desenvolvimento:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Abra http://localhost:3000 — será redirecionado automaticamente para /pt.
|
|
|
|
## Scripts Disponíveis
|
|
|
|
```bash
|
|
npm run dev # Servidor de desenvolvimento com hot reload
|
|
npm run build # Construir para produção
|
|
npm start # Iniciar servidor de produção
|
|
npm run lint # Validar código com ESLint
|
|
```
|
|
|
|
## Estrutura do Projeto
|
|
|
|
```
|
|
app/
|
|
├── src/
|
|
│ ├── app/
|
|
│ │ ├── pt/ # Rotas em Português
|
|
│ │ ├── en/ # Rotas em Inglês
|
|
│ │ └── api/ # Endpoints da API
|
|
│ └── components/ # Componentes React reutilizáveis
|
|
├── content/
|
|
│ ├── pt/ # Conteúdo em Português (Markdown)
|
|
│ └── en/ # Conteúdo em Inglês (Markdown)
|
|
└── public/ # Assets estáticos
|
|
```
|
|
|
|
## Caminhos Principais
|
|
|
|
### Rotas
|
|
- **Português:** [src/app/pt](src/app/pt)
|
|
- **Inglês:** [src/app/en](src/app/en)
|
|
|
|
### API
|
|
- **API de Conteúdo (Markdown):** [src/app/api/content/route.ts](src/app/api/content/route.ts) — obtém e processa ficheiros Markdown
|
|
- **API de Provas:** [src/app/api/openpowerlifting/meets/route.ts](src/app/api/openpowerlifting/meets/route.ts) — lista próximas provas
|
|
- **API de Resultados:** [src/app/api/openpowerlifting/results/route.ts](src/app/api/openpowerlifting/results/route.ts) — resultados de provas passadas
|
|
|
|
### Conteúdo
|
|
- **Conteúdo em Markdown:** [content](content) — todas as páginas dinâmicas
|
|
|
|
## Notas de Acessibilidade
|
|
|
|
O projeto segue as normas WCAG 2.1 Nível AA:
|
|
|
|
- **Navegação:** Skip link no topo da página e indicadores de foco claros em todos os elementos interativos
|
|
- **Estrutura:** Títulos semânticos (`<h1>`, `<h2>`, etc.) e etiquetas ARIA apropriadas na navegação
|
|
- **Tabelas:** Incluem cabeçalhos estruturados, legendas e suporte a leitores de ecrã
|
|
- **Imagens:** Todos os `<img>` têm atributo `alt` descritivo
|
|
- **Cores:** Contraste suficiente entre texto e fundo (ratio mínimo 4.5:1)
|
|
|
|
## Dependências Principais
|
|
|
|
| Pacote | Versão | Uso |
|
|
|--------|--------|-----|
|
|
| `next` | 16.1.1 | Framework React com SSR e otimizações |
|
|
| `react` | 19.2.3 | Biblioteca UI |
|
|
| `react-markdown` | 10.1.0 | Renderizar Markdown em React |
|
|
| `cheerio` | 1.1.2 | Web scraping para OpenPowerlifting |
|
|
| `papaparse` | 5.5.3 | Parsing de CSV |
|
|
| `tailwindcss` | 4 | Framework CSS utilitário |
|
|
|
|
## Deployment
|
|
|
|
O site está pronto para ser deployado em plataformas como Vercel:
|
|
|
|
```bash
|
|
npm run build # Construir bundle de produção
|
|
npm start # Testar localmente antes de fazer deploy
|
|
```
|
|
|
|
Assegurar que as variáveis de ambiente estão configuradas no provider de hosting.
|