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

Abierto
  • ¿Algo no está bien?
#396 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
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
backend, web-dev

Línea de trabajo

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.

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

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
8
Forks
4
Merge medio
8 h 44 min
PR fusionados (30 d)
159

Preparar el entorno

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

Todos los issues de codercops/ogcops

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.