Script to fetch a doc's icon from its website

Aberta
  • Algo errado?
#2,780 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
32/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
nodejs
Domínio
developer-experience

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
Ruby
Estrelas
39.6k
Forks
2.7k
Merge médio
21h 1min
PRs com merge (30d)
21

Preparar o ambiente

Abrir no Codespaces

Inicia o contêiner de desenvolvimento do projeto no navegador, com a sua própria conta do GitHub.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de freeCodeCamp/devdocs

Todas as issues de freeCodeCamp/devdocs

Issues semelhantes

Mais issues de Ruby

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.