Plataforma open-source para criação de sites estáticos focados em geo-narrativas e documentação de direitos humanos
Documental 2.0 é uma plataforma open-source para criação de sites estáticos com foco em geo-narrativas para denúncias de violações de direitos humanos. Desenvolvida com tecnologias modernas como Astro e Sveltia CMS, oferece uma solução completa para organizações, jornalistas e ativistas criarem narrativas visuais impactantes com mapas interativos, componentes modulares e sistema de gerenciamento de conteúdo intuitivo. É a base tecnológica do portal Documenta.xyz.
O projeto nasceu da necessidade de democratizar a criação de narrativas digitais que combinam dados geográficos com storytelling para documentar violações de direitos humanos. Muitas organizações e jornalistas independentes enfrentam barreiras técnicas para criar sites que apresentem suas investigações de forma visualmente impactante e geograficamente contextualizada.
A plataforma resolve esse problema oferecendo uma solução técnica robusta, mas acessível, que permite a criação de sites estáticos de alta performance sem necessidade de conhecimento técnico avançado. O sistema de componentes modulares facilita a construção de narrativas complexas, enquanto a integração com MapBox possibilita a criação de mapas interativos sofisticados.
O diferencial está na especialização para geo-narrativas de direitos humanos, oferecendo componentes específicos como linhas do tempo, gráficos de dados, galerias de evidências, comparadores de imagens e mapas com layers customizáveis. Tudo isso mantendo os princípios de código aberto, performance otimizada e facilidade de deploy em plataformas gratuitas como GitHub Pages e Cloudflare Pages.
- 🗺️ Mapas Interativos Avançados - Integração completa com MapBox, layers customizáveis e filtros dinâmicos
- 🎨 30+ Componentes Modulares - Timeline, gráficos, galerias, comparadores, cards e muito mais
- 📝 CMS Visual Integrado - Sveltia CMS para edição de conteúdo sem necessidade de código
- 🎭 Sistema de Temas Dinâmico - Customização completa de cores, fontes e espaçamentos
- 🌐 Multilíngue Nativo - Suporte a português, inglês e espanhol
- ⚡ Performance Otimizada - Sites estáticos ultra-rápidos com Astro
- 📱 Totalmente Responsivo - Adaptação perfeita para todos os dispositivos
- 🎬 Sistema de Animações - Animações suaves e interações avançadas
- 🔧 Altamente Customizável - Configuração flexível para diferentes tipos de narrativa
O Documental 2.0 segue a arquitetura JAMStack (JavaScript, APIs, Markup) para máxima performance e segurança:
- JavaScript: Astro como framework principal com componentes Svelte para interatividade
- APIs: Integração com MapBox API para mapas e Sveltia CMS para gerenciamento de conteúdo
- Markup: Geração de sites estáticos otimizados com carregamento ultra-rápido
src/
├── components/ # 30+ componentes reutilizáveis
├── layouts/ # Layouts para páginas e componentes
├── content/ # Conteúdo gerenciado pelo CMS
├── assets/ # Estilos SCSS e scripts
└── pages/ # Páginas dinâmicas
public/
├── admin/ # Configuração do Sveltia CMS
└── uploads/ # Arquivos de mídia
- Especialização em Direitos Humanos - Componentes e workflows otimizados para documentação de violações
- Geo-narrativas Avançadas - Sistema completo para storytelling baseado em localização
- Zero Configuração - Deploy imediato em plataformas gratuitas
- CMS Visual Poderoso - Edição intuitiva sem conhecimento técnico
- Performance Excepcional - Sites que carregam em menos de 2 segundos
- 📰 Jornalismo Investigativo - Reportagens com mapas e dados interativos
- 🏛️ ONGs e Organizações - Relatórios de impacto e campanhas de conscientização
- 🎓 Pesquisa Acadêmica - Apresentação de estudos com visualizações geográficas
- 🌍 Ativismo Digital - Campanhas de denúncia e mobilização social
- 📊 Transparência Pública - Dashboards de dados governamentais e sociais
- Use este repositório como template
- Configure o GitHub Pages nas configurações do repositório
- Seus sites serão publicados automaticamente em
https://seuusuario.github.io/seurepositorio
- Conecte seu repositório ao Cloudflare Pages
- Configure o build command:
npm run build - Diretório de output:
dist - Deploy automático a cada commit
npm run build
# Upload da pasta 'dist' para qualquer servidor web
Ambiente de desenvolvimento completo no navegador, sem necessidade de instalação local.
Editor online com preview em tempo real.
- Node.js 18+
- npm ou yarn
# Clone o repositório
git clone https://github.com/thiagopaixao/documentalxyz.git
cd documentalxyz
# Instale as dependências
npm install
# Rode os scripts de geração
npm run build
# Inicie o servidor de desenvolvimento
npm run dev| Comando | Ação |
|---|---|
npm install |
Instala as dependências |
npm run dev |
Inicia servidor local em localhost:4321 |
npm run build |
Gera build de produção em ./dist/ |
npm run preview |
Preview local do build de produção |
npm run serve |
Serve o build em localhost:3000 |
- Acesse
/adminou/admin/install.htmlno seu site local - Configure a autenticação GitHub nas configurações do Sveltia
- Edite o conteúdo através da interface visual
- Text - Textos formatados com Markdown
- ImageBlock - Imagens com legendas
- VideoEmbed - Vídeos do YouTube/Vimeo
- HtmlEmbed - Código HTML customizado
- Pullquote - Citações destacadas
- Columns - Layouts em colunas responsivas
- Group - Agrupamento de componentes com temas
- ColumnSticky - Conteúdo fixo durante scroll
- Spacer - Espaçamentos customizáveis
- ChartBar - Gráficos de barras
- ChartPercentage - Gráficos de pizza
- BigNumbers - Números destacados
- Timeline - Linhas do tempo interativas
- Gallery - Galerias de imagens
- Slider - Carrosséis de conteúdo
- Compare - Comparador de imagens
- Cards - Cards informativos
- CardsCall - Cards com call-to-action
- Map - Container principal de mapas
- MapBox - Configuração do MapBox
- MapView - Views específicas do mapa
- ✨ Configuração inicial do Astro
- ✨ Estrutura básica de componentes
- ✨ Workflow do GitHub Actions
- 🔧 Configurações de build e desenvolvimento
- 🐛 Correção na importação do App.js
- 🎨 Ajuste nas fontes padrão do conteúdo
- 🔧 Melhorias na configuração inicial
- ✨ Instalação e configuração do Sveltia CMS
- ✨ Implementação de widgets personalizados
- ✨ Layouts para componentes
- ✨ Sistema de gerenciamento de conteúdo
- 📝 Configuração de collections e campos
- 🐛 Correção de erro com imagens externas
- 🔧 Remoção de seções desnecessárias
- 🔧 Desabilitação do preview no Sveltia
- 🎨 Ajustes na interface do CMS
- 🔧 Ajuste nos parâmetros de seleção de imagens
- 🔧 Implementação de roteamento dinâmico
- 📝 Criação de conteúdo exemplo para home page
- ✨ Implementação da API MapBox
- ✨ Componentes Map, MapBox e MapView
- ✨ Sistema básico de layers e filtros
- ✨ Configuração do Sveltia para mapas
- 🗺️ Suporte a geo-narrativas interativas
- 🐛 Correção nos campos latitude e longitude
- 🐛 Ajuste na verificação de valores de array
- 🐛 Correção de erro undefined em valores nulos
- 🔧 Melhor tratamento de dados geográficos
- ✨ Novos filtros para Map Views
- ✨ Suporte a números float no MapBox
- 🔧 Reorganização dos campos do MapBox
- ⚡ Melhorias de performance nos mapas
- 🐛 Correções na performance do MapBox
- 🔧 Melhor organização dos campos por prioridade
- 📱 Ajustes para dispositivos móveis
- 🎨 Melhorias na interface de configuração
- ✨ Componente Timeline interativo
- ✨ Gráficos de barras e percentuais
- ✨ Sistema de galeria de imagens
- ✨ Componente de comparação de imagens
- ✨ Cards e elementos informativos
- 🐛 Correção na altura da linha vertical do timeline
- 🔧 Ajustes responsivos no timeline
- 🎨 Melhorias visuais nos bullets
- 🐛 Correção no cálculo de percentuais nos gráficos
- 🔧 Remoção de valores padrão desnecessários
- 🎨 Melhorias nas cores dos gráficos
- ✨ Implementação de animações de revelação
- ✨ ScrollObserver para interações
- ✨ Animações customizadas por componente
- ✨ Barra de progresso de scroll
- 🎬 Sistema completo de animações suaves
- 🐛 Correção nas animações de revelação da galeria
- 🔧 Ajustes no sistema de scroll
- ⚡ Otimizações de performance nas animações
- 🔧 Refatoração do ScrollObserver
- 🔧 Melhor detecção de elementos móveis
- 🔧 Padronização de labels e variáveis
- ✨ Sistema de customização de temas
- ✨ Suporte a múltiplos idiomas (PT, EN, ES)
- ✨ Customização de cores por página
- ✨ Fontes personalizáveis via Google Fonts
- 🎨 Sistema completo de identidade visual
- 🐛 Correção na implementação de fontes customizadas
- 🔧 Ajustes nas cores auxiliares
- 🎨 Melhorias na aplicação de temas
- 🔧 Correção na implementação de cores auxiliares
- 🔧 Ajustes nos blocos de cards
- 🎨 Melhorias gerais na interface
- ✨ Parâmetros específicos para mobile no MapBox
- ✨ Melhorias responsivas em todos os componentes
- 📱 Otimizações para dispositivos móveis
- ⚡ Melhorias gerais de performance
- 🐛 Correção nos parâmetros mobile do MapBox
- 📱 Ajustes nas legendas mobile
- 🔧 Melhor tratamento de floating text
- 🔧 Testes e ajustes em componentes
- 🔧 Melhorias na estrutura de arquivos
- 📱 Otimizações responsivas adicionais
- ✨ Sistema avançado de layers e filtros
- ✨ Melhor organização dos campos do MapBox
- ✨ Novos widgets para configuração
- 🗺️ Recursos avançados de geo-narrativa
- ⚡ Otimizações significativas de performance
- 🐛 Correção nos filtros de layers
- 🔧 Melhorias na aplicação de filtros
- 🔧 Ajustes nos campos do MapBox para melhor organização
- 🔧 Organização final dos campos do MapBox
- ⚡ Melhorias de performance significativas
- 🔧 Ajustes para melhor experiência no Sveltia
- ✨ Sistema de ativação/desativação de animações
- ✨ Melhorias finais na interface
- ✨ Implementação de ícones customizáveis
- 📝 Documentação completa
- 🔧 Otimizações finais para produção
- 🔧 Atualização de conteúdo
- 🐛 Correções em campos mobile e legendas
- 🔧 Remoção acidental do App.js corrigida
- 🔧 Correções finais de configuração
- 📝 Atualização final de conteúdo
- ✅ Preparação para release estável
- Limpeza completa do repositório
- Remoção de dependências não utilizadas
- Correção de vulnerabilidades de segurança de dependências
- Instalação do Sveltia como dependência
- Customização de ícones do CMS
- Sistema de blog integrado
- Worker para MapBox (proteção de token)
- MapBox opcional por página
- Configuração de não versionamento da pasta public/upload no repositório git
- Documentação completa em inglês, português e espanhol
- Melhorias na experiência de edição
- Templates pré-configurados
- Tutoriais interativos
- Migração para Astro 5
- Novos componentes de visualização
- Sistema de plugins/módulos
- API para integrações externas
- Implementação de multilingagem em português, inglẽs e espanhol
- Solução completa para edição no StackBlitz
- 🤖 Wizard para deploy automático no Cloud Flare ou GitHub Pages
- 🤖 Integração com IA para geração de conteúdo
- 📊 Dashboard de analytics integrado
- 🔐 Sistema de autenticação avançado
- 🌍 Suporte a mais idiomas
- 📱 App mobile companion
- Agência Autônoma - Idealização e gerenciamento do projeto
- Thiago Paixão - Desenvolvimento do backe-end e arquitetura do projeto
- Bruno Berken (Studio Atonal) - Desenvolvimento do front-end e sistema de animações
- MediaLab.UFRJ
Baseado no trabalho original do Documenta.xyz e nas necessidades reais de organizações de direitos humanos.
To publish a new version of @documental-xyz/core to npm:
- Ensure
NPM_TOKENis set in GitHub repository secrets - Update version in
package.json - Create and push a tag:
git tag v0.1.0 git push --tags
- The
publish.ymlworkflow will run tests, build, and publish automatically
Este projeto está licenciado sob a GPL 2.0 License - veja o arquivo LICENSE para detalhes.
✅ Permitido uso comercial
✅ Modificação e distribuição
✅ Uso privado
✅ Sem garantias