Add ebook metadata, author and cover display

views/pages.templ

@@ -22,17 +22,38 @@ templ Layout(title string) {
 </html>
 }
 
+templ BookCover(book library.Book, detail bool) {
+  if book.HasCover {
+    <img class={ coverClass(detail) } src={ "/cover/" + book.ID } alt={ "Cover von " + book.Title } loading="lazy" />
+  } else {
+    <div class={ placeholderClass(detail) } aria-hidden="true">
+      <span>{ strings.ToUpper(book.Format) }</span>
+    </div>
+  }
+}
+
 templ IndexPage(books []library.Book) {
   @Layout("Bibliothek") {
-    <h2>Meine Bücher</h2>
+    <section class="page-head">
+      <h2>Meine Bücher</h2>
+      <p class="page-subtitle">Titel, Autor und Cover auf einen Blick.</p>
+    </section>
     if len(books) == 0 {
       <p>Keine eBooks gefunden. Lege EPUB- oder PDF-Dateien im Ordner <code>books/</code> ab.</p>
     } else {
       <ul class="book-list">
         for _, b := range books {
           <li class="book-item">
-            <a class="book-link" href={ "/book/" + b.ID }>{ b.Title }</a>
-            <span class="format">{ b.Format }</span>
+            <a class="book-card" href={ "/book/" + b.ID }>
+              <div class="book-card-cover">
+                @BookCover(b, false)
+              </div>
+              <div class="book-card-body">
+                <strong class="book-title">{ b.Title }</strong>
+                <span class="book-author">{ b.Author }</span>
+                <span class="format">{ b.Format }</span>
+              </div>
+            </a>
           </li>
         }
       </ul>
@@ -42,12 +63,40 @@ templ IndexPage(books []library.Book) {
 
 templ BookPage(book library.Book) {
   @Layout(book.Title) {
-    <article>
-      <h2>{ book.Title }</h2>
-      <p><strong>Datei:</strong> { book.Filename }</p>
-      <p><strong>Format:</strong> { book.Format }</p>
-      <p><a class="btn" href={ "/download/" + book.ID }>Auf Tolino herunterladen</a></p>
-      <p><a href="/">← Zurück zur Liste</a></p>
+    <article class="book-detail">
+      <div class="book-detail-cover">
+        @BookCover(book, true)
+      </div>
+      <div class="book-detail-body">
+        <p><a class="back-link" href="/">← Zurück zur Liste</a></p>
+        <h2>{ book.Title }</h2>
+        <p class="book-author-detail">{ book.Author }</p>
+        <dl class="book-meta">
+          <div>
+            <dt>Datei</dt>
+            <dd>{ book.Filename }</dd>
+          </div>
+          <div>
+            <dt>Format</dt>
+            <dd>{ book.Format }</dd>
+          </div>
+        </dl>
+        <p><a class="btn" href={ "/download/" + book.ID }>Auf Tolino herunterladen</a></p>
+      </div>
     </article>
   }
 }
+
+func coverClass(detail bool) string {
+  if detail {
+    return "book-cover book-cover-detail"
+  }
+  return "book-cover"
+}
+
+func placeholderClass(detail bool) string {
+  if detail {
+    return "book-cover-placeholder book-cover-placeholder-detail"
+  }
+  return "book-cover-placeholder"
+}