docs: improve the issue templates (#3148)

Enforce the order of the templates.

Provide links to external resources in the issue chooser. The "about"
entry is taken from the description put in the page of the Process
Analytics website.

In the bug template, provide more guidance for the reproduction steps.

.github/ISSUE_TEMPLATE/01-bug_report.md

@@ -0,0 +1,67 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+### Describe the bug
+Provide a clear and concise description of what the bug is.
+
+
+### To Reproduce
+<!-- Fill the reproduction steps -->
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+<!-- Adapt the following text to your needs -->
+Please provide a BPMN diagram that reproduces the problem: "attach here the BPMN diagram"
+
+If possible, provide a code snippet that reproduces the problem: "attach here the code snippet"
+Or a link to a repository that reproduces the problem: "provide the link here"
+
+The https://github.com/process-analytics/bpmn-visualization-examples repository contains examples that can be used to reproduce the problem.
+
+
+### Expected behavior
+Provide a clear and concise description of what you expected to happen.
+
+<!--
+For BPMN rendering problems, please test your BPMN diagram with other BPMN vendors.
+For example, you can use:
+  - the `bpmn-js` demo: https://demo.bpmn.io/new)
+  - the `bpmn-visualization` example comparing the rendering with `bpmn-js`: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/misc/compare-with-bpmn-js/index.html.
+  In this URL, you can replace `master` by a specific tag (for example v0.43.0) to check a specific version of `bpmn-visualization`. 
+
+Be aware that `bpmn-visualization` and `bpmn-js` have different rendering behavior, in particular for:
+  - label activity: https://github.com/process-analytics/bpmn-visualization-js/issues/2253
+  - default label position: https://github.com/process-analytics/bpmn-visualization-js/issues/2306
+  - fill color: https://github.com/process-analytics/bpmn-visualization-js/issues/2590#issuecomment-1486053921
+
+Here are some examples of good reports:
+  - https://github.com/process-analytics/bpmn-visualization-js/issues/2857#issuecomment-1722447316
+  - https://github.com/process-analytics/bpmn-visualization-js/issues/2590#issuecomment-1486053921
+
+-->
+
+
+### Screenshots
+If applicable, add screenshots or videos to help explain your problem.
+
+
+### Environment
+ - Desktop or mobile:
+ - OS and version: [e.g. iOS 14.1]
+ - Browser and version: [e.g. chrome 118, safari 15] 
+ - Node/npm version (if applicable):
+ - Used frameworks (if applicable):
+
+
+### Additional context
+Add any other context about the problem here.
+

.github/ISSUE_TEMPLATE/feature_request.md → .github/ISSUE_TEMPLATE/02-feature_request.md

@@ -8,13 +8,13 @@ assignees: ''
 ---
 
 ### Is your feature request related to a problem? Please describe.
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+Provide a clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
 ### Describe the solution you'd like
-A clear and concise description of what you want to happen.
+Provide a clear and concise description of what you want to happen.
 
 ### Describe alternatives you've considered
-A clear and concise description of any alternative solutions or features you've considered.
+Provide a clear and concise description of any alternative solutions or features you've considered.
 
 ### Additional context
 Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/question.md → .github/ISSUE_TEMPLATE/03-question.md

@@ -1,7 +1,7 @@
 ---
 name: Question
 about: Ask any question about the project
-title: "[QUESTION]"
+title: "[QUESTION] "
 labels: question
 assignees: ''
 

.github/ISSUE_TEMPLATE/other.md → .github/ISSUE_TEMPLATE/04-other.md

@@ -7,4 +7,4 @@ assignees: ''
 
 ---
 
-Please use this template only if your issue doesn't match a Bug Report, Feature Request or Question?
+Please use this template only if your issue doesn't match a Bug Report, Feature Request or Question.

.github/ISSUE_TEMPLATE/README.md

@@ -0,0 +1,16 @@
+# Issue Templates
+
+## Documentation
+
+[Syntax for issue forms (the top level properties)](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-issue-forms)
+
+[Syntax for GitHub's form schema (the form body)](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/syntax-for-githubs-form-schema)
+
+[Configuring the template chooser (config.yml)](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository#configuring-the-template-chooser)
+
+https://help.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository#configuring-the-template-chooser
+
+
+## Template Chooser Sorting
+
+The templates are sorted in the template chooser based on the filename, not on the form name. This is why we have prefixed the filenames with numbers.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,2 +1,12 @@
 # see https://help.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository#configuring-the-template-chooser
 blank_issues_enabled: false
+contact_links:
+  - name: "Getting Started with bpmn-visualization" article
+    url: https://medium.com/@process-analytics/getting-started-with-bpmn-visualization-a54fbafae2df
+    about: A getting started tutorial to bpmn-visualization using an online monitoring scenario.
+  - name: "All you need to know about styling BPMN elements" article
+    url: https://medium.com/@process-analytics/bpmn-visualization-all-you-need-to-know-about-styling-bpmn-elements-24289154c16c
+    about: Diving into bpmn-visualization Typescript library, we focus on style management, with resources for beginners and advanced usage scenarios.
+  - name: `bpmn-visualization` examples repository
+    url: https://github.com/process-analytics/bpmn-visualization-examples/
+    about: Examples of use of the `bpmn-visualization` library.