Fix image paths so they work with path prefix

Referencing images with a URL starting with `/` will always default to the root. This however won't work if we host the page in a folder. As we use plain HTML tags in the markdown, probably the easiest fix is to use relative image links instead.

This change turns all root paths for images into relative paths.

src/docs/authoring_plugins.md

@@ -69,7 +69,7 @@ In the previous commands:
 
 Here is an animated screenshot of the generator running.
 
-<img src="/yeoman-plugin.gif" class="doc-image" alt="Yeoman plugin output">
+<img src="../yeoman-plugin.gif" class="doc-image" alt="Yeoman plugin output">
 
 Pick up default values for each question.
 

src/docs/breadcrumbs.md

@@ -8,7 +8,7 @@ If enabled via the preferences, Theia can show a navigation bar, often referred
 This interactive navigation bar indicates the location of the widget's content in the context of an overall structure, such as the filesystem.
 By default, Theia shows breadcrumbs for the location of files in the filesystem when a file is opened in the text editors.
 
-<img src="/breadcrumbs.png" alt="A screenshot of breadcrumbs in Theia" style="max-width: 525px">
+<img src="../breadcrumbs.png" alt="A screenshot of breadcrumbs in Theia" style="max-width: 525px">
 
 However, Theia's breadcrumbs mechanism can also be used for any custom widget, too.
 Moreover, Theia allows showing a widget's content location in an arbitrary custom logical structure, such as a custom project structure.
@@ -89,7 +89,7 @@ export class CustomBreadcrumbsContribution implements BreadcrumbsContribution {
 
 Once the breadcrumbs contribution is registered, Theia will show the following for our custom widget.
 
-<img src="/breadcrumbs-custom.png" alt="A screenshot of custom breadcrumbs in Theia" style="max-width: 525px">
+<img src="../breadcrumbs-custom.png" alt="A screenshot of custom breadcrumbs in Theia" style="max-width: 525px">
 
 ## Interactive Breadcrumbs
 
@@ -113,7 +113,7 @@ export class CustomBreadcrumbsContribution implements BreadcrumbsContribution {
 }
 ```
 
-<img src="/breadcrumbs-popup.png" alt="A screenshot of custom breadcrumbs with a popup in Theia" style="max-width: 525px">
+<img src="../breadcrumbs-popup.png" alt="A screenshot of custom breadcrumbs with a popup in Theia" style="max-width: 525px">
 
 ## Priority of Breadcrumbs Contributions
 

src/docs/enhanced_tab_bar_preview.md

@@ -15,11 +15,11 @@ Moreover, it can easily be styled according to the needs of a tool provider adop
 
 The enhanced tab bar preview is disabled by default and needs to be explicitly enabled with a via the preference `window.tabbar.enhancedPreview`.
 
-<img src="/enhanced-preview-setting.png" alt="A screenshot of the window.tabbar.enhancedPreview setting in Theia" style="max-width: 525px">
+<img src="../enhanced-preview-setting.png" alt="A screenshot of the window.tabbar.enhancedPreview setting in Theia" style="max-width: 525px">
 
 After enabling the enhanced tab bar preview, users will see the following on hovering over a widget's tab:
 
-<img src="/enhanced-preview.png" alt="A screenshot of the enhanced preview in Theia" style="max-width: 525px">
+<img src="../enhanced-preview.png" alt="A screenshot of the enhanced preview in Theia" style="max-width: 525px">
 
 ## Specifying the contents of the preview
 
@@ -90,7 +90,7 @@ To also ensure the text is not going over the boxes boundaries, the property `wo
 
 After those rules are applied the preview will look as shown below:
 
-<img src="/enhanced-preview-custom.png" alt="A screenshot of the customized enhanced preview in Theia" style="max-width: 525px">
+<img src="../enhanced-preview-custom.png" alt="A screenshot of the customized enhanced preview in Theia" style="max-width: 525px">
 
 ### Changing the content element
 

src/docs/extensions.md

@@ -15,7 +15,7 @@ These are not scoped to frontend connections and have no access (directly) to fr
 
 The following diagram shows the high level architecture for all four options. VS Code extensions and Theia plugins run in a dedicated process per frontend connection, can be installed at runtime, and work against a defined API. Headless plugins similarly run in a dedicated process, but only one that is not associated with any frontend connection. Theia extensions are added during compile time and become a core part of your Theia application. They can access the full API of Theia.
 
-<img src="/extensiontypes.svg" alt="Block diagram of Theia extension types" style="max-width: 525px">
+<img src="../extensiontypes.svg" alt="Block diagram of Theia extension types" style="max-width: 525px">
 
 If you would like more guidance on which mechanism to use, please also refer to [this detailed comparison between VS Code extensions and Theia extensions](https://eclipsesource.com/blogs/2021/03/24/vs-code-extensions-vs-theia-extensions/).
 

src/docs/index.md

@@ -11,7 +11,7 @@ title: README
 
 Theia is an extensible platform to develop full-fledged multi-language Cloud & Desktop IDE-like products with state-of-the-art web technologies.
 
-<img src="/theia-screenshot.jpg" alt="Theia IDE Screenshot" class="doc-image">
+<img src="../theia-screenshot.jpg" alt="Theia IDE Screenshot" class="doc-image">
 
 ## Scope
 

src/docs/label_provider.md

@@ -10,7 +10,7 @@ The default label provider in Theia browses registered label provider contributi
 
 In this article we will describe how to customize the label and icon of a custom file type (.my) in Eclipse Theia, as seen in the screenshot below.
 
-<img src="/custom-label-provider.png" alt="A custom label provider" style="max-width: 525px">
+<img src="../custom-label-provider.png" alt="A custom label provider" style="max-width: 525px">
 
 If you are not yet familiar with contribution points in Theia or the use of dependency injection, please consider this guide on [Services and Contributions](https://theia-ide.org/docs/services_and_contributions/).
 

src/docs/message_service.md

@@ -15,15 +15,15 @@ By default, Theia will display messages as toast notifications in the bottom rig
 
 Info
 
-<img src="/message-service-info.png" alt="Message Service - info" style="max-width: 525px">
+<img src="../message-service-info.png" alt="Message Service - info" style="max-width: 525px">
 
 Warn
 
-<img src="/message-service-warn.png" alt="Message Service - warning" style="max-width: 525px">
+<img src="../message-service-warn.png" alt="Message Service - warning" style="max-width: 525px">
 
 Error
 
-<img src="/message-service-error.png" alt="Message Service - error" style="max-width: 525px">
+<img src="../message-service-error.png" alt="Message Service - error" style="max-width: 525px">
 
 By default, notifications will be displayed until the user closes them. You can optionally define a time-out after which messages will be closed automatically:
 
@@ -48,11 +48,11 @@ this.messageService
 
 The corresponding toast notification will look like this:
 
-<img src="/message-service-user-action.png" alt="Message Service - user action" style="max-width: 525px">
+<img src="../message-service-user-action.png" alt="Message Service - user action" style="max-width: 525px">
 
 When the user selects “Say Hello again”, another toast notification will be shown:
 
-<img src="/message-service-hello-again.png" alt="Message Service - after user action" style="max-width: 525px">
+<img src="../message-service-hello-again.png" alt="Message Service - after user action" style="max-width: 525px">
 
 ## Progress Reporting
 
@@ -86,4 +86,4 @@ this.messageService
 Note that `progress.cancel` is also used to signal that progress is complete.
 The code example above will be displayed like this:
 
-<img src="/message-service-progress-reporting.gif" alt="Message Service - progress reporting" style="max-width: 525px">
+<img src="../message-service-progress-reporting.gif" alt="Message Service - progress reporting" style="max-width: 525px">

src/docs/property_view.md

@@ -150,4 +150,4 @@ Following these few steps should give the reader an idea on how to implement an
 
 The resulting property view will be displayed like this:
 
-<img src="/custom-property-view.gif" alt="Property View - custom widget" style="max-width: 690px">
+<img src="../custom-property-view.gif" alt="Property View - custom widget" style="max-width: 690px">

src/docs/services_and_contributions.md

@@ -14,7 +14,7 @@ Contribution points, like services, can be contributed to and defined by any ext
 
 The usage of services and contribution points requires communication between extensions. To avoid direct dependencies on the implementation classes, Theia uses dependency injection.
 
-<img src="/dependency-injection.png" alt="Dependency Injection Overview" style="max-width: 525px">
+<img src="../dependency-injection.png" alt="Dependency Injection Overview" style="max-width: 525px">
 
 In the following sections, we provide a quick overview of dependency injection, services, contributions and how to define contribution points.
 

src/docs/tasks.md

@@ -16,7 +16,7 @@ In Eclipse Theia, tasks can also be provided from and executed by custom Theia e
 In particular, Theia offers the three main contribution points for tasks: `TaskProvider`, `TaskResolver` and `TaskRunner`.
 To better understand the purpose of those, let’s look at the flow, through the involved components, when a user selects and executes a task in the following figure.
 
-<img src="/tasks.png" alt="Task flow overview" style="max-width: 915px">
+<img src="../tasks.png" alt="Task flow overview" style="max-width: 915px">
 
 Besides the user-defined task configurations, Eclipse Theia will also offer its users all task configurations collected from the registered task providers.
 When a user selects one of the provided task configurations and executes it, the configuration will be handed over to the task service, which will first resolve the selected task configuration using a resolver that is registered for the selected task configuration’s type.
@@ -153,7 +153,7 @@ class MyTask extends Task {
 
 As you can see in the screenshot below, our custom task is running for 5000 ms (as we set a timeout in `MyTask`) and then it stops.
 
-<img src="/running-custom-task.gif" alt="Running custom task" style="max-width: 702px">
+<img src="../running-custom-task.gif" alt="Running custom task" style="max-width: 702px">
 
 As can be seen in the console output, the task starts and finishes 5000 ms later, and prints the custom variable that has been added by the custom resolver.
 

src/docs/user_getting_started.md

@@ -10,7 +10,7 @@ The Theia IDE is a modern and open IDE for cloud and desktop. The Theia IDE is b
 - [Try the Theia IDE online](https://try.theia-cloud.io/)
 - [Run the Theia IDE with Docker](https://github.com/eclipse-theia/theia-blueprint?tab=readme-ov-file#docker-build)
 
-<img src="/theia-screenshot.jpg" alt="Theia IDE Screenshot" style="max-width: 525px">
+<img src="../theia-screenshot.jpg" alt="Theia IDE Screenshot" style="max-width: 525px">
 
 This section is about using the Theia IDE from an end user point of view. Please note that the Theia IDE is based on the Theia Platform, a technology to build tools and IDEs. As an end user, you are not using “Theia”, but always a product based on Theia, in this case the Theia IDE. If you are using another product based on Theia, please consider the specific end user documentation of the product you are using over this section.
 

src/docs/user_install_vscode_extensions.md

@@ -14,7 +14,7 @@ In the opened Extension View you can browse for available VS Code extensions usi
 
 The Extension View also presents recommendations to be installed, if any, as well as extensions that are already installed. Here, you can uninstall extensions by clicking “Uninstall”.
 
-<img src="/theia-marketplace.gif" alt="Theia Marketplace / Theia Registry" style="max-width: 525px">
+<img src="../theia-marketplace.gif" alt="Theia Marketplace / Theia Registry" style="max-width: 525px">
 
 The last section, “Built-In” shows VS Code extensions that are a fix part of your Theia-based product. This means the creator of your tool has installed them already for you and you can also not uninstall them.
 

src/docs/user_toolbar.md

@@ -10,11 +10,11 @@ Eclipse Theia provides a dynamic toolbar allowing easy access to commonly used c
 
 As a user, you can control the default visibility of the Theia toolbar using the setting "Show Toolbar" (see screenshot below). Additionally, you can toggle the toolbar using "ALT+T" or via right-click on the toolbar => "Toggle Toolbar".
 
-<img src="/theia-toolbar-visibility.gif" alt="Theia Toolbar Visibility" style="max-width: 525px">
+<img src="../theia-toolbar-visibility.gif" alt="Theia Toolbar Visibility" style="max-width: 525px">
 
 The toolbar will show some default commands, which are configured by the provider of your Theia-based tool. As a user, you can add and remove commands. Further, you can change their position in the toolbar. To remove an existing command, right-click the icon in the toolbar and select "Remove Command From Toolbar". To change the position of an existing command, simply drag it around. The toolbar supports three columns to visually structure commands ("Left", "Center" and "Right").
 To add a new command to the toolbar, right click and select "Add Command to Toolbar" (see screenshot below). This will open a wizard that first allows you to select the command you want to add. In the second step, you can specify and icon that is used to display the new command in the toolbar. Finally, you select the column the new command will be placed in (you can still move it around later).
 
-<img src="/theia-toolbar.gif" alt="Theia Toolbar" style="max-width: 525px">
+<img src="../theia-toolbar.gif" alt="Theia Toolbar" style="max-width: 525px">
 
 To restore the default commands on the toolbar, right click and select "Restore Toolbar Defaults". Please note that this will delete all custom commands you might have added.

src/docs/widgets.md

@@ -6,13 +6,13 @@ title: Widgets
 
 A widget is a part displaying content within the Theia workbench, e.g. a view or an editor. Examples for existing widgets in Theia are the file explorer, the code editor or the problems view. By contributing custom widgets, you can place your own custom UI in a Theia-based application. Your custom UI will behave the same as other widgets in terms of window layouts including the title tab, resizing, dragging and opening/closing (see screenshot below).
 
-<img src="/widget-example.gif" alt="Widget Example" style="max-width: 525px">
+<img src="../widget-example.gif" alt="Widget Example" style="max-width: 525px">
 
 Furthermore, a widget will receive events from the surrounding workbench, e.g. on application start, on resize or on detach. The implementation of the actual content of a widget, which is rendered in the provided frame is completely up to you, though. As an example, you can implement some custom UI using React within a widget.
 
 In a nutshell, a widget is a frame to embed some custom (HTML-based) UI into the Theia workbench (see diagram below)
 
-<img src="/widget-architecture.png" alt="Widget Architecture" style="max-width: 525px">
+<img src="../widget-architecture.png" alt="Widget Architecture" style="max-width: 525px">
 
 In this article we will describe how to contribute a custom widget to the Theia workbench. We will focus on a simple view (in contrast to an editor) and use React to implement the UI.