simplify code contributions by fully automating the dev setup with gitpod

3 files changed, 13 insertions, 1 deletions

diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 00000000..ded36866
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,6 @@
+tasks:
+  - init: npm install && npm i gulp -g
+    command: gulp
+ports:
+  - port: 3000
+    onOpen: open-preview
diff --git a/contributing.md b/contributing.md
index 5759fb04..11692711 100644
--- a/contributing.md
+++ b/contributing.md
@@ -29,6 +29,12 @@ Please follow the instructions in our issue templates. Don't use github issues t
 
 * To test locally, you can use the demo. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build while you are working, and run a local server from the repository root directory. If you have Python installed, this command should work: `python -m SimpleHTTPServer 8080`. Then go to `http://localhost:8080/demo/`
 
+### Online one-click setup
+
+You can use gitpod(a free online vs code like ide) for contributing, with a single click it will automatically launch a ready to code workspace with all the dependencies pre-installed, gulp watching for changes and the web server running, so that you can start straight away without wasting time on the setup.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+
 * Develop and test your modifications.
 
 * Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as the build output, or logging and breakpoints you added for testing.
diff --git a/readme.md b/readme.md
index e227b114..17b9ec6f 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
 
-[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat) - [![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr)
+[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat) - [![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/sampotts/plyr)
 
 [![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)