Irdin
Criação de uma tipografia digital completa (EOT, TTF, WOFF2) baseada na linguagem Irdin, convertendo designs do Figma em componentes web reutilizáveis.
O objetivo principal deste projeto é resolver um problema de acessibilidade tecnológica: a digitalização, a documentação padronizada e a distribuição de uma escrita considerada primordial (o idioma Irdin, descoberto pela Dakila Pesquisas) em formatos digitais e tipográficos modernos.
A plataforma não executa um backend complexo nem processa transações concorrentes; sua lógica de negócio central está na injeção estática de conteúdo multilíngue e na distribuição otimizada de arquivos de design (vetores tipográficos em OTF, TTF e WOFF2) por meio de uma arquitetura web rápida.
1. Funcionamento Geral e Fluxos de Trabalho
O projeto funciona como um nó central de distribuição e documentação. Sua utilidade principal está em oferecer a pesquisadores, acadêmicos e designers acesso sem atritos aos recursos tipográficos, evitando a dependência de manuscritos ou decalques não padronizados.
O fluxo operacional se divide em duas fases principais, desde a concepção dos ativos até o consumo pelo usuário final:
- Fase de Vetorização (Do Design ao Código):
- O ponto de partida dos dados são imagens isoladas que representam cada símbolo do idioma.
- Usando o Figma e um plugin especializado (Font Generator), preparei um fluxo no qual cada imagem é vetorizada e transformada em um nó de glifo.
- Esses vetores são processados pelo plugin —apoiado por código hospedado em GitHub Gists— para gerar os binários para download (OTF, TTF, WOFF2, além de arquivos CSS e HTML para testes).
- Fase de Distribuição (Uso):
- O usuário acessa a plataforma web por meio de um roteador estático (
ClientRouter). - Ao entrar, um componente de navegação interconectado (
Topbar.astro) permite alternar imediatamente entre as versões locais do idioma (pt-br, en, es, ja). - A arquitetura estática injeta os “metadados” técnicos (autor, versão, datas de publicação) no DOM e oferece ao usuário a opção de solicitar a fonte por meio de um link de contato.
- O usuário acessa a plataforma web por meio de um roteador estático (
2. Arquitetura de Software e Modelagem
Para o desenvolvimento do portal web, optei por uma arquitetura baseada em Static Site Generation (SSG) e em um modelo de componentes isolados (Island Architecture) usando Astro. A escolha desse padrão se justifica pela natureza do domínio: as informações (dados sobre a fonte, autoria e origens históricas) têm mutabilidade muito baixa. Um sistema SPA (Single Page Application) tradicional, como React ou Angular, teria introduzido uma sobrecarga desnecessária de JavaScript no cliente, penalizando o SEO e o desempenho (Time to Interactive).
Padrão Estrutural: SSG Baseado em Componentes
O código está estruturado com uma clara separação de responsabilidades:
src/layouts: Define o esqueleto mestre (Layout.astro), injetando folhas de estilo globais, scripts de analytics da Vercel e metadados de SEO dinâmicos (Astro.props).src/pages: Gerencia o roteamento. Utiliza-se uma abordagem de páginas físicas para a internacionalização (i18n), com diretórios específicos para cada idioma (en/,es/,ja/,pt-br/).src/components: Contém entidades reutilizáveis sem estado mutável (por exemplo, bandeiras em SVG, efeitos de ruído de fundo, componentes de navegação).
Modelo de Dados (Injeção de Estado)
O estado central do domínio reside de forma imutável no próprio componente de visualização de nível superior (por exemplo, index.astro).
classDiagram
class IndexPageData {
<<Struct>>
+Font font
+CallToAction cta
+Author author
+Links links
+Release release
}
class Font {
+String name
+String version
}
class CallToAction {
+String label
+String url
+String message (URI Encoded)
}
class Author {
+String fullName
+String email
+String websiteUrl
}
IndexPageData *-- Font
IndexPageData *-- CallToAction
IndexPageData *-- Author
Em vez de exigir chamadas a uma API externa ou a um banco de dados, os dados são compilados AOT (Ahead of Time). Isso elimina a latência de rede e garante a máxima disponibilidade do recurso de download.
Fluxograma: Da Ingestão Tipográfica à Web
O diagrama a seguir detalha a cadeia de produção do núcleo do projeto, desde os símbolos visuais até a interação do usuário final.
flowchart TD
subgraph Criação Tipográfica [Ambiente Figma]
A[Imagens Base Irdin] -->|Processo Manual| B(Vetorização Individual)
B --> C[Plugin Font Generator]
C -->|Scripts GitHub Gists| D{Compilação da Fonte}
end
subgraph Ativos Binários
D --> E[Irdin-1.0.otf]
D --> F[Irdin-1.0.ttf]
D --> G[Irdin-1.0.woff2]
end
subgraph Plataforma Astro SSG [Distribuição Web]
H[src/pages/index.astro] -->|Injeta Dados| I[Layout.astro Base]
H -->|Renderiza| J[UI de Documentação]
I --> K[ClientRouter]
end
E -.->|Referenciado em| J
F -.->|Referenciado em| J
G -.->|Referenciado em| J
User((Usuário)) -->|Acessa| K
User -->|Solicita Download| L[URL Parametrizada do WhatsApp]
3. Stack Tecnológico
A seleção do ambiente de desenvolvimento garante manutenibilidade, escalabilidade no nível da distribuição estática e controles de código rigorosos.
| Camada | Tecnologia | Justificativa / Papel Arquitetural |
|---|---|---|
| Framework Principal | Astro (v5) | Selecionado por sua arquitetura de ilhas e entrega “Zero JS”. Gerencia o roteamento estático (ClientRouter) e a compilação das visualizações internacionais. |
| Linguagem / Tipagem | TypeScript | Integrado nativamente ao Astro para oferecer segurança de tipos na definição de metadados (por exemplo, interface Props nos Layouts) e validação em tempo de compilação. |
| Estilos | Tailwind CSS (v4) | Fornecedor de utilitários de design em nível atômico, acoplando o design responsivo diretamente à marcação dos componentes e garantindo um CSS depurado e leve em produção. |
| Testes (Unitários) | Vitest | O Vitest é utilizado para testar a lógica isolada, prevenindo regressões antes de cada build. |
| Linting e Formatação | Biome | Regras estritas configuradas para impor convenções de código consistentes nos arquivos .astro, .ts e de estilos do projeto. |
| Analytics de Rede | Vercel Analytics | Monitoramento injetado no cliente para quantificar o tráfego e o fluxo de usuários por página, sem impactar significativamente o carregamento de recursos de terceiros. |
4. Conclusão Técnica
O site da tipografia Irdin está estruturado sob uma abordagem pragmática que prioriza a estabilidade e a velocidade de entrega do conteúdo. Ao utilizar uma arquitetura de Static Site Generation pura sobre o Astro e transferir a complexidade do processamento computacional para o ambiente de design inicial (Figma), a sobrecarga de um backend operacional foi completamente eliminada. O resultado é um produto digital de alta disponibilidade, protegido contra regressões por uma base sólida em TypeScript e testes automatizados, que cumpre plenamente o requisito estrutural de documentar globalmente um recurso antropológico-linguístico com um custo mínimo de infraestrutura de servidor.
Arraste para mover o diagrama. Use + e − para dar zoom, as setas para movê-lo e 0 para redefinir a visualização.
Vamos trabalhar juntos
Engenheiro de Software e desenvolvedor Senior Full-Stack, trabalho remotamente a partir de Santa Cruz, Bolívia. Aberto a novas oportunidades.