support tags.

content/posts/post-four/index.md

@@ -2,7 +2,7 @@
 slug: post-four
 title: Post Four
 date: 2020-04-27
-tags: ["dancin"]
+tags: ["review", "new music"]
 image: https://source.unsplash.com/1600x1200/?country,music
 ---
 

content/posts/post-one/index.md

@@ -2,7 +2,7 @@
 slug: post-one
 title: Post One
 date: 2020-01-27
-tags: ["dancin", "drinkin"]
+tags: ["drinkin"]
 image: https://source.unsplash.com/1600x1200/?country,music
 ---
 

content/posts/post-six/index.md

@@ -2,7 +2,7 @@
 slug: post-six
 title: Post Six
 date: 2020-06-27
-tags: ["dancin", "drinkin"]
+tags: ["dancin", "drinkin", "concert"]
 image: https://source.unsplash.com/1600x1200/?country,music
 ---
 

content/posts/post-three/index.md

@@ -2,7 +2,7 @@
 slug: post-three
 title: Post Three
 date: 2020-03-27
-tags: ["dancin"]
+tags: ["drinkin", "concert"]
 image: https://source.unsplash.com/1600x1200/?country,music
 ---
 

content/posts/post-two/index.md

@@ -2,7 +2,7 @@
 slug: post-two
 title: Post Two
 date: 2020-02-27
-tags: ["dancin"]
+tags: ["drinkin", "dancin"]
 image: https://source.unsplash.com/1600x1200/?country,music
 ---
 

gatsby-node.js

@@ -1,35 +1,48 @@
 const path = require("path")
 
 const createPostPage = (post, createPage) => {
-    const {relativeDirectory} = post
+    const {slug} = post.frontmatter
 
     createPage({
-        path: `/blog/${relativeDirectory}`,
+        path: `/blog/${slug}`,
         component: path.resolve("./src/templates/post.js"),
-        context: {slug: relativeDirectory},
+        context: {slug},
+    })
+}
+
+const createTagPage = (tag, createPage) => {
+    createPage({
+        path: `/tags/${tag}`,
+        component: path.resolve("./src/templates/tag.js"),
+        context: {tag},
     })
 }
 
 const createPages = async ({graphql, actions}) => {
     const {createPage} = actions
 
-    const response = await graphql(`
+    const {data} = await graphql(`
         {
-            allFile(
-                filter: {
-                    sourceInstanceName: {eq: "posts"}
-                    extension: {eq: "md"}
-                }
+            allMarkdownRemark(
+                filter: {fileAbsolutePath: {regex: "/content/posts/"}}
             ) {
                 nodes {
-                    relativeDirectory
+                    frontmatter {
+                        slug
+                    }
+                }
+                group(field: frontmatter___tags) {
+                    fieldValue
                 }
             }
         }
     `)
 
-    const posts = response.data.allFile.nodes
+    const posts = data.allMarkdownRemark.nodes
     posts.map(post => createPostPage(post, createPage))
+
+    const tags = data.allMarkdownRemark.group.map(member => member.fieldValue)
+    tags.map(tag => createTagPage(tag, createPage))
 }
 
 module.exports = {

src/components/Posts.js

@@ -4,23 +4,17 @@ import PropType from "prop-types"
 
 const Posts = ({posts}) => {
     return (
-        <>
-            <h1>blog</h1>
+        <ul>
+            {posts.map((post, index) => {
+                const {slug} = post.frontmatter
 
-            <ul>
-                {posts.map((post, index) => {
-                    const {relativeDirectory} = post
-
-                    return (
-                        <li key={index}>
-                            <Link to={`/blog/${relativeDirectory}`}>
-                                {relativeDirectory}
-                            </Link>
-                        </li>
-                    )
-                })}
-            </ul>
-        </>
+                return (
+                    <li key={index}>
+                        <Link to={`/blog/${slug}`}>{slug}</Link>
+                    </li>
+                )
+            })}
+        </ul>
     )
 }
 

src/components/Tags.js

@@ -0,0 +1,23 @@
+import React from "react"
+import {Link} from "gatsby"
+import PropType from "prop-types"
+
+const Tags = ({tags}) => {
+    return (
+        <ul>
+            {tags.map((tag, index) => {
+                return (
+                    <li key={index}>
+                        <Link to={`/tags/${tag}`}>{tag}</Link>
+                    </li>
+                )
+            })}
+        </ul>
+    )
+}
+
+Tags.propTypes = {
+    tags: PropType.arrayOf(PropType.string).isRequired,
+}
+
+export default Tags

src/hooks/index.js

@@ -1,3 +1,4 @@
+export {default as useTags} from "./useTags"
 export {default as useAbout} from "./useAbout"
 export {default as usePosts} from "./usePosts"
 export {default as useEpisodes} from "./useEpisodes"

src/hooks/useAbout.js

@@ -3,19 +3,14 @@ import {useStaticQuery, graphql} from "gatsby"
 const useAbout = () => {
     const query = graphql`
         {
-            file(
-                sourceInstanceName: {eq: "pages"}
-                relativeDirectory: {eq: "about"}
-            ) {
-                childMarkdownRemark {
-                    html
-                }
+            markdownRemark(fileAbsolutePath: {regex: "/content/pages/about/"}) {
+                html
             }
         }
     `
 
     const data = useStaticQuery(query)
-    const about = data.file.childMarkdownRemark
+    const about = data.markdownRemark
 
     return about
 }

src/hooks/usePosts.js

@@ -3,22 +3,21 @@ import {useStaticQuery, graphql} from "gatsby"
 const usePosts = ({limit = 0} = {}) => {
     const query = graphql`
         {
-            allFile(
-                filter: {
-                    sourceInstanceName: {eq: "posts"}
-                    extension: {eq: "md"}
-                }
+            allMarkdownRemark(
+                filter: {fileAbsolutePath: {regex: "/content/posts/"}}
             ) {
                 nodes {
-                    relativeDirectory
+                    frontmatter {
+                        slug
+                    }
                 }
             }
         }
     `
 
     const data = useStaticQuery(query)
 
-    let posts = data.allFile.nodes
+    let posts = data.allMarkdownRemark.nodes
 
     if (limit) {
         posts = posts.slice(0, limit)

src/hooks/useTags.js

@@ -0,0 +1,27 @@
+import {useStaticQuery, graphql} from "gatsby"
+
+const useTags = ({limit = 0} = {}) => {
+    const query = graphql`
+        {
+            allMarkdownRemark(
+                filter: {fileAbsolutePath: {regex: "/content/posts/"}}
+            ) {
+                group(field: frontmatter___tags) {
+                    fieldValue
+                }
+            }
+        }
+    `
+
+    const data = useStaticQuery(query)
+
+    let tags = data.allMarkdownRemark.group.map(member => member.fieldValue)
+
+    if (limit) {
+        tags = tags.slice(0, limit)
+    }
+
+    return tags
+}
+
+export default useTags

src/pages/blog.js

@@ -13,6 +13,7 @@ const BlogPage = () => {
             <Facebook />
             <Twitter />
 
+            <h1>blog</h1>
             <Posts posts={posts} />
         </Container>
     )

src/pages/index.js

@@ -19,6 +19,7 @@ const IndexPage = () => {
             <Twitter />
 
             <Section color="white">
+                <h1>blog</h1>
                 <Posts posts={posts} />
                 <Link to="/blog">see more</Link>
             </Section>

src/pages/tags.js

@@ -0,0 +1,22 @@
+import React from "react"
+import {useTags} from "../hooks"
+import Tags from "../components/Tags"
+import Container from "../styles/Container"
+import {Meta, Twitter, Facebook} from "../components/SEO"
+
+const TagsPage = () => {
+    const tags = useTags()
+
+    return (
+        <Container>
+            <Meta title="blog" />
+            <Facebook />
+            <Twitter />
+
+            <h1>tags</h1>
+            <Tags tags={tags} />
+        </Container>
+    )
+}
+
+export default TagsPage

src/templates/post.js

@@ -1,6 +1,6 @@
 import React from "react"
-import {graphql} from "gatsby"
 import PropTypes from "prop-types"
+import {Link, graphql} from "gatsby"
 import styled from "styled-components"
 import Container from "../styles/Container"
 import {Meta, Twitter, Facebook} from "../components/SEO"
@@ -12,10 +12,16 @@ const Image = styled.img`
     object-fit: cover;
 `
 
+const Tags = styled.div`
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    gap: 0.75rem;
+`
+
 const PostTemplate = ({data}) => {
     const {html} = data.markdownRemark
     const {image, title, date, tags} = data.markdownRemark.frontmatter
-    console.log(tags)
 
     return (
         <Container>
@@ -28,7 +34,13 @@ const PostTemplate = ({data}) => {
             <h1>{title}</h1>
             <p>{date}</p>
 
-            {tags && <p>{tags.join(", ")}</p>}
+            <Tags>
+                {tags.map((tag, index) => (
+                    <Link key={index} to={`/tags/${tag}`}>
+                        {tag}
+                    </Link>
+                ))}
+            </Tags>
 
             <div dangerouslySetInnerHTML={{__html: html}} />
         </Container>

src/templates/tag.js

@@ -0,0 +1,42 @@
+import React from "react"
+import {graphql} from "gatsby"
+import PropTypes from "prop-types"
+import Posts from "../components/Posts"
+import Container from "../styles/Container"
+import {Meta, Twitter, Facebook} from "../components/SEO"
+
+const TagTemplate = ({data, pageContext}) => {
+    const {tag} = pageContext
+    const posts = data.allMarkdownRemark.nodes
+
+    return (
+        <Container>
+            <Meta title="post" />
+            <Facebook />
+            <Twitter />
+
+            <h1>tag: {tag}</h1>
+            <Posts posts={posts} />
+        </Container>
+    )
+}
+
+TagTemplate.propTypes = {
+    data: PropTypes.object.isRequired,
+    pageContext: PropTypes.object.isRequired,
+}
+
+const query = graphql`
+    query($tag: [String]!) {
+        allMarkdownRemark(filter: {frontmatter: {tags: {in: $tag}}}) {
+            nodes {
+                frontmatter {
+                    slug
+                }
+            }
+        }
+    }
+`
+
+export default TagTemplate
+export {query}