Coffee Editor NG

* Improve front page
* Update container
* Add structure for documentation
* Documentation: Language Definition and Langium Integration
  * Explain how languages can be defined in Langium
  * Explain Model Hub-Langium integration library and layer
* doc: tree based editor
* doc: Editing Domain Section
* doc: improve Model Hub section
* doc: content about reference resolution and cross references
* doc: add diagram editor documentation
  * update outdated animated diagram gif (from outdated ecore glsp editor)
* remove references to new code base and cleanup
* rename `EMF.cloud` to `EMF Cloud`

---------

Co-authored-by: Philip Langer <[email protected]>
Co-authored-by: Martin Fleck <[email protected]>
Co-authored-by: Camille Letavernier <[email protected]>
Co-authored-by: Nina Doschek <[email protected]>

.devcontainer/Dockerfile

@@ -1,5 +1,5 @@
 # Update the NODE_VERSION arg in docker-compose.yml to pick a Node version: 10, 12, 14
-ARG NODE_VERSION=14
+ARG NODE_VERSION=16
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${NODE_VERSION}
 
 # VARIANT can be either 'hugo' for the standard version or 'hugo_extended' for the extended version.
@@ -35,4 +35,4 @@ EXPOSE 1313
 #     && apt-get -y install --no-install-recommends <your-package-list-here>
 
 # [Optional] Uncomment if you want to install more global node packages
-# RUN sudo -u node npm install -g <your-package-list-here>
+# RUN sudo -u node npm install -g <your-package-list-here>

.devcontainer/devcontainer.json

@@ -12,25 +12,29 @@
       // Rebuild the container if it already exists to update.
       "VERSION": "0.78.1",
       // Update NODE_VERSION to pick the Node.js version: 12, 14
-      "NODE_VERSION": "14",
+      "NODE_VERSION": "16",
       "BUILDKIT_INLINE_CACHE": "0"
     }
   },
-
-  // Set *default* container specific settings.json values on container create.
-  "settings": {
-    "html.format.templating": true
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "html.format.templating": true
+      }
+    },
+    // Set *default* container specific settings.json values on container create.
+    // Add the IDs of extensions you want installed when the container is created.
+    "extensions": [
+      "bungcip.better-toml",
+      "davidanson.vscode-markdownlint"
+    ],
   },
-
-  // Add the IDs of extensions you want installed when the container is created.
-  "extensions": ["bungcip.better-toml", "davidanson.vscode-markdownlint"],
-
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  "forwardPorts": [1313],
-
+  "forwardPorts": [
+    1313
+  ],
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "uname -a",
-
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
   "remoteUser": "node"
-}
+}

config.toml

@@ -1,6 +1,6 @@
 baseURL = "https://www.eclipse.dev/emfcloud"
 DefaultContentLanguage = "en"
-title = "EMF.cloud"
+title = "EMF Cloud"
 theme = "syna"
 
 [markup.goldmark.renderer]
@@ -15,7 +15,7 @@ lastmod = ["lastmod", ":git", "date"]
 
 [params]
   name = "Eclipse Foundation"
-  description = "EMF.cloud"
+  description = "EMF Cloud"
 
   [params.style]
     #background = "secondary"
@@ -43,14 +43,14 @@ lastmod = ["lastmod", ":git", "date"]
     pro = false
 
   [params.colors]
-    primary = "#00838F"
-    secondary = "#868e96"
+    primary = "#2490c6"
+    secondary = "#faf9f9"
     success = "#008f54"
     info = "#00c9dc"
     warning = "#fdf314"
     danger = "#dc1200"
-    light = "#f8f9fa"
-    dark = "#073763ff"
+    light = "#faf9f9"
+    dark = "#1e2624"
 
 # main/prepend/postpend menus are displayed in nav fragment.
 # Keep an eye out for updates. These will be moved out to make navbar more

content/_global/footer.md

@@ -5,14 +5,14 @@ weight = 2000
 menu_title = "Related Projects"
 
 [asset]
-  title = "EMF.cloud"
+  title = "EMF Cloud"
   image = "logo.png"
-  text = "EMF.cloud"
+  text = "EMF Cloud"
   url = "#"
 +++
 
-#### EMF.cloud
+#### EMF Cloud
 
-EMF.cloud is a project hosted at the [Eclipse Foundation](https://eclipse.org), lead by [Eugen, Philip and Maximilian](https://projects.eclipse.org/projects/ecd.emfcloud/who), organized within the [Eclipse Cloud Development](https://projects.eclipse.org/projects/ecd) project.
+EMF Cloud is a project hosted at the [Eclipse Foundation](https://eclipse.org), lead by [Eugen, Philip and Maximilian](https://projects.eclipse.org/projects/ecd.emfcloud/who), organized within the [Eclipse Cloud Development](https://projects.eclipse.org/projects/ecd) project.
 
 Gefördert durch: ![BMBG Logo](/emfcloud/images/BMBF_Logo.svg)

content/_global/nav.md

@@ -5,6 +5,6 @@ weight = 0
 # Branding options
 [asset]
   image = "logo.png"
-  text = "EMF.cloud"
-  title = "EMF.cloud"
+  text = "EMF Cloud"
+  title = "EMF Cloud"
 +++

content/_index.md

@@ -1,4 +1,4 @@
 +++
-title = "EMF.cloud"
-description = "The Eclipse Modeling Framework for the cloud"
-+++
+title = "EMF Cloud"
+description = "Open-source Frameworks for Next-generation, Web-based Modeling Tools"
++++

content/_index/coffeeeditorlinks/blogpost.md

@@ -7,4 +7,4 @@ weight = 30
   url = "https://eclipsesource.com/blogs/2020/07/24/a-web-based-modeling-tool-based-on-eclipse-theia/"
 +++
 
-If you want to learn more about the coffee editor, please see [this article, describing the details](https://eclipsesource.com/blogs/2020/07/24/a-web-based-modeling-tool-based-on-eclipse-theia/) or watch [this video](https://www.youtube.com/watch?v=2tRJpC8IIiI). Alternatively, you find an overview of the available features below.
+If you want to learn more watch the [talk demonstrating the tool in action](https://www.youtube.com/watch?v=U0TRt3aukTc). Then head over to the [documentation on getting started]({{< relref documentation >}}).

content/_index/coffeeeditorlinks/index.md

@@ -4,6 +4,6 @@ weight = 300
 background = "dark"
 
 #title = "The Coffee Editor"
-#subtitle= "An example web-based modeling tool using EMF.cloud technologies used for demonstration and documentation"
+#subtitle= "An example web-based modeling tool using EMF Cloud technologies used for demonstration and documentation"
 #title_align = "left" # Default is center, can be left, right or center
-+++
++++

content/_index/coffeeeditorlinks/sources.md

@@ -7,4 +7,5 @@ weight = 20
   url = "https://github.com/eclipse-emfcloud/coffee-editor"
 +++
 
-The coffee editor is an open source example modeling application. Have a look at [the sources](https://github.com/eclipse-emfcloud/coffee-editor) to find out how the features are implemented. The link above also contains instructions how to run the coffee editor yourself.
+The coffee editor is an open source example modeling application. Have a look at the [emf-based source code](https://github.com/eclipse-emfcloud/coffee-editor) to find out how the features are implemented. The link above also contains instructions how to run the coffee editor yourself.
+The sources of the Coffee Editor NG are not yet available.

content/_index/coffeeeditorlinks/tryitnow.md

@@ -7,4 +7,4 @@ weight = 10
   url = "https://eclipsesource.com/coffee-editor"
 +++
 
-If you want to see the coffee editor in action, please click [here to launch a demo instance](https://eclipsesource.com/coffee-editor). This allows you to try any feature of the example. Please note that the demo will automatically shut down after 30 minutes and no data will be persisted.
+If you want to see the coffee editor in action, [launch a demo instance](https://eclipsesource.com/coffee-editor) of the EMF-based coffee editor. This allows you to try any feature of the example. Please note that the demo will automatically shut down after 30 minutes and no data will be persisted.

content/_index/coffeeeditoroverview/index.md

@@ -3,11 +3,12 @@ fragment = "content"
 weight = 299    
 background = "dark"
 
-title = "Coffee Editor Overview"
+title = "Coffee Editor NG"
 #subtitle= "Column based items with icons"
 #title_align = "center" # Default is center, can be left, right or center
 +++
 <p style='text-align: center;'>
-An example web-based modeling tool using EMF.cloud technologies used for demonstration and documentation.
+The <em>Coffee Editor NG</em> is a comprehensive example modeling tool based on EMF Cloud technologies and can also act as an architecture blueprint for your custom modeling tool.
+This full-featured example tool is written entirely in Typescript and includes a central model hub serving a sample modeling language to a variety of editors, such as a diagram editor, a form-based editor, as well as a textual DSL editor.
 </p>
-<img src="images/coffeeeditordemo.gif" alt="Coffee Editor Overview" style="display: block; margin: auto;"/>
+<img src="images/coffeeeditordemo.gif" alt="Coffee Editor Overview" style="display: block; margin: auto;"/>

content/_index/hero.md

@@ -6,19 +6,23 @@ weight = 100
 background = "dark" # can influence the text color
 particles = true
 
-title = "EMF.cloud"
-subtitle = "EMF.cloud - evolve your modeling tools to the web!"
+title = "EMF Cloud"
+subtitle = "Develop web-based modeling tools with ease"
 
 [header]
 
-
 [asset]
-  image = "diagramanimated.gif"
-  width = "600px" # optional - will default to image width
+  image = "coffeeeditordemo_ng.gif"
+  width = "800px" # optional - will default to image width
+
+[[buttons]]
+  text = "Try Now"
+  url = "https://eclipsesource.com/coffee-editor"
+  color = "primary"
 
 [[buttons]]
-  text = "Components"
-  url = "#components"
+  text = "Getting Started"
+  url = "/documentation/overview"
   color = "primary"
 
 [[buttons]]

content/_index/overview/index.md

@@ -3,9 +3,28 @@ fragment = "content"
 weight = 150    
 background = "white"
 
-title = "The Eclipse Modeling Framework in the cloud!"
+title = "What is EMF Cloud?"
 #subtitle= "Column based items with icons"
-#title_align = "center" # Default is center, can be left, right or center
+title_align = "center" # Default is center, can be left, right or center
 +++
-<p style='text-align: center;'>
-EMF.cloud is the umbrella project for components and technologies making the Eclipse Modeling Framework (EMF) and its benefits available in the web and cloud. This includes new web-specific frameworks, but also solutions, which allow you to reuse existing tool components based on EMF in the cloud.</p>
+<div class="container" style="padding-top: 20px; padding-bottom:20px">
+<div class="row align-items-stretch items">
+<div class="col-md-6 d-flex flex-column">
+<p>
+EMF Cloud is a set of open-source technologies for building next-generation modeling tools based on a modern web technology stack.
+</p>
+<p>
+Whether you develop a custom IDE that includes multiple graphical editors manipulating complex configuration data, or a UML-like modeling tool, or a domain-specific engineering tool with graphical or form-based editors for working with domain-specific models, EMF Cloud provides several components to make your life easier.
+The EMF Cloud components range from an extensible model hub providing an API to access and manipulate your model, an editing domain to manage the model state and coordinate changes in a command stack, as well as libraries for integrating form-based, graphical or textual editors.
+</p>
+</div>
+<div class="col-md-6 d-flex flex-column">
+<img src="images/overview.svg" alt="Overview of EMF Cloud features" />
+</div>
+</div>
+</div>
+
+
+
+<!-- <p>
+The EMF Cloud technologies include an extensible model management framework that centralizes the de/serialization, validation and processing of your custom models and coordinates changes across your domain-specific editors manipulating those models.>