waylon/gatsby-starter-blog-forestry
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Just use frontmatter paths for paths + cleanups

Browse source
This commit is contained in:
Kyle Mathews 2017-07-04 10:49:13 -07:00
parent 4936e80940
commit d2e2bc8df7
6 changed files with 33 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

1
gatsby-config.js
View file

@ -42,5 +42,6 @@ module.exports = {
}, },
}, },
`gatsby-plugin-offline`, `gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
], ],
} }

34
gatsby-node.js
View file

@ -17,8 +17,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
allMarkdownRemark(limit: 1000) { allMarkdownRemark(limit: 1000) {
edges { edges {
node { node {
fields { frontmatter {
slug path
} }
} }
} }
@ -34,10 +34,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
// Create blog posts pages. // Create blog posts pages.
_.each(result.data.allMarkdownRemark.edges, edge => { _.each(result.data.allMarkdownRemark.edges, edge => {
createPage({ createPage({
path: edge.node.fields.slug, // required path: edge.node.frontmatter.path,
component: blogPost, component: blogPost,
context: { context: {
slug: edge.node.fields.slug, path: edge.node.frontmatter.path,
}, },
}) })
}) })
@ -45,29 +45,3 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
) )
}) })
} }
// Add custom slug for blog posts to both File and MarkdownRemark nodes.
exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
const { createNodeField } = boundActionCreators
switch (node.internal.type) {
case 'File':
const parsedFilePath = path.parse(node.relativePath)
const slug = `/${parsedFilePath.dir}/`
createNodeField({
node,
fieldName: 'slug',
fieldValue: slug
})
return
case 'MarkdownRemark':
const fileNode = getNode(node.parent)
createNodeField({
node,
fieldName: 'slug',
fieldValue: fileNode.fields.slug,
})
return
}
}

13
package.json
View file

@ -9,30 +9,27 @@
"dependencies": { "dependencies": {
"gatsby": "next", "gatsby": "next",
"gatsby-link": "next", "gatsby-link": "next",
"gatsby-transformer-remark": "next",
"gatsby-transformer-sharp": "next",
"gatsby-plugin-google-analytics": "next", "gatsby-plugin-google-analytics": "next",
"gatsby-plugin-manifest": "next", "gatsby-plugin-manifest": "next",
"gatsby-plugin-offline": "next", "gatsby-plugin-offline": "next",
"gatsby-plugin-preact": "next", "gatsby-plugin-preact": "next",
"gatsby-plugin-react-helmet": "next",
"gatsby-plugin-sharp": "next", "gatsby-plugin-sharp": "next",
"gatsby-source-filesystem": "next",
"gatsby-remark-copy-linked-files": "next", "gatsby-remark-copy-linked-files": "next",
"gatsby-remark-prismjs": "next", "gatsby-remark-prismjs": "next",
"gatsby-remark-responsive-iframe": "next", "gatsby-remark-responsive-iframe": "next",
"gatsby-remark-responsive-image": "next", "gatsby-remark-responsive-image": "next",
"gatsby-remark-smartypants": "next", "gatsby-remark-smartypants": "next",
"gatsby-source-filesystem": "next",
"gatsby-transformer-remark": "next",
"gatsby-transformer-sharp": "next",
"lodash": "^4.15.0", "lodash": "^4.15.0",
"moment": "^2.14.1",
"react-helmet": "^4.0.0",
"react-responsive-grid": "^0.3.3", "react-responsive-grid": "^0.3.3",
"react-typography": "^0.15.0", "react-typography": "^0.15.0",
"safe-access": "^0.1.0",
"typeface-merriweather": "^0.0.25", "typeface-merriweather": "^0.0.25",
"typeface-montserrat": "^0.0.24", "typeface-montserrat": "^0.0.24",
"typography": "^0.15.8", "typography": "^0.15.8",
"typography-theme-wordpress-2016": "^0.15.1", "typography-theme-wordpress-2016": "^0.15.1"
"underscore.string": "^3.2.3"
}, },
"devDependencies": { "devDependencies": {
"gh-pages": "^0.12.0" "gh-pages": "^0.12.0"

9
src/html.js
View file

@ -13,7 +13,7 @@ if (process.env.NODE_ENV === `production`) {
} }
} }
module.exports = React.createClass({ export default class HTML extends React.Component {
render() { render() {
const head = Helmet.rewind() const head = Helmet.rewind()
let css let css
@ -38,9 +38,6 @@ module.exports = React.createClass({
{this.props.headComponents} {this.props.headComponents}
<TypographyStyle typography={typography} /> <TypographyStyle typography={typography} />
{css} {css}
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
</head> </head>
<body> <body>
<div <div
@ -51,5 +48,5 @@ module.exports = React.createClass({
</body> </body>
</html> </html>
) )
}, }
}) }

11
src/pages/index.js
View file

@ -2,7 +2,6 @@ import React from "react"
import Link from "gatsby-link" import Link from "gatsby-link"
import get from "lodash/get" import get from "lodash/get"
import Helmet from "react-helmet" import Helmet from "react-helmet"
import include from "underscore.string/include"
import Bio from "../components/Bio" import Bio from "../components/Bio"
import { rhythm } from "../utils/typography" import { rhythm } from "../utils/typography"
@ -23,7 +22,7 @@ class BlogIndex extends React.Component {
marginBottom: rhythm(1 / 4), marginBottom: rhythm(1 / 4),
}} }}
> >
<Link style={{ boxShadow: "none" }} to={post.node.fields.slug}> <Link style={{ boxShadow: "none" }} to={post.node.frontmatter.path}>
{post.node.frontmatter.title} {post.node.frontmatter.title}
</Link> </Link>
</li> </li>
@ -50,7 +49,7 @@ BlogIndex.propTypes = {
export default BlogIndex export default BlogIndex
export const pageQuery = graphql` export const pageQuery = graphql`
query IndexQuery { query IndexQuery {
site { site {
siteMetadata { siteMetadata {
title title
@ -59,8 +58,8 @@ query IndexQuery {
allMarkdownRemark { allMarkdownRemark {
edges { edges {
node { node {
fields { frontmatter {
slug path
} }
frontmatter { frontmatter {
title title
@ -68,5 +67,5 @@ query IndexQuery {
} }
} }
} }
} }
` `

8
src/templates/blog-post.js
View file

@ -14,7 +14,9 @@ class BlogPostTemplate extends React.Component {
return ( return (
<div> <div>
<Helmet title={`${post.frontmatter.title} | ${siteTitle}`} /> <Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
<h1>{post.frontmatter.title}</h1> <h1>
{post.frontmatter.title}
</h1>
<p <p
style={{ style={{
...scale(-1 / 5), ...scale(-1 / 5),
@ -40,14 +42,14 @@ class BlogPostTemplate extends React.Component {
export default BlogPostTemplate export default BlogPostTemplate
export const pageQuery = graphql` export const pageQuery = graphql`
query BlogPostByPath($slug: String!) { query BlogPostByPath($path: String!) {
site { site {
siteMetadata { siteMetadata {
title title
author author
} }
} }
markdownRemark(fields: { slug: { eq: $slug }}) { markdownRemark(frontmatter: { path: { eq: $path } }) {
id id
html html
frontmatter { frontmatter {