[piyusshhjangid]

Closes #301

Summary

Adds the blog-benchmark template with up to four scaled comparison bars, formatted values and optional units. Invalid rows are skipped, zero values render empty bars safely, and the chart hides when no rows remain. Long titles, notes and names shrink and truncate. Light backgrounds use readable text and accent colors.

The template is exported from the Blog index and registered in the template registry, with focused tests for scaling, validation, empty states, formatting, long text and light-background contrast.

How I Tested This

• npm run check — passed with 0 errors, 0 warnings and 11 existing hints.
• npm run test -- --testTimeout 15000 — 1,550 tests passed across 78 files.
• npm run build — passed.
• git diff --check — passed.
• Tested with npm run dev: selected Benchmark in the Blog editor and checked its default preview; rendered and inspected default dark and white-background/pale-yellow previews.

AI Assistance

OpenAI Codex assisted with implementation, focused tests and validation. I reviewed the changes.

Type of Change

• New template

Checklist

• This PR targets dev
• I was assigned the linked issue
• npm run check passes
• npm run test passes
• Tested locally with npm run dev
• Screenshots included for visual changes
• New template follows the Template Guidelines

Screenshots

Default dark and white background with pale-yellow accent:

[anurag629]

Thanks @piyusshhjangid, nice and quick. Check (0 errors), all 1550 tests and the build pass on top of dev, and the renders hold up: the defaults, white with dark text, a yellow accent on white (it darkens), a light text color on white (falls back to dark, nice), blank or bad rows skipped (a blank name, abc, -5), every row blank (the chart area goes away), and all zeros (empty bars, no division by zero).

One thing to fix: the number and unit sit in a fixed 220px column, so a longer unit spills over the bar. Just unit=requests per second with the default values puts "112,000 requests per second" on top of the Bun bar, and a value like 123456789.125 does the same. Let the value column size to its text (and shrink it with autoFontSize() past some length), or cap the unit's length, so the label never overlaps the bar.

[piyusshhjangid]

Fixed both items. Long value/unit labels now shrink and truncate within a capped column. I also set a valid range for the benchmark number fields, which fixed the CI registry test. The full suite now passes (1,551 tests), along with check and build.

[anurag629]

Thanks @piyusshhjangid, the overlap is gone, and the slider ranges pass the new registry test from #305. One more: each row sizes its own label and column, so with unit=requests per second the three rows come out at different sizes (14px for 112,000, 17px for the other two), the bar tracks end at different points, and the third label gets cut to "48,000 requests per seco…" because length * 9 is narrower than 17px bold text. Could you pick one font size and one column width for all rows from the longest label, so the bars line up and nothing gets cut short of the cap?

[piyusshhjangid]

Fixed the shared sizing and resolved the conflicts with the latest dev. All value labels now use one font size and column width based on the longest displayed label; the full text remains visible unless it reaches the truncation cap. The full suite passes (1,587 tests), as do check, build, and CI.