demo-advanced.mdx

import { Head, Appear, Image, withDeck } from 'mdx-deck' // https://github.com/jxnblk/mdx-deck import { Invert, Split } from 'mdx-deck/layouts' import { CodeSurfer } from 'mdx-deck-code-surfer' // https://elijahmanor.com/code-surfer/

MDX-deck on ZEIT Now

<title>MDX-deck on ZEIT Now</title>

---

Our goal

Deploy a heavily customized mdx-deck presentation

What will we need?

• A sample MDX-deck presentation
• A few changes to our configuration file
• An ability to type three letters and deploy our presentation

For this demo, there are three things that we are going to need.

---

This demo contains...

• Custom layouts
• Images and code snippets
• A custom React component to look at a code snippet

---

Initial configuration

Let's take a look at our now.json file...

---

<CodeSurfer code={require("!raw-loader!./snippets/example-nowconfiguration.snippet")} title="ZEIT Now - now.json" showNumbers steps={[ {}, // First step should be an overview of the snippet {lines: [2], notes: "Specify version 2"}, {lines: [3], notes: "Give our project a name"}, {range: [4,6], notes: "Use @now/static-build when serving static content"}, {} ]} />

---

One more thing

Add a now-build script to package.json which

• Builds a static site containing our presentation
• Recursively copies images to our new build directory
• Recursively copies code snippets to our new build directory

---

<CodeSurfer code={require("!raw-loader!./snippets/example-packagejson.snippet")} title="ZEIT Now - package.json" showNumbers steps={[ {}, // First step should be an overview of the snippet ]} />

---

Deploy to ZEIT Now

Simply type now and deploy your presentation...

---

Demo

export default Invert

---

Thank you

Rob Brennan @therobbrennan

---

The author of this presentation; a drummer for a hard rock band in Seattle, WA