sampaiodev.
PTEN
Technical publicationOpen-source

interface-atlas

An open-source, content-first editorial publication built in Astro/MDX with typed collections and multilingual routes.

AstroMDXTypeScriptReact islandsSEO

Technical reading

Quick case read

Problem

Technical interface content often becomes loose posts. Atlas organizes guides, blog, glossary and topics as a durable reference.

Solution

Astro generates the static baseline; MDX structures long guides; React appears only in interactive islands, like search. SEO is handled through sitemap, RSS, canonical and hreflang.

Stack

Astro · MDX · TypeScript · React islands

Status

Open-source

Architecture

Typed content becomes a navigable reference

The project treats content as a system: collections, relationships, topics, search and metadata by locale.

Technical flow

  • Input
  • Processing
  • Storage
  • Output
Flowchart
Rendering flowchart…

Step-by-step flow

01Input
MDX contentGuides, posts, glossary and topics
02Validation
Typed collectionsValidated frontmatter and relationships
03Build
AstroStatic routes per locale
04Interactivity
React islandsSearch and targeted interactions
05Discovery
Technical SEOJSON search, canonical, hreflang, sitemap and RSS
06Output
Web publicationPublished site
Diagram source (Mermaid)
Paste into any Mermaid renderer
flowchart LR
  mdx["MDX content"]
  schema["Typed collections"]
  astro["Astro"]
  islands["React islands"]
  seo["Technical SEO"]
  site["Web publication"]
  mdx --> schema
  schema --> astro
  astro --> islands
  islands --> seo
  seo --> site
1. MDX content (Input) → Typed collections. 2. Typed collections (Validation) → Astro. 3. Astro (Build) → React islands. 4. React islands (Interactivity) → Technical SEO. 5. Technical SEO (Discovery) → Web publication. 6. Web publication (Output).

Stack and responsibilities

  • Astro

    Routing, static generation and content-first architecture.

  • MDX

    Long-form content with embedded components.

  • TypeScript + Zod

    Validation and typing for content collections.

  • React islands

    Interactivity where it makes sense, without heavy global JS.

Technical decisions

  • Content-first

    The repository presents itself as a technical publication, not a SaaS, dashboard or template.

  • Zero-JS baseline

    Interactivity appears as islands, keeping static reading lightweight.

  • Editorial i18n

    README confirms routes in en, zh, pt-br and fr.

Operations

  • documentedPublic site

    GitHub homepage points to `interface-atlas.vercel.app`.

  • documentedTechnical SEO

    JSON search, canonical, hreflang, sitemap and RSS in README.

  • documentedDeploy

    README documents build/preview; public hosting via Vercel.

Status and next steps

  • Expand the guide library and glossary.
  • Deepen editorial review of translations.

Contact

Want something similar for your process?

If there is repeated input, a manual step and an expected output, there is probably a system to design.

Talk about a project