feat: 🎸 Gatsby MDX support, code block highlight, dark mode

Author: xichen1

blog/another-blog.mdx

@@ -0,0 +1,8 @@
+---
+title: "Another Post"
+queryId: "another-post"
+date: "2021-07-24"
+description: "Another blog test test test"
+---
+
+Here's another post! It's even better than the first one!

blog/my-first-blog.mdx

@@ -0,0 +1,21 @@
+---
+title: "My First Post"
+queryId: "my-first-post"
+date: "2021-07-23"
+description: "This is my first blog post!"
+---
+
+This is my first blog post! Isn't it *great*?
+
+Some of my **favorite** things are:
+
+- Petting dogs
+- Singing
+- Eating potato-based foods
+
+
+```javascript
+alert('how cool is this!');
+
+print("abc")
+```

gatsby-browser.js

@@ -1 +1,2 @@
 import "./src/styles/global.css"
+require("prismjs/themes/prism-solarizedlight.css")

gatsby-config.ts

@@ -1,15 +1,57 @@
-import type { GatsbyConfig } from "gatsby";
+import type {GatsbyConfig} from "gatsby";
 
 const config: GatsbyConfig = {
-  siteMetadata: {
-    title: `PPX Gatsby Blog`,
-    siteUrl: `https://www.yourdomain.tld`
-  },
-  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
-  // If you use VSCode you can also use the GraphQL plugin
-  // Learn more at: https://gatsby.dev/graphql-typegen
-  graphqlTypegen: true,
-  plugins: ["gatsby-plugin-postcss"]
+    siteMetadata: {
+        title: `PPX Blog`,
+        siteUrl: `https://blog.ppxa.link`
+    },
+    // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
+    // If you use VSCode you can also use the GraphQL plugin
+    // Learn more at: https://gatsby.dev/graphql-typegen
+    graphqlTypegen: true,
+    plugins: ["gatsby-plugin-postcss", "gatsby-plugin-dark-mode","gatsby-plugin-image", "gatsby-plugin-sharp",
+        {
+            resolve: `gatsby-plugin-alias-imports`,
+            options: {
+                alias: {
+                    "@src": "src",
+                },
+                extensions: [
+                    "js", "jsx", "ts", "tsx"
+                ],
+            }
+        },
+        {
+            resolve: "gatsby-source-filesystem",
+            options: {
+                name: `blog`,
+                path: `${__dirname}/blog`,
+            }
+        },
+        "gatsby-plugin-mdx",
+        {
+            resolve: `gatsby-transformer-remark`,
+            options: {
+                plugins: [
+                    {
+                        resolve: `gatsby-remark-images`,
+                        options: {
+                            maxWidth: 590,
+                        },
+                    },
+                    {
+                        resolve: `gatsby-remark-responsive-iframe`,
+                        options: {
+                            wrapperStyle: `margin-bottom: 1.0725rem`,
+                        },
+                    },
+                    `gatsby-remark-prismjs`,
+                    `gatsby-remark-copy-linked-files`,
+                    `gatsby-remark-smartypants`,
+                ],
+            },
+        },
+    ]
 };
 
 export default config;