Update docs for online IDE possibility (Gitpod)

_data/docs.yml

@@ -74,5 +74,6 @@
 - title: IDE Plugins and Extensions
   docs:
   - vs-code
+  - online-ide
   - eclipse
   - ide

_docs/getting-started-create-project.md

@@ -11,14 +11,18 @@ This page describes how you can start with Context Mapper and create your first
  4. Create a file with the file extension **.cml**
 
 ## 1. Install Context Mapper
-You can use Context Mapper in Eclipse or Visual Studio Code. Find the links to the marketplaces below:
+You can use Context Mapper in Eclipse, Visual Studio Code, or the online IDE Gitpod. Find the links to the marketplaces below:
 
  * **Visual Studio Code:**
    * Marketplace: [Context Mapper for VS Code](https://marketplace.visualstudio.com/items?itemName=contextmapper.context-mapper-vscode-extension)
       1. Open the extensions view on your VS Code (Ctrl+Shift+X)
       2. Search for "Context Mapper"
       3. Select the plugin with our Context Mapper logo and press "Install".
    * Note: Does not support all features we have in Eclipse yet. You can find a feature support table [here](/docs/ide/).
+ * **Open VSX Registry for Gitpod:**
+   * Registry: [Context Mapper extension](https://open-vsx.org/extension/contextmapper/context-mapper-vscode-extension)
+      1. The easiest way to start: [Start Gitpod with our demo repository right now](https://contextmapper.org/demo/) (you can also fork the repo first, in case you want to commit your own models).
+      2. Alternatively: Start your own [Gitpod](https://www.gitpod.io/) and search for "Context Mapper" in the extension view (and install it manually). You find [installation instructions here](/docs/online-ide/).
  * **Eclipse:**
    * Marketplace: [Context Mapper for Eclipse](https://marketplace.eclipse.org/content/context-mapper)
       1. Open the marketplace in your Eclipse with the menu entry _Help -> Eclipse Marketplace..._

_docs/getting-started.md

@@ -20,6 +20,11 @@ To start using Context Mapper in Eclipse, please install the plugin via the **Ec
 **Eclipse Marketplace: [Context Mapper](https://marketplace.eclipse.org/content/context-mapper/)**
  * Alternatively you can use the following update site URL for manual installation in Eclipse: [https://dl.bintray.com/contextmapper/context-mapping-dsl/updates/](https://dl.bintray.com/contextmapper/context-mapping-dsl/updates/)
 
+## Online IDE (Gitpod)
+In case your project is hosted by GitHub, you can use [Gitpod](https://www.gitpod.io/) as online IDE. Our VS Code extension is published to the [Open VSX Registry](https://open-vsx.org/extension/contextmapper/context-mapper-vscode-extension) and can be found in the extensions in your [Gitpod](https://www.gitpod.io/).
+
+**Start online IDE now**: Just try it out with our **demo repository, [right now](https://contextmapper.org/demo/)**.
+
 ## System Requirements
 Besides the IDE plugin/extension, you need the following tools on your machine:
 

_docs/ide-plugins-and-extensions/online-ide.md

@@ -0,0 +1,66 @@
+---
+title: Online IDE (via Gitpod)
+permalink: /docs/online-ide/
+image: /img/cm-og-image.png
+---
+
+Instead of installing Context Mapper in [Eclipse](/docs/eclipse) or [Visual Studio Code](/docs/vs-code/), you can use our Editor and tools directly in the browser! If your project is hosted on Github, you can use our VS Code extension inside the online IDE provided by [Gitpod](https://www.gitpod.io/) (based on [Eclipse Theia](https://theia-ide.org/)).
+
+You can easily find the Context Mapper extension in your Gitpod, as we publish it to the [Open VSX Registry](https://open-vsx.org/extension/contextmapper/context-mapper-vscode-extension).
+
+<a target="_blank" href="/img/gitpod-screenshot.png">![Screenshot of Browser IDE (Gitpod)](/img/gitpod-screenshot.png)</a>
+
+## Getting Started
+You can start a [Gitpod](https://www.gitpod.io/) online IDE for your Github repository by prepending `https://gitpod.io/#` to its URL. For example, if the Github repo URL is [https://github.com/ContextMapper/context-mapper-examples](https://github.com/ContextMapper/context-mapper-examples), you start the Gitpod with [https://gitpod.io/#https://github.com/ContextMapper/context-mapper-examples](https://gitpod.io/#https://github.com/ContextMapper/context-mapper-examples).
+
+### Context Mapper Gitpod Demo
+Start mapping your contexts using our demo repository right now: (you can also fork the repo first, in case you want to commit your own models)
+
+**[Start online IDE with Context Mapper Demo](http://demo.contextmapper.org)** (http://demo.contextmapper.org)
+
+### Context Mapper Examples Repository
+Our examples repository already contains a Gitpod configuration as well. Therefore, you can simply start the online IDE and the Context Mapper extension will already be installed.
+
+**[Start online IDE for Context Mapper Examples Now](https://gitpod.io/#https://github.com/ContextMapper/context-mapper-examples)**
+
+### Configure Own Repository
+If you start the online IDE for your any other repository (not yet configured), you can easily install the Context Mapper extension.
+
+In case you want to configure Gitpod for all users of your repository, click "Setup Project" after you started the IDE to setup a `.gitpod.yml` file: 
+
+<a target="_blank" href="/img/gitpod-setup-project.png">![Setup Gitpod Project (.gitpod.yml)](/img/gitpod-setup-project.png)</a>
+
+To install Context Mapper, just open the extensions view, search for "Context Mapper", and click "Install":
+
+<a target="_blank" href="/img/gitpod-install-contextmapper.png">![Install Context Mapper in Gitpod](/img/gitpod-install-contextmapper.png)</a>
+
+In case you install the extension for the project (not only for user), it will be added to the `.gitpod.yml` file. By committing the file to your repo, you share the configuration with all users of your repository.
+
+### Configure Additional Tools
+Depending on how you use Context Mapper you may want to install additional tools in your Gitpod. For example: for the [graphical Context Map generator](/docs/context-map-generator/) you need [Graphviz](https://graphviz.org/) being installed on the system. This can be achieved by configuring a custom Dockerfile for your Gitpod. Just add a `.gitpod.Dockerfile` file to your Github repository. Here an example with Graphviz as additional tool:
+
+```
+FROM gitpod/workspace-full
+
+# Install Graphviz
+RUN sudo apt-get update \
+    && sudo apt-get -y install graphviz
+```
+
+In the `.gitpod.yml` file you have to declare the file as follows:
+
+```
+image:
+  file: .gitpod.Dockerfile
+```
+
+## Whats Next?
+
+ * Check our [language reference](/docs/language-reference/) for the syntax of Context Mapper DSL (CML) files.
+ * Have a look at our [example](/docs/examples/) models.
+ * Once you are familiar with the DSL, learn more about the following tools and generators:
+   * [Rapid prototyping transformations](/docs/rapid-ooad/)
+   * [Architectural Refactorings (ARs)](/docs/architectural-refactorings/)
+   * [Context Map Suggestions with Service Cutter](/docs/service-cutter-context-map-suggestions/)
+   * [Discovery library](/docs/reverse-engineering/) to reverse engineer CML models from existing code.
+   * [Generators](/docs/generators/)

_docs/index.md

@@ -16,6 +16,10 @@ The **[core component](/docs/language-reference/)** provides a DSL to create con
 **Eclipse Marketplace: [Context Mapper](https://marketplace.eclipse.org/content/context-mapper/)**
  * Alternatively you can install the Eclipse plugin manually with the following update site URL: [https://dl.bintray.com/contextmapper/context-mapping-dsl/updates/](https://dl.bintray.com/contextmapper/context-mapping-dsl/updates/)
 
+**Online IDE (Gitpod)**: In case you don't want to install Context Mapper locally and your project is hosted on Github, you can use [Gitpod](https://www.gitpod.io/) as online IDE with our VS Code extension.
+ * The extension is published to the [Open VSX Registry](https://open-vsx.org/extension/contextmapper/context-mapper-vscode-extension), so you can easily find the extension in Gitpod. Installation instructions can be found [here](/docs/online-ide/).
+ * Or: **Start modeling in our Context Mapper demo repository [right now](https://contextmapper.org/demo/)**.
+
 ## Framework Architecture
 
 ![Context Mapper Framework Components](/img/context-mapper-framework-components.png)

index.html

@@ -24,7 +24,7 @@ <h2 class="header-light regular-pad">
           <ul class="start-page-quicklinks">
             <li><a href="/docs/home/">What is Context Mapper?</a> Learn more about the <a href="/docs/background-and-publications/">project's background</a>.</li>
             <li>New to Context Mapper? - <a href="/docs/getting-started/">Get Started</a></li>
-            <li>Installation Links: <a href="https://marketplace.eclipse.org/content/context-mapper/">Eclipse Plugin</a>, <a href="https://marketplace.visualstudio.com/items?itemName=contextmapper.context-mapper-vscode-extension">Visual Studio Code Extension</a></li>
+            <li>Installation Links: <a href="https://marketplace.eclipse.org/content/context-mapper/">Eclipse Plugin</a>, <a href="https://marketplace.visualstudio.com/items?itemName=contextmapper.context-mapper-vscode-extension">Visual Studio Code Extension</a>, <a href="https://contextmapper.org/demo/">Online IDE</a></li>
             <li><a href="/docs/examples/">Example models</a></li>
             <li><a href="{{ site.news.last.url | prepend: site.baseurl }}">Latest News and Release Notes</a></li>
             <li>Learn more about: <a href="/docs/language-reference/">Context Mapping DSL (CML)</a>, <a href="/docs/architectural-refactorings/">Architectural Refactorings</a>, 
@@ -37,6 +37,7 @@ <h2 class="header-light regular-pad">
         </div>
         <div class="col-md-6 text-center">
             <img src="img/cm.png" alt="" class="img-responsive">
+            <a style="margin-top: 20px;" class="btn btn-primary btn-lg" href="/demo/" target="_blank" role="button">Start IDE Now (Online)</a>
         </div>
     </div>