Keep a reading list as ordinary files. Each book has its own page; a query turns those pages into a bookcase of covers that open your notes.
Create a file such as books/educated.book.md. Its filename gives it the
book type; its heading supplies the title. Metadata supplies the other card
attributes.
---
shelf: favorites
author: Tara Westover
published: 2018
isbn: "9780399590504"
---
[@layout]: ../book.layout.md
[@books]: ../shelf.components.md
<reading-book-card>
<reading-book-cover isbn="9780399590504" title="Educated" />
<div class="book-copy">
# Educated
By Tara Westover · 2018
Notes on family, education, and finding a voice of your own.
</div>
</reading-book-card>
The shared reading-book-card component pairs each cover with its notes.
book.layout.md supplies the surrounding site navigation for standalone pages.
Place its cover at covers/9780399590504.jpg. The query picks up the new file,
and the cover opens its notes in a modal. The shelf field chooses its row. During development the shelf updates as you
edit. For static hosting, export again to publish those changes.
The component file defines the bookcase, shelf, and book in
HTML and CSS, with explanations alongside the working code and a rendered
example. The shelf's default slot holds the query results. Each card uses
href, title, author, and isbn attributes supplied by its result.
Change the query to choose or order books, and change the component to alter how they look. The book files remain useful on their own.
Read about queries and components.
Source: View source