KISS Refactor Diary: Card Detail Page

2025-10-06 | 2 min read

Our app router has collected a lot of inline logic and presentation tweaks as we iterated quickly on features. To keep shipping new ideas without slowing down, I'm kicking off a Keep It Simple, Stupid (KISS) refactor pass that starts with the card detail experience.

Why start here

  • The card page powers a huge slice of our traffic, so small readability wins compound fast.
  • It mixes metadata generation, pricing enrichment, and hefty JSX in a single file.
  • Partner teams lean on this page for examples, so improving clarity helps everyone.

Guiding principles

  1. Trim duplication before adding abstractions.
  2. Extract helpers only when they clarify intent for the next reader.
  3. Keep the existing behaviour stable—no product swings in this pass.

Today's focus

We'll simplify the print rendering section and supporting utilities:

  • Consolidate duplicate imports and price-formatting branches.
  • Move noisy inline helpers into clearly named utilities.
  • Keep styles and the existing DOM the same to avoid layout churn.

Follow-up entries will log additional cleanup areas as we continue through the rest of the /app tree.

Update: metadata + spotlight cleanup

  • Added shared helpers for selecting a featured print, locating local card art, and composing canonical URLs so generateMetadata reads top-down.
  • Reused the same selector for the on-page spotlight logic, preventing drift between social previews and the interactive highlight.
  • Centralised price/action button rendering in earlier pass now pairs with the new metadata helpers, keeping card detail concerns isolated by responsibility.

Update: JSON-LD helpers

  • Split the schema.org product and breadcrumb payloads into dedicated builders, so the JSX just drops in buildProductJsonLd/buildCardBreadcrumbJsonLd.
  • Reused the image absolutising helper for those payloads, ensuring we only resolve site URLs once per request.
  • Removed manual stat wiring inside the component—the helper computes mana/type/stats properties directly from the card record.
  • Promoted the helpers into lib/jsonld.ts and wired homepage, layout, about, and 404 routes into them so schema definitions now live in one place.
  • Expanded the shared JSON-LD module to cover catalog/dataset/item list shapes, then reworked category, posts index, and the structured data API route to rely on those builders instead of custom objects.

Related Posts