Preview checker: named entities like `’` and `—` show up as raw text

Aberta
#396 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
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
78/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
typescript
Domínio
backend, web-dev

Direção de pesquisa

Start with decodeEntities() and NAMED_ENTITIES in src/lib/meta-fetcher.ts, then review the existing parseMetaTags tests. Add the HTML 4 entity table in src/lib/html-entities.ts and update the entity name matching while preserving exact case and safe lookup behavior. Add a regression test for named entities with digits, then run npm run check, npm run test, and npm run build; done when the acceptance criteria pass.

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

Descrição

bug good first issue

decodeEntities() in src/lib/meta-fetcher.ts only knows the ten names in NAMED_ENTITIES (line 190: amp, lt, gt, quot, apos, nbsp and the uppercase AMP, LT, GT, QUOT), so any other named entity reaches the preview checker as raw text. Typographic ones like ’, —, … and “ are common in titles and descriptions, and browsers show them as the characters (document.title gives Don’t ship on Fridays — notes from 200 releases | Acme Blog), but the checker keeps them:

parseMetaTags('<title>Don&rsquo;t ship on Fridays &mdash; notes from 200 releases | Acme Blog</title>', 'https://example.com').title
// "Don&rsquo;t ship on Fridays &mdash; notes from 200 releases | Acme Blog"

That 59-character title gets "Title is 71 chars (recommended: under 70)" from analyzeMeta(), every platform card shows the &rsquo; and &mdash;, and the Google Search preview (resolvePlatformPreviews() in src/lib/platform-specs.ts) cuts it at 60 characters before | Acme Blog. Accented letters (&eacute;, &Eacute;) and symbols (&copy;, &trade;, &euro;) stay raw the same way, and Smart Autofill (src/pages/api/ai/autofill.ts:63) hands the raw text to the model.

The regex has a second catch: it only matches names made of letters ([a-z]+), so &frac12;, &sup2; and the other names with digits can't decode even once they're in the table.

What to do

  • Add the rest of the 252 named entities from HTML 4 (the Latin-1, symbol and special sets) to the table. That's where the typographic and accented-letter ones live, and it keeps the table to a few hundred lines instead of HTML5's full list of over 2,000. Put it in its own file, like src/lib/html-entities.ts, so meta-fetcher.ts stays readable, and keep apos and the four uppercase names that are there now.
  • Take the characters from the current list (https://html.spec.whatwg.org/entities.json), since a few changed after HTML 4 (&lang; and &rang; are U+27E8 and U+27E9 now).
  • Names are case-sensitive, so keep the exact lookup (&Eacute; is É, &eacute; is é) and the Object.hasOwn check from #391.
  • Let the regex match names with digits, like [a-z][a-z0-9]*. Numeric entities already work, so leave that branch as it is.

Acceptance criteria

  • The title above comes out as Don’t ship on Fridays — notes from 200 releases | Acme Blog, and every HTML 4 named entity decodes in titles and attribute values, including &frac12; and &sup2;
  • Unknown names, wrong-case names like &Amp; and &NBSP;, and prototype names like &constructor; stay as they are, and every existing parseMetaTags test still passes
  • A test that fails on the current code
  • npm run check, npm run test and npm run build pass

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #NUM in the description.

Linguagem predominante
TypeScript
Estrelas
8
Forks
4
Merge médio
8h 44min
PRs com merge (30d)
159

Preparar o ambiente

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 codercops/ogcops

Todas as issues de codercops/ogcops

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

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