My favorite trick on this site is invisible. When I write a gear page, I don’t write product cards. I paste an Amazon link on its own line, and at build time a remark plugin turns it into a card with the product, a link, and an “Amazon” label. The markdown stays a shopping list while the page becomes a catalog.
Here it is, live. In my editor, the card below this code block is exactly the one line of markdown inside it:
https://www.amazon.com/dp/B084ZTV3QK
Nobody wrote that card. The plugin built it when this post was published, and the photo, title, and description came from a small product map keyed by the ASIN. On your site the card holds whatever you give it.
The card wears more hats than the catalog one. A full product card, a retired product with a status band, and the one-sentence note an article sometimes needs after publishing:
After DKMediaViewer, extracting this one was easy to justify. The card handles the shapes I kept needing here: a product with a photo, a retired product wearing a status band across the top, and a one-sentence note card inside an article. The component installs through the shadcn registry, so the source lands in your project and it’s yours to restyle. The plugin comes along automatically.
It’s called DKProductCard, keeping the NeXTSTEP homage going. The source is on GitHub and the plugin is on npm. If your blog has a gear page waiting to happen, this is the shortest path I know.
Chat about this?
Send a comment