[borjaperfra]

Lo pidió la comunidad en Discord: algo como el "Built with Gentle-AI" para que los proyectos hechos con NaN lo digan en su README y podamos encontrarlos. De las propuestas se eligieron la B (tarjeta oscura y clara) y la C (compacta), con NaN más grande.

Qué entra

• public/badge/: built-with-nan-dark.svg, -light.svg y -compact.svg, unos 5 KB cada uno, servidos en https://nan.builders/badge/….
• scripts/gen-badges.mjs: los genera. El texto va en trazos (fontkitten con JetBrains Mono) y "NaN" es el primer trazo del wordmark de public/brand, porque GitHub muestra los SVG dentro de un <img>, donde no cargan fuentes. fontkitten pasa a ser devDependency; ya estaba instalado a través de Astro.
• /docs/built-with-nan (EN y ES), en Guides, después de Apps:
  • Snippet HTML con <picture>, para que cada README muestre la tarjeta de su tema.
  • Snippet Markdown para el compacto.
  • Por qué no hay que copiar la imagen a otro sitio y cómo se puede usar el badge.
• Cómo se rastrea: buscando nan.builders/badge/ en el código de GitHub. Los clics llegan con ?ref=built-with-nan.

Ojo

• Las URLs de /badge/ son contrato: habrá READMEs ajenos apuntando a ellas. Se puede cambiar el diseño, no el nombre de los ficheros.
• Las vistas previas de la página van como imágenes markdown y no como HTML, porque mdxToText rechaza los bloques HTML crudos y /api/docs/manifest.json respondería 500 (lo pillaron los tests). Una regla CSS img[src^="/badge/"] evita que salgan estiradas como capturas.

Verificación

• src/tests/layouts/builtWithNanDocs.test.ts comprueba:
  • Que los SVG commiteados coinciden con lo que genera el script.
  • Que son autocontenidos: sin <text>, sin fuentes y sin recursos externos.
  • Que cada URL de los snippets existe.
  • Que EN y ES tienen los mismos snippets.
  • Que los enlaces llevan el ref.
• vitest run: 2559 pasan y fallan 2. Son los ejemplos de Python de notificationsDocs, que también fallan en main en Windows porque python3 es el atajo de la Microsoft Store.
• astro dev:
  • /docs/built-with-nan y /es/docs/built-with-nan responden 200, sin scroll horizontal a 390 px.
  • Los tres SVG se sirven como image/svg+xml.
  • La página aparece en el manifest y /api/docs/built-with-nan.md sale limpio para el bot.

Siguiente PR (aparte, toca cloud-api): marcar en /projects los repos que lleven el badge.

🤖 Generated with Claude Code