[part-16] Added contact page and a custom template for the page

- Updated "Navigation" with contact page link

src/components/Navigation.js

@@ -15,7 +15,7 @@ const Navigation = (props) => {
       return !prevState;
     });
   }
-  
+
   return (
     <nav className='
       bg-gradient-to-r from-stone-100 to-stone-300
@@ -75,6 +75,16 @@ const Navigation = (props) => {
         '>
           Designs
         </Link>
+        <Link to='/contact' activeClassName='bg-white/50' className='
+          block
+          px-5 py-3
+          md:py-5
+          transition-colors
+          hover:bg-white/50
+          md:inline-block
+        '>
+          Contact
+        </Link>
       </div>
       <div className='py-5 px-5 absolute top-0 right-0 md:hidden'>
         <button className='w-6 h-6 block' onClick={handleNavbarClick}>

src/pages/contact.md

@@ -0,0 +1,6 @@
+---
+contentKey: page
+title: Contact
+description: Ask me anything!
+---
+The choice was red, green, or blue. It didn't seem like an important choice when he was making it, but it was a choice nonetheless. Had he known the consequences at that time, he would likely have considered the choice a bit longer. In the end, he didn't and ended up choosing blue.

src/templates/contact-template.js

@@ -0,0 +1,83 @@
+import { graphql } from 'gatsby';
+import React from 'react'
+import Layout from '../components/Layout.js';
+import PageHeader from '../components/PageHeader.js';
+
+const ContactTemplate = (props) => {
+
+  console.log(props);
+
+  return (
+    <Layout>
+      <PageHeader frontmatter={props.data.markdownRemark.frontmatter} />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: `
+            ${props.data.markdownRemark.html}
+            <ul>
+              <li>
+                <a href="mailto:${props.data.settings.frontmatter.settings.email}" rel="noreferrer nofollow">
+                  Mail
+                </a>
+              </li>
+              <li>
+                <a href="${props.data.settings.frontmatter.settings.facebook}" rel="noreferrer nofollow">
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="${props.data.settings.frontmatter.settings.twitter}" rel="noreferrer nofollow">
+                  Twitter
+                </a>
+              </li>
+              <li>
+                <a href="${props.data.settings.frontmatter.settings.youtube}" rel="noreferrer nofollow">
+                  YouTube
+                </a>
+              </li>
+            </ul>
+          `
+        }}
+        className='
+          container
+          py-8 px-4
+          md:px-0
+          prose
+          prose-p:text-stone-900
+          prose-img:rounded-lg
+      '>
+      </div>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query($pageId: String = "") {
+    markdownRemark(id: { eq: $pageId }) {
+      id
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+        description
+      }
+      html
+    }
+    settings: markdownRemark(frontmatter: {contentKey: {eq: "setting"}}) {
+      frontmatter {
+        title
+        description
+        settings {
+          siteTitle
+          email
+          facebook
+          twitter
+          youtube
+        }
+      }
+    }
+  }
+`
+
+export default ContactTemplate