Install eslint and prettier.

app/src/components/bookcard.js

@@ -1,25 +1,30 @@
 import PropTypes from "prop-types"
 import React from "react"
-import StarRatings from 'react-star-ratings';
-import { Card, Row, Col } from 'react-bootstrap';
+import StarRatings from "react-star-ratings"
+import { Card, Row, Col } from "react-bootstrap"
 
 const BookCard = ({ book }) => (
-  <Card style={{ width: '44rem', height: '12rem' }}>
+  <Card style={{ width: "44rem", height: "12rem" }}>
     <Row>
       <Col>
-        <Card.Img variant="side" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" />
+        <Card.Img
+          variant="side"
+          src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg"
+        />
       </Col>
       <Col>
         <Card.Body>
           <Card.Title>{book.title}</Card.Title>
           <StarRatings
-          rating={ parseFloat(book.rating) }
-          numberOfStars={5}
-          starDimension="18px"
-          starSpacing="1px"
-          starRatedColor="#fa604a"
-        />
-          <Card.Subtitle className="mb-2 text-muted">{book.author}</Card.Subtitle>
+            rating={parseFloat(book.rating)}
+            numberOfStars={5}
+            starDimension="18px"
+            starSpacing="1px"
+            starRatedColor="#fa604a"
+          />
+          <Card.Subtitle className="mb-2 text-muted">
+            {book.author}
+          </Card.Subtitle>
         </Card.Body>
       </Col>
     </Row>

app/src/components/feed.js

@@ -1,18 +1,16 @@
-import React from "react";
-import { Nav } from "react-bootstrap";
+import React from "react"
+import { Nav } from "react-bootstrap"
 import { StaticQuery, graphql } from "gatsby"
-import '../styles/sidebar.css'
+import "../styles/sidebar.css"
 import BookCard from "../components/bookcard"
 
-export default ({data, limit}) => {
-    return data.allBooksJson.edges.map(function(x, index) {
-        console.log(index, limit)
-        if(!limit || index < limit){
-            return (
-              <BookCard book={x.node} key={x.node.id} />
-            )
-        } else {
-            return null;
-        }
-    })
-};
+export default ({ data, limit }) => {
+  return data.allBooksJson.edges.map(function(x, index) {
+    console.log(index, limit)
+    if (!limit || index < limit) {
+      return <BookCard book={x.node} key={x.node.id} />
+    } else {
+      return null
+    }
+  })
+}

app/src/components/header.js

@@ -4,17 +4,17 @@ import React from "react"
 
 const Header = ({ siteTitle }) => (
   <header className="my-1 bg-red">
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+    <h1 style={{ margin: 0 }}>
+      <Link
+        to="/"
+        style={{
+          color: `white`,
+          textDecoration: `none`,
+        }}
+      >
+        {siteTitle}
+      </Link>
+    </h1>
   </header>
 )
 

app/src/components/layout.js

@@ -11,7 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`

app/src/components/sidebar.js

@@ -1,45 +1,48 @@
-import React from "react";
-import { Nav } from "react-bootstrap";
+import React from "react"
+import { Nav } from "react-bootstrap"
 import { StaticQuery, graphql } from "gatsby"
-import '../styles/sidebar.css'
+import "../styles/sidebar.css"
 
-function createSlug (categoryName) {
-    categoryName = categoryName.toLowerCase();
-    categoryName = categoryName.replace(/ /g, "-");
-    categoryName = categoryName.replace(/,/g, "");
-    return categoryName;
-};
+function createSlug(categoryName) {
+  categoryName = categoryName.toLowerCase()
+  categoryName = categoryName.replace(/ /g, "-")
+  categoryName = categoryName.replace(/,/g, "")
+  return categoryName
+}
 
 export default () => {
-    return (
-        <StaticQuery
-            query={graphql`query CategoryQuery {
-                allCategoriesJson {
-                  edges {
-                    node {
-                      id
-                      name
-                    }
-                  }
-                }
+  return (
+    <StaticQuery
+      query={graphql`
+        query CategoryQuery {
+          allCategoriesJson {
+            edges {
+              node {
+                id
+                name
               }
-            `}
-            render={data => (
-                <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
-                    activeKey="/home"
-                >
-                    <div className="sidebar-sticky">
-                    {data.allCategoriesJson.edges.map(function (x, index) {
-                        return (
-                            <Nav.Item>
-                                <Nav.Link href={createSlug(x.node.name)}>{x.node.name}</Nav.Link>
-                            </Nav.Item>
-                        )
-                    })}
-                    </div>
-                </Nav>
-            )}
-        />
-    );
-};
-
+            }
+          }
+        }
+      `}
+      render={data => (
+        <Nav
+          className="col-md-12 d-none d-md-block bg-light sidebar"
+          activeKey="/home"
+        >
+          <div className="sidebar-sticky">
+            {data.allCategoriesJson.edges.map(function(x, index) {
+              return (
+                <Nav.Item>
+                  <Nav.Link href={createSlug(x.node.name)}>
+                    {x.node.name}
+                  </Nav.Link>
+                </Nav.Item>
+              )
+            })}
+          </div>
+        </Nav>
+      )}
+    />
+  )
+}