Fix alignment covers

.gitignore

@@ -199,4 +199,7 @@ cython_debug/
 #.idea/
 
 # PyPI configuration file
-.pypirc
+.pypirc
+
+.env
+.envrc

lib.py

@@ -1,14 +1,13 @@
 from pathlib import Path
-from typing import List, Self, Tuple, Optional
+from typing import List, Self, Tuple, Optional, Union
 from pydantic import BaseModel, computed_field
 from hashlib import md5
 from os import environ
 from glob import glob
 from logging import getLogger
 
 from PIL.Image import open as open_img, Image
-from ebooklib.epub import read_epub, EpubBook, IMAGE_MEDIA_TYPES, EpubCover
-from ebooklib import ITEM_COVER
+from ebooklib.epub import read_epub, EpubBook, IMAGE_MEDIA_TYPES, EpubCover, EpubImage
 from tinydb import TinyDB, Query
 
 logger = getLogger("uvicorn.error")
@@ -93,9 +92,21 @@ def make_book(path: Path) -> Book:
     title, _ = book.get_metadata("DC", "title")[0]
     creators = [i[0].replace(";", "") for i in book.get_metadata("DC", "creator")]
     language, _ = book.get_metadata("DC", "language")[0]
-    cover_image: EpubCover = book.get_item_with_id(
-        "cover-image"
-    ) or book.get_item_with_id("cover")
+
+    items = book.get_items()
+    cover_items = [
+        book.get_item_with_id("cover-image"),
+        book.get_item_with_id("cover"),
+        book.get_item_with_id("my-cover-image"),
+    ]
+
+    for i in items:
+        if (
+            isinstance(i, EpubCover)
+            or "cover" in i.get_id()
+            or i.get_name() == "images/title.jpg"
+        ) and i.media_type in IMAGE_MEDIA_TYPES:
+            cover_items.append(i)
 
     book = Book(
         title=title,
@@ -104,7 +115,9 @@ def make_book(path: Path) -> Book:
         language=language,
     )
 
-    if cover_image and cover_image.media_type in IMAGE_MEDIA_TYPES:
+    cover_items = [i for i in cover_items if i]
+    if cover_items:
+        cover_image: Union[EpubCover, EpubImage] = cover_items[0]
         file_ext = cover_image.file_name.split(".")[-1]
         file_name = f"{book.id}.{file_ext}"
         book.thumbnail_name = file_name

main.py

@@ -2,6 +2,7 @@
 from fastapi.responses import FileResponse
 from fastapi_utilities import repeat_every
 from contextlib import asynccontextmanager
+from random import shuffle
 import lib
 
 @asynccontextmanager
@@ -18,7 +19,10 @@ async def reparse_library():
 
 @app.get("/list-books")
 def list_books():
-    return lib.list_books()
+    books = lib.list_books()
+    shuffle(books)
+
+    return books
 
 
 @app.get("/download/{id}")

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "web",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",

web/src/components/BookCard.astro

@@ -3,43 +3,63 @@ const { id, title, creators, thumbnailName } = Astro.props;
 
 let imagePath;
 if (thumbnailName) {
-    imagePath = `/covers/sm/${thumbnailName}`
+    imagePath = `/covers/sm/${thumbnailName}`;
 } else {
-    imagePath = "/default_sm.jpg"
+    imagePath = "/default_sm.jpg";
 }
 ---
 
 <div class="book-card">
-    <a href=`/download/${id}`>
-        <img src={imagePath} />
-    </a>
-    <figcaption>
-        <p>
-            {title}
-        </p>
-        <p>
-            by {creators.join(", ")}
-        </p>
-    </figcaption>
+    <figure>
+        <a href=`/download/${id}` >
+            <img src={imagePath} alt=`The cover art for ${title}` class="cover"/>
+        </a>
+        <div class="title">
+            <p class="title-component">
+                {title}
+            </p>
+            <p class="title-component">
+                by {creators.join(", ")}
+            </p>
+        </div>
+    </figure>
 </div>
 
 <style>
     .book-card {
-        width: 200px;
-        margin: 5px;
-        padding: 10px;
+        max-width: 200px;
+        margin: 3px;
+        padding: 2px;
         border: 2px;
         border-radius: 6px;
         border-color: white;
         border-style: solid;
-
-        img {
-            margin: auto;
-            display: block;
-        }
+        display: flex;
+        justify-content: center;
+    }
 
-        figcaption {
-            text-align: center;
-        }
+    .cover {
+        border: 1px;
+        border-radius: 6px;
+        border-style: solid;
+        border-color: white;
+        display: flex;
+        justify-content: center;
+        width: 175px;
     }
-</style>
+
+    .title {
+        align-self: baseline;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .title-component {
+        margin: auto;
+        padding: 10px;
+        text-align: center;
+        line-height: 1.1rem;
+
+    }
+
+</style>

web/src/components/Books.astro

@@ -36,12 +36,15 @@ const data: Array<Book> = await response.json();
         display: flex;
         justify-content: center;
         vertical-align: middle;
-        position: relative;
-        margin: auto;
+        align-items: center;
+        margin-right: auto;
+        margin-left: auto;
     }
     .book-card-grid {
         display: grid;
-        width: 90%;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        width: 95%;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        column-gap: 10px;
+        row-gap: 2px;
     }
 </style>