[DOC] Use consistent project names everywhere

.github/workflows/update_bpmn_visualization_version.yml

@@ -1,4 +1,4 @@
-name: Update BPMN Visualization version
+name: Update the version of the bpmn-visualization TypeScript library
 on:
   repository_dispatch:
     types: [ update_bpmn_visualization_version ]

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-You are here to help on `bpmn-visualization-examples`? Awesome, feel welcome and read the following guidelines in order to know how to contribute, to ask questions and to make `bpmn-visualization` such a great tool.
+You are here to help on the `bpmn-visualization` examples? Awesome, feel welcome and read the following guidelines in order to know how to contribute, to ask questions and to make `bpmn-visualization` TypeScript library such a great tool.
 
 All members of our community are expected to follow our [Code of Conduct](https://github.com/process-analytics/.github/blob/main/CODE_OF_CONDUCT.md). Please make sure you are welcoming and friendly in all of our spaces.
 
@@ -22,18 +22,18 @@ For all contributions, please respect the following guidelines:
 
 3. Do not commit changes to files that are irrelevant to your feature or bugfix (eg: `.gitignore`).
 
-7. Open a [GitHub Pull Request](CONTRIBUTING.md#open-a-pull-request) with your patches. (**1** pull request = **1** feature or bug)
+4. Open a [GitHub Pull Request](CONTRIBUTING.md#open-a-pull-request) with your patches. (**1** pull request = **1** feature or bug)
    We will review your contribution and respond as quickly as possible. Keep in mind that this is an open source project, and it may take us some time to get back to you. Your patience is very much appreciated.
 
-8. If this is your 1st Pull Request, sign the [Contributor License Agreement](CONTRIBUTING.md#sign-the-contributor-license-agreement)
+5. If this is your 1st Pull Request, sign the [Contributor License Agreement](CONTRIBUTING.md#sign-the-contributor-license-agreement)
 
-9. Be willing to accept criticism and work on improving your code. 
+6. Be willing to accept criticism and work on improving your code. 
 
 **Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)    
 
 ### Fork & create a branch
 
-[Fork bpmn-visualization-examples](https://help.github.com/articles/fork-a-repo) and create a branch with a descriptive name. 
+[Fork the bpmn-visualization-examples repository](https://help.github.com/articles/fork-a-repo) and create a branch with a descriptive name. 
 
 A good branch name would be (where issue #25 is the ticket you're working on): **25-annotations_to_tasks**
 
@@ -48,42 +48,41 @@ To know how to configure your development environment, see [IDE configuration](h
 - Create a new folder in [examples](examples)
 - Create a index.html file in your new folder, See how it was done for [custom-user-task-icon](examples/custom-bpmn-theme/custom-user-task-icon/index.html)
 - Make the examples use the latest version of the lib
-- When your are satisfied by your work, add a screenshot of your example render in [examples/static/img](examples/static/img)
+- When you are satisfied by your work, add a screenshot of your example render in [examples/static/img](examples/static/img)
 - Add a new `div` for your example in [examples/index.html](examples/index.html). See how it was done for the previous examples.
 - Create a README in your new folder
 - Update the [README](README.md#bpmn-visualization-extensibility-examples)
 
 ### Commit in the Pull Request
 There is no convention for the commit message in the Pull Request.
 The most important part is the title of the Pull Request, because:
-- Everyone must use Pull Request, no direct commit allowed on master branch
-- The commits of a Pull Request are almost always squashed
-- The title of the Pull Request is used as proposal for the maintainer merging the Pull Request
+- Everyone must use Pull Request, no direct commit allowed on the `master` branch.
+- The commits of a Pull Request are almost always squashed.
+- The title of the Pull Request is used as proposal for the maintainer merging the Pull Request.
 
 ### Open a Pull Request
 
-At this point, you should switch back to your master branch and make sure it's up to date with `bpmn-visualization-examples`
-`master` branch:
+At this point, you should switch back to your own branch and make sure it's up-to-date with the `master` branch of the `bpmn-visualization-examples` repository:
 
 ```sh
 git remote add upstream git@github.com:process-analytics/bpmn-visualization-examples.git
 git checkout master
 git pull upstream master
 ```
 
-Then update your feature branch from your local copy of master, and push it!
+Then update your feature branch from your local copy of the `master` branch, and push it!
 
 ```sh
 git checkout 25-annotations_to_tasks
 git rebase master
 git push --set-upstream origin 25-annotations_to_tasks
 ```
 
-Finally, go to GitHub and [make a Pull Request](https://help.github.com/articles/creating-a-pull-request) ​with labels :smile:
-For the title, follow the directives of the Pull Request template.
-Add a screenshot of the rendering of your examples/bpmn-file. 
+Finally, go to GitHub and [make a Pull Request](https://help.github.com/articles/creating-a-pull-request) with labels 🙂  
+For the title, follow the directives of the Pull Request template.  
+Add a screenshot of the rendering of your _examples/bpmn-file_. 
 
-:warning: ​We care about quality. So your PR won't be merged until all tests pass.
+⚠️ We care about quality. So your PR won't be merged until all tests pass.
 
 ### Sign the Contributor License Agreement
 
@@ -99,7 +98,7 @@ You only need to sign the CLA once or when the CLA terms have changed.
 
 ### Keeping your Pull Request updated
 
-If a maintainer asks you to [rebase](http://git-scm.com/book/en/Git-Branching-Rebasing) your PR, they're saying that a lot of code has changed, and that you need to update your branch so it's easier to merge.
+If a maintainer asks you to [rebase](http://git-scm.com/book/en/Git-Branching-Rebasing) your PR, they're saying that a lot of code has changed, and that you need to update your branch, so it's easier to merge.
 
 Here's the suggested workflow:
 
@@ -116,13 +115,13 @@ At this point, you're ready to make your changes! Feel free to ask for help. Eve
 
 ### Merging a PR (maintainers only)
 
-A PR can only be merged into master by a maintainer, if all of these conditions are met:
+A PR can only be merged into the `master` branch by a maintainer, if all of these conditions are met:
 
 * It is passing CI.
 * It has been approved by at least two maintainers. If it was a maintainer who opened the PR, only one extra approval is needed.
 * It has no requested changes.
-* It is up to date with current master.
+* It is up-to-date with the current `master` branch.
 
 ### Release (maintainers only)
 
-Releasing the examples is part of the [bpmn-visualization release process](https://github.com/process-analytics/bpmn-visualization-js/blob/master/docs/contributors/maintainers.md#bpmn-visualization-examples-repository-update).
+Releasing the examples is part of the [release process](https://github.com/process-analytics/bpmn-visualization-js/blob/master/docs/contributors/maintainers.md#bpmn-visualization-examples-repository-update) of the `bpmn-visualization` TypeScript library.

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">BPMN Visualization Examples</h1> <br>
+<h1 align="center">Examples of the bpmn-visualization TypeScript library</h1> <br>
 <p align="center">
     <p align="center">
         <a href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html">
@@ -18,7 +18,7 @@
     </p>
 </p>
 
-This repository contains examples showing how to use [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js).
+This repository contains examples showing how to use the [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) TypeScript library.
 
 
 ## 🎮 Live Environment
@@ -27,7 +27,7 @@ Give a try to the [__⏩ live environment__](https://cdn.statically.io/gh/proces
 to quickly have an overview of the `bpmn-visualization` capabilities.
 
 You will find both
-- demos: show what you can do with bpmn-visualization in various use cases, in dedicated user oriented situations
+- demos: show what you can do with `bpmn-visualization` in various use cases, in dedicated user oriented situations
 - examples: demonstrate how to use a single feature.
 
 
@@ -41,7 +41,7 @@ Some examples require loading local files. If you are looking for BPMN diagram f
   - [bpmn-miwg-demos](https://github.com/bpmn-miwg/bpmn-miwg-demos)
 - the Process Analytics project
   - [BPMN diagrams of the bpmn-visualization-examples repository](./bpmn-files/README.md)
-  - [BPMN diagrams used in the tests of bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js/blob/master/test/fixtures/bpmn/)
+  - [BPMN diagrams used in the tests of `bpmn-visualization`](https://github.com/process-analytics/bpmn-visualization-js/blob/master/test/fixtures/bpmn/)
 
 
 ## 🖥️ Running examples locally
@@ -71,17 +71,17 @@ Some examples are provided for direct use in the web browser. If you want to int
 
 You can check the [examples projects](#projects) in this repository or the [Live IDE examples](#live_ide) to know how to bootstrap `bpmn-visualization` in a project.
 
-TypeScript's users should also read the paragraph about the [TypeScript support in the bpmn-visualization README](https://github.com/process-analytics/bpmn-visualization-js/#-typescript-support)
-especially when using bpmn-visualization prior version `0.27.0`. 
+TypeScript's users should also read the paragraph about the [TypeScript support in the `bpmn-visualization` README](https://github.com/process-analytics/bpmn-visualization-js/#-typescript-support)
+especially when using `bpmn-visualization` prior version `0.27.0`. 
 
 
 ## 👁️‍🗨️ Demos
 
 - [Load and Navigation demo](demo/load-and-navigation/index.html) - shows several features of `bpmn-visualization` at the same time. The sources of the demo are available in the
-  [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) repository.
+  [repository](https://github.com/process-analytics/bpmn-visualization-js) of `bpmn-visualization` .
 - [Hacktoberfest themes](demo/hacktoberfest-custom-themes/README.md) - special Hacktoberfest diagram with Hacktoberfest colors
 - [Monitoring of all process instances demo](demo/monitoring-all-process-instances/README.md) - show how to use `bpmn-visualization` to render the monitoring of all process instances for a defined process
-- [Demo for ICPM 2022](demo/icpm-2022/README.md) - show a Process Mining scenario (Conformance, Compliance and Happy path).
+- [Demo for ICPM 2022](demo/icpm-2022/README.md) - show a Process Mining scenario (_Conformance_, _Compliance_ and _Happy path_)
 
 
 ## Tutorials
@@ -161,7 +161,7 @@ Remember that some projects are also available in [live IDE](#live_ide).
 
 ## 🔧 Contributing
 
-To contribute to `bpmn-visualization-examples`, fork and clone this repository locally and commit your code on a separate branch. \
+To contribute to `bpmn-visualization` examples, fork and clone this repository locally and commit your code on a separate branch. \
 Please add a screenshot of the new rendering when you open a pull-request.
 
 You can find more detail in our [Contributing guide](CONTRIBUTING.md). Participation in this open source project is subject to a [Code of Conduct](https://github.com/process-analytics/.github/blob/main/CODE_OF_CONDUCT.md).
@@ -171,7 +171,7 @@ You can find more detail in our [Contributing guide](CONTRIBUTING.md). Participa
 
 ## 📃 License
 
-`bpmn-visualization-examples` is released under the [Apache 2.0](LICENSE) license. \
+The content of the `bpmn-visualization-examples` repository is released under the [Apache 2.0](LICENSE) license. \
 Copyright &copy; 2020-present, Bonitasoft S.A.
 
 

bpmn-files/README.md

@@ -1,9 +1,9 @@
-# BPMN Diagram examples to test `bpmn-visualization` rendering
+# BPMN Diagram examples to test the rendering of the `bpmn-visualization` TypeScript library
 
-Here is a list of BPMN files to demonstrate the detection and rendering capabilities of `bpmn-visualization`
+Here is a list of BPMN files to demonstrate the detection and rendering capabilities of `bpmn-visualization`.
 
-Each BPMN file has a image (SVG or PNG) companion file to let you get an overview of the expected rendering. Notice that
-the image may not be up to date with the BPMN file, so the final display may differ a little.  
+Each BPMN file has an image (SVG or PNG) companion file to let you get an overview of the expected rendering. Notice that
+the image may not be up-to-date with the BPMN file, so the final display may differ a little.  
 
 Feel free to create a PR to update the image if the discrepancies are too large.
 

demo/hacktoberfest-custom-themes/README.md

@@ -8,7 +8,7 @@ Javascript example
 - to run locally, open the [index.html](index.html) directly in a Web Browser
 
 
-## ♻️ BPMN Visualization Usage
+## ♻️ Usage
 Override the BPMN element styles using various ways. `mxGraph` knowledge is required to handle style changes.
 See the [development documentation](https://github.com/process-analytics/bpmn-visualization-js/blob/master/docs/contributors/bpmn-support-how-to.md) for more information.
 

demo/hacktoberfest-custom-themes/index.html

@@ -51,7 +51,7 @@
     <section class="navbar-section ml-2">
         <a class="home" href="../../examples/index.html">
             <img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
-            <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+            <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
         </a>
     </section>
     <section class="navbar-section">

demo/icpm-2022/README.md

@@ -1,6 +1,6 @@
 # Getting started
 
-A Javascript demo to `bpmn-visualization` showing a Process Mining scenario (Conformance, Compliance and Happy path).
+A Javascript demo to `bpmn-visualization` showing a **Process Mining** scenario (Conformance, Compliance and Happy path).
 - [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/demo/icpm-2022/index.html)
 - to run locally, open the [index.html](index.html) directly in a Web Browser
 

demo/icpm-2022/index.html

@@ -27,7 +27,7 @@
     <section class="navbar-section ml-2">
         <a class="home" href="../../examples/index.html">
             <img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
-            <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+            <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
         </a>
     </section>
     <section class="navbar-section">

demo/monitoring-all-process-instances/index.html

@@ -44,7 +44,7 @@
     <section class="navbar-section ml-2">
         <a class="home" href="../../examples/index.html">
             <img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
-            <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+            <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
         </a>
     </section>
     <section class="navbar-section">

demo/predictions/index.html

@@ -35,7 +35,7 @@
     <section class="navbar-section ml-2">
         <a class="home" href="../../examples/index.html">
             <img src="../../examples/static/img/logo_64x64_white.png" alt="logo" class="logo">
-            <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+            <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
         </a>
     </section>
     <section class="navbar-section">

examples/custom-behavior/apply-css-classes/README.md

@@ -6,7 +6,7 @@ Javascript example to demonstrate how to apply CSS classes to elements of the BP
 
 ## ♻️ Usage
 
-ℹ️ . Apply css classes after retrieving the HTMLElement with the `bpmn-visualization` API.
+ℹ️ Apply css classes after retrieving the HTMLElement with the `bpmn-visualization` API.
 
 ```javascript
 // add css classes
@@ -18,4 +18,4 @@ bpmnVisualization.bpmnElementsRegistry.toggleCssClasses('prepareBankTransfer', '
 ```
 
 ⚠️ Highlighting path currently requires to identify all elements by their ids: `bpmn-visualization` will provide some API
-to simplify this in the future, see [bpmn-visualization #930](https://github.com/process-analytics/bpmn-visualization-js/issues/930)
+to simplify this in the future, see the [issue #930](https://github.com/process-analytics/bpmn-visualization-js/issues/930) in the repository of `bpmn-visualization`.

examples/custom-behavior/apply-css-classes/index.html

@@ -95,7 +95,7 @@
         <section class="navbar-section ml-2">
             <a class="home" href="../../index.html">
                 <img src="../../static/img/logo_64x64_white.png" alt="logo" class="logo">
-                <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+                <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
             </a>
         </section>
         <section class="navbar-section">

examples/custom-behavior/call-activity-with-modal-on-mouse-over/README.md

@@ -6,7 +6,7 @@ Javascript example to demonstrate how to open a new BPMN diagram in a modal.
 
 ## ♻️ Usage
 
-After the main `BpmnVisualization` instantiation, get the HTML element corresponding to the call activity to add a listener and activate the modal.
+After the instantiation of the main `BpmnVisualization` object, get the HTML element corresponding to the call activity to add a listener and activate the modal.
 
 ⚠️  In order to avoid having to many content in the README, we simplify it. You can find all the content of the example in [index.js](index.js).
 ```javascript

examples/custom-behavior/call-activity-with-modal-on-mouse-over/index.html

@@ -44,7 +44,7 @@
             <section class="navbar-section ml-2">
                 <a class="home" href="../../index.html">
                     <img src="../../static/img/logo_64x64_white.png" alt="logo" class="logo">
-                    <span class="h3 text-light ml-2 lib-name-text">BPMN Visualization Examples</span>
+                    <span class="h3 text-light ml-2 lib-name-text">bpmn-visualization examples</span>
                 </a>
             </section>
             <section class="navbar-section">

examples/custom-behavior/call-activity-with-reload-on-dblclick/README.md

@@ -1,12 +1,12 @@
-# Load BPMN Diagram in the same container on double click on a call activity
+# Load BPMN Diagram in the same container on double-click on a call activity
 
 Javascript example to demonstrate how to use the same container on a double click on an element of the BPMN Diagram.
 - [__⏩ live environment__](https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/custom-behavior/call-activity-with-reload-on-dblclick/index.html)
 - to run locally, open the [index.html](index.html) directly in a Web Browser
 
 ## ♻️ Usage
 
-After the main `BpmnVisualization` instantiation, get the HTML element corresponding to the call activity to add a listener to load a new BPMN Diagram in the same container on activation.
+After the instantiation of the main `BpmnVisualization` object, get the HTML element corresponding to the call activity to add a listener to load a new BPMN Diagram in the same container on activation.
 
 ```javascript
 const callActivityElt = bpmnVisualization.bpmnElementsRegistry.getElementsByIds(['call_activity'])[0].htmlElement;