added tag page

gatsby-node.esm.js

@@ -7,6 +7,7 @@ exports.createPages = async ({ actions, graphql }) => {
 
   const articleTemplate = path.resolve('src/templates/articleTemplate.js')
   const categoryTemplate = path.resolve('src/templates/categoryTemplate.js')
+  const tagTemplate = path.resolve('src/templates/tagTemplate.js')
 
   const result = await graphql(
     `
@@ -33,6 +34,7 @@ exports.createPages = async ({ actions, graphql }) => {
   const all = result.data.allMarkdownRemark.edges
   const articles = all.filter(article => article.node.frontmatter.templateKey === 'article')
   const categories = all.filter(category => category.node.frontmatter.templateKey === 'category')
+  const tags = all.filter(tag => tag.node.frontmatter.templateKey === 'tag')
 
   articles.forEach(({ node }) => {
     createPage({
@@ -53,6 +55,16 @@ exports.createPages = async ({ actions, graphql }) => {
       },
     });
   })
+
+  tags.forEach(({ node }) => {
+    createPage({
+      path: `tag/${slugify(node.frontmatter.title)}`,
+      component: tagTemplate,
+      context: {
+        title: node.frontmatter.title
+      }
+    })
+  })
 }
 
 exports.onCreateNode = ({ node }) => {

src/templates/categoryTemplate.js

@@ -44,7 +44,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
 }
 
 export const pageQuery = graphql`
-  query articleByCategory($title: String!) {
+  query articlesByCategory($title: String!) {
     allMarkdownRemark(filter: {frontmatter: {category: {eq: $title}}}) {
       edges {
         node {

src/templates/tagTemplate.js

@@ -0,0 +1,71 @@
+import React from "react"
+import { graphql } from 'gatsby'
+import SEO from '../components/SEO/SEO'
+import Layout from '../components/Layout/Layout'
+import Articles from '../components/Articles/Articles'
+import Search from '../components/Articles/Search/Search'
+import Categories from '../components/Articles/Categories/Categories'
+import Offers from '../components/Offers/Offers'
+import Newsletter from '../components/Newsletter/Newsletter'
+
+const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
+  return (
+    <Layout>
+      <SEO title={title} />
+      <main>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-9 col-xs-12">
+              <div className="articles">
+                <div className="articles-heading">
+                  <h1>Статьи</h1>
+                </div>
+                <Categories />
+                <Search articlesLength={edges.edges.length} />
+                <div className="articles-info">
+                  <p>Показано {edges.edges.length} по тегу "{title}"</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-md-9 col-xs-12">
+              <Articles data={edges} /> 
+              <Newsletter />
+            </div>
+            <div className="col-md-3 col-xs-12">
+              <Offers /> 
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  )
+}
+
+export const pageQuery = graphql`
+  query articlesByTag($title: [String!]) {
+    allMarkdownRemark(filter: {frontmatter: {tags: {in: $title}}}) {
+      edges {
+        node {
+          frontmatter {
+            slug
+            title
+            image {
+              childImageSharp {
+                fluid {
+                  ...GatsbyImageSharpFluid
+                }
+              }
+            }
+            category
+            tags
+            description
+          }
+        }
+      }
+    }
+  }
+`
+
+export default TagPage