Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Does it work right to left?

Yes. The cells swap sides, the arrows mirror, Next aligns to its end and the dates and reading times are isolated with bdi.