Add cover images

next.config.js

@@ -1,4 +1,99 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "archive.org",
+        port: "",
+        pathname: "/download/**",
+      },
+      {
+        protocol: "https",
+        hostname: "covers.openlibrary.org",
+        port: "",
+        pathname: "/b/id/**",
+      },
+      {
+        protocol: "https",
+        hostname: "images.isbndb.com",
+        port: "",
+        pathname: "/covers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/comicscovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/comicscovers_repository/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/covers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/editioncovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/fictioncovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/fictionruscovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.li",
+        port: "",
+        pathname: "/magzcovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.rs",
+        port: "",
+        pathname: "/covers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "libgen.rs",
+        port: "",
+        pathname: "/fictioncovers/**",
+      },
+      {
+        protocol: "https",
+        hostname: "reader.zlibcdn.com",
+        port: "",
+        pathname: "/books/**",
+      },
+      {
+        protocol: "https",
+        hostname: "static.1lib.sk",
+        port: "",
+        pathname: "/covers/books/**",
+      },
+      {
+        protocol: "https",
+        hostname: "static.3lib.net",
+        port: "",
+        pathname: "/covers/books/**",
+      },
+    ],
+  },
+};
 
 module.exports = nextConfig;

src/components/Card/Card.module.css

@@ -7,49 +7,50 @@
   padding: 1rem;
   border-top: 0.14rem solid rgba(195, 195, 195);
   gap: 1rem;
+  color: white;
 }
 
 .cover {
-  flex-shrink: 0;
-  position: relative;
-  object-fit: cover;
+  object-fit: contain;
   overflow: hidden;
-  width: 128px;
-  height: 64px;
+  padding: 0;
+  min-width: 72px;
+  max-width: 72px;
 }
 
 .bookInfo {
   display: flex;
   flex-direction: column;
-  margin-left: 1rem;
+  margin-right: auto;
   row-gap: 0.6rem;
 }
 
 .title {
   font-size: 1.2em;
-  color: #ffffff;
+}
+
+.true_title {
+  font-size: 1em;
+  color:rgb(181, 181, 181);
+  margin-top: -0.6rem;
 }
 
 .source {
   font-size: 1em;
-  color: #ffffff;
+  margin-top: auto;
 }
 
 .fileInfo {
   display: flex;
   flex-direction: column;
-  color: #ffffff;
   text-align: right;
   flex-shrink: 0;
 }
 
 .size {
-  color: #ffffff;
   font-size: 1em;
-
 }
 
 .extension {
-  color: #ffffff;
   font-size: 0.9em;
 }

src/components/Card/Card.tsx

@@ -1,20 +1,55 @@
 "use client";
 
 import styles from "./Card.module.css";
+import Image from "next/image";
+import ImageWithFallback from "../ImageWithFallback/ImageWithFallback";
 
 type CardInterface = {
   id: string;
   title: string;
+  true_title: string;
   sources: string[];
   size: string;
   extension: string;
+  description: string;
+  cover: string;
 };
 
-function Card({ id, title, sources, size, extension }: CardInterface) {
+function Card({
+  id,
+  title,
+  true_title,
+  sources,
+  size,
+  extension,
+  description,
+  cover,
+}: CardInterface) {
   return (
     <div className={styles.wrapper}>
+      {cover ? (
+        <ImageWithFallback
+          src={cover}
+          fallbackSrc={"/placeholder_dark.avif"}
+          alt="Cover image of a book"
+          height={102}
+          width={72}
+          className={styles.cover}
+          unoptimized={true}
+        />
+      ) : (
+        <Image
+          src={"/placeholder_light.avif"}
+          alt="Placeholder image"
+          height={102}
+          width={72}
+          className={styles.cover}
+          unoptimized={true} // Optimizing avif increases file size
+        />
+      )}
       <div className={styles.bookInfo}>
         <span className={styles.title}>{title}</span>
+        <span className={styles.true_title}>{true_title}</span>
         <span className={styles.source}>{sources.join(" | ")}</span>
       </div>
 

src/components/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState } from "react";
+import Image, { ImageProps } from "next/image";
+
+interface ImageWithFallbackProps extends ImageProps {
+  fallbackSrc: string;
+}
+
+// https://stackoverflow.com/a/66953317
+const ImageWithFallback = (props: ImageWithFallbackProps) => {
+  const { src, fallbackSrc, ...rest } = props;
+  const [imgSrc, setImgSrc] = useState(src);
+  // const [isUnoptimized, setIsUnoptimized] = useState(false);
+
+  return (
+    <Image
+      {...rest}
+      src={imgSrc}
+      onError={() => {
+        setImgSrc(fallbackSrc);
+        // setIsUnoptimized(true);
+      }}
+      // unoptimized={isUnoptimized}
+    />
+  );
+};
+
+export default ImageWithFallback;

src/components/ImageWithFallback/index.js

@@ -0,0 +1,2 @@
+export * from "./ImageWithFallback";
+export { default } from "./ImageWithFallback";

src/components/SearchResultList/SearchResultList.tsx

@@ -45,9 +45,12 @@ function SearchResultList({ searchResults }: SearchResultListInterface) {
           key={book.id}
           id={book.id}
           title={book.title}
+          true_title={book.true_title}
           sources={book.sources}
           size={round(book.size / 1048576, 2).toFixed(1)} // to mebibytes
           extension={book.extension}
+          description={book.description}
+          cover={book.cover}
         />
       ))}
     </div>

src/data/book-data.ts

@@ -1,7 +1,10 @@
 export interface Book {
   id: string;
   title: string;
+  true_title: string;
   sources: string[];
   size: number;
   extension: string;
+  description: string;
+  cover: string;
 }

src/lib/xata.ts

@@ -1,4 +1,4 @@
-// Generated by Xata Codegen 0.28.2. Please do not edit.
+// Generated by Xata Codegen 0.28.3. Please do not edit.
 import { buildClient } from "@xata.io/client";
 import type {
   BaseClientOptions,
@@ -17,6 +17,8 @@ const tables = [
       { name: "sources", type: "multiple" },
       { name: "md5", type: "string" },
       { name: "embeddings", type: "vector", vector: { dimension: 1024 } },
+      { name: "description", type: "text", notNull: true, defaultValue: "" },
+      { name: "cover", type: "string", notNull: true, defaultValue: "" },
     ],
   },
 ] as const;