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

Offen
  • Stimmt etwas nicht?
#396 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
backend, web-dev

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
8
Forks
4
Ø Merge
8 Std. 44 Min.
Gemergte PRs (30 T.)
159

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus codercops/ogcops

Alle Issues in codercops/ogcops

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.