Bookshelves crammed with lots of books

Almost a week ago, I noted a blog post by Ana Ulin: Adding Structured Book Data to My Blog Posts. Ana added a section to the front matter of her book posts that contains information about the book in question, including her rating. She was kind enough to share her example and the partial template that displays the information on her site. Because I use Grav rather than Hugo as my CMS I couldn’t just steal Ana's template, but I was more than happy to base my front matter directly on her’s.

The relevant section of the YAML front matter for the latest book is:

    title: "All the Light We Cannot See"
    author: "Anthony Doerr"
    url: ""
    year: "2017"
    started: "2020-07-01"
    finished: "2020-07-23"
    rating: "5"
    image: "all-the-light-we-cannot-see.jpg"

And the Twig partial template is:

<div class="h-cite bookcard flex" >
<div class="book-cover">
<a href={{ }} class="u-uid"><img src ="{{ page.url ~ '/' ~ }}" alt="Book cover"></a>
<p class="book-data">
<span class="p-item h-product">
<a href={{ }}>{{ }}</a></br>
by {{ }}</br>
Published: {{ }}</br>
Read from: {{|date("d M") }} to {{|date("d M") }}</br>
<data class="p-rating" value="{{ }}">My rating: 
{% for i in %}
{% endfor %}

That seems a lot more complex than the Hugo template, but it isn’t really, just different (although I am bit jealous of that string.Repeat function).

I’m very happy with the outcome, and I think I even got the microformats correct; thanks to Ana for inspiration. Now I “just” need to update all my existing reviews. With a snippet to inject the required details, I’m hoping it won’t take long and that I have no excuses for not writing more about the books I’ve read.

Also posted on IndieNews.

Two ways to respond: webmentions and comments


Webmentions allow conversations across the web, based on a web standard. They are a powerful building block for the decentralized social web.

“Ordinary” comments

These are not webmentions, but ordinary old-fashioned comments left by using the form below.

Reactions from around the web