diff --git a/gatsby-config.js b/gatsby-config.js index ae6740a4..d42efe8e 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -33,6 +33,7 @@ module.exports = { { resolve: 'gatsby-transformer-remark', options: { + excerpt_separator: '', 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' ] } diff --git a/gatsby-node.js b/gatsby-node.js index a92946ed..b0bd13a1 100644 --- a/gatsby-node.js +++ b/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() }) diff --git a/package.json b/package.json index 19b9bf0e..fa235431 100644 --- a/package.json +++ b/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", diff --git a/src/components/molecules/PostMeta.jsx b/src/components/molecules/PostMeta.jsx index 52414eac..fced92d9 100644 --- a/src/components/molecules/PostMeta.jsx +++ b/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 && (
- + {category}
@@ -42,7 +43,7 @@ const PostMeta = ({ post, meta }) => { {tags && (
{tags.map(tag => ( - + {tag} ))} diff --git a/src/templates/Archive.jsx b/src/templates/Archive.jsx new file mode 100644 index 00000000..4278edb2 --- /dev/null +++ b/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 => ( +
  • + {post.node.frontmatter.title} +
    • + )) + + return ( + +

    {archiveTitle}

    + +     + ) +} + +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") + } + } + } + } + } +` diff --git a/src/templates/Archive.module.scss b/src/templates/Archive.module.scss new file mode 100644 index 00000000..9d7a71fd --- /dev/null +++ b/src/templates/Archive.module.scss @@ -0,0 +1,8 @@ +@import 'variables'; +@import 'mixins'; + +.archiveTitle { + font-size: $font-size-h3; + + @include heading-band(); +} diff --git a/src/templates/post.jsx b/src/templates/post.jsx index 40cd3de3..72d1ecc5 100644 --- a/src/templates/post.jsx +++ b/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