From 51f120ec70c6e3535f6dcc75c93e1bf8dfec29c8 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 6 Dec 2017 16:59:32 -0800
Subject: [PATCH] Add markdown-in-js example (#3410)

---
 examples/with-markdown/.babelrc       |  4 +++
 examples/with-markdown/package.json   | 16 +++++++++++
 examples/with-markdown/pages/index.js |  9 ++++++
 examples/with-markdown/readme.md      | 40 +++++++++++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 examples/with-markdown/.babelrc
 create mode 100644 examples/with-markdown/package.json
 create mode 100644 examples/with-markdown/pages/index.js
 create mode 100644 examples/with-markdown/readme.md

diff --git a/examples/with-markdown/.babelrc b/examples/with-markdown/.babelrc
new file mode 100644
index 00000000..6c229df8
--- /dev/null
+++ b/examples/with-markdown/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": ["markdown-in-js/babel"]
+}
diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json
new file mode 100644
index 00000000..f9f76a2b
--- /dev/null
+++ b/examples/with-markdown/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-markdown",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "markdown-in-js": "1.1.3",    
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}
\ No newline at end of file
diff --git a/examples/with-markdown/pages/index.js b/examples/with-markdown/pages/index.js
new file mode 100644
index 00000000..da7287b8
--- /dev/null
+++ b/examples/with-markdown/pages/index.js
@@ -0,0 +1,9 @@
+import markdown from 'markdown-in-js'
+
+// For more advanced use cases see https://github.com/threepointone/markdown-in-js
+
+export default () => <div>{markdown`
+## This is a title
+
+This is a paragraph
+`}</div>
diff --git a/examples/with-markdown/readme.md b/examples/with-markdown/readme.md
new file mode 100644
index 00000000..b0ced31e
--- /dev/null
+++ b/examples/with-markdown/readme.md
@@ -0,0 +1,40 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-markdown)
+
+# With Markdown example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```
+npm i -g create-next-app
+create-next-app --example with-markdown with-markdown
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-markdown
+cd with-markdown
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+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*.