sampaiodev.
PTEN
Publicação técnicaOpen-source

interface-atlas

Uma publicação editorial open-source, content-first, construída em Astro/MDX com coleções tipadas e rotas multilíngues.

AstroMDXTypeScriptReact islandsSEO

Leitura técnica

Leitura rápida do case

Problema

Conteúdo técnico de interface costuma virar post solto. O Atlas organiza guias, blog, glossário e tópicos como referência durável.

Solução

Astro gera o baseline estático; MDX estrutura guias longos; React entra só em ilhas interativas, como busca. SEO é tratado com sitemap, RSS, canonical e hreflang.

Stack

Astro · MDX · TypeScript · React islands

Status

Open-source

Arquitetura

Conteúdo tipado vira referência navegável

O projeto trata conteúdo como sistema: coleções, relações, tópicos, busca e metadados por idioma.

Fluxo técnico

  • Entrada
  • Processamento
  • Persistência
  • Saída
Fluxograma
Renderizando fluxograma…

Fluxo em etapas

01Entrada
Conteudo MDXGuias, posts, glossario e topicos
02Validacao
Colecoes tipadasFrontmatter e relacoes validadas
03Build
AstroRotas estaticas por idioma
04Interatividade
React islandsBusca e interacoes pontuais
05Descoberta
SEO tecnicoBusca JSON, canonical, hreflang, sitemap e RSS
06Saida
Publicacao webSite publicado
Código do diagrama (Mermaid)
Cole em qualquer renderizador Mermaid
flowchart LR
  mdx["Conteudo MDX"]
  schema["Colecoes tipadas"]
  astro["Astro"]
  islands["React islands"]
  seo["SEO tecnico"]
  site["Publicacao web"]
  mdx --> schema
  schema --> astro
  astro --> islands
  islands --> seo
  seo --> site
1. Conteudo MDX (Entrada) → Colecoes tipadas. 2. Colecoes tipadas (Validacao) → Astro. 3. Astro (Build) → React islands. 4. React islands (Interatividade) → SEO tecnico. 5. SEO tecnico (Descoberta) → Publicacao web. 6. Publicacao web (Saida).

Stack e responsabilidades

  • Astro

    Roteamento, geração estática e arquitetura content-first.

  • MDX

    Conteúdo longo com componentes embutidos.

  • TypeScript + Zod

    Validação e tipagem de coleções de conteúdo.

  • React islands

    Interatividade onde faz sentido, sem JS global pesado.

Decisões técnicas

  • Content-first

    O repositório se apresenta como publicação técnica, não SaaS, dashboard ou template.

  • Zero-JS baseline

    Interatividade aparece como ilha, mantendo leitura estática leve.

  • i18n editorial

    README confirma rotas em en, zh, pt-br e fr.

Operação

  • documentadoSite público

    Homepage GitHub aponta para `interface-atlas.vercel.app`.

  • documentadoSEO técnico

    Busca JSON, canonical, hreflang, sitemap e RSS no README.

  • documentadoDeploy

    README documenta build/preview; hospedagem pública via Vercel.

Status e próximos passos

  • Expandir biblioteca de guias e glossário.
  • Aprofundar revisão editorial das traduções.

Contato

Quer algo parecido para seu processo?

Se existe uma entrada repetida, uma etapa manual e uma saída esperada, provavelmente dá para desenhar um sistema.

Falar sobre um projeto