From cc664a8a24f6e8361ec8cd1894b7a833be1e66f9 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 6 Jul 2020 22:17:54 +0300
Subject: [PATCH] added tag page

---
 gatsby-node.esm.js                | 12 ++++++
 src/templates/categoryTemplate.js |  2 +-
 src/templates/tagTemplate.js      | 71 +++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/templates/tagTemplate.js

diff --git a/gatsby-node.esm.js b/gatsby-node.esm.js
index 3300502..101de18 100644
--- a/gatsby-node.esm.js
+++ b/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 }) => {
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index a5888aa..8777e9b 100644
--- a/src/templates/categoryTemplate.js
+++ b/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 {
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
new file mode 100644
index 0000000..88471b6
--- /dev/null
+++ b/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