Tag and category pages

gatsby-node.js

@@ -33,6 +33,11 @@ exports.createPages = async ({ graphql, actions }) => {
                     fieldValue
                 }
             }
+            categoriesGroup: allMarkdownRemark {
+                group(field: frontmatter___categories) {
+                    fieldValue
+                }
+            }
         }
     `);
 
@@ -55,4 +60,14 @@ exports.createPages = async ({ graphql, actions }) => {
             }
         });
     });
+
+    result.data.categoriesGroup.group.forEach((category) => {
+        createPage({
+            path: `/categories/${category.fieldValue}/`,
+            component: path.resolve(`./src/templates/category.js`),
+            context: {
+                category: category.fieldValue
+            }
+        });
+    });
 };

src/pages/index.js

@@ -7,6 +7,13 @@ export default function Home({ data }) {
 	const post = data.allMarkdownRemark.edges[0].node;
 	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 (
 		<Page headerInfo={siteMetadata}>
 			<article className="post">
@@ -16,11 +23,11 @@ export default function Home({ data }) {
 						{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 }} />

src/templates/category.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Page from "./page";
+
+export default function Category({ data, pageContext }) {
+    var { category } = pageContext;
+    var siteMetadata = data.site.siteMetadata;
+    var totalCount = data.allMarkdownRemark.totalCount;
+    var postListItems = data.allMarkdownRemark.edges.map(function(edge) {
+        return (
+            <li><a href={edge.node.fields.slug}>{edge.node.frontmatter.title}</a></li>
+        );
+    });
+
+	return (
+		<Page headerInfo={siteMetadata} pageTitle={'Category: ' + category + ' (' + totalCount + ')'}>
+            <p>
+                All posts categorized under "{category}".
+            </p>
+            <ul>
+                {postListItems}
+            </ul>
+		</Page>
+	)
+}
+
+export const query = graphql`
+    query($category: String!) {
+        allMarkdownRemark(
+            sort: { fields: [frontmatter___date], order: DESC }
+            filter: { frontmatter: { categories: { in: [$category] } } }
+        )
+        {
+            totalCount
+            edges {
+                node {
+                    fields {
+                        slug
+                    }
+                    frontmatter {
+                        title
+                    }
+                }
+            }
+        }
+        site {
+            ...HeaderInfo
+        }
+    }
+`

src/templates/post.js

@@ -11,7 +11,7 @@ export default function Post({ data }) {
 		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 (<a key={category} href={'/categories/' + category}>{category}</a>);
 	});
 
 	return (
@@ -37,7 +37,7 @@ export default function Post({ data }) {
 				shortname='fishybusiness'
 				config={
 					{
-						url: "https://www.benramey.com" + data.sitePage.path,
+						url: "https://www.benramey.com" + post.slug,
 						identifier: post.slug,
 						title: post.frontmatter.title,
 						language: 'en_US'

src/templates/tag.js

@@ -15,7 +15,7 @@ export default function Tag({ data, pageContext }) {
 	return (
 		<Page headerInfo={siteMetadata} pageTitle={'Tag: ' + tag + ' (' + totalCount + ')'}>
             <p>
-                All posts tagged with "{tag}";
+                All posts tagged with "{tag}".
             </p>
             <ul>
                 {postListItems}