---
title: A bookcase from Markdown
description: Turn a folder of book notes into a reading shelf with reusable cards and a query.
---

[@books]: ./shelf.components.md

# A bookcase from Markdown

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.

[@link.play Explore the bookcase](./index.demo.md#book-9780553283686)

<reading-bookcase>

<reading-shelf>

```query
exports: false
from: ./books
type: book
where:
  shelf: fiction
sort:
  - by: meta.title
component: reading-book
```

</reading-shelf>

<reading-shelf>

```query
exports: false
from: ./books
type: book
where:
  shelf: favorites
sort:
  - by: meta.title
component: reading-book
```

</reading-shelf>

</reading-bookcase>

## Add a book

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.

```md
---
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 shelf is a component

The [component file](./shelf.components.md) 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](../../docs/authoring/queries.reference.md) and
[components](../../docs/authoring/components.reference.md).

Source: <x-docs-source-link />