Just use frontmatter paths for paths + cleanups
This commit is contained in:
Kyle Mathews
parent
4936e80940
commit
d2e2bc8df7
6 changed files with 33 additions and 63 deletions
|
|
@ -42,5 +42,6 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
`gatsby-plugin-offline`,
|
||||
`gatsby-plugin-react-helmet`,
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||
allMarkdownRemark(limit: 1000) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
frontmatter {
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,10 +34,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||
// Create blog posts pages.
|
||||
_.each(result.data.allMarkdownRemark.edges, edge => {
|
||||
createPage({
|
||||
path: edge.node.fields.slug, // required
|
||||
path: edge.node.frontmatter.path,
|
||||
component: blogPost,
|
||||
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
13
package.json
|
|
@ -9,30 +9,27 @@
|
|||
"dependencies": {
|
||||
"gatsby": "next",
|
||||
"gatsby-link": "next",
|
||||
"gatsby-transformer-remark": "next",
|
||||
"gatsby-transformer-sharp": "next",
|
||||
"gatsby-plugin-google-analytics": "next",
|
||||
"gatsby-plugin-manifest": "next",
|
||||
"gatsby-plugin-offline": "next",
|
||||
"gatsby-plugin-preact": "next",
|
||||
"gatsby-plugin-react-helmet": "next",
|
||||
"gatsby-plugin-sharp": "next",
|
||||
"gatsby-source-filesystem": "next",
|
||||
"gatsby-remark-copy-linked-files": "next",
|
||||
"gatsby-remark-prismjs": "next",
|
||||
"gatsby-remark-responsive-iframe": "next",
|
||||
"gatsby-remark-responsive-image": "next",
|
||||
"gatsby-remark-smartypants": "next",
|
||||
"gatsby-source-filesystem": "next",
|
||||
"gatsby-transformer-remark": "next",
|
||||
"gatsby-transformer-sharp": "next",
|
||||
"lodash": "^4.15.0",
|
||||
"moment": "^2.14.1",
|
||||
"react-helmet": "^4.0.0",
|
||||
"react-responsive-grid": "^0.3.3",
|
||||
"react-typography": "^0.15.0",
|
||||
"safe-access": "^0.1.0",
|
||||
"typeface-merriweather": "^0.0.25",
|
||||
"typeface-montserrat": "^0.0.24",
|
||||
"typography": "^0.15.8",
|
||||
"typography-theme-wordpress-2016": "^0.15.1",
|
||||
"underscore.string": "^3.2.3"
|
||||
"typography-theme-wordpress-2016": "^0.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^0.12.0"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ if (process.env.NODE_ENV === `production`) {
|
|||
}
|
||||
}
|
||||
|
||||
module.exports = React.createClass({
|
||||
export default class HTML extends React.Component {
|
||||
render() {
|
||||
const head = Helmet.rewind()
|
||||
let css
|
||||
|
|
@ -38,9 +38,6 @@ module.exports = React.createClass({
|
|||
{this.props.headComponents}
|
||||
<TypographyStyle typography={typography} />
|
||||
{css}
|
||||
{head.title.toComponent()}
|
||||
{head.meta.toComponent()}
|
||||
{head.link.toComponent()}
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
|
|
@ -51,5 +48,5 @@ module.exports = React.createClass({
|
|||
</body>
|
||||
</html>
|
||||
)
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import React from "react"
|
|||
import Link from "gatsby-link"
|
||||
import get from "lodash/get"
|
||||
import Helmet from "react-helmet"
|
||||
import include from "underscore.string/include"
|
||||
|
||||
import Bio from "../components/Bio"
|
||||
import { rhythm } from "../utils/typography"
|
||||
|
|
@ -23,7 +22,7 @@ class BlogIndex extends React.Component {
|
|||
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}
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -59,8 +58,8 @@ query IndexQuery {
|
|||
allMarkdownRemark {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
frontmatter {
|
||||
path
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ class BlogPostTemplate extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Helmet title={`${post.frontmatter.title} | ${siteTitle}`} />
|
||||
<h1>{post.frontmatter.title}</h1>
|
||||
<h1>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<p
|
||||
style={{
|
||||
...scale(-1 / 5),
|
||||
|
|
@ -40,14 +42,14 @@ class BlogPostTemplate extends React.Component {
|
|||
export default BlogPostTemplate
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query BlogPostByPath($slug: String!) {
|
||||
query BlogPostByPath($path: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
author
|
||||
}
|
||||
}
|
||||
markdownRemark(fields: { slug: { eq: $slug }}) {
|
||||
markdownRemark(frontmatter: { path: { eq: $path } }) {
|
||||
id
|
||||
html
|
||||
frontmatter {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue