Skip to content

Instantly share code, notes, and snippets.

@d4rekanguok
Created February 8, 2019 13:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save d4rekanguok/e2a67760db7fcd6452538e85d7378120 to your computer and use it in GitHub Desktop.
import React from 'react'
import rehypeReact from 'rehype-react'
import { Helmet } from 'react-helmet'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'
import NoteBlock from '../components/note-block'
// import '../css/blog-post.css'; // make it pretty!
// Run the Graphql query
export const pageQuery = graphql`
query ArticleByPath($slug: String!, $dir: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
id
htmlAst
frontmatter {
title
}
}
file (dir: { eq: $dir }, name: { eq: "hero" }) {
childImageSharp {
fixed {
src
}
}
}
}
`
// Register any components which are to be available in this template
// eslint-disable-next-line new-cap
const renderAst = new rehypeReact({
createElement: React.createElement,
components: { 'note-block': NoteBlock },
}).Compiler
export default function Template({ data }) {
const post = data.markdownRemark // data.markdownRemark holds our post data
const hero = data.file ? data.file.childImageSharp : null
return (
<div className="landing-page-container">
<Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
<div className="blog-post">
{hero && <img src={hero.fixed.src} alt={post.frontmatter.title} />}
<h1>{post.frontmatter.title}</h1>
<div className="blog-post-content">{renderAst(post.htmlAst)}</div>
</div>
</div>
)
}
Template.propTypes = {
data: PropTypes.instanceOf(Object).isRequired,
}
/**
* Implement Gatsby's Node APIs in this file.
*
* See: https://www.gatsbyjs.org/docs/node-apis/
*/
const path = require('path')
const { createFilePath } = require('gatsby-source-filesystem')
exports.createPages = ({ actions, graphql, getNode }) => {
const { createPage } = actions
// Register templates
const templateRegister = {
homepage: path.resolve('src/templates/homepage.js'),
article: path.resolve('src/templates/article.js'),
category: path.resolve('src/templates/category.js'),
}
return graphql(`
{
allMarkdownRemark(
limit: 1000
) {
edges {
node {
id
parent {
id
}
fields{
slug
}
frontmatter {
template
}
}
}
}
}
`).then((result) => {
if (result.errors) {
return Promise.reject(result.errors)
}
return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
// Use a template if specified in mardown frontmatter,
// otherwise use the article template by default
const component = (node.frontmatter.template)
? templateRegister[node.frontmatter.template]
: templateRegister.article
const { dir } = getNode(node.parent.id)
createPage({
path: node.fields.slug,
component,
context: {
dir,
slug: node.fields.slug,
},
})
})
})
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
// Add slug to MarkdownRemark node
if (node.internal.type === 'MarkdownRemark') {
const value = createFilePath({ node, getNode, basePath: 'library' })
createNodeField({
node,
name: 'slug',
value,
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment