product comment

src/components/ProductPage/Comments.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import './Comments.scss';
+
+export default function Comments({ comments = [] }) {
+  return <div id="productComments">
+    <h3>Comments</h3>
+    <ul className="comment-list">
+      {comments.map((comment) => (
+        <li key={comment.commentId}>
+          <div className='user-name'>{comment.userName}</div>
+          <p className='comment'>{comment.comment}</p>
+        </li>
+      ))}
+    </ul>
+  </div>;
+}
+
+export const layout = {
+  areaId: 'productPageMiddleLeft',
+  sortOrder: 45
+}
+
+export const query = `
+  query {
+    comments(productId: getContextValue("productId")) {
+      commentId
+      userName
+      comment
+      createdAt
+    }
+  }
+`;

src/components/ProductPage/Comments.scss

@@ -0,0 +1,18 @@
+
+.comment-list  {
+  margin-bottom: 20px;
+  li {
+    padding: 10px 0;
+    border-bottom: 1px solid #eee;
+    :last-child {
+      border-bottom: 0;
+    }
+  }
+  .user-name {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  .comment{
+    font-style: italic;
+  }
+}

src/pages/404.md

@@ -0,0 +1,11 @@
+---
+title: Not Found
+hero: This does not exist
+permalink: /404.html
+sitemap: false
+---
+
+## 404
+Sorry, but the page you were trying to view is gone amiss---perhaps you can try a site search to find it.
+
+{% include site-search.html %}

src/pages/privacy.md

@@ -0,0 +1,9 @@
+---
+title: Privacy
+permalink: /privacy/
+hero: Privacy
+---
+
+This website does not collect or store any data and does not use cookies or tracking/analytics services.
+
+This site uses the Gumroad e-commerce platform. Please refer to  [privacy policy] for further information.