shadcn.io is not affiliated with official shadcn/ui
Syndicated Filter Crosspost Blog Block for React
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 React with Base 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.
Related
- Pro
Author Frame Guest Post Blog
Article partsA guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.
- Pro
Three Column Resource Roll Blog
Topics and indexesA link roll in three ruled columns, Books, Tools and Papers: a monogram tile, an external link, the source domain in mono, one line on why, and a Copy button for the link.
- Pro
Featured Post Blog
Featured storyOne lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.
- Pro
Pinned Posts Blog
Reading toolsThree pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.
- Pro
Compact List Blog
Post listsTwenty posts as dense one-line rows like a printed contents page: date, title, a dotted leader and the reading time, eight shown and twelve behind a Show more button.
- “Pro
Quote Card Share Blog
Reader feedbackA quote-card builder: pick one of three sentences from an issue and a drawn typographic card shows it, with Copy quote and Copy link buttons that really copy and a Send by email link.