Add tags to blog posts

Author: kyleect

gatsby-node.js

@@ -22,6 +22,7 @@ async function makePostPages(graphql, glob, createPage, template) {
           node {
             frontmatter {
               path
+              tags
             }
           }
         }
@@ -41,7 +42,33 @@ async function makePostPages(graphql, glob, createPage, template) {
     createPage({
       path: node.frontmatter.path,
       component: template,
-      context: {}, // additional data can be passed via context
+      context: {
+        tags: node.frontmatter.tags || [],
+      }, // additional data can be passed via context
+    });
+  });
+
+  const tagMap = {};
+
+  // Build a map of tag → array of post paths
+  posts.forEach(({ node }) => {
+    const tags = node.frontmatter.tags || [];
+    tags.forEach(tag => {
+      if (!tagMap[tag]) tagMap[tag] = [];
+      tagMap[tag].push(node.frontmatter.path);
+    });
+  });
+
+  const tagTemplate = path.resolve(`src/templates/tag.js`);
+
+  Object.keys(tagMap).forEach(tag => {
+    createPage({
+      path: `/blog/tags/${tag.toLowerCase().replace(/[^a-z0-9]+/g, '-')}/`,
+      component: tagTemplate,
+      context: {
+        tag,
+        posts: tagMap[tag],
+      },
     });
   });
 }

src/components/post-tags.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import InlineList from './inline-list';
+
+const PostTagsStyle = styled(InlineList)`
+  margin-left: 0;
+  padding: 0;
+
+  &:before {
+    content: 'Tags:';
+    font-weight: bold;
+    font-size: 0.9em;
+    margin-right: 0em;
+  }
+
+  li {
+    font-size: 0.9em;
+    margin-right: 0;
+  }
+
+  li:before {
+    content: '#';
+  }
+
+  li:after {
+    content: ', ';
+  }
+
+  li:last-child:after {
+    content: '';
+  }
+`;
+
+function Tag({ children }) {
+  return <>{children}</>;
+}
+
+export default function PostTags({ tags }) {
+  return (
+    <PostTagsStyle>
+      {tags.map((tag, i) => (
+        <li key={i}>
+          <a href={`/blog/tags/${tag}`}>{tag}</a>
+        </li>
+      ))}
+    </PostTagsStyle>
+  );
+}
+
+PostTags.Tag = Tag;

src/components/tags.js

@@ -41,7 +41,7 @@ function Tag({ children }) {
 export default function Tags({ children }) {
   return (
     <TagsStyle>
-      {children.map((child, i) => (
+      {children?.map((child, i) => (
         <li key={i}>{child}</li>
       ))}
     </TagsStyle>

src/pages/blog.js

@@ -4,6 +4,7 @@ import Link from 'gatsby-link';
 import Layout from '../layouts';
 import { Helmet } from 'react-helmet';
 import moment from 'moment';
+import PostTags from '../components/post-tags';
 
 export default function Index({ data }) {
   const { siteMetadata } = data.site;
@@ -26,14 +27,19 @@ export default function Index({ data }) {
           );
 
           return (
-            <div key={post.id}>
+            <div key={post.id} style={{ marginBottom: '2em' }}>
               <h2>
                 <Link to={post.frontmatter.path}>{post.frontmatter.title}</Link>
               </h2>
+
               <p>
                 <span style={{ fontStyle: 'italic' }}>{formattedDate}</span>{' '}
                 &mdash; {post.excerpt}
               </p>
+
+              {post.frontmatter.tags && (
+                <PostTags tags={post.frontmatter.tags} />
+              )}
             </div>
           );
         })}
@@ -51,6 +57,7 @@ export const pageQuery = graphql`
             title
             date
             path
+            tags
           }
         }
       }

src/pages/blog/bash-script-before-reading-code.md

@@ -2,6 +2,7 @@
 path: /blog/bash-script-before-reading-code
 title: 'The Bash Script I Use Before Reading Any Code'
 date: 2026-06-19
+tags: ['git', 'tools', 'bash']
 ---
 
 I saw this awesome blog post [The Git Commands I Run Before Reading Any Code](https://piechowski.io/post/git-commands-before-reading-code/) detailing some git commands to help you navigate a new code base. Well, I decided to make a wrapper bash script around those commands.

src/pages/blog/modern-page-objects.md

@@ -2,6 +2,7 @@
 path: /blog/modern-page-objects
 title: Modern Page Objects
 date: 2018-03-23
+tags: ['browser-automation', 'page-objects']
 ---
 
 The page object model is a pattern for abstracting defining and interacting with components in a GUI.

src/pages/blog/testing-cloudwatch-alarms.md

@@ -2,6 +2,7 @@
 path: /blog/testing-cloudwatch-alarms
 title: Testing Cloudwatch Alarms
 date: 2018-07-09
+tags: ['testing', 'aws']
 ---
 
 ## The Problem

src/pages/blog/unit-testing-required.md

@@ -2,6 +2,7 @@
 path: /blog/unit-testing-required
 title: Unit Testing Required
 date: 2018-01-26
+tags: ['testing', 'unit-tests']
 ---
 
 Its been my experience that most companies do not practice unit testing at all. Sometimes its an Agile environment where devs are pushing to increase velocity so they skip writing unit tests offloading the responsibility to functional testing via Selenium. Other times devs just refuse to write any tests because management doesn't make them. The result is the same however. Poorly written code, increasingly complex testing scenarios and difficult deployments. These are all red flags that you aren't testing the write things in the right ways.

src/templates/post.js

@@ -3,11 +3,12 @@ import { graphql } from 'gatsby';
 import { Helmet } from 'react-helmet';
 import Layout from '../layouts';
 import moment from 'moment';
+import PostTags from '../components/post-tags';
 
 export default function Template({ data }) {
   const { siteMetadata } = data.site;
   const { frontmatter, html, excerpt } = data.markdownRemark;
-  const { title, date } = frontmatter;
+  const { title, date, tags } = frontmatter;
 
   const formattedDate = moment(date).format('MMMM Do YYYY');
 
@@ -28,7 +29,9 @@ export default function Template({ data }) {
 
       <div className="blog-post-container">
         <div className="blog-post">
-          <h1>{title}</h1>
+          <h1 style={{ marginBottom: tags ? 0 : '0.5em' }}>{title}</h1>
+
+          {tags && <PostTags tags={tags} />}
 
           <p
             style={{
@@ -63,6 +66,7 @@ export const pageQuery = graphql`
       frontmatter {
         date
         title
+        tags
       }
     }
     site {

src/templates/tag.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Link, graphql } from 'gatsby';
+import Helmet from 'react-helmet';
+import moment from 'moment';
+import Layout from '../layouts';
+
+export default function TagTemplate({ pageContext, data }) {
+  const { tag, posts } = pageContext;
+  const { siteMetadata } = data.site;
+
+  // We already have the paths, but we also want title+date for display.
+  // Pull the needed fields for *only* the posts that belong to this tag.
+  const postData = data.allMarkdownRemark.edges.map(e => e.node);
+
+  return (
+    <Layout>
+      <Helmet>
+        <title>{`Tag: ${tag} - ${siteMetadata.title}`}</title>
+      </Helmet>
+
+      <h1>Posts tagged “{tag}”</h1>
+
+      <ul style={{ listStyle: 'none', padding: 0 }}>
+        {postData.map(({ frontmatter, excerpt, fields, html }) => (
+          <li key={frontmatter.path} style={{ marginBottom: '2rem' }}>
+            <h2>
+              <Link to={frontmatter.path}>{frontmatter.title}</Link>
+            </h2>
+            <p style={{ fontStyle: 'italic' }}>
+              {moment(frontmatter.date).format('MMMM Do YYYY')}
+            </p>
+            <p>{excerpt}</p>
+          </li>
+        ))}
+      </ul>
+    </Layout>
+  );
+}
+
+// Query only the posts whose path is in the context‐provided array
+export const pageQuery = graphql`
+  query($posts: [String!]!) {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+    allMarkdownRemark(filter: { frontmatter: { path: { in: $posts } } }) {
+      edges {
+        node {
+          frontmatter {
+            title
+            path
+            date
+          }
+          excerpt(pruneLength: 140)
+        }
+      }
+    }
+  }
+`;