Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Cerrado Apto para principiantes
  • ¿Algo no está bien?
#167 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
88/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
api, backend, testing

Línea de trabajo

Lee resolveDimensions en src/lib/api-validation.ts y sus pruebas en tests/api/og.test.ts; el issue identifica la ruta de ancho fraccionario y las dimensiones esperadas. Añade cobertura para anchos fraccionarios en el resolvedor de dimensiones y en la ruta de la API, y luego asegúrate de que pasen los comandos indicados de comprobación, pruebas y compilación. La tarea estará terminada cuando las respuestas para anchos fraccionarios cumplan los criterios de aceptación y se mantenga el comportamiento existente para anchos enteros y alturas fraccionarias.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
8
Forks
4
Merge medio
5 h 44 min
PR fusionados (30 d)
83

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/ogcops

Todos los issues de codercops/ogcops

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.