diff --git a/blog/last_week.mdx b/blog/last week.mdx similarity index 100% rename from blog/last_week.mdx rename to blog/last week.mdx diff --git a/src/pages/blog.js b/src/pages/blog/index.js similarity index 58% rename from src/pages/blog.js rename to src/pages/blog/index.js index e4196f5..d614be4 100644 --- a/src/pages/blog.js +++ b/src/pages/blog/index.js @@ -1,7 +1,6 @@ import * as React from 'react' -import { graphql } from 'gatsby' -import { MDXRenderer } from 'gatsby-plugin-mdx' -import Layout from '../components/layout' +import { Link, graphql } from 'gatsby' +import Layout from '../../components/layout' const BlogPage = ({data}) => { return ( @@ -9,11 +8,12 @@ const BlogPage = ({data}) => { { data.allMdx.nodes.map((node) => (
-

{node.frontmatter.title}

-

Posted: {node.frontmatter.date}

- - {node.body} - +

+ + {node.frontmatter.title} + +

+

Posted: {node.frontmatter.date}

)) } @@ -30,7 +30,7 @@ query blogMDXQuery { title } id - body + slug } } } diff --git a/src/pages/blog/{mdx.slug}.js b/src/pages/blog/{mdx.slug}.js new file mode 100644 index 0000000..412d478 --- /dev/null +++ b/src/pages/blog/{mdx.slug}.js @@ -0,0 +1,29 @@ +import Layout from '../../components/layout' +import { graphql } from 'gatsby' +import { MDXRenderer } from 'gatsby-plugin-mdx' +import * as React from 'react' + +const BlogPost = ({data}) => { + return ( + +

{data.mdx.frontmatter.date}

+ + {data.mdx.body} + +
+ ) +} + +export const query = graphql` + query ($id: String) { + mdx(id: {eq: $id}) { + frontmatter { + title + date(formatString: "MMMM D, YYYY") + } + body + } + } +` + +export default BlogPost \ No newline at end of file