feat: added mdx

prvnbist · Jan 11, 2020 · 8ea8dfb · 8ea8dfb
1 parent 11b23a6
commit 8ea8dfb
Show file tree

Hide file tree

Showing 9 changed files with 649 additions and 2,281 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -11,35 +11,15 @@ module.exports = {
       {
          resolve: 'gatsby-source-filesystem',
          options: {
-            name: 'src',
-            path: `${__dirname}/src/`
+            name: 'posts',
+            path: `${__dirname}/src/posts`
          }
       },
-      'gatsby-plugin-sharp',
-      `gatsby-transformer-sharp`,
       {
-         resolve: 'gatsby-transformer-remark',
+         resolve: `gatsby-plugin-mdx`,
          options: {
-            plugins: [
-               'gatsby-remark-relative-images',
-               {
-                  resolve: 'gatsby-remark-images',
-                  options: {
-                     maxWidth: 750,
-                     linkImagesToOriginal: false
-                  }
-               },
-               {
-                  resolve: `gatsby-remark-prismjs`,
-                  options: {
-                     classPrefix: 'language-',
-                     inlineCodeMarker: null,
-                     aliases: {},
-                     showLineNumbers: true,
-                     noInlineHighlight: false
-                  }
-               }
-            ]
+            extensions: [`.mdx`, `.md`],
+            gatsbyRemarkPlugins: [`gatsby-remark-prismjs`]
          }
       },
       {

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -7,8 +7,8 @@ require('dotenv').config({
 module.exports.onCreateNode = ({ node, actions }) => {
    const { createNodeField } = actions
 
-   if (node.internal.type === 'MarkdownRemark') {
-      const slug = path.basename(node.fileAbsolutePath, '.md')
+   if (node.internal.type === 'Mdx') {
+      const slug = path.basename(node.fileAbsolutePath, '.mdx')
 
       createNodeField({ node, name: 'slug', value: slug })
    }
@@ -19,7 +19,7 @@ module.exports.createPages = async ({ graphql, actions }) => {
    const blogTemplate = path.resolve('./src/templates/blog/index.jsx')
    const res = await graphql(`
       query {
-         allMarkdownRemark {
+         allMdx {
             edges {
                node {
                   fields {
@@ -31,7 +31,7 @@ module.exports.createPages = async ({ graphql, actions }) => {
       }
    `)
 
-   res.data.allMarkdownRemark.edges.forEach(edge => {
+   res.data.allMdx.edges.forEach(edge => {
       createPage({
          component: blogTemplate,
          path: `/blog/${edge.node.fields.slug}`,

diff --git a/package.json b/package.json
@@ -10,19 +10,17 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.5.3",
+    "@mdx-js/react": "^1.5.3",
     "babel-plugin-styled-components": "^1.10.6",
     "dotenv": "^8.2.0",
     "gatsby": "^2.18.21",
     "gatsby-image": "^2.2.38",
     "gatsby-plugin-google-analytics": "^2.1.32",
-    "gatsby-plugin-sharp": "^2.3.13",
+    "gatsby-plugin-mdx": "^1.0.67",
     "gatsby-plugin-styled-components": "^3.1.17",
-    "gatsby-remark-images": "^3.1.42",
     "gatsby-remark-prismjs": "^3.3.30",
-    "gatsby-remark-relative-images": "^0.2.3",
     "gatsby-source-filesystem": "^2.1.46",
-    "gatsby-transformer-remark": "^2.6.48",
-    "gatsby-transformer-sharp": "^2.3.12",
     "prismjs": "^1.18.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
@@ -6,20 +6,20 @@ import Layout from '../../sections/Layout'
 import { PageHeading, Articles, Article } from './styles'
 
 const BlogPage = () => {
-   const data = useStaticQuery(graphql`
+   const {
+      allMdx: { edges: articles }
+   } = useStaticQuery(graphql`
       query {
-         allMarkdownRemark(
-            sort: { order: ASC, fields: [frontmatter___published] }
-         ) {
+         allMdx(sort: { order: ASC, fields: frontmatter___published }) {
             edges {
                node {
+                  fields {
+                     slug
+                  }
                   frontmatter {
                      title
                      published
                   }
-                  fields {
-                     slug
-                  }
                }
             }
          }
@@ -28,22 +28,18 @@ const BlogPage = () => {
    return (
       <Layout>
          <PageHeading>Articles</PageHeading>
-         {!data ? (
-            <div>Loading...</div>
-         ) : (
-            <Articles>
-               {data.allMarkdownRemark.edges.map((edge, index) => {
-                  return (
-                     <Article key={index}>
-                        <Link to={`/blog/${edge.node.fields.slug}`}>
-                           <h4>{edge.node.frontmatter.title}</h4>
-                           <span>{edge.node.frontmatter.published}</span>
-                        </Link>
-                     </Article>
-                  )
-               })}
-            </Articles>
-         )}
+         <Articles>
+            {articles.map(({ node }, index) => {
+               return (
+                  <Article key={index}>
+                     <Link to={`/blog/${node.fields.slug}`}>
+                        <h4>{node.frontmatter.title}</h4>
+                        <span>{node.frontmatter.published}</span>
+                     </Link>
+                  </Article>
+               )
+            })}
+         </Articles>
       </Layout>
    )
 }

diff --git a/...s/a-comprehensive-guid-to-the-codechef.md → .../a-comprehensive-guid-to-the-codechef.mdx b/...s/a-comprehensive-guid-to-the-codechef.md → .../a-comprehensive-guid-to-the-codechef.mdx
@@ -2,7 +2,7 @@
 title: "A comprehensive guide to the Codechef"
 published: "Nov 6, 2016"
 updated: ""
-tags: "code, competitive, programming, cpp"
+tags: ['code', 'competitive', 'programming', 'cpp']
 ---
 
 ![Pair Programming](https://res.cloudinary.com/prvnbist/image/upload/v1559636489/portfolio/Blog/alvaro-reyes-500044-unsplash.jpg "Pair Programming")

diff --git a/...create-a-tags-input-component-in-react.md → ...reate-a-tags-input-component-in-react.mdx b/...create-a-tags-input-component-in-react.md → ...reate-a-tags-input-component-in-react.mdx
@@ -2,7 +2,7 @@
 title: "Create a tags input component in ReactJs"
 published: "July 10, 2019"
 updated: ""
-tags: "react, component, input, tags"
+tags: ['react', 'component', 'input', 'tags']
 ---
 
 ![Tags Input Demo](https://res.cloudinary.com/prvnbist/image/upload/v1562756503/portfolio/Blog/tags-input-demo.gif "Tags Input Demo")

diff --git a/.../setting-up-firebase-with-react-part-1.md → ...setting-up-firebase-with-react-part-1.mdx b/.../setting-up-firebase-with-react-part-1.md → ...setting-up-firebase-with-react-part-1.mdx
@@ -2,7 +2,7 @@
 title: "Setting up Firebase with React - Firebase React Authentication Part 1"
 published: "Aug 2, 2019"
 updated: ""
-tags: "react, firebase, setup, firestore"
+tags: ['react', 'firebase', 'setup', 'firestore']
 ---
 
 ## Project Setup

diff --git a/src/templates/blog/index.jsx b/src/templates/blog/index.jsx
@@ -1,63 +1,53 @@
 import React from 'react'
 import { graphql, Link } from 'gatsby'
+import { MDXRenderer } from 'gatsby-plugin-mdx'
 
 import Layout from '../../sections/Layout'
 
 export const query = graphql`
    query($slug: String!) {
-      markdownRemark(fields: { slug: { eq: $slug } }) {
+      mdx(fields: { slug: { eq: $slug } }) {
          frontmatter {
             title
-            published
-            updated
             tags
+            published
          }
-         fields {
-            slug
-         }
-         timeToRead
-         html
+         body
       }
    }
 `
 
 const Blog = props => {
+   const post = props.data.mdx
    return (
       <Layout>
          <div>
             <div>
                <Link to="/blog">Back</Link>
-               <h3>{props.data.markdownRemark.frontmatter.title}</h3>
+               <h3>{post.frontmatter.title}</h3>
                <ul>
-                  {props.data.markdownRemark.frontmatter.tags
-                     .split(',')
-                     .map(tag => (
-                        <li key={tag}>{tag}</li>
-                     ))}
+                  {post.frontmatter.tags.map(tag => (
+                     <li key={tag}>{tag}</li>
+                  ))}
                </ul>
                <div>
-                  <span>{props.data.markdownRemark.frontmatter.published}</span>
+                  <span>{post.frontmatter.published}</span>
                   <span>
-                     {props.data.markdownRemark.timeToRead}
+                     {post.timeToRead}
                      mins read
                   </span>
                </div>
             </div>
          </div>
          <div>
-            <div
-               dangerouslySetInnerHTML={{
-                  __html: props.data.markdownRemark.html
-               }}></div>
+            <MDXRenderer>{post.body}</MDXRenderer>
             <div>
                <div>
                   <h5>Tags</h5>
                   <ul>
-                     {props.data.markdownRemark.frontmatter.tags
-                        .split(',')
-                        .map((tag, index) => (
-                           <li key={index}>{tag}</li>
-                        ))}
+                     {post.frontmatter.tags.map((tag, index) => (
+                        <li key={index}>{tag}</li>
+                     ))}
                   </ul>
                </div>
             </div>