utils: Store only text as description.

app/gatsby-node.js

@@ -22,6 +22,8 @@ exports.createPages = async function ({ actions, graphql }) {
               author
               year
               category
+              image_url
+              description
             }
           }
         }

app/src/components/bookcard.js

@@ -3,18 +3,27 @@ import React from "react"
 import StarRatings from "react-star-ratings"
 import { Card, Row, Col } from "react-bootstrap"
 
+const truncateContent = (content) => {
+  if (!content) {
+    return ""
+  }
+  return content.length > 600 ? content.substring(0, 600) + "..." : content
+};
+
+
 const BookCard = ({ book }) => (
-  <Card style={{ width: "44rem", height: "12rem" }}>
+  <Card style={{ width: "44rem", height: "24rem", marginBottom: "15px" }}>
     <Row>
-      <Col>
+      <Col xs={3}>
         <Card.Img
-          variant="side"
-          src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg"
+          style={{ height: "12rem", width: "8rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px"}}
+          src={book.image_url}
         />
       </Col>
       <Col>
         <Card.Body>
           <Card.Title>{book.title}</Card.Title>
+          <Card.Subtitle className="mb-2 text-muted">
           <StarRatings
             rating={parseFloat(book.rating)}
             numberOfStars={5}
@@ -22,9 +31,12 @@ const BookCard = ({ book }) => (
             starSpacing="1px"
             starRatedColor="#fa604a"
           />
-          <Card.Subtitle className="mb-2 text-muted">
+          <br />
             {book.author}
           </Card.Subtitle>
+          <p>
+          {truncateContent(book.description)}
+          </p>
         </Card.Body>
       </Col>
     </Row>

app/src/pages/index.js

@@ -53,6 +53,8 @@ export const query = graphql`
           author
           year
           category
+          description
+          image_url
         }
       }
     }