add book purchase links

nesaku · Dec 19, 2023 · f71a430 · f71a430
1 parent b3a85fb
commit f71a430
Show file tree

Hide file tree

Showing 7 changed files with 745 additions and 578 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.16.0] - Dec 18, 2023
+
+## Added
+
+- Add get a copy/buy links - [(ISSUE)](https://github.com/nesaku/BiblioReads/issues/15)
+
+### Changed
+
+- Change the dark mode image background color
+
 ## [2.15.8] - Nov 25, 2023
 
 ### Added

diff --git a/components/authorpage/AuthorBooks.js b/components/authorpage/AuthorBooks.js
@@ -37,15 +37,15 @@ const AuthorBooks = (props) => {
                         .replace("._SY75_", "")
                         .replace("._SX50_", "")}&output=webp&maxage=30d`}
                       type="image/webp"
-                      className="rounded-lg shadow-sm drop-shadow-sm bg-white mx-auto"
+                      className="rounded-lg shadow-sm drop-shadow-sm bg-white dark:bg-slate-900 text-center mx-auto"
                     />
                     <source
                       srcSet={`/img?url=${data.cover
                         .replace("._SX50_SY75_", "")
                         .replace("._SY75_", "")
                         .replace("._SX50_", "")}&maxage=30d`}
                       type="image/jpeg"
-                      className="rounded-lg shadow-sm drop-shadow-sm bg-white mx-auto"
+                      className="rounded-lg shadow-sm drop-shadow-sm bg-white dark:bg-slate-900 text-center mx-auto"
                     />
                     <img
                       src={`/img?url=${data.cover
@@ -55,7 +55,7 @@ const AuthorBooks = (props) => {
                       alt={`${data.title} book cover`}
                       width="98"
                       height="148"
-                      className="rounded-lg border-2 shadow-sm drop-shadow-sm bg-white mx-auto mt-3"
+                      className="rounded-lg border-2 shadow-sm drop-shadow-sm bg-white dark:bg-slate-900 text-center mx-auto mt-3"
                       loading="lazy"
                     />
                   </picture>

diff --git a/components/global/Footer.js b/components/global/Footer.js
@@ -2,8 +2,8 @@ import React from "react";
 import Link from "next/link";
 
 const Footer = () => {
-  const version = "v2.15.8";
-  const versionSlug = "2158---nov-25-2023";
+  const version = "v2.16.0";
+  const versionSlug = "2160---dec-18-2023";
 
   if (typeof sessionStorage !== "undefined") {
     if (!sessionStorage.getItem("version")) {

diff --git a/components/resultpage/ResultData.js b/components/resultpage/ResultData.js
@@ -10,6 +10,20 @@ import Link from "next/link";
 
 const ResultData = ({ scrapedData }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [isOpened, setIsOpened] = useState(false);
+
+  const externalSVG = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -256 1850 1850"
+      className="w-5 h-5 ml-2 -mr-1"
+      fill="currentColor"
+    >
+      <g transform="matrix(1,0,0,-1,30.372881,1426.9492)">
+        <path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" />
+      </g>
+    </svg>
+  );
 
   return (
     <>
@@ -95,6 +109,86 @@ const ResultData = ({ scrapedData }) => {
               )}
 
               <div className="flex flex-col mt-0 lg:mt-16 xl:mt-0">
+                <div
+                  id="purchaseOptions"
+                  className="flex flex-col justify-center items-center relative"
+                >
+                  <button
+                    onClick={() => setIsOpened(!isOpened)}
+                    className="flex justify-center items-center h-16 w-72 py-5 px-4 mt-6 font-semibold text-md text-gray-900 dark:text-gray-300 bg-rose-50 dark:bg-gray-800 rounded-2xl shadow-sm shadow-rose-800 hover:shadow-xl hover:bg-rose-300 dark:hover:bg-slate-800 transition duration-300 delay-40 hover:delay-40 ring ring-gray-400 dark:ring-gray-500 hover:ring-rose-600 dark:hover:ring-rose-600 capitalize"
+                  >
+                    Get a copy
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="16"
+                      width="16"
+                      className="w-5 h-5 ml-4"
+                      fill="currentColor"
+                      viewBox="0 0 512 512"
+                    >
+                      <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
+                    </svg>
+                  </button>
+                  {isOpened && (
+                    <div className="absolute top-24 w-72 rounded-md shadow-lg mt-1 text-md font-medium bg-rose-50 dark:bg-gray-800 ring-2 ring-slate-400 dark:ring-slate-200 dark:ring-opacity-20">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://www.amazon.com/s?k=${encodeURIComponent(
+                          scrapedData.title
+                        )}`}
+                        className="flex justify-between items-center px-8 py-3 hover:bg-rose-300/80 dark:hover:bg-slate-700"
+                      >
+                        Amazon
+                        {externalSVG}
+                      </a>
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://www.barnesandnoble.com/s/${encodeURIComponent(
+                          scrapedData.title
+                        )}`}
+                        className="flex justify-between items-center px-8 py-3 hover:bg-rose-300/80 dark:hover:bg-slate-700"
+                      >
+                        Barnes &amp; Noble
+                        {externalSVG}
+                      </a>
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://www.abebooks.com/servlet/SearchResults?kn=${encodeURIComponent(
+                          scrapedData.title
+                        )}`}
+                        className="flex justify-between items-center px-8 py-3 hover:bg-rose-300/80 dark:hover:bg-slate-700"
+                      >
+                        AbeBooks
+                        {externalSVG}
+                      </a>
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://www.amazon.com/s?k=${encodeURIComponent(
+                          scrapedData.title
+                        )}&i=audible`}
+                        className="flex justify-between items-center px-8 py-3 hover:bg-rose-300/80 dark:hover:bg-slate-700"
+                      >
+                        Audible {externalSVG}
+                      </a>
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={`https://search.worldcat.org/search?q=${encodeURIComponent(
+                          scrapedData.title
+                        )}&itemType=book`}
+                        className="flex justify-between items-center px-8 py-3 hover:bg-rose-300/80 dark:hover:bg-slate-700"
+                      >
+                        Libraries
+                        {externalSVG}
+                      </a>
+                    </div>
+                  )}
+                </div>
+
                 {scrapedData.seriesURL && (
                   <div className="mt-4 items-center justify-center flex">
                     <Link
@@ -103,8 +197,8 @@ const ResultData = ({ scrapedData }) => {
                         ""
                       )}
                     >
-                      <a className="flex items-center h-16 w-72 py-5 px-4 mt-6 font-semibold text-md text-gray-900 dark:text-gray-300 bg-rose-50 dark:bg-gray-800 rounded-2xl shadow-sm shadow-rose-800 hover:shadow-xl hover:bg-rose-300 dark:hover:bg-slate-800 transition duration-300 delay-40 hover:delay-40 ring ring-gray-400 dark:ring-gray-500 hover:ring-rose-600 dark:hover:ring-rose-600">
-                        View More Books In This Series
+                      <a className="flex justify-center items-center h-16 w-72 py-5 px-4 mt-6 font-semibold text-md text-gray-900 dark:text-gray-300 bg-rose-50 dark:bg-gray-800 rounded-2xl shadow-sm shadow-rose-800 hover:shadow-xl hover:bg-rose-300 dark:hover:bg-slate-800 transition duration-300 delay-40 hover:delay-40 ring ring-gray-400 dark:ring-gray-500 hover:ring-rose-600 dark:hover:ring-rose-600">
+                        Browse This Series
                         <svg
                           aria-hidden="true"
                           className="w-5 h-5 ml-2 -mr-1"
@@ -122,7 +216,7 @@ const ResultData = ({ scrapedData }) => {
                     </Link>
                   </div>
                 )}
-                <div className="flex justify-around my-4">
+                <div id="quotes-questions" className="flex justify-around my-4">
                   {scrapedData.quotes != "Add" && (
                     <div className="mt-4 items-center justify-center flex">
                       <Link

diff --git a/components/resultpage/SimilarBooks.js b/components/resultpage/SimilarBooks.js
@@ -81,15 +81,15 @@ const SimilarBooks = ({ quotesURL, mobile }) => {
                             .replace("._SY75_", "")
                             .replace("._SX50_", "")}&output=webp&maxage=30d`}
                           type="image/webp"
-                          className="rounded-lg shadow-sm drop-shadow-sm bg-white mx-auto"
+                          className="rounded-lg shadow-sm drop-shadow-sm bg-white dark:bg-slate-800 text-center mx-auto"
                         />
                         <source
                           srcSet={`/img?url=${data.cover
                             .replace("._SX50_SY75_", "")
                             .replace("._SY75_", "")
                             .replace("._SX50_", "")}&maxage=30d`}
                           type="image/jpeg"
-                          className="rounded-lg shadow-sm drop-shadow-sm bg-white mx-auto"
+                          className="rounded-lg shadow-sm drop-shadow-sm bg-white dark:bg-slate-800 text-center mx-auto"
                         />
                         <img
                           src={`/img?url=${data.cover
@@ -99,7 +99,7 @@ const SimilarBooks = ({ quotesURL, mobile }) => {
                           alt={`${data.title} book cover`}
                           width="98"
                           height="148"
-                          className="rounded-lg border-2 shadow-sm drop-shadow-sm bg-white mx-auto mt-3"
+                          className="rounded-lg border-2 shadow-sm drop-shadow-sm bg-white dark:bg-slate-800 text-center mx-auto mt-3"
                           loading="lazy"
                         />
                       </picture>