shadcn.io is not affiliated with official shadcn/ui
Post Footer Blog Block for Solid
The end of an article: tags as links, a share cluster whose Copy link really copies, an author panel beside Published and Updated dates, and Previous and Next as two cells on a shared hairline with arrow key hints.
Installation
Overview
The foot of one article for Solid with Ark UI, written for Endpaper, a bindery's blog about notebooks and paper. Three bands: a short sign-off with the post's tags as links and a share cluster whose Copy link button really writes the address to the clipboard; the author's panel, with her initials and one line about her, beside a Published and Updated list with fixed dates; and Previous and Next as two cells on a shared hairline, each with an arrow key hint. The arrow keys follow those links too, unless you are typing, or using a tab list, radio group, slider or menu. The block ends on the pair, so the next section's top rule closes it. It uses Avatar, Badge, CopyButton, Kbd, Button and Guides.
FAQ
How do I change the post, the author and the neighbours?
Edit the constants at the top of the file: POST_URL, TAGS, AUTHOR, PUBLISHED and UPDATED (ISO dates, formatted in UTC), and the PREVIOUS and NEXT objects (a title, a reading time and an href). Nothing is computed from today.
Does Copy link really copy?
Yes. It writes POST_URL to the clipboard and says "Link copied" to screen readers; if the browser refuses (a page not served over HTTPS), it shows a cross instead. The Email it link opens your mail app with the title as the subject and the address in the body. Nothing is posted to a network.
What do the arrow keys do?
Left and right arrow follow Previous and Next, in the direction the text runs (the two swap in a right-to-left page). They are ignored while you type in a field, when a modifier key is held, and inside controls that use the arrows themselves, such as tabs, radio groups, sliders, menus and trees. Remove the effect if you don't want shortcuts; the hints can stay as plain labels.
Why are Previous and Next whole-cell links?
Each cell is one link with a name like "Next post: A year of testing fountain pens on recycled paper", so a screen reader hears the destination, and the whole cell is the target, with a hover tint and a focus ring drawn inside it. The pair stacks on a phone.