From 0fb5d6ef41fded211f03d84e412372923e5a463d Mon Sep 17 00:00:00 2001
From: benjaminramey <benramey@fastmail.com>
Date: Wed, 23 Sep 2020 17:03:26 -0500
Subject: [PATCH] Fix several issues from copying and pasting into react

---
 src/components/footer.js | 12 ++++---
 src/components/header.js | 10 +++---
 src/components/nav.js    |  4 +--
 src/templates/page.js    |  4 +--
 src/templates/post.js    | 70 ++++++++++++++++++++--------------------
 5 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/src/components/footer.js b/src/components/footer.js
index 3714022..47915ea 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -6,16 +6,18 @@ export default function Footer() {
     const year = date.getYear() + 1900;
 
     return (
-        <footer class="footer">
-            <div class="container">
+        <footer className="footer">
+            <div className="container">
                 <small>
-                    &copy; <time datetime={timestamp}>{year}</time>.
+                    &copy; <time dateTime={timestamp}>{year}</time>.
                     All rights reserved.
                 </small>
             </div>
-            <div class="container">
+            <div className="container">
                 <hr />
-                <div class="LI-profile-badge"  data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="benjaminstevenramey"><a class="LI-simple-link" href='https://www.linkedin.com/in/benjaminstevenramey?trk=profile-badge'>Benjamin Ramey</a></div>
+                <div className="LI-profile-badge"  data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="benjaminstevenramey">
+                    <a className="LI-simple-link" href='https://www.linkedin.com/in/benjaminstevenramey?trk=profile-badge'>Benjamin Ramey</a>
+                </div>
             </div>
         </footer>
     );
diff --git a/src/components/header.js b/src/components/header.js
index fc282fd..17206b6 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -3,14 +3,14 @@ import React from "react";
 export default function Header() {
     return (
         <header>
-            <div class="container">
-                <div class="d-flex justify-content-between align-item-center">
-                    <a href="/" class="d-flex justify-content-start align-items-center mr-2" title="Home">
+            <div className="container">
+                <div className="d-flex justify-content-between align-item-center">
+                    <a href="/" className="d-flex justify-content-start align-items-center mr-2" title="Home">
                         <img src="https://en.gravatar.com/userimage/738990/32d8e61848233a67f5e02dcc43be0ff8.jpeg"
                             alt="Gravatar" />
-                        <span class="ml-2">Ben Ramey's Blog</span>
+                        <span className="ml-2">Ben Ramey's Blog</span>
                     </a>
-                    <div class="d-none d-sm-flex flex-column justify-content-around ml-2">
+                    <div className="d-none d-sm-flex flex-column justify-content-around ml-2">
                         <small>Scripture, programming problems, solutions and stories.</small>
                     </div>
                 </div>
diff --git a/src/components/nav.js b/src/components/nav.js
index c3b222d..2d1cbaa 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -2,8 +2,8 @@ import React from "react";
 
 export default function Nav() {
     return (
-        <nav class="main">
-            <div class="container d-flex justify-content-center">
+        <nav className="main">
+            <div className="container d-flex justify-content-center">
                 {/* {% for page in site.pages %}
                 {% if page.title != null %}
                 {% if page.layout == "page" %} */}
diff --git a/src/templates/page.js b/src/templates/page.js
index eada32e..c9c9cc7 100644
--- a/src/templates/page.js
+++ b/src/templates/page.js
@@ -4,8 +4,8 @@ import Layout from "../components/layout"
 export default function Page({ children }) {
     return (
         <Layout>
-            <article class="page">
-                <h1 class="page-title">page.title</h1>
+            <article className="page">
+                <h1 className="page-title">page.title</h1>
                 {children}
             </article>
         </Layout>
diff --git a/src/templates/post.js b/src/templates/post.js
index 7a7ff8d..1c3a7ef 100644
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -7,46 +7,41 @@ export default function Post({ data }) {
   const post = data.markdownRemark;
 
   var tags = post.frontmatter.tags.map((tag) => {
-    return (<a href={'/tags/' + tag }>#{tag}</a>);
+    return (<a key={tag} href={'/tags/' + tag }>#{tag}</a>);
   });
   var categories = post.frontmatter.categories.map((category) => {
-    return (<a href={'/categories/' + category }>#{category}</a>);
+    return (<a key={category} href={'/categories/' + category }>#{category}</a>);
   });
-  var postDate = new Date(post.frontmatter.date);
-  console.log(postDate);
-  var isoDate = postDate.toISOString();
-  var visibleDate = postDate.toDateString();
-
+  
   return (
     <Layout>
-      <div>
-        <article className="post">
-            <h1 className="post-title">{post.frontmatter.title}</h1>
-            <div className="post-info d-flex justify-content-start">
-                <time datetime={isoDate} className="post-date">{visibleDate}</time>
-                <nav className="post-tags">
-                    {tags}
-                </nav>
-                <nav className="post-categories">
-                    <span>posted in:</span>
-                    {categories}
-                </nav>
-            </div>
-            <div dangerouslySetInnerHTML={{ __html: post.html }} />
-        </article>
+      <article className="post">
+          <h1 className="post-title">{post.frontmatter.title}</h1>
+          <div className="post-info d-flex justify-content-start">
+              <time dateTime={post.frontmatter.isoDate} className="post-date">
+                {post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
+              </time>
+              <nav className="post-tags">
+                  {tags}
+              </nav>
+              <nav className="post-categories">
+                  <span>posted in:</span>
+                  {categories}
+              </nav>
+          </div>
+          <div dangerouslySetInnerHTML={{ __html: post.html }} />
+      </article>
 
-        <DiscussionEmbed 
-          shortname='fishybusiness'
-          config={
-              {
-                  url: "https://" + data.site.host + ":" + data.site.port,
-                  identifier: post.slug,
-                  title: post.frontmatter.title,
-                  language: 'en_US'
-              }
-          }/>
-
-      </div>
+      <DiscussionEmbed 
+        shortname='fishybusiness'
+        config={
+            {
+                url: "https://" + data.site.host + data.sitePage.path,
+                identifier: post.slug,
+                title: post.frontmatter.title,
+                language: 'en_US'
+            }
+        }/>
     </Layout>
   )
 }
@@ -58,7 +53,9 @@ export const query = graphql`
       
       frontmatter {
         title
-        date
+        formattedDate: date(formatString: "ddd MMM Do YYYY")
+        isoDate: date(formatString: "")
+        fromNowDate:date(fromNow:true)
         categories
         tags
       }
@@ -67,5 +64,8 @@ export const query = graphql`
       host
       port
     }
+    sitePage {
+      path
+    }
   }
 `
\ No newline at end of file