shadcn.io is not affiliated with official shadcn/ui
Link Preview Comments Block for Solid
A comment composer that turns a pasted address into a preview card with a drawn cover, title, description and domain, with Remove preview, over a reading-list thread whose comments keep their cards.
Installation
Overview
Unfurl links in comments the way chat apps do, with this link preview composer for Solid with Ark UI. A shared reading list in Unfurlholt has two comments that each carry a preview card, and the composer under them watches the Textarea: paste an address and, when it is one of the five pages typed into the block, a card appears in a reserved slot with a drawn greyscale cover, the title, a sentence, the domain and Remove preview. An address the block does not know says "No preview in this demo: the link stays as text." "Paste a sample link" cycles through the five so you can try it without typing. The card is built from Item and Badge parts, posting keeps it on the comment, and the one Shine Button is the only primary. Covers are drawn in SVG, so there are no photos, and nothing is fetched. Built from Textarea, Item, Button, Field, Avatar, Shine Button, Kbd and Guides. For bookmarking tools, link boards and any thread where people share pages.
FAQ
How do I add my own pages?
Edit PAGES at the top of the file: each one has an id, a url without the scheme, a domain, a title, a one-sentence text and a scene that picks one of the five drawn covers. Matching ignores the scheme, a trailing slash, trailing punctuation and case. A comment's card is the page id kept in its card field.
What stays local, and how do I make it real?
Everything, and nothing is fetched. A real app unfurls on the server: when a comment is saved, request the page there, read its title, description and image from the Open Graph tags, cache the result, and return it with the comment. Do it server-side so the visitor's browser never contacts the address, you can refuse private network addresses, and the card is the same for everyone.
What happens with an unknown address?
The slot says "No preview in this demo: the link stays as text" and the address is posted as part of the comment text. Remove preview on a known address does the same and remembers the choice for that address, so the card does not come back until the address changes.
Is it accessible?
The slot is always there, so a card appearing never moves the controls under it, and the status line says "Preview found" or "Preview removed" politely. Covers are decorative drawings with a hidden title; the card's title is a real link with the domain written out. Remove preview is a named button that returns focus to the box.