fix: render markdown in product list descriptions - #602
isaaccorley wants to merge 1 commit into
Conversation
|
@isaaccorley is attempting to deploy a commit to the Radiant Earth Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This is by design. From a UX standpoint, when listing data products, we only want to provide links to those products or other relevant places within Source (e.g. to the profile page for whoever published a product). I appreciate the interest and sheer gumption required to make this request, but I'm not inclined to accept it. If you feel strongly, feel free to push back! |
No problem, I assumed it was an oversight. I don't feel strongly about it if it's by design. |
@jedsundwall I want to push back on this a bit. Consider something like this product: https://source.coop/jianbo/gndc-higlass-ls20 
That's a bit of an extreme example. Another, simpler example: 
I think it's reasonable that we 1) render the markdown, 2) strip out any links, 3) clamp any long description to just the first N lines (maybe 3?). I'm going to pick this work in #603. |
Drop the Bright and rehype-raw dependencies that #602 added to the jest transform allowlist; no story imports MarkdownViewer any more, so only react-markdown and remark-gfm's ESM dependencies need transforming. Say directly why table and pre are allowed in listings: left disallowed, unwrapDisallowed would spill their text into the card. Both from review on #603. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Carries on [#602](#602) by @isaaccorley, whose fork doesn't allow maintainer edits. Product list descriptions now render their inline Markdown — paragraphs, bold, italics, strikethrough, inline code and lists — clamped to three lines. The rest is reduced for a card: headings and links render as plain text, because a listing links only within Source (to the product and its publisher). Tables and fenced code blocks are left out, since they have no readable inline form. The full description, links included, stays on the product page. `ProductListItem` is a client component, so it renders with react-markdown directly, using `remark-gfm`, an `allowedElements` list and `unwrapDisallowed`. It doesn't go through `MarkdownViewer`: that pulls in Bright, which is server-only, so importing it here fails `next build`. A description with a code fence would also hit React's async-client-component error at render. The clamp is CSS `line-clamp` in `ProductList.module.css`. `jest.config.cjs` adds react-markdown's and remark-gfm's ESM-only dependencies to the transform allowlist, because the story smoke test now loads them. The Bright and rehype-raw entries #602 also added are gone, since nothing in a story imports `MarkdownViewer`. Mocking react-markdown instead would hollow out the play assertions the smoke test runs. Story fixtures use fictional jazz-themed accounts and products (`acoltrane`, `tmonk`, `mdavis`) with `example.org` links. ## Stories - [Markdown Description](https://source-coop-ui-git-fix-product-list-markdown-radiantearth.vercel.app/?path=/story/features-products-productlistitem--markdown-description): links render as text, and the description clamps at three lines - [Table Description](https://source-coop-ui-git-fix-product-list-markdown-radiantearth.vercel.app/?path=/story/features-products-productlistitem--table-description): heading, table, emphasis, strikethrough, inline code, list and link - [Readme Description](https://source-coop-ui-git-fix-product-list-markdown-radiantearth.vercel.app/?path=/story/features-products-productlistitem--readme-description): a whole README with headings, code blocks and a table - [Formatting](https://source-coop-ui-git-fix-product-list-markdown-radiantearth.vercel.app/?path=/story/features-products-productlistitem--formatting) · [Narrow](https://source-coop-ui-git-fix-product-list-markdown-radiantearth.vercel.app/?path=/story/features-products-productlistitem--narrow)    ## Testing `npm run type-check` passes, and `npx jest` passes (82 suites, 867 tests, after merging `main`, including the story smoke test). `npm run build` compiles; it then stops prerendering `/`, which needs AWS credentials I don't have locally. The play tests for Markdown Description, Table Description and Readme Description pass in local Storybook. The Readme story's clamp assertion only runs in a browser, because jsdom has no layout. The one accessibility violation on these stories is the existing yellow "Unlisted" badge's contrast (4.07:1). ## Docs Checked docs.source.coop: `docs/using-source/create-a-data-product.md` calls the description "a short overview" and points detailed documentation to the README. That still holds, and no page describes how listings render descriptions. No data-proxy ADR is involved. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Isaac Corley <isaac.a.corley@gmail.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This branch had an error being deployed
3 participants
I noticed the product-list descriptions don't render markdown in the descriptions, however on the product page itself, the markdown is rendered fine. This PR fixes this.
Stories: Markdown · Mobile.