shadcn.io is not affiliated with official shadcn/ui
Year In Review Reviews Block for Vue
Six superlatives worked out from a bakery's typed reviews: the first, the best month, the most helpful, the longest, the fastest after the visit and the most disagreed with, each shown with its review.
Installation
Overview
A set of review superlatives for Vue with Ark UI, for Fennhouse, a fictional neighbourhood bakery. A centred header counts the 16 typed reviews, then a band of six cells on shared hairlines, three by two, ends the block. Each cell names a superlative (the first review, the best month, the most helpful, the longest, the fastest after the visit, the most disagreed with), shows the figure that won it (a date, a month, a vote count, a word count, a number of days), says why in one line, and then shows the winning review in one line with its stars, title, reviewer and date. Every winner is computed when the file loads: the earliest date, the month with the best average among months with three or more reviews, the most helpful votes, the most words, the fewest days between the visit and the review, and the smallest side of the helpful and not-helpful votes. Nothing is picked by hand and nothing is coloured. On a phone the six cells stack and the sixth waits behind "Show all six". It's built from Rating, Button and Guides, with CSS transitions only.
FAQ
How do I use my own reviews?
Replace REVIEWS at the top of the file, oldest first. Each review has an id, name, rating from 1 to 5, an ISO date, the ISO date of the visit as bought, a title, a body, and its up and down vote counts. The six winners, their figures and their one-line reasons are all derived from those fields, so replacing the array replaces every cell.
How is each winner chosen?
The first review is the earliest date. The best month is the one with the highest average rating among months that have at least three reviews, and its cell shows that month's most helpful review. The most helpful has the most up votes; the longest has the most words; the fastest has the fewest days between the visit and the review; the most disagreed with has the largest smaller side of its up and down votes. Ties go to the earliest review in the list.
Is there a year picker?
No. It shows everything in the data, which here is the bakery's first season from June to October; the block is not tied to a calendar year. To show a different span, change the array.
How does it fit on a phone?
The cells stack in one column and the sixth is hidden until you press "Show all six", which flips its aria-expanded and keeps the hidden cell in the page. The review titles reserve two lines in every cell so the cells keep an even rhythm, and nothing scrolls sideways at 320 pixels.