Add a tag based filter for posts #1

dini-ag-kim · Nov 9, 2023 · f5c3f93 · f5c3f93
1 parent d57e3f7
commit f5c3f93
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 70 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -6,6 +6,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
   // Define a template for blog post
   const blogPost = path.resolve(`./src/templates/blog-post.js`)
+  const blogIndex = path.resolve("./src/templates/blogIndex.js")
 
   // Get all markdown blog posts sorted by date
   const result = await graphql(
@@ -20,6 +21,16 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
             fields {
               slug
             }
+            frontmatter {
+              tags
+              title
+              date(formatString: "MMMM DD, YYYY")
+              authors {
+                lastname
+                firstname
+              }
+              description
+            }
           }
         }
       }
@@ -35,6 +46,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   }
 
   const posts = result.data.allMarkdownRemark.nodes
+  const tags = result.data.allMarkdownRemark.nodes.flatMap(n => n.frontmatter.tags)
+    .filter((value, index, self) => self.indexOf(value) === index); // Filter out duplicate values
 
   // Create blog posts pages
   // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
@@ -56,6 +69,19 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       })
     })
   }
+  if (tags.length > 0) {
+    tags.forEach(tag => {
+      createPage({
+        path: tag,
+        component: blogIndex,
+        context: {
+          posts: posts.filter(p => p.frontmatter.tags.includes(tag)),
+          tag
+        }
+
+      })
+    })
+  }
 }
 
 exports.onCreateNode = ({ node, actions, getNode }) => {

diff --git a/src/components/postList.js b/src/components/postList.js
@@ -0,0 +1,63 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { Tag } from "./tag"
+
+export const PostList = ({ posts }) => {
+  return (
+    <ol style={{ listStyle: `none` }}>
+      {posts.map(post => {
+        const title = post.frontmatter.title || post.fields.slug
+
+        return (
+          <li key={post.fields.slug}>
+            <article
+              className="post-list-item"
+              itemScope
+              itemType="http://schema.org/Article"
+            >
+              <header>
+                <h2>
+                  <Link to={post.fields.slug} itemProp="url">
+                    <span itemProp="headline">{title}</span>
+                  </Link>
+                </h2>
+                <small>{post.frontmatter.date}</small>
+                {post.frontmatter?.authors && (
+                  <small>
+                    {` `}|{` `}
+                    {post.frontmatter.authors.map((author, index) => {
+                      return (
+                        <span key={"author" + index}>
+                          {author.firstname}
+                          {` `}
+                          {author.lastname}
+                          {index < post.frontmatter.authors.length - 1
+                            ? ",\u00A0"
+                            : ""}
+                        </span>
+                      )
+                    })}
+                  </small>
+                )}
+                {post.frontmatter?.tags && (
+                  <small>
+                    {` | `}
+                    {post.frontmatter.tags.map((tag, index) => (<Tag tag={tag} key={index} />))}
+                  </small>
+                )}
+              </header>
+              <section>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: post.frontmatter.description || post.excerpt,
+                  }}
+                  itemProp="description"
+                />
+              </section>
+            </article>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
diff --git a/src/components/tag.js b/src/components/tag.js
@@ -0,0 +1,11 @@
+import * as React from "react"
+import { Link } from "gatsby"
+import { stringToColor } from "../common"
+
+export const Tag = ({ tag }) => {
+  return (
+    <Link to={"/" + tag} style={{ backgroundColor: stringToColor(tag) }} className="chip">
+      {tag}
+    </Link>
+  )
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -4,7 +4,7 @@ import { Link, graphql } from "gatsby"
 import Bio from "../components/bio"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import { stringToColor } from "../common"
+import { PostList } from "../components/postList"
 
 const BlogIndex = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata?.title || `Title`
@@ -28,67 +28,7 @@ const BlogIndex = ({ data, location }) => {
     <Layout location={location} title={siteTitle}>
       <SEO title="All posts" />
       <Bio />
-      <ol style={{ listStyle: `none` }}>
-        {posts.map(post => {
-          const title = post.frontmatter.title || post.fields.slug
-
-          return (
-            <li key={post.fields.slug}>
-              <article
-                className="post-list-item"
-                itemScope
-                itemType="http://schema.org/Article"
-              >
-                <header>
-                  <h2>
-                    <Link to={post.fields.slug} itemProp="url">
-                      <span itemProp="headline">{title}</span>
-                    </Link>
-                  </h2>
-                  <small>{post.frontmatter.date}</small>
-                  {post.frontmatter?.authors && (
-                    <small>
-                      {` `}|{` `}
-                      {post.frontmatter.authors.map((author, index) => {
-                        return (
-                          <span key={"author" + index}>
-                            {author.firstname}
-                            {` `}
-                            {author.lastname}
-                            {index < post.frontmatter.authors.length - 1
-                              ? ",\u00A0"
-                              : ""}
-                          </span>
-                        )
-                      })}
-                    </small>
-                  )}
-                  {post.frontmatter?.tags && (
-                    <small>
-                      {` | `}
-                      {post.frontmatter.tags.map((tag, index) => {
-                        return (
-                          <small style={{ backgroundColor: stringToColor(tag) }} className="chip" key={"tag" + index}>
-                            {tag}
-                          </small>
-                        )
-                      })}
-                    </small>
-                  )}
-                </header>
-                <section>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: post.frontmatter.description || post.excerpt,
-                    }}
-                    itemProp="description"
-                  />
-                </section>
-              </article>
-            </li>
-          )
-        })}
-      </ol>
+      <PostList posts={posts} />
     </Layout>
   )
 }

diff --git a/src/style.css b/src/style.css
@@ -322,6 +322,8 @@ a:focus {
   height: 1.5rem;
   line-height: 1.5rem;
   border-radius: 25px;
+  color: black;
+  text-decoration: none;
 }
 
 .gatsby-highlight {

diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js
@@ -4,7 +4,7 @@ import { Link, graphql } from "gatsby"
 import Bio from "../components/bio"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import { stringToColor } from "../common"
+import { Tag } from "../components/tag"
 
 const BlogPostTemplate = ({ data, location }) => {
   const post = data.markdownRemark
@@ -46,13 +46,7 @@ const BlogPostTemplate = ({ data, location }) => {
             {post.frontmatter?.tags && (
               <span>
                 {` | `}
-                {post.frontmatter.tags.map((tag, index) => {
-                  return (
-                    <span style={{ backgroundColor: stringToColor(tag) }} className="chip" key={"tag" + index}>
-                      {tag}
-                    </span>
-                  )
-                })}
+                {post.frontmatter.tags.map((tag, index) => (<Tag tag={tag} key={index} />))}
               </span>
             )}
           </p>

diff --git a/src/templates/blogIndex.js b/src/templates/blogIndex.js
@@ -0,0 +1,45 @@
+import * as React from "react"
+import { graphql } from "gatsby"
+import { PostList } from "../components/postList"
+
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import { stringToColor } from "../common"
+
+const BlogIndex = ({ data, pageContext, location }) => {
+  const siteTitle = data.site.siteMetadata?.title || `Title`
+  const posts = pageContext.posts
+  console.log(pageContext)
+  console.log(data)
+
+  if (posts.length === 0) {
+    return (
+      <p>
+        No blog posts found. Add markdown posts to "content/blog" (or the
+        directory you specified for the "gatsby-source-filesystem" plugin in
+        gatsby-config.js).
+      </p>
+    )
+  }
+
+  return (
+    <Layout location={location} title={siteTitle}>
+      <SEO title={`All posts tagged with ${pageContext.tag}`} />
+      <p>Alle Posts mit Tag <span className="chip" style={{ backgroundColor: stringToColor(pageContext.tag) }}>{pageContext.tag}</span></p>
+      <PostList posts={posts} />
+    </Layout>
+  )
+}
+
+export default BlogIndex
+
+export const pageQuery = graphql`
+  query BlogPostBySlug {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`
+