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

オープン
  • 何か問題がありますか？
#396 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
backend, web-dev

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
8
フォーク
4
平均マージ
8時間 44分
マージ済み PR（30日）
159

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

codercops/ogcops のほかの issue

codercops/ogcops の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。