From a80ae21fd2138f77b4806c8b9e7f1974b57d1316 Mon Sep 17 00:00:00 2001
From: benjaminramey <benramey@fastmail.com>
Date: Thu, 24 Sep 2020 09:56:56 -0500
Subject: [PATCH] home page working, etc

---
 gatsby-config.js         |  4 ++
 src/components/footer.js |  1 +
 src/components/header.js | 36 +++++++++---------
 src/components/layout.js |  4 +-
 src/pages/404.js         |  2 +-
 src/pages/index.js       | 71 +++++++++++++++++++++++++++++++----
 src/templates/page.js    |  8 ++--
 src/templates/post.js    | 81 +++++++++++++++++++++-------------------
 8 files changed, 136 insertions(+), 71 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 47d2d2c..1c15015 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -6,6 +6,10 @@
 
 module.exports = {
   /* Your site config here */
+  siteMetadata: {
+    title: `Ben Ramey's Blog`,
+    tagline: `Scripture, programming problems, solutions and stories.`
+  },
   plugins: [
     `gatsby-plugin-sass`,
     {
diff --git a/src/components/footer.js b/src/components/footer.js
index 47915ea..3fbdc00 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -8,6 +8,7 @@ export default function Footer() {
     return (
         <footer className="footer">
             <div className="container">
+                <hr />
                 <small>
                     &copy; <time dateTime={timestamp}>{year}</time>.
                     All rights reserved.
diff --git a/src/components/header.js b/src/components/header.js
index 17206b6..144c3c8 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,20 +1,20 @@
 import React from "react";
 
-export default function Header() {
-    return (
-        <header>
-            <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 className="ml-2">Ben Ramey's Blog</span>
-                    </a>
-                    <div className="d-none d-sm-flex flex-column justify-content-around ml-2">
-                        <small>Scripture, programming problems, solutions and stories.</small>
-                    </div>
-                </div>
-            </div>
-        </header>
-    );
-  }
+export default function Header({ title, tagline }) {
+	return (
+		<header>
+			<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 className="ml-2">{title}</span>
+					</a>
+					<div className="d-none d-sm-flex flex-column justify-content-around ml-2">
+						<small>{tagline}</small>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
\ No newline at end of file
diff --git a/src/components/layout.js b/src/components/layout.js
index d1db325..4875ddd 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -3,10 +3,10 @@ import Header from './header';
 import Footer from './footer';
 import Nav from './nav';
 
-export default function Layout({ children }) {
+export default function Layout({ title, tagline, children }) {
   return (
       <div>
-          <Header />
+          <Header title={title} tagline={tagline} />
           <Nav />
           <main>
             <div className="container">
diff --git a/src/pages/404.js b/src/pages/404.js
index 4377174..177bc27 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -3,7 +3,7 @@ import Page from "../templates/page";
 
 export default function NotFound() {
     return (
-        <Page title="404 : Page not found">
+        <Page pageTitle="404 : Page not found">
             <p>
                 Sorry, we've misplaced that URL or it's pointing
                 to something that doesn't exist.
diff --git a/src/pages/index.js b/src/pages/index.js
index a2cfa28..cc399db 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,12 +1,67 @@
 import React from "react";
+import { graphql } from "gatsby";
 import Page from "../templates/page";
 
-export default function Home() {
-  return (
-    <Page title="home page">
-      <div>
-        this is the home page
-      </div>
-    </Page>
-  );
+export default function Home({ data }) {
+	console.log(data);
+	const post = data.allMarkdownRemark.edges[0].node;
+	const siteMetadata = data.site.siteMetadata;
+
+	return (
+		<Page title={siteMetadata.title} tagline={siteMetadata.tagline}>
+			<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">
+
+					</nav>
+					<nav className="post-categories">
+						<span>posted in:</span>
+
+					</nav>
+				</div>
+				<div dangerouslySetInnerHTML={{ __html: post.html }} />
+			</article>
+			<section>
+				<a href={post.fields.slug + "#comments-section"}>
+					See comments
+          		</a>
+			</section>
+		</Page>
+	);
 }
+
+export const query = graphql`
+  query {
+    allMarkdownRemark(limit: 1, sort: {fields: frontmatter___date, order: DESC}) {
+		edges {
+			node {
+				html
+				frontmatter {
+					title
+					formattedDate: date(formatString: "ddd MMM Do YYYY")
+					isoDate: date(formatString: "")
+					fromNowDate:date(fromNow:true)
+					categories
+					tags
+				}
+				fields {
+					slug
+				}
+			}
+		}
+    }
+    site {
+      siteMetadata {
+        title
+        tagline
+      }
+    }
+    sitePage {
+      path
+    }
+  }
+`
\ No newline at end of file
diff --git a/src/templates/page.js b/src/templates/page.js
index 3dc86ff..a30192a 100644
--- a/src/templates/page.js
+++ b/src/templates/page.js
@@ -1,13 +1,13 @@
 import React from "react";
 import Layout from "../components/layout"
 
-export default function Page({ title, children }) {
+export default function Page({ title, tagline, pageTitle, children }) {
     return (
-        <Layout>
+        <Layout title={title} tagline={tagline}>
             <article className="page">
-                <h1 className="page-title">{title}</h1>
+                <h1 className="page-title">{pageTitle}</h1>
                 {children}
             </article>
         </Layout>
     );
-}
\ No newline at end of file
+}
diff --git a/src/templates/post.js b/src/templates/post.js
index 1c3a7ef..187db46 100644
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -4,46 +4,47 @@ import Layout from "../components/layout";
 import { DiscussionEmbed } from 'disqus-react';
 
 export default function Post({ data }) {
-  const post = data.markdownRemark;
+	const post = data.markdownRemark;
+	const siteMetadata = data.site.siteMetadata;
 
-  var tags = post.frontmatter.tags.map((tag) => {
-    return (<a key={tag} href={'/tags/' + tag }>#{tag}</a>);
-  });
-  var categories = post.frontmatter.categories.map((category) => {
-    return (<a key={category} href={'/categories/' + category }>#{category}</a>);
-  });
-  
-  return (
-    <Layout>
-      <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>
+	var tags = post.frontmatter.tags.map((tag) => {
+		return (<a key={tag} href={'/tags/' + tag}>#{tag}</a>);
+	});
+	var categories = post.frontmatter.categories.map((category) => {
+		return (<a key={category} href={'/categories/' + category}>#{category}</a>);
+	});
 
-      <DiscussionEmbed 
-        shortname='fishybusiness'
-        config={
-            {
-                url: "https://" + data.site.host + data.sitePage.path,
-                identifier: post.slug,
-                title: post.frontmatter.title,
-                language: 'en_US'
-            }
-        }/>
-    </Layout>
-  )
+	return (
+		<Layout title={siteMetadata.title} tagline={siteMetadata.tagline}>
+			<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.sitePage.path,
+						identifier: post.slug,
+						title: post.frontmatter.title,
+						language: 'en_US'
+					}
+				} />
+		</Layout>
+	)
 }
 
 export const query = graphql`
@@ -63,6 +64,10 @@ export const query = graphql`
     site {
       host
       port
+      siteMetadata {
+          title
+          tagline
+      }
     }
     sitePage {
       path