shadcn.io is not affiliated with official shadcn/ui
Trending Posts Blog Block for Svelte
Six ranked stories in two columns of three on shared hairlines, each with a huge outline numeral and its move since last week, as an arrow and a number.
Installation
Overview
A trending list for Svelte with Ark UI, written for Tempoline, a fitness magazine. A centred header sits over six ranked stories on shared hairlines, two columns of three. Each cell sets its rank as a huge numeral drawn in outline (the first filled), with the move since last week under it: an arrow and a number, a dash, or "New", in foreground tones only and always in words for screen readers. The title is the cell's one link, with the author and reading time under it. It has no controls and no state, so it's a static server component. The ranks come from the readers each story had in seven days, and the readers are example data. It's built from Guides and Avatar. For magazines, news sites and blogs that want a "most read" shelf.
FAQ
Where do the ranks and the moves come from?
Nowhere typed by hand. Each story in STORIES has readers (this week) and lastRank (its place last week, 0 for a story that wasn't out yet). The file sorts by readers for the rank and subtracts it from lastRank for the move, so editing a count reorders the list and updates every arrow. The counts are example data; feed your own from analytics.
How are the outline numerals drawn?
Each numeral is one text element in a 40 by 56 SVG box with no fill and a 1.25 unit stroke in the foreground colour, so every numeral takes the same room and no theme can fade it. Rank 1 is filled. The SVG is decorative: the ol already numbers the stories, and a screen reader hears each move as words ("Up 3 places since last week").
Why does the first column hold ranks 1 to 3?
The list is one ol in rank order, laid out with grid-flow-col and three rows from sm up, so the first column reads 1, 2, 3 and the second 4, 5, 6, and the DOM order is the reading order. A phone shows one column.
How does it fit on a phone?
The cells stack in one column, the numeral gets smaller and the title wraps. The six cells take under two screens and nothing scrolls sideways at 320 pixels.