update with-markdown example (#4839)

Changes:

* replaced the `markdown-in-js` with nextjs plugin for `MDX`

Highly inspired by the example from [MDX repository](https://github.com/mdx-js/mdx/tree/master/examples/next)

examples/with-markdown/.babelrc

@@ -1,4 +0,0 @@
-{
-    "presets": ["next/babel"],
-    "plugins": ["markdown-in-js/babel"]
-}

examples/with-markdown/README.md

@@ -41,4 +41,4 @@ now
 
 ## The idea behind the example
 
-This example shows the most basic idea behind implementing [markdown-in-js](https://github.com/threepointone/markdown-in-js), a library that allows you to write markdown that transpiles to React components *at build time*.
+This example shows how to integrate an [MDX](https://github.com/mdx-js/mdx) which is a _"JSX in Markdown loader, parser, and renderer for ambitious projects"_.

examples/with-markdown/md/markdown.mdx

@@ -0,0 +1,19 @@
+import Other from './other.mdx'
+
+# Hello, world `awesome` :smile_cat:
+
+<Other components={components} />
+
+```jsx
+<Other />
+```
+
+Here's a paragraph
+
+https://c8r.imgix.net/028ab8c85da415103cb3b1eb/johno.png
+
+Here's a table
+
+| Test | Table |
+| :--- | :---- |
+| Col1 | Col2  |

examples/with-markdown/md/other.mdx

@@ -0,0 +1,3 @@
+### Other `awesome`
+
+file

examples/with-markdown/next.config.js

@@ -0,0 +1,15 @@
+const images = require('remark-images')
+const emoji = require('remark-emoji')
+
+const withMDX = require('@zeit/next-mdx')({
+  options: {
+    mdPlugins: [
+      images,
+      emoji
+    ]
+  }
+})
+
+module.exports = withMDX({
+  pageExtensions: ['js', 'jsx', 'mdx']
+})

examples/with-markdown/package.json

@@ -7,10 +7,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "markdown-in-js": "^1.1.4",
+    "@mdx-js/mdx": "0.15.0-0",
+    "@zeit/next-mdx": "1.1.0",
     "next": "latest",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "remark-emoji": "2.0.1",
+    "remark-images": "0.8.1"
   },
   "license": "ISC"
 }

examples/with-markdown/pages/hello.mdx

@@ -0,0 +1 @@
+# Hello, world! :smiley:

examples/with-markdown/pages/index.js

@@ -1,9 +1,9 @@
-import markdown from 'markdown-in-js'
+import React from 'react'
+import Document from '../md/markdown.mdx'
 
-// For more advanced use cases see https://github.com/threepointone/markdown-in-js
+const H1 = props => <h1 style={{ color: 'tomato' }} {...props} />
+const InlineCode = props => <code id='codes' style={{ color: 'purple' }} {...props} />
+const Code = props => <code id='codes' style={{ fontWeight: 600 }} {...props} />
+const Pre = props => <pre id='codes' style={{ color: 'red' }} {...props} />
 
-export default () => <div>{markdown`
+export default () => <Document components={{ h1: H1, pre: Pre, code: Code, inlineCode: InlineCode }} />
-## This is a title
-
-This is a paragraph
-`}</div>