title and archive page

gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
     tagline: `Scripture, programming problems, solutions and stories.`
   },
   plugins: [
+    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sass`,
     {
       resolve: `gatsby-source-filesystem`,

gatsby-node.js

@@ -6,11 +6,24 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
 
     if (node.internal.type === `MarkdownRemark`) {
         var slug = createFilePath({ node, getNode, basePath: `pages` });
+        var date = new Date(node.frontmatter.date);
+        var year = date.getFullYear();
+        var month = date.getMonth();
         createNodeField({
             node,
             name: `slug`,
             value: slug,
         });
+        createNodeField({
+            node,
+            name: `year`,
+            value: year,
+        });
+        createNodeField({
+            node,
+            name: `month`,
+            value: month,
+        });
     }
 };
 

package-lock.json

@@ -8644,6 +8644,14 @@
         }
       }
     },
+    "gatsby-plugin-react-helmet": {
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.12.tgz",
+      "integrity": "sha512-dRIi2RLUhO+R1OaG7TrI9k1xOPf0xDQZHx1tMIcwXEm3LWS+zwv0uX+RpyQ2lQE0L/NNhjfm253CAlcEBVN4ww==",
+      "requires": {
+        "@babel/runtime": "^7.11.2"
+      }
+    },
     "gatsby-plugin-sass": {
       "version": "2.3.13",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-2.3.13.tgz",
@@ -15379,6 +15387,24 @@
         "use-sidecar": "^1.0.1"
       }
     },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
     "react-hot-loader": {
       "version": "4.12.21",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
@@ -15456,6 +15482,11 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
+      "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
+    },
     "react-style-singleton": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "disqus-react": "^1.0.10",
     "gatsby": "^2.24.61",
     "gatsby-image": "^2.4.19",
+    "gatsby-plugin-react-helmet": "^3.3.12",
     "gatsby-plugin-sass": "^2.3.13",
     "gatsby-plugin-sharp": "^2.6.36",
     "gatsby-remark-images": "^3.3.30",
@@ -27,7 +28,8 @@
     "node-sass": "^4.14.1",
     "prismjs": "^1.21.0",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "bootstrap": "^4.5.2",

src/components/layout.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Helmet } from "react-helmet";
 import Header from './header';
 import Footer from './footer';
 import Nav from './nav';
@@ -6,6 +7,9 @@ import Nav from './nav';
 export default function Layout({ title, tagline, children }) {
   return (
       <div>
+          <Helmet>
+              <title>{title} - {tagline}</title>
+          </Helmet>
           <Header title={title} tagline={tagline} />
           <Nav />
           <main>

src/components/nav.js

@@ -4,13 +4,9 @@ export default function Nav() {
     return (
         <nav className="main">
             <div className="container d-flex justify-content-center">
-                {/* {% for page in site.pages %}
-                {% if page.title != null %}
-                {% if page.layout == "page" %} */}
-                <a href="page.url | relative_url">page.title</a>
-                {/* {% endif %}
-                {% endif %}
-                {% endfor %} */}
+                <a href="/archive">archive</a>
+                <a href="/tags">tags</a>
+                <a href="/categories">categories</a>
             </div>
         </nav>
     );

src/pages/archive.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Page from "../templates/page";
+
+export default function Archive({ data }) {
+	const siteMetadata = data.site.siteMetadata;
+	const yearGroups = data.allMarkdownRemark.yearGroup;
+
+	const yearGroupsHtml = yearGroups.map(yg => {
+		const postListItems = yg.edges.map(({node}) => {
+			return (
+				<li>
+					<a href={node.fields.slug}>{node.frontmatter.title}</a>
+				</li>
+			);
+		});
+		return (
+			<div>
+				<h2>{yg.year}</h2>
+				<ul>
+					{postListItems}
+				</ul>
+			</div>
+		);
+	});
+
+	return (
+		<Page headerInfo={siteMetadata} pageTitle="Posts Archive">
+			<p>Browse all posts by month and year.</p>
+			{yearGroupsHtml}
+		</Page>
+	);
+}
+
+export const query = graphql`
+  query {
+	allMarkdownRemark {
+		yearGroup: group(field: fields___year) {
+			year: fieldValue
+			edges {
+				node {
+					fields {
+						slug
+					}
+					frontmatter {
+						title
+					}
+				}
+			}
+		}
+	}	
+    site {
+		...HeaderInfo
+    }
+  }
+`

src/pages/index.js

@@ -3,7 +3,6 @@ import { graphql } from "gatsby";
 import Page from "../templates/page";
 
 export default function Home({ data }) {
-	console.log(data);
 	const post = data.allMarkdownRemark.edges[0].node;
 	const siteMetadata = data.site.siteMetadata;
 
@@ -64,8 +63,5 @@ export const query = graphql`
     site {
 		...HeaderInfo
     }
-    sitePage {
-      path
-    }
   }
 `

src/templates/post.js

@@ -37,8 +37,8 @@ export default function Post({ data }) {
 				shortname='fishybusiness'
 				config={
 					{
-						url: "https://www.benramey.com" + post.slug,
-						identifier: post.slug,
+						url: "https://www.benramey.com" + post.fields.slug,
+						identifier: post.fields.slug,
 						title: post.frontmatter.title,
 						language: 'en_US'
 					}
@@ -51,7 +51,9 @@ export const query = graphql`
   query($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
-      
+      fields {
+		  slug
+	  }
       frontmatter {
         title
         formattedDate: date(formatString: "ddd MMM Do YYYY")