fix: use Astro Image component for Spanish blog thumbnails

[baezor]

Summary

• Spanish blog index (/es/blog/) was using a plain <img> tag instead of Astro's <Image> component
• The heroImage field is resolved by Astro's image() schema into an object, which requires the <Image> component to render
• The English blog index already used <Image> correctly — this aligns the Spanish page

Test plan

• npm run build passes
• Thumbnail displays correctly on /es/blog/

[cloudflare-workers-and-pages]

Deploying baezor with    Cloudflare Pages

Latest commit:	7a61a2b
Status:	✅  Deploy successful!
Preview URL:	https://045d9b0c.baezor.pages.dev
Branch Preview URL:	https://hotfix-fix-es-blog-thumbnail.baezor.pages.dev

View logs

[claude]

Code Review

Summary

This PR fixes a bug where the Spanish blog index page was using a plain <img> tag instead of Astro's <Image> component for rendering hero images. The fix correctly aligns the Spanish page with the English version.

✅ Strengths

1. Correct Fix: The change properly addresses the issue. Since heroImage is defined with Astro's image() schema (src/content/config.ts:16), it returns an ImageMetadata object, not a string URL. The <Image> component is required to handle this properly.

2. Consistency: This aligns the Spanish blog index with the English version, maintaining code consistency across internationalized pages.

3. Performance: Using Astro's <Image> component enables automatic image optimization (WebP/AVIF conversion, responsive sizing, lazy loading), which is a best practice per CLAUDE.md.

4. Proper Attributes: The added width={600} and height={300} attributes prevent layout shift during image loading.

⚠️ Issues & Concerns

🚨 CRITICAL: Branch Strategy Violation

This PR targets main instead of develop.

Per CLAUDE.md GitFlow workflow:

Important Rules

1. Always start from develop branch - Never branch from or commit to main directly

Hotfix workflow:

• Urgent production fixes, branch from main, merge to main and develop

Action Required:

• If this is truly a production hotfix (live site is broken), you must ALSO merge this to develop after merging to main
• If this is NOT a production emergency, close this PR and recreate it targeting develop instead

⚠️ Missing Test Checklist Item

The PR description shows:

- [x] npm run build passes
- [ ] Thumbnail displays correctly on /es/blog/

The second checklist item is unchecked. Per CLAUDE.md:

Run npm run test:visual before committing UI changes

Action Required:

1. Manually verify thumbnails display on /es/blog/ in dev server
2. Run npm run test:visual to ensure no visual regressions
3. If visual tests fail (expected since you changed image rendering), run npm run test:visual:update to update baselines
4. Commit updated snapshots with message: test: update visual regression baselines after Image component fix

📝 Minor: CSS Selector Mismatch

The CSS at src/pages/es/blog/index.astro:102-106 targets .post-image img, which will still work with the <Image> component (Astro renders it as <img>), but consider updating to be more specific if needed in the future.

🧪 Test Coverage

Missing Visual Regression Update:
The visual regression tests (per CLAUDE.md) cover the Spanish blog page at /es/run, but I don't see explicit coverage for /es/blog/ index. However, this change affects image rendering, so:

1. Visual regression snapshots will likely differ
2. You should run npm run test:visual locally
3. CI will catch any regressions automatically

🏁 Verdict

Approve with Required Changes

The code change itself is correct and follows best practices. However, you must:

1. ✅ Address branch strategy - Either merge to both main and develop (if hotfix), or retarget to develop
2. ✅ Complete testing checklist - Run visual regression tests and update snapshots
3. ✅ Verify manual testing - Check the actual page renders correctly

Once these items are addressed, this PR is ready to merge.

---

🤖 Generated with Claude Code