Script to fetch a doc's icon from its website

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

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
32/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nodejs
Área
developer-experience

Línea de trabajo

Start with the PR template and the existing public/icons/docs/<slug>/ layout to see the three files the script must write (16.png, [email protected], SOURCE), then find where npm scripts and the Node tests and type check are configured. The work covers HTML icon-tag discovery, PNG and ICO parsing, and alpha-aware downscaling, so read the draft PR #2781 before writing anything. Done means the script works for the three example sites and the tests pass, but the maintainer has not yet confirmed the approach.

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

Descripción

Feature request

Summary

A small script that fetches a doc's icon from the documented project's website and saves it the way DevDocs expects:

npm run icon -- <doc_slug> <website>

It writes public/icons/docs/<slug>/16.png, [email protected] and SOURCE, the three files the PR template asks for.

Today, each new doc's icon is found, resized to 16 and 32 pixels and saved by hand. The script does that step for contributors and keeps the SOURCE file accurate. It also helps when updating a doc whose icon has changed.

How it works:

  • It looks for the icon in the page's <link rel="icon"> and <link rel="apple-touch-icon"> tags, trying the smallest one that is at least 32 pixels first. If none works, it tries /apple-touch-icon.png and /favicon.ico.
  • It reads PNG files and ICO files, including ICO files that contain bitmaps rather than PNGs.
  • It scales the icon by averaging pixels with premultiplied alpha, so 16-pixel icons stay crisp and transparent edges don't darken.
  • It uses only Node's standard library, so there are no new dependencies. It sits beside the existing Node tests and type check.
  • SVG-only icons can't be converted without a dependency, so the script says so. --icon <image address> then uses a specific PNG or ICO instead.

Contributors should still check the result at 16 pixels, as they do today. The script only automates finding, resizing and recording the source.

I've prepared an implementation with tests in draft PR #2781. Would you be open to this? I'm happy to change the approach, for example to a thor task.

Examples

Tried on real sites:

  • npm run icon -- python https://www.python.org saves the icon from /static/apple-touch-icon-precomposed.png.
  • npm run icon -- github https://docs.github.com saves the icon from /assets/cb-345/images/site/favicon.png.
  • npm run icon -- vue https://vuejs.org explains that the site only offers logo.svg, and suggests --icon.
Lenguaje dominante
Ruby
Estrellas
39.6k
Forks
2.7k
Merge medio
21 h 1 min
PR fusionados (30 d)
21

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

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 freeCodeCamp/devdocs

Todos los issues de freeCodeCamp/devdocs

Issues similares

Más issues de Ruby

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.