Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

refactor: share one headless-Chrome helper between check-render and build-og-card

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

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

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

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
72/100
issue の種類
リファクタリング
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript, node.js
領域
tooling

調査の方向性

scripts/check-render.mjs と scripts/build-og-card.mjs を読み、それぞれの Chrome の検出、起動、終了、および CDP クライアントのコードを比較します。共通部分を scripts/chrome.mjs に抽出し、レンダリング固有の動作と呼び出し側の PAGE_TIMEOUT_MS の判断はそのまま残します。npm run check-render と npm run og-card を実行します。レンダリングの失敗が同一のままで、card が引き続きバイト単位で比較可能であれば完了です。

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

説明

ci infra

Branch off master and PR into master, not main. This is the v1 site.

scripts/build-og-card.mjs (#130) needs headless Chrome for exactly the same reasons scripts/check-render.mjs does, and it now carries its own copy of the same four pieces of plumbing:

  • findChrome() — the CHROME_PATH override and the per-platform install locations
  • launchChrome() — the flag set, and scraping the DevTools URL out of stderr
  • stopChrome() — waiting for the exit rather than the signal, because Windows keeps the user-data-dir locked until Chrome has gone
  • connect() / withTimeout() — the minimal CDP client over one browser-level socket

The card builder's copy is the smaller of the two: it drives one page, so it drops the event waitFor and the per-target session bookkeeping check-render needs. Nothing about the Chrome handling itself differs.

This is the shape #162 was about. There, check-canonicals and check-render had a static.yml allowlist parser each, and they had already drifted in a way that mattered: the render check read only the first cp ... _site/, so a page added in a later cp deployed but was never rendered. One parser in scripts/static-allowlist.mjs fixed it. The same argument applies here before these two copies drift — a fix to Chrome discovery, or a new flag needed for a future Chrome, currently has to be made twice, and only one of the two runs in CI, so the other can rot unnoticed.

Not urgent: the copies are identical today, and build-og-card.mjs is a manual tool run rarely rather than a check. Filed so it is a decision rather than an accident.

Proposal

Extract the shared parts into scripts/chrome.mjs, alongside scripts/static-allowlist.mjs, and have both scripts import it. check-render.mjs keeps whatever is genuinely specific to rendering every page (the viewport list, the is-loading and image-ratio measurement, the page loop).

Worth deciding as part of it: whether PAGE_TIMEOUT_MS belongs to the module or stays per-caller, since the two have no reason to agree.

Acceptance criteria

  • One copy of Chrome discovery, launch, shutdown and the CDP client
  • npm run check-render behaves identically — same failures on a broken image, a distorted aspect ratio and a stuck is-loading
  • npm run og-card still produces a byte-comparable card
  • Neither script reaches into the other

Refs #130, #162

主要言語
HTML
スター
0
フォーク
0
平均マージ
9時間 52分
マージ済み PR（30日）
59

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

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

laywill/laywill.github.io のほかの issue

laywill/laywill.github.io の issue をすべて見る

似ている issue

DevTools の issue をもっと見る

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

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