Upddate tag page

gatsby-node.js

@@ -1,10 +1,10 @@
-const _ = require('lodash')
-const path = require('path')
-const { createFilePath } = require('gatsby-source-filesystem')
-const { fmImagesToRelative } = require('gatsby-remark-relative-images')
+const _ = require("lodash");
+const path = require("path");
+const { createFilePath } = require("gatsby-source-filesystem");
+const { fmImagesToRelative } = require("gatsby-remark-relative-images");
 
 exports.createPages = ({ actions, graphql }) => {
-  const { createPage } = actions
+  const { createPage } = actions;
 
   return graphql(`
     {
@@ -25,14 +25,14 @@ exports.createPages = ({ actions, graphql }) => {
     }
   `).then(result => {
     if (result.errors) {
-      result.errors.forEach(e => console.error(e.toString()))
-      return Promise.reject(result.errors)
+      result.errors.forEach(e => console.error(e.toString()));
+      return Promise.reject(result.errors);
     }
 
-    const posts = result.data.allMarkdownRemark.edges
+    const posts = result.data.allMarkdownRemark.edges;
 
     posts.forEach(edge => {
-      const id = edge.node.id
+      const id = edge.node.id;
       createPage({
         path: edge.node.fields.slug,
         tags: edge.node.frontmatter.tags,
@@ -41,47 +41,47 @@ exports.createPages = ({ actions, graphql }) => {
         ),
         // additional data can be passed via context
         context: {
-          id,
-        },
-      })
-    })
+          id
+        }
+      });
+    });
 
     // Tag pages:
-    let tags = []
+    let tags = [];
     // Iterate through each post, putting all found tags into `tags`
     posts.forEach(edge => {
       if (_.get(edge, `node.frontmatter.tags`)) {
-        tags = tags.concat(edge.node.frontmatter.tags)
+        tags = tags.concat(edge.node.frontmatter.tags);
       }
-    })
+    });
     // Eliminate duplicate tags
-    tags = _.uniq(tags)
+    tags = _.uniq(tags);
 
     // Make tag pages
     tags.forEach(tag => {
-      const tagPath = `/tags/${_.kebabCase(tag)}/`
+      const tagPath = `/tags/${_.kebabCase(tag)}/`;
 
       createPage({
         path: tagPath,
-        component: path.resolve(`src/templates/tags.js`),
+        component: path.resolve(`src/templates/tags-page.js`),
         context: {
-          tag,
-        },
-      })
-    })
-  })
-}
+          tag
+        }
+      });
+    });
+  });
+};
 
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
-  fmImagesToRelative(node) // convert image paths for gatsby images
+  const { createNodeField } = actions;
+  fmImagesToRelative(node); // convert image paths for gatsby images
 
   if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
+    const value = createFilePath({ node, getNode });
     createNodeField({
       name: `slug`,
       node,
-      value,
-    })
+      value
+    });
   }
-}
+};

src/templates/tags-page.js

@@ -0,0 +1,84 @@
+import React from "react";
+import Helmet from "react-helmet";
+import { Link, graphql } from "gatsby";
+import Layout from "../components/Layout";
+import ModelList from "../components/ModelList";
+
+class TagRoute extends React.Component {
+  render() {
+    const posts = this.props.data.allMarkdownRemark.edges;
+    const postLinks = posts.map(post => (
+      <li key={post.node.fields.slug} className="ModelList__item">
+        <div className="ModelList__title">
+          <Link to={post.node.fields.slug}>{post.node.frontmatter.title}</Link>
+        </div>
+      </li>
+    ));
+    const tag = this.props.pageContext.tag;
+    const title = this.props.data.site.siteMetadata.title;
+    const tagHeader = `${tag}`;
+
+    return (
+      <Layout>
+        <section className="ml5Grid__wrapper">
+          <Helmet title={`${tag} | ${title}`} />
+          <div className="ml5Grid__container">
+            <section className="ml5Grid__sidebar">
+              <div className="Sidebar__container">
+                <div>
+                  <span className="ml5Grid__sidebarTitle">Reference</span>
+                </div>
+                <ModelList />
+              </div>
+            </section>
+
+            <article className="ml5Grid__content">
+              <div>
+                <h2>{tagHeader}</h2>
+                <ul className="taglist">
+                  {postLinks}
+                  <li className="ModelList__item">
+                    <div>
+                      <Link to="/reference/" className="ml5Grid__sidebarTitle">
+                        Back to API Reference
+                      </Link>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </article>
+          </div>
+        </section>
+      </Layout>
+    );
+  }
+}
+
+export default TagRoute;
+
+export const tagPageQuery = graphql`
+  query TagPage($tag: String) {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    allMarkdownRemark(
+      limit: 1000
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { frontmatter: { tags: { in: [$tag] } } }
+    ) {
+      totalCount
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+          }
+        }
+      }
+    }
+  }
+`;