shadcn.io is not affiliated with official shadcn/ui
Syndicated Filter Crosspost Blog Block for Vue
A studio blog's posts that first ran elsewhere: an Only syndicated Switch with a live count, rows with an outlet monogram and Read here and Read original links, and a canonical-link note.
Installation
Overview
A cross-posted articles block for Vue with Ark UI, written for Scrapwick, a design studio's blog. A start-aligned header carries an "Only syndicated" Switch and a live count ("4 of 6 posts shown") at its end. Under it, six posts run as rows rail to rail: the publisher's monogram, which is the row's cover and is drawn in type, the title, "Originally on Meadowvane Journal" with the first date and the reading time, and two links, Read here and Read original (the posts that never ran elsewhere have only the first). A band at the foot notes that each syndicated post names its original as the canonical address. It is built from Switch and Guides. For a blog that republishes elsewhere and wants search engines and readers to find the original. The outlets are invented.
FAQ
What does the Switch do?
It turns the posts that ran only here into quiet lines and updates the count, which is a polite live line. The rows stay where they are (a quiet row's content is unseen and out of the tab order, and one muted line says why), so turning the filter on or off never moves the page.
How do the two links differ?
Read here goes to the post on your own site; Read original goes to the outlet's copy and carries an external-link icon. Each link's hidden text names the post, so a screen reader that lists links hears distinct names. Both hrefs are placeholders.
What is the canonical note for?
When a post first ran on another site, the copy on yours should name that page as its canonical address (<link rel="canonical">), so search engines credit the original and do not treat yours as a duplicate. The note says so for readers; add the tag to each post's page.
Are the outlets real?
No. Meadowvane Journal, Tarnmere Review and Brackenholt Weekly are invented, and a monogram is only their initials set in type, never a logo. Edit POSTS: an outlet name or null for a post that ran here only, the first date, the reading time and the title.