add support for viewing individual quotes

nesaku · May 10, 2024 · 3839387 · 3839387
1 parent ffacbac
commit 3839387
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,11 +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.23.0] - May 5, 2024
+## [2.23.0] - May 10, 2024
 
 ### Added
 
 - Add a "View on Goodreads" button to 404 pages - [(ISSUE)](https://codeberg.org/nesaku/BiblioReads/issues/83)
+- Add support for viewing individual quotes
+
+### Changed
+
+- Use the 301 status code (permanent) instead of 302 for server side redirects
 
 ### Fixed
 

diff --git a/components/global/Footer.js b/components/global/Footer.js
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 const Footer = () => {
   const version = "v2.23.0";
-  const versionSlug = "2230---may-5-2024";
+  const versionSlug = "2230---may-10-2024";
 
   useEffect(() => {
     if (typeof sessionStorage !== "undefined") {

diff --git a/components/quotespage/QuoteCard.js b/components/quotespage/QuoteCard.js
@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import { useState } from "react";
-import Link from "next/link";
 
 const QuoteCard = (props) => {
   const [isReadMore, setIsReadMore] = useState(true);
@@ -17,52 +16,65 @@ const QuoteCard = (props) => {
           key={i}
           className="max-w-[1820px] mx-2 sm:mx-4 my-4 py-4 px-2 sm:px-8 bg-white/40 dark:bg-slate-800/60 rounded-2xl hover:ring hover:ring-rose-600 hover:bg-rose-300 dark:hover:bg-rose-900 transition duration-300 delay-40 hover:delay-40"
         >
-          <div className="flex flex-col justify-center">
-            <div className="flex items-center justify-between">
-              {data.img && (
-                <Link
-                  href={data.imgURL
-                    .replace(
-                      "https://images.gr-assets.com",
-                      "/img?url=https://images.gr-assets.com"
-                    )
-                    .replace(
-                      "https://i.gr-assets.com",
-                      "/img?url=https://i.gr-assets.com"
-                    )}
-                >
-                  <div className="hidden w-[240px] lg:block overflow-hidden hover:rounded-xl ml-10 px-4">
-                    <picture>
-                      <source
-                        srcSet={`/img?url=${data.img}&output=webp&maxage=30d`}
-                        type="image/webp"
-                        className="rounded-md shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
-                      />
-                      <source
-                        srcSet={`/img?url=${data.img}&maxage=30d`}
-                        type="image/jpeg"
-                        className="rounded-md shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
-                      />
-                      <img
-                        src={`/img?url=${data.img}&maxage=30d`}
-                        alt={`${data.imgAlt}`}
-                        className="rounded-md border-2 shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
-                        loading="lazy"
-                        width="60"
-                        height="120"
-                      />
-                    </picture>
-                  </div>
-                </Link>
-              )}
-              <div className="mt-8 space-y-8">
-                <div
-                  className={`flex flex-col items-start ml-4 md:ml-6 text-gray-800 dark:text-gray-300 ${
-                    data.mobile ? "max-w-4xl" : "max-w-none"
-                  } text-left`}
-                >
-                  {data.text.length < 300 ? (
-                    <>
+          <div
+            className={`flex items-center justify-between ${
+              props.singleQuote && "p-6"
+            }`}
+          >
+            {data.img && (
+              <div className="hidden w-[240px] lg:block overflow-hidden hover:rounded-xl ml-10 px-4">
+                <picture>
+                  <source
+                    srcSet={`/img?url=${data.img}&output=webp&maxage=30d`}
+                    type="image/webp"
+                    className="rounded-md shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
+                  />
+                  <source
+                    srcSet={`/img?url=${data.img}&maxage=30d`}
+                    type="image/jpeg"
+                    className="rounded-md shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
+                  />
+                  <img
+                    src={`/img?url=${data.img}&maxage=30d`}
+                    alt={`${data.imgAlt}`}
+                    className="rounded-md border-2 shadow-sm drop-shadow-sm bg-white dark:bg-slate-900"
+                    loading="lazy"
+                    width="60"
+                    height="120"
+                  />
+                </picture>
+              </div>
+            )}
+            <div className={`${!props.singleQuote && "mt-8 space-y-8"}`}>
+              <div
+                className={`flex flex-col items-start ml-4 md:ml-6 text-gray-800 dark:text-gray-300 ${
+                  data.mobile ? "max-w-4xl" : "max-w-none"
+                } text-left`}
+              >
+                {data.text.length < 300 ? (
+                  <>
+                    <span>{data.text}</span>
+                    <span className="pt-4 font-bold ">
+                      - {data.author}
+                      {data.bookURL ? (
+                        <a
+                          className="hover:underline"
+                          href={
+                            data.bookURL +
+                            "-" +
+                            data.book.toLowerCase().replaceAll(" ", "-")
+                          }
+                        >
+                          {data.book}
+                        </a>
+                      ) : (
+                        <span>{data.book}</span>
+                      )}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className={isReadMore ? "hidden" : "block"}>
                       <span>{data.text}</span>
                       <span className="pt-4 font-bold ">
                         - {data.author}
@@ -81,82 +93,59 @@ const QuoteCard = (props) => {
                           <span>{data.book}</span>
                         )}
                       </span>
-                    </>
-                  ) : (
-                    <>
-                      <span className={isReadMore ? "hidden" : "block"}>
-                        <span>{data.text}</span>
-                        <span className="pt-4 font-bold ">
-                          - {data.author}
-                          {data.bookURL ? (
-                            <a
-                              className="hover:underline"
-                              href={
-                                data.bookURL +
-                                "-" +
-                                data.book.toLowerCase().replaceAll(" ", "-")
-                              }
-                            >
-                              {data.book}
-                            </a>
-                          ) : (
-                            <span>{data.book}</span>
-                          )}
-                        </span>
-                      </span>
-                      <span
-                        className={
-                          isReadMore ? "block h-12 overflow-hidden" : "hidden"
-                        }
-                      >
-                        <span>{data.text}</span>
-                      </span>
-                      <span
-                        onClick={toggleReadMore}
-                        className="p-0.5 rounded-sm underline decoration-2 decoration-rose-800 hover:text-white hover:bg-rose-800 transition duration-150 delay-150 hover:delay-100 cursor-pointer"
-                      >
-                        {isReadMore ? " ...read more." : "(Show less)"}
-                      </span>
-                    </>
-                  )}
-                </div>
+                    </span>
+                    <span
+                      className={
+                        isReadMore ? "block h-12 overflow-hidden" : "hidden"
+                      }
+                    >
+                      <span>{data.text}</span>
+                    </span>
+                    <span
+                      onClick={toggleReadMore}
+                      className="p-0.5 rounded-sm underline decoration-2 decoration-rose-800 hover:text-white hover:bg-rose-800 transition duration-150 delay-150 hover:delay-100 cursor-pointer"
+                    >
+                      {isReadMore ? " ...read more." : "(Show less)"}
+                    </span>
+                  </>
+                )}
               </div>
             </div>
-            {data.likes && (
-              <div
-                id="review-likes"
-                className="flex align-middle items-center mt-4"
-              >
-                <div className="ml-6 mt-1">
-                  <svg
-                    fill="#e5e7eb"
-                    height="32px"
-                    width="32px"
-                    version="1.1"
-                    viewBox="0 0 80 90"
-                    className="fill-slate-600 dark:fill-slate-500"
-                  >
-                    <g id="bgCarrier" strokeWidth="0"></g>
-                    <g
-                      id="tracerCarrier"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    ></g>
-                    <g id="iconCarrier">
-                      <g>
-                        <path d="M51.735,20h-2.934c1.419-3.934,2.799-9.714,0.942-14.247c-1.095-2.673-3.177-4.574-6.021-5.496 C43.197,0.086,42.651,0,42.101,0c-3.701,0-7.05,3.613-11.944,12.888c-2.199,4.171-5.364,7.683-7.593,9.577 c-0.946,0.804-1.702,1.624-2.315,2.431c-1.69-2.512-4.558-4.167-7.806-4.167c-5.185,0-9.404,4.219-9.404,9.404v27.294 c0,5.186,4.219,9.404,9.404,9.404c3.406,0,6.386-1.827,8.036-4.546c2.212,2.728,5.586,4.477,9.364,4.477h23.023 c9.507,0,10.926-6.136,10.926-9.793v-24.91C63.793,25.41,58.384,20,51.735,20z M15.847,57.427c0,1.877-1.527,3.404-3.403,3.404 c-1.877,0-3.404-1.527-3.404-3.404V30.133c0-1.877,1.527-3.404,3.404-3.404c1.876,0,3.403,1.527,3.403,3.404V57.427z M57.793,56.969c0,2.221-0.354,3.793-4.926,3.793H29.844c-3.34,0-6.058-2.717-6.058-6.057V32.059l0.008-0.095l-0.021-0.176 c-0.006-0.096-0.106-2.386,2.676-4.75c2.656-2.258,6.419-6.425,9.015-11.351c4.132-7.83,6.104-9.353,6.639-9.641 c1.039,0.388,1.688,1.007,2.087,1.981c1.293,3.156-0.331,9.224-2.603,13.587l-2.283,4.385h12.43c3.341,0,6.059,2.718,6.059,6.059 V56.969z"></path>
-                      </g>
+          </div>
+          {data.likes && (
+            <div
+              id="review-likes"
+              className="flex align-middle items-center mt-4"
+            >
+              <div className="ml-6 mt-1">
+                <svg
+                  fill="#e5e7eb"
+                  height="32px"
+                  width="32px"
+                  version="1.1"
+                  viewBox="0 0 80 90"
+                  className="fill-slate-600 dark:fill-slate-500"
+                >
+                  <g id="bgCarrier" strokeWidth="0"></g>
+                  <g
+                    id="tracerCarrier"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  ></g>
+                  <g id="iconCarrier">
+                    <g>
+                      <path d="M51.735,20h-2.934c1.419-3.934,2.799-9.714,0.942-14.247c-1.095-2.673-3.177-4.574-6.021-5.496 C43.197,0.086,42.651,0,42.101,0c-3.701,0-7.05,3.613-11.944,12.888c-2.199,4.171-5.364,7.683-7.593,9.577 c-0.946,0.804-1.702,1.624-2.315,2.431c-1.69-2.512-4.558-4.167-7.806-4.167c-5.185,0-9.404,4.219-9.404,9.404v27.294 c0,5.186,4.219,9.404,9.404,9.404c3.406,0,6.386-1.827,8.036-4.546c2.212,2.728,5.586,4.477,9.364,4.477h23.023 c9.507,0,10.926-6.136,10.926-9.793v-24.91C63.793,25.41,58.384,20,51.735,20z M15.847,57.427c0,1.877-1.527,3.404-3.403,3.404 c-1.877,0-3.404-1.527-3.404-3.404V30.133c0-1.877,1.527-3.404,3.404-3.404c1.876,0,3.403,1.527,3.403,3.404V57.427z M57.793,56.969c0,2.221-0.354,3.793-4.926,3.793H29.844c-3.34,0-6.058-2.717-6.058-6.057V32.059l0.008-0.095l-0.021-0.176 c-0.006-0.096-0.106-2.386,2.676-4.75c2.656-2.258,6.419-6.425,9.015-11.351c4.132-7.83,6.104-9.353,6.639-9.641 c1.039,0.388,1.688,1.007,2.087,1.981c1.293,3.156-0.331,9.224-2.603,13.587l-2.283,4.385h12.43c3.341,0,6.059,2.718,6.059,6.059 V56.969z"></path>
                     </g>
-                  </svg>
-                </div>
-                <div>
-                  <p className="ml-1 text-slate-800 dark:text-gray-100">
-                    {data.likes}
-                  </p>
-                </div>
+                  </g>
+                </svg>
               </div>
-            )}
-          </div>
+              <div>
+                <p className="ml-1 text-slate-800 dark:text-gray-100">
+                  {data.likes}
+                </p>
+              </div>
+            </div>
+          )}
         </div>
       ))}
     </>

diff --git a/components/quotespage/QuotesResultData.js b/components/quotespage/QuotesResultData.js
@@ -5,7 +5,7 @@ import Link from "next/link";
 import Meta from "../global/Meta";
 import QuoteCard from "./QuoteCard";
 
-const QuotesResults = ({ scrapedData }) => {
+const QuotesResults = ({ scrapedData, singleQuote }) => {
   const [inputValue, setInputValue] = useState("");
   const [validQuery, setValidQuery] = useState(true);
 
@@ -23,9 +23,11 @@ const QuotesResults = ({ scrapedData }) => {
   return (
     <div
       id="quotesResults"
-      className="flex flex-col p-12 justify-center items-center text-center"
+      className={`flex flex-col p-12 justify-center items-center text-center ${
+        singleQuote && "min-h-[80vh] m-auto max-w-7xl"
+      }`}
     >
-      <Meta title={scrapedData.name} />
+      <Meta title={scrapedData.name ? scrapedData.name : "Quotes"} />
       {scrapedData.quotes != "" && (
         <>
           <div className="flex flex-col lg:flex-row justify-center items-center">
@@ -63,15 +65,18 @@ const QuotesResults = ({ scrapedData }) => {
               </div>
             )}
           </div>
-          <h2 className="max-w-xl font-bold text-5xl pt-4 pb-5 my-2 underline decoration-rose-600 dark:text-gray-100/80 capitalize">
+
+          <h1 className="max-w-xl font-bold text-5xl pt-4 pb-5 my-2 underline decoration-rose-600 dark:text-gray-100/80 capitalize">
             {scrapedData.name && `${scrapedData.name}:`}
-          </h2>
+            {singleQuote && <span className="normal-case">Quote:</span>}
+          </h1>
+
           {scrapedData.name && (
-            <div>
+            <div id="quoteSearchBox">
               <form onSubmit={onSubmit}>
-                <h1 className="text-2xl text-black dark:text-gray-200/80 font-semibold">
+                <h2 className="text-2xl text-black dark:text-gray-200/80 font-semibold">
                   Search For A Tag:
-                </h1>
+                </h2>
                 <div className="flex justify-center text-center">
                   <div className="flex flex-col sm:flex-row items-center">
                     <div className="mt-4">
@@ -118,7 +123,7 @@ const QuotesResults = ({ scrapedData }) => {
               )}
             </div>
           )}
-          {scrapedData.popularTags && (
+          {scrapedData.popularTags && !singleQuote && (
             <>
               <div className="hidden lg:flex flex-wrap justify-center align-middle items-center max-w-7xl">
                 <h3 className="text-lg font-bold pr-12">Popular Tags:</h3>
@@ -228,7 +233,9 @@ const QuotesResults = ({ scrapedData }) => {
           </h2>
         </div>
       )}
-      {scrapedData.quotes && <QuoteCard quotes={scrapedData.quotes} />}
+      {scrapedData.quotes && (
+        <QuoteCard quotes={scrapedData.quotes} singleQuote={singleQuote} />
+      )}
     </div>
   );
 };