render source code

tuan231195 · Aug 10, 2020 · 2f44b3d · 2f44b3d
1 parent f7b2e9a
commit 2f44b3d
Show file tree

Hide file tree

Showing 12 changed files with 952 additions and 671 deletions.
diff --git a/blog/2020-08-10-my-first-blog-post.md b/blog/2020-08-10-my-first-blog-post.md
diff --git a/blog/2020-08-10-my-first-blog.md b/blog/2020-08-10-my-first-blog.md
@@ -3,6 +3,9 @@ templateKey: blog-post
 title: My First Blog
 date: 2020-08-10T02:11:01.556Z
 image: /img/beautiful-calla-lily-nice-background-color-70725804.jpg
+tags:
+  - JavaScript
+  - React
 ---
 **This is my bold text**
 
@@ -22,4 +25,4 @@ get(object, 'value.1');
 
   * *list 2*
 
-![](/img/512px-eo_circle_lime_letter-t.svg.png "Test image")
+![](/img/512px-eo_circle_lime_letter-t.svg.png "Test image")
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -18,14 +18,22 @@ module.exports = {
 	},
 	plugins: [
 		`gatsby-plugin-netlify-cms`,
+		{
+			resolve: `gatsby-plugin-mdx`,
+			options: {
+				extensions: ['.mdx', '.md'],
+				defaultLayouts: {
+					default: require.resolve('./src/templates/BlogTemplate.tsx'),
+				},
+			},
+		},
 		{
 			resolve: `gatsby-source-filesystem`,
 			options: {
 				path: `${__dirname}/blog`,
 				name: `blogs`,
 			},
 		},
-		`gatsby-transformer-remark`,
 		`gatsby-plugin-react-helmet`,
 		`gatsby-plugin-postcss`,
 		`gatsby-plugin-emotion`,

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -51,16 +51,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 
 	const result = await graphql(`
 		{
-			allMarkdownRemark(
-				sort: { order: DESC, fields: [frontmatter___date] }
-				limit: 1000
-			) {
-				edges {
-					node {
-						fields {
-							slug
-						}
-					}
+			allMdx(sort: { order: DESC, fields: [frontmatter___date] }, limit: 1000) {
+				nodes {
+					slug
 				}
 			}
 		}
@@ -72,27 +65,13 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
 		return;
 	}
 
-	result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+	result.data.allMdx.nodes.forEach((node) => {
 		createPage({
-			path: `/blogs/${node.fields.slug}`,
+			path: `/blogs/${node.slug}`,
 			component: blogPostTemplate,
 			context: {
-				slug: node.fields.slug,
+				slug: node.slug,
 			},
 		});
 	});
 };
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-	const { createNodeField } = actions;
-
-	if (node.internal.type === `MarkdownRemark`) {
-		const filePath = createFilePath({ node, getNode, basePath: `blog` });
-		const slug = filePath.substr(1, filePath.length - 2);
-		createNodeField({
-			name: `slug`,
-			node,
-			value: slug,
-		});
-	}
-};