Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

feat: add a world map of nodes by region

Abierto
  • ¿Algo no está bien?
#42 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@yigitdot ya está trabajando en esto.

Desde el 30/9/2026.

  • #45 de @yigitdot — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
22/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
data-visualization, frontend

Línea de trabajo

Start with blocks/by-region.tsx and regionsView in lib/regions.ts to see the RegionRow shape, then app/page.tsx for composition and CLAUDE.md for the build-and-render check. Pull request #45 is already open against this issue, so check it before writing anything. Done means a map shades countries from the existing data, shows every status label, works in light and dark at phone width, and passes pnpm typecheck && pnpm lint.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement

Problem

The page shows where the network's nodes are only as the by-region table (blocks/by-region.tsx): alpha-2 codes sorted by node count. There's no geographic view, so coverage (which continents have nodes, where the gaps are) takes reading the whole table.

Solution

Add a world map that shades each country by the data lib/regions.ts already derives (regionsView → RegionRow: code, nodes, bytesServed, cacheHit). No indexer or schema change is needed: regions and nodes in the stats file are keyed by the operator's declared alpha-2 region.

Follow the existing layering:

  • A "use client" block that reads useStats() via regionsView and owns its copy, with an emptyLabel switch (explicit return type, no default) for loading / unindexed / error / catching-up / empty ok, and the blinking Cursor while loading.
  • Placed in or beside the by-region section; composed in app/page.tsx.
  • Colors from tokens (--accent-green scaled for node count or bytes, muted neutrals for countries without nodes), working in light and dark.
  • UNKNOWN_REGION has no country; leave it off the map (the table still lists it).
  • Works at phone width.

Open questions:

  • What the shading encodes: nodes, bytes served, or cache hit.
  • Map data source and size: a bundled TopoJSON/GeoJSON (e.g. world-atlas 110m) vs. a pre-rendered SVG in public/; keep the static export light.
  • Hover/tap detail (country name via Intl.DisplayNames, as the table does).

Verify

pnpm typecheck && pnpm lint, then check each status in the built page (see CLAUDE.md: build with NEXT_PUBLIC_STATS_URL pointed at a local CORS server and render out/ with headless Chromium), in light and dark and at phone width.

🤖 Generated with Claude Code

Lenguaje dominante
TypeScript
Estrellas
2
Forks
0
Merge medio
9 h 7 min
PR fusionados (30 d)
53

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de decdn/stats

Todos los issues de decdn/stats

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.