home page working, etc

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`,
     {

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.

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

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">

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.

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
+    }
+  }
+`

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

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