cria pagina com tags, e pagina de tag com posts

afucher · May 1, 2020 · aabbcad · aabbcad
1 parent 796be8d
commit aabbcad
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 3 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -10,7 +10,7 @@ exports.createPages = async({ graphql, actions}) => {
     const { createPage } = actions;
     const result = await graphql(`
         query {
-            allMarkdownRemark {
+            posts: allMarkdownRemark {
                 edges {
                     node {
                         frontmatter {
@@ -19,10 +19,15 @@ exports.createPages = async({ graphql, actions}) => {
                     }
                 }
             }
+            tagsGroup: allMarkdownRemark(limit: 2000) {
+                tags: group(field: frontmatter___tags) {
+                  value: fieldValue
+                }
+              }
         }
     `);
 
-    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    result.data.posts.edges.forEach(({ node }) => {
         createPage({
             path: node.frontmatter.slug,
             component: path.resolve('./src/templates/blog-post.js'),
@@ -31,4 +36,14 @@ exports.createPages = async({ graphql, actions}) => {
             }
         })
     })
+
+    result.data.tagsGroup.tags.forEach( ({value}) => {
+        createPage({
+            path: `/tags/${value}/`,
+            component: path.resolve('./src/templates/tag.js'),
+            context: {
+                tag: value
+            }
+        })
+    })
 }
diff --git a/src/pages/tags.js b/src/pages/tags.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import Layout from '../components/layout'
+import { graphql, Link } from 'gatsby'
+
+const TagsPage = ({data}) => {
+    const tags = data.post.group;
+
+    return <Layout>
+            <h1>Tags</h1>
+            {tags.map(({value, totalCount}) => <ul>
+                <li>
+                    <Link to={`/tags/${value}`}>
+                        {value} [{totalCount}]
+                    </Link>
+                </li>
+            </ul> )}
+        </Layout>
+}
+
+export const query = graphql`
+    query {
+        post: allMarkdownRemark {
+            group(field: frontmatter___tags) {
+                value: fieldValue
+                totalCount
+            }
+        }
+    }
+`
+
+export default TagsPage
diff --git a/src/posts/meu-primeiro-post-2.md b/src/posts/meu-primeiro-post-2.md
@@ -2,7 +2,7 @@
 title:  "Meu primeiro post 2 ao vivo"
 date: "2020-04-29"
 slug: "meu-segundo-post"
-
+tags: ["tag3", "tag2"]
 ---
 
 ```javascript

diff --git a/src/templates/tag.js b/src/templates/tag.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import Layout from '../components/layout'
+import PostPreview from '../components/post-preview'
+import { graphql } from 'gatsby'
+
+const Tag = ({ pageContext, data }) => {
+    const posts = data.allMarkdownRemark.edges;
+    return <Layout>
+        <h1>{pageContext.tag} [{data.allMarkdownRemark.totalCount}]</h1>
+        {posts.map(({ post }) => <PostPreview {...post.frontmatter}/>)}
+    </Layout>
+}
+
+export default Tag
+
+export const pageQuery = graphql`
+  query($tag: String) {
+    allMarkdownRemark(
+      limit: 2000
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { frontmatter: { tags: { in: [$tag] } } }
+    ) {
+      totalCount
+      edges {
+        post: node {
+            frontmatter {
+            date(formatString: "DD/MM/YYYY")
+            title
+            slug
+            tags
+          }
+        }
+      }
+    }
+  }
+`