goodreads-readme/api/templates/goodreads.html.j2

<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <foreignObject width="800" height="200">
    <div xmlns="http://www.w3.org/1999/xhtml" class="container">

      <style>

  div {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  }

  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Optional: Adds spacing between book items */
  }

  .book-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Ensures titles are at the bottom */
    width: 150px; /* Adjust to fit your needs */
    box-sizing: border-box;
  }

  .container {
    border-radius: 5px;
    padding: 10px 10px 10px 0px;
  }

  .reading {
    font-weight: bold;
    color: #53b14f;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .not-read {
    color: #ff1616;
  }

  .art {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: auto; /* Pushes the text to the bottom */
  }

  .cover {
    border-radius: 2px;
    max-height: 200px; /* Fixed height for book covers */
    width: auto; /* Maintains aspect ratio */
    display: block;
  }

  .text {
    text-align: center;
    margin-top: auto; /* Ensures the text stays at the bottom */
  }

  .book {
    font-size: 18px;
    color: #666;
  }

  .author {
    font-size: 14px;
    color: #b3b3b3;
    margin-top: 3px;
  }

  .logo {
    margin-left: 5px;
    margin-top: 5px;
  }
      </style>
      <div class="main">
        {% if books|length > 0 %}
        {% for book in books %}
        <div class="book-item">
          <center>
            <a class="art" href="" target="_BLANK">
              <img src="data:image/png;base64, {{ book.img }}" class="cover" />
            </a>
          </center>

          <div class="text">
            <div class="book">{{ book.title }}</div>
            <div class="author">by {{ book.author }}</div>
          </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="reading not-read">Nothing on Goodreads</div>
        {% endif %}
      </div>

    </div>
  </foreignObject>
</svg>