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

A fractional width like `width=600.5` returns the full 1200x630 image

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

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

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

評価

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

調査の方向性

src/lib/api-validation.ts の resolveDimensions と tests/api/og.test.ts のテストを読みます。issue では、小数幅の経路と期待される寸法が示されています。寸法リゾルバーと API ルートで小数幅のテストを追加し、記載されているチェック、テスト、ビルドの各コマンドが成功することを確認します。小数幅に対するレスポンスが受け入れ基準に一致し、既存の整数幅および小数高さの動作が保たれれば完了です。

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

説明

bug good first issue hacktoberfest

On dev, /api/og?width=600 returns a 600x315 PNG, but /api/og?width=600.5 returns 1200x630, and so does width=333.3. Run npm run dev and open http://localhost:4321/api/og?width=600.5 to see it.

The schema accepts any number from 200 to 2400 (src/lib/api-validation.ts, lines 16 to 19), and resolveDimensions (line 46) keeps the fraction. src/pages/api/og.ts passes the width to the renderer as scaleDown (line 82), which becomes resvg's fitTo width (src/lib/og-engine.ts, lines 88 to 91). resvg-wasm 2.6.2 ignores a fitTo width that isn't a whole number and renders the SVG at its own size, 1200x630. width=600.0 works because it parses to 600.

A fractional height on its own is fine, because the width derived from it is rounded (line 74): height=315.5 gives 601x316.

This came in with #142 (the fix for #85), which isn't released yet. Production still runs v1.6.0, where width crops the canvas instead of scaling it, and there width=600.5 gives a 601x630 image. The next release is planned for Friday, so it would be good to fix this before then.

What to do

  • Round the width to a whole number at the start of resolveDimensions. Then width=600.5 works like width=601 and gives 601x316. The height doesn't need it: only the width goes to the renderer, and a width derived from height is already rounded.
  • Round instead of rejecting fractions with .int(). Production accepts width=600.5 today and returns an image, so a 400 would break URLs that work now.

Where to look

  • src/lib/api-validation.ts: the width and height schema (lines 16 to 23) and resolveDimensions (lines 46 to 96)
  • src/pages/api/og.ts: scaleDown (line 82)
  • src/lib/og-engine.ts: fitTo (lines 88 to 91)
  • tests/api/og.test.ts: the resolveDimensions tests (line 102) and the route tests for sizes (line 361)

Acceptance criteria

  • /api/og?width=600.5 returns a 601x316 PNG, and width=333.3 returns 333x175
  • height=315.5 still returns 601x316, and whole numbers work as before
  • Tests for fractional widths in resolveDimensions and in the route
  • 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 #167 in the description.

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

環境構築

はじめの一歩

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

codercops/ogcops のほかの issue

codercops/ogcops の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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