shadcn.io is not affiliated with official shadcn/ui
Paper Viewer About Block for Svelte
A paper viewer for a lab data platform: a vertical list of five papers at the start and the chosen paper drawn as a framed page at the end, with its venue, title, authors, abstract and one key figure.
Installation
Overview
A paper viewer for Svelte with Ark UI, written for Axonbase, a fictional lab data platform. A vertical tab list of five papers sits at the start, each with a short name, the venue and the length. A divider meets the band's top rule with a plus, and the chosen paper fills the end as a page in a frame: the venue line, the title in serif type, the authors with their initials, the abstract, and one key figure drawn in CSS and SVG (a line chart, a pair of bars or a scatter) with its finding written under it. The page of every paper is stacked unseen under the open one, so choosing a paper never moves the block. On a phone the list becomes a row of chips above the page. It's built from Tabs and Guides, with CSS for the entrance and your theme's tokens for every colour. For research and platform pages that want to show the work, not only list it. The papers, authors and figures are example data.
FAQ
How do I change the papers and their figures?
The papers are PAPERS at the top of the file: a short name, a title, a venue, the length, the authors, an abstract and a plot. A plot has a kind (line, bars or scatter), two series between 0 and 1 and two keys; the sentence under the figure is figure. The line series in the example are generated from the index by series(), so the same numbers render on the server and in the browser.
How are the figures read by a screen reader?
The drawing is hidden from assistive technology and the finding is the figure's caption, which says what the chart shows in a sentence, so no information is only in the picture. The keys under the drawing say which line or bar is which.
How do the tabs behave with a keyboard?
They are the library's tabs in a vertical list: one tab stop, the up and down arrows move between papers, and the open paper's page follows. The panel is a labelled region you can reach with Tab. Every page is the same height, so nothing below the block moves.
Why is there a hidden copy of every page?
Papers have different amounts of text. An unseen copy of all of them sits in the same grid cell as the live one, hidden from assistive technology and the keyboard (inert), so the cell is always as tall as the tallest page.