Let a project say which edge of its image to keep when cropped

[MorganGodden]

Follow-up to #2, which merged before this landed on it.

The marquee squares off a landscape screenshot, and a centre crop of the What's the Point launcher throws away the half that identifies it: the wordmark and the call to action sit on the left, so what survives is empty background and a few playing cards.

Projects gain an optional imageAnchor — one of the nine usual positions, defaulting to center, so nothing else moves. What's the Point is set to left.

The anchor has to be spelled twice

The two call sites are cropped by different things:

	who crops	steered by
/projects card	the browser — image is served whole (/_ipx/_/…), object-cover crops it	object-left class
home page marquee	@nuxt/image — a 234px square comes back already cropped, server-side	position modifier on the resize

CSS never gets a say in the second case, because the image arrives square. The first version of this change only added the class, verified object-position: 0% 50% was applied, and changed nothing on the page that prompted it — worth knowing if this ever needs revisiting.

Both forms come from one authored value via app/utils/projectImage.ts, which is also the source of truth for the Zod enum in content.config.ts.

Corners use compass names

imageAnchor: top-left maps to sharp's northwest rather than its left top spelling. The modifier ends up in a URL, and IPX answers 500 to the space:

/_ipx/s_234x234,position_left+top/…   → 500
/_ipx/s_234x234,position_northwest/…  → 200

All nine values were checked against the running server.

Verification

Built and served the production output, then drove both pages in Chromium.

• Home page: only What's the Point's images carry pos_left, on both the 1x and 2x srcset entries (/_ipx/pos_left&s_234x234/…). The other three projects are untouched.
• Projects page: object-left on What's the Point, object-center on the rest. The card renders identically to before — the crop there is vertical, so a horizontal anchor is correctly a no-op.
• Light/dark swapping from Show What's the Point with its own screenshots, per colour scheme #2 still works in both directions.
• npx eslint . reports the same 40 errors / 1 warning as master — all in app/app.vue and app/pages/about.vue, neither touched here.

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
godden.dev	Ready	Preview, Comment	Jul 28, 2026 3:31pm