shadcn.io is not affiliated with official shadcn/ui
Journalist Beat Tree Profile Block for Vue
A journalist profile as a beat tree: a tree of six beats, sub-beats and stories with the number of stories rolled up on every branch, and a byline card for the story you pick with its outlet, date, length, reading time and Exclusive badge.
Installation
Overview
Show a reporter's clip file as the beats she covers, with this journalist beat tree profile for Vue with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the reporter: initials, name, role, place and a badge that says how many bylines the file holds across how many beats, counted from the tree. At the start the catalog's Tree View walks six beats, each with two sub-beats and two stories under them. Every branch carries the number of stories under it, rolled up from the leaves, and the arrow keys walk, open and close it. Picking a story shows its byline card at the end, under the tree on a phone: the outlet, the headline, the beat, the date, the length in words, the reading time worked out from it, an outline Badge where the story was an exclusive, and one line for what the sub-beat adds up to. A polite line says which story is showing. The tree scrolls inside a frame of fixed height, so the panel never changes height. It's built from Tree View, Data List, Badge, Avatar and Guides, with a CSS entrance only. The reporter, the outlets and the stories are invented. For a journalists' clip file, a newsroom directory or any profile that is organised by subject.
FAQ
How do I fill it with my own stories?
Edit BEATS: each beat has sub-beats and each sub-beat has stories made with story(id, title, outlet, date, words, exclusive). The tree, the number on every branch, the count in the person band, the reading time (at 220 words a minute) and the line for the sub-beat are all worked out from that data, so nothing is typed twice. Dates are ISO strings, written in UTC so they read the same in every time zone.
How are the numbers on the branches worked out?
A story counts as one and a branch counts the stories under all of its children, so a beat shows the total of its sub-beats. The same count feeds the badge in the person band, "24 bylines across 6 beats", and it follows any change to the data.
How do I walk the tree with the keyboard?
Tab enters the tree on one row. The up and down arrows move between the rows that are showing, the side arrows open and close a branch or move to its parent or first child, Home and End jump to the first and last row, and Enter picks a story. Picking a branch only opens or closes it, so the byline card always shows a story.
What stays local in the demo?
All of it. The stories are typed examples, there are no real outlets or links, and picking a story only changes the card. In your own app link the headline to the published story and load the clip file from your records.
Is it accessible?
The tree is a named tree with its rows reachable by the arrow keys, and the card is a labelled article that says everything in words: an Exclusive badge is text, not a tone. The status line is a polite live region present from the start. The chevrons turn the right way in a right-to-left layout, and the headlines and dates keep their own order.