Fix several issues from copying and pasting into react

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>
     );

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>

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" %} */}

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>

src/templates/post.js

@@ -7,23 +7,20 @@ 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>
+              <time dateTime={post.frontmatter.isoDate} className="post-date">
+                {post.frontmatter.formattedDate}, {post.frontmatter.fromNowDate}
+              </time>
               <nav className="post-tags">
                   {tags}
               </nav>
@@ -39,14 +36,12 @@ export default function Post({ data }) {
         shortname='fishybusiness'
         config={
             {
-                  url: "https://" + data.site.host + ":" + data.site.port,
+                url: "https://" + data.site.host + data.sitePage.path,
                 identifier: post.slug,
                 title: post.frontmatter.title,
                 language: 'en_US'
             }
         }/>
-
-      </div>
     </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
+    }
   }
 `