Tags and categories pages

src/pages/404.js

@@ -1,9 +1,11 @@
 import React from "react";
+import { graphql } from "gatsby";
 import Page from "../templates/page";
 
-export default function NotFound() {
+export default function NotFound({ data }) {
+    var siteMetadata = data.site.siteMetadata;
     return (
-        <Page pageTitle="404 : Page not found">
+        <Page headerInfo={siteMetadata} pageTitle="404 : Page not found">
             <p>
                 Sorry, we've misplaced that URL or it's pointing
                 to something that doesn't exist.
@@ -14,3 +16,11 @@ export default function NotFound() {
         </Page>
     )
 }
+
+export const query = graphql`
+    query {
+        site {
+            ...HeaderInfo
+        }
+    }
+ `;

src/pages/categories.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Page from "../templates/page";
+
+export default function Categories({ data }) {
+	var siteMetadata = data.site.siteMetadata;
+	var categoryListItems = data.allMarkdownRemark.group.map(function(category) {
+		return (
+			<li><a href={'/categories/' + category.name}>{category.name} ({category.totalCount})</a></li>
+		);
+	});
+
+    return (
+		<Page headerInfo={siteMetadata} pageTitle="Categories">
+		<p>Browse posts by category.</p>
+			<ul>
+				{categoryListItems}
+			</ul>
+		</Page>
+	)
+}
+
+export const pageQuery = graphql`
+    query {
+    	allMarkdownRemark {
+    		group(field: frontmatter___categories) {
+				name: fieldValue
+				totalCount
+    		}
+		}
+		site {
+			...HeaderInfo
+		}
+	}
+`;

src/pages/index.js

@@ -8,7 +8,7 @@ export default function Home({ data }) {
 	const siteMetadata = data.site.siteMetadata;
 
 	return (
-		<Page title={siteMetadata.title} tagline={siteMetadata.tagline}>
+		<Page headerInfo={siteMetadata}>
 			<article className="post">
 				<h1 className="post-title">{post.frontmatter.title}</h1>
 				<div className="post-info d-flex justify-content-start">
@@ -55,10 +55,7 @@ export const query = graphql`
 		}
     }
     site {
-      siteMetadata {
+		...HeaderInfo
-        title
-        tagline
-      }
     }
     sitePage {
       path

src/pages/tags.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { graphql } from "gatsby";
+import Page from "../templates/page";
+
+export default function Tags({ data }) {
+	var siteMetadata = data.site.siteMetadata;
+	var tagListItems = data.allMarkdownRemark.group.map(function(tag) {
+		return (
+			<li><a href={'/tags/' + tag.name}>{tag.name} ({tag.totalCount})</a></li>
+		);
+	});
+
+    return (
+		<Page headerInfo={siteMetadata} pageTitle="Tags">
+			<p>Browse posts by tag.</p>
+			<ul>
+				{tagListItems}
+			</ul>
+		</Page>
+	)
+}
+
+export const pageQuery = graphql`
+    query {
+    	allMarkdownRemark {
+    		group(field: frontmatter___tags) {
+				name: fieldValue
+				totalCount
+    		}
+		}
+		site {
+			...HeaderInfo
+		}
+	}
+`;

src/templates/page.js

@@ -1,9 +1,9 @@
 import React from "react";
 import Layout from "../components/layout"
 
-export default function Page({ title, tagline, pageTitle, children }) {
+export default function Page({ headerInfo, pageTitle, children }) {
     return (
-        <Layout title={title} tagline={tagline}>
+        <Layout title={headerInfo.title} tagline={headerInfo.tagline}>
             <article className="page">
                 <h1 className="page-title">{pageTitle}</h1>
                 {children}
@@ -11,3 +11,12 @@ export default function Page({ title, tagline, pageTitle, children }) {
         </Layout>
     );
 }
+
+export const query = graphql`
+    fragment HeaderInfo on Site {        
+        siteMetadata {
+            title
+            tagline
+        }
+    }
+`;

src/templates/post.js

@@ -62,10 +62,7 @@ export const query = graphql`
       }
     }
     site {
-      siteMetadata {
+		...HeaderInfo
-          title
-          tagline
-      }
     }
     sitePage {
       path