books.vto

---
title: Books
description: Find out what books I have been reading lately
---

{{ layout "core.vto" }}
<article>
    <header>
      <h1>Books</h1>
    </header>
    <div class="notice">
      <hr class="hidden" />
      <h3>
        <span>📚</span>
        How the rating system works
      </h3>
      <p>If a book has the loudspeaker emoji <span>(📣)</span>, it means that I found it interesting/enjoyable/compelling enough to bring it up in a discussion without being prompted.</p>
      <hr class="hidden" />
    </div>
    <div id="post-body">
      {{ for yearGroup of books }}
      {{> const goalProgress = yearGroup.books.filter(b => b.progress === 100).length }}
      {{> const goalCompletion = (goalProgress * 100) / yearGroup.goal }}
      <div class="grid-list">
        <header>
          <h2>{{ yearGroup.list }}</h2>
          {{ if yearGroup.goal }}
          <div id="post-meta">
            Yearly goal: {{ goalProgress }} / {{ yearGroup.goal }} books completed ({{ Math.round(goalCompletion) }}%)
          </div>
          {{ /if }}
        </header>
        <ul role="list">
        {{ for item of yearGroup.books }}
        <li>
          <div>
            <img alt="A cover photo of the book titled {{ item.title }}" src="{{ item.cover }}" />
            <figcaption style="display: none;">You can learn more by visiting <a target="_blank" href={{ item.link }}>{{ item.link }}</a></figcaption>
            <a href="{{ item.link }}" target="_blank" rel="noopener noreferer">
              <span>{{ item.title }}</span>
            </a>
          </div>
          <dl>
            {{ if item.progress === 100 && item.rating !== null }}
            <div>
              <dd>{{ item.date_finished?.toISOString().split("T")[0] }} {{ if item.recommended }}· <span>📣</span>{{ /if }}
            </div>
            {{ /if }}
            {{ if item.progress !== 100 }}
            <p>{{ item.progress}}% read</p>
            {{ /if }}
          </dl>
        </li>
        {{ /for }}
        </ul>
      </div>
      {{ /for }}
    </div>
  </article>
{{ /layout }}