category & tag archives

gatsby-config.js

@@ -33,6 +33,7 @@ module.exports = {
     {
       resolve: 'gatsby-transformer-remark',
       options: {
+        excerpt_separator: '<!-- more -->',
         plugins: [
           {
             resolve: 'gatsby-remark-images',
@@ -44,6 +45,12 @@ module.exports = {
               backgroundColor: '#dfe8ef'
             }
           },
+          {
+            resolve: 'gatsby-remark-copy-linked-files',
+            options: {
+              destinationDir: 'media'
+            }
+          },
           'gatsby-remark-prismjs',
           'gatsby-remark-smartypants',
           'gatsby-remark-autolink-headers'
@@ -60,6 +67,7 @@ module.exports = {
     'gatsby-transformer-yaml',
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
-    'gatsby-plugin-sitemap'
+    'gatsby-plugin-sitemap',
+    'gatsby-plugin-catch-links'
   ]
 }

gatsby-node.js

@@ -47,9 +47,7 @@ exports.createPages = ({ graphql, actions }) => {
 
   return new Promise((resolve, reject) => {
     const postTemplate = path.resolve('src/templates/Post.jsx')
-    // const indexTemplate = path.resolve('src/templates/index.jsx')
-    // const tagTemplate = path.resolve('src/templates/tag.jsx')
-    // const categoryTemplate = path.resolve('src/templates/category.jsx')
+    const archiveTemplate = path.resolve('src/templates/Archive.jsx')
 
     resolve(
       graphql(
@@ -65,6 +63,10 @@ exports.createPages = ({ graphql, actions }) => {
                     slug
                     date
                   }
+                  frontmatter {
+                    category
+                    tags
+                  }
                 }
               }
             }
@@ -90,46 +92,46 @@ exports.createPages = ({ graphql, actions }) => {
           })
         })
 
-        // const tagSet = new Set()
-        // const tagMap = new Map()
-        // const categorySet = new Set()
+        // Category & Tag Pages
+        const tagSet = new Set()
+        const tagMap = new Map()
+        const categorySet = new Set()
 
-        // posts.forEach(post => {
-        //   if (post.node.frontmatter.tags) {
-        //     post.node.frontmatter.tags.forEach(tag => {
-        //       tagSet.add(tag)
+        posts.forEach(post => {
+          if (post.node.frontmatter.tags) {
+            post.node.frontmatter.tags.forEach(tag => {
+              tagSet.add(tag)
 
-        //       const array = tagMap.has(tag) ? tagMap.get(tag) : []
-        //       array.push(post)
-        //       tagMap.set(tag, array)
-        //     })
-        //   }
+              const array = tagMap.has(tag) ? tagMap.get(tag) : []
+              array.push(post)
+              tagMap.set(tag, array)
+            })
+          }
 
-        //   if (post.node.frontmatter.category) {
-        //     categorySet.add(post.node.frontmatter.category)
-        //   }
-        // })
+          if (post.node.frontmatter.category) {
+            categorySet.add(post.node.frontmatter.category)
+          }
+        })
 
-        // const tagList = Array.from(tagSet)
+        const tagList = Array.from(tagSet)
 
-        // tagList.forEach(tag => {
-        //   // Creates tag pages
-        //   createPage({
-        //     path: `/tags/${tag}/`,
-        //     component: tagTemplate,
-        //     context: { tag }
-        //   })
-        // })
+        tagList.forEach(tag => {
+          createPage({
+            path: `/tag/${tag}/`,
+            component: archiveTemplate,
+            context: { tag }
+          })
+        })
 
-        // const categoryList = Array.from(categorySet)
+        const categoryList = Array.from(categorySet)
 
-        // categoryList.forEach(category => {
-        //   createPage({
-        //     path: `/categories/${category}/`,
-        //     component: categoryTemplate,
-        //     context: { category }
-        //   })
-        // })
+        categoryList.forEach(category => {
+          createPage({
+            path: `/${category}/`,
+            component: archiveTemplate,
+            context: { category }
+          })
+        })
 
         resolve()
       })

package.json

@@ -25,12 +25,14 @@
     "exif-js": "^2.3.0",
     "gatsby": "^2.0.0-beta.47",
     "gatsby-image": "^2.0.0-beta.6",
+    "gatsby-plugin-catch-links": "^1.0.24",
     "gatsby-plugin-matomo": "^0.4.1",
     "gatsby-plugin-react-helmet": "^3.0.0-beta.3",
     "gatsby-plugin-sass": "^2.0.0-beta.5",
     "gatsby-plugin-sharp": "^2.0.0-beta.5",
     "gatsby-plugin-sitemap": "^2.0.0-beta.2",
     "gatsby-remark-autolink-headers": "^2.0.0-beta.3",
+    "gatsby-remark-copy-linked-files": "^1.5.37",
     "gatsby-remark-images": "^2.0.1-beta.7",
     "gatsby-remark-prismjs": "^3.0.0-beta.3",
     "gatsby-remark-smartypants": "^2.0.0-beta.2",
@@ -49,13 +51,14 @@
     "react-dom": "^16.4.1",
     "react-helmet": "^5.2.0",
     "react-time": "^4.3.0",
+    "slugify": "^1.3.0",
     "vex-js": "^4.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.6",
     "eslint": "^5.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-loader": "^2.0.0",
+    "eslint-loader": "^2.1.0",
     "eslint-plugin-graphql": "^2.1.1",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.10.0",

src/components/molecules/PostMeta.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Time from 'react-time'
+import slugify from 'slugify'
 import PostLinkActions from '../atoms/PostLinkActions'
 import styles from './PostMeta.module.scss'
 
@@ -33,7 +34,7 @@ const PostMeta = ({ post, meta }) => {
 
       {category && (
         <div className={styles.categories}>
-          <a className={styles.category} href="/">
+          <a className={styles.category} href={`/${slugify(category)}/`}>
             {category}
           </a>
         </div>
@@ -42,7 +43,7 @@ const PostMeta = ({ post, meta }) => {
       {tags && (
         <div className={styles.tags}>
           {tags.map(tag => (
-            <a key={tag} className={styles.tag} href={`/tag/${tag}/`}>
+            <a key={tag} className={styles.tag} href={`/tag/${slugify(tag)}/`}>
               {tag}
             </a>
           ))}

src/templates/Archive.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link, graphql } from 'gatsby'
+import Layout from '../components/Layout'
+import styles from './Archive.module.scss'
+
+const Archive = ({ data, pageContext }) => {
+  let posts
+  let archiveTitle
+
+  if (pageContext.category) {
+    posts = data.category.edges
+    archiveTitle = pageContext.category
+  } else {
+    posts = data.tag.edges
+    archiveTitle = pageContext.tag
+  }
+
+  const Posts = posts.map(post => (
+    <li key={post.node.id}>
+      <Link to={post.node.fields.slug}>{post.node.frontmatter.title}</Link>
+    </li>
+  ))
+
+  return (
+    <Layout location={location}>
+      <h1 className={styles.archiveTitle}>{archiveTitle}</h1>
+      <ul>{Posts}</ul>
+    </Layout>
+  )
+}
+
+Archive.propTypes = {
+  data: PropTypes.object.isRequired,
+  pageContext: PropTypes.object.isRequired
+}
+
+export default Archive
+
+export const archiveQuery = graphql`
+  query($category: String, $tag: String) {
+    category: allMarkdownRemark(
+      filter: { frontmatter: { category: { eq: $category } } }
+      sort: { order: DESC, fields: [fields___date] }
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+          }
+          fields {
+            slug
+            date(formatString: "MMMM DD, YYYY")
+          }
+        }
+      }
+    }
+
+    tag: allMarkdownRemark(
+      filter: { frontmatter: { tags: { eq: $tag } } }
+      sort: { order: DESC, fields: [fields___date] }
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+          }
+          fields {
+            slug
+            date(formatString: "MMMM DD, YYYY")
+          }
+        }
+      }
+    }
+  }
+`

src/templates/Archive.module.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+@import 'mixins';
+
+.archiveTitle {
+    font-size: $font-size-h3;
+
+    @include heading-band();
+}

src/templates/post.jsx

@@ -47,6 +47,7 @@ export const pageQuery = graphql`
   query BlogPostByPath($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {
       html
+      excerpt
       frontmatter {
         type
         title