simplify contributions by fully automating the dev setup with gitpod.

.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - init: yarn install
+    command: yarn run start
+ports: 
+  - port: 8000
+    onOpen: open-preview

CONTRIBUTING.md

@@ -14,6 +14,16 @@ This project is set up as a monorepo using Yarn Workspaces.
 2. Install dependencies with `yarn`
 3. Run `yarn start` to see the demo `docs/demo.mdx`
 
+### Develop with one-click online setup
+
+You can use Gitpod (a free online VS Code-like IDE) for the online one-click setup. With a single click it'll launch a workspace and automatically:
+
+- clone the mdx-deck repo.
+- install the dependencies.
+- run `yarn run start`.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+
 ### Watch mode
 
 To watch files for changes during development, run `npm run watch`

packages/mdx-deck/README.md

@@ -1,3 +1,5 @@
+() 
+
 ![](https://s3.amazonaws.com/jxnblk/mdx-deck-2.gif)
 
 # MDX Deck <img src='docs/ace.png' width='24' height='24' />
@@ -7,12 +9,15 @@ Award-winning React [MDX][]-based presentation decks
 [![Build Status][badge]][circleci]
 [![Version][]][npm]
 [![Downloads][]][npm]
+[![Gitpod Ready-to-Code][gitpod]][workspace]
 
 [badge]: https://flat.badgen.net/github/status/jxnblk/mdx-deck/master/ci/circleci
 [circleci]: https://circleci.com/gh/jxnblk/mdx-deck
 [version]: https://flat.badgen.net/npm/v/mdx-deck
 [downloads]: https://flat.badgen.net/npm/dm/mdx-deck
 [npm]: https://npmjs.com/package/mdx-deck
+[gitpod]: https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod
+[workspace]: https://gitpod.io/#https://github.com/jxnblk/mdx-deck
 
 - :memo: Write presentations in markdown
 - :atom_symbol: Import and use [React components](#imports)