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

Ouverte
  • Quelque chose ne va pas ?
#396 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
typescript
Domaine
backend, web-dev

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
8
Forks
4
Merge moyen
8 h 44 min
PR mergées (30 j)
159

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de codercops/ogcops

Toutes les issues de codercops/ogcops

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.