Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix image paths so they work with path prefix #540

Merged
merged 6 commits into from
Apr 9, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/docs/authoring_extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Authoring an Extension

# Authoring Theia Extensions

This guide will walk you through the process of creating Theia extensions and deploying them in your Theia-based application. Please make sure to be aware of the [different available extension mechanisms](docs/extensions/) of Theia (Plugins vs. Extensions) before you continue reading.
This guide will walk you through the process of creating Theia extensions and deploying them in your Theia-based application. Please make sure to be aware of the [different available extension mechanisms](../extensions/) of Theia (Plugins vs. Extensions) before you continue reading.

As an example, we are going to add a menu item _Say hello_ that displays a notification "Hello world!". This article is guiding you through all the necessary steps.

Expand All @@ -14,7 +14,7 @@ A Theia app is composed of so-called _extensions_. An extension provides a set o

Theia defines a plethora of contribution interfaces that allow extensions to add their behaviour to various aspects of the application. Just search for interfaces with the name `*Contribution` to get an idea. An extension implements the contribution interfaces belonging to the functionality it wants to deliver. In this example, we are going to implement a `CommandContribution` and a `MenuContribution`. Other ways for extensions to interact with a Theia application are via one of the various _services_ or _managers_.

In Theia, everything is wired up via [dependency injection](/docs/Services_and_Contributions#dependency-injection-di). An extension defines one or more dependency injection modules. This is where it binds its contribution implementations to the respective contribution interface. The modules are listed in the `package.json` of the extension package. An extension can contribute to the frontend, e.g. providing a UI extension, as well as to the backend, e.g. contributing a language server. When the application starts, the union of all these modules is used to configure a single, global dependency injection container on each, the frontend and the backend. The runtime will then collect all contributions of a specific kind by means of a multi-inject.
In Theia, everything is wired up via [dependency injection](../services_and_contributions#dependency-injection-di). An extension defines one or more dependency injection modules. This is where it binds its contribution implementations to the respective contribution interface. The modules are listed in the `package.json` of the extension package. An extension can contribute to the frontend, e.g. providing a UI extension, as well as to the backend, e.g. contributing a language server. When the application starts, the union of all these modules is used to configure a single, global dependency injection container on each, the frontend and the backend. The runtime will then collect all contributions of a specific kind by means of a multi-inject.

## Prerequisites

Expand Down
4 changes: 2 additions & 2 deletions src/docs/authoring_plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Authoring Plug-ins

# Authoring Theia Plug-ins

This documentation is deprecated and needs to be updated. We currently recommend using VS Code extensions or Theia extensions instead of Theia Plugins. See the [extension overview](https://theia-ide.org/docs/extensions/) for more details.
This documentation is deprecated and needs to be updated. We currently recommend using VS Code extensions or Theia extensions instead of Theia Plugins. See the [extension overview](../extensions/) for more details.
<!--
Let's create our first Theia plug-in. As an example, we are going to register a command _Hello World_ that displays a notification "Hello world!". This article is guiding you through all the necessary steps.

Expand Down Expand Up @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions src/docs/authoring_vscode_extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ title: Authoring VS Code Extensions

# Authoring VS Code Extensions

Alongside [Theia extensions](https://theia-ide.org/docs/extensions#theia-extensions), VS Code extensions can also be used to enhance Theia applications with additional functionality, such as language support, commands, or tree views.
Alongside [Theia extensions](../extensions#theia-extensions), VS Code extensions can also be used to enhance Theia applications with additional functionality, such as language support, commands, or tree views.
VS Code extensions contribute functionality through the dedicated VS Code API, which the Theia framework also supports.
This means that extensions that have been developed for VS Code are also compatible with Theia, and vice versa.
The [coverage report](https://eclipse-theia.github.io/vscode-theia-comparator/status.html) provides more details on the extent to which the VS Code API is supported by each Theia version.

While there are certain overlaps in which types of functionality can be contributed to a Theia application with a Theia extension or a VS Code extension, both have their unique advantages and disadvantages.
Please refer to the overview on [extensions and plugins](https://theia-ide.org/docs/extensions) and an [in-depth comparison](https://eclipsesource.com/blogs/2021/03/24/vs-code-extensions-vs-theia-extensions/) for a more detailed discussion.
Please refer to the overview on [extensions and plugins](../extensions) and an [in-depth comparison](https://eclipsesource.com/blogs/2021/03/24/vs-code-extensions-vs-theia-extensions/) for a more detailed discussion.

In the remainder of this page, we guide you through the process of creating VS Code extensions and deploying them in Theia.
The steps for deploying VS Code extensions apply not only to VS Code extensions you develop yourself, but also to third-party VS Code extensions from the [Theia marketplace](https://open-vsx.org/). If you use a third-party VS Code extension, you can skip the section "Creating VS Code Extensions" and "Developing VS Code Extensions in a Theia Project".
Expand Down Expand Up @@ -129,7 +129,7 @@ Therefore, you need to extend your `package.json` to
```

As a result, running `yarn` will download any listed extensions and place them into the folder specified in `theiaPluginsDir` automatically.
For more details, see also the documentation on [composing Theia applications](https://theia-ide.org/docs/composing_applications/#consuming-vs-code-extensions).
For more details, see also the documentation on [composing Theia applications](../composing_applications/#consuming-vs-code-extensions).

### Installing VS Code Extensions at Runtime

Expand Down Expand Up @@ -160,7 +160,7 @@ To make your VS Code extension available, you'll need to [publish](https://githu
## Developing VS Code Extensions in a Theia Project

In certain scenarios, you may not want to develop your VS Code extension in isolation from your Theia application, but instead you may prefer to develop both your extensions and your application in project to keep update cycles short and immediate.
This is particularly useful if you develop your extensions primarily to be part a specific Theia application, thus you want to develop, test and debug them directly in the context of your Theia app, potentially alongside other [Theia extensions](https://theia-ide.org/docs/extensions#theia-extensions).
This is particularly useful if you develop your extensions primarily to be part a specific Theia application, thus you want to develop, test and debug them directly in the context of your Theia app, potentially alongside other [Theia extensions](../extensions#theia-extensions).

In those scenarios, you can also include VS Code extensions as part of your Theia application monorepo.
While there are several possible configuration options, probably the most straightforward approach is to follow the steps below.
Expand Down
8 changes: 4 additions & 4 deletions src/docs/blueprint_documentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ title: Extending/Adopting the Theia IDE

# Extending/Adopting the Theia IDE

This guide provides an overview on how to extend and customize the Theia IDE to your own custom IDE or tool. In this scenario, the Eclipse Theia IDE is an example product used as a reference on how to build desktop IDE-like products based on the Eclipse Theia framework. If you just want to use the Theia IDE, see the [user guide](/docs/user_getting_started)
This guide provides an overview on how to extend and customize the Theia IDE to your own custom IDE or tool. In this scenario, the Eclipse Theia IDE is an example product used as a reference on how to build desktop IDE-like products based on the Eclipse Theia framework. If you just want to use the Theia IDE, see the [user guide](../user_getting_started)

Please note that adopting the Theia IDE as a basis is just one of several ways to get started with building a Theia-based application. We recommend reading the article "[Build your own IDE/Tool](/docs/composing_applications)" as a first step. Furthermore, this guide is focused on building a desktop app. We also provide an [experimental Docker version](https://github.com/eclipse-theia/theia-blueprint?tab=readme-ov-file#docker-build) of the Theia IDE as an alternative.
Please note that adopting the Theia IDE as a basis is just one of several ways to get started with building a Theia-based application. We recommend reading the article "[Build your own IDE/Tool](../composing_applications)" as a first step. Furthermore, this guide is focused on building a desktop app. We also provide an [experimental Docker version](https://github.com/eclipse-theia/theia-blueprint?tab=readme-ov-file#docker-build) of the Theia IDE as an alternative.

The Theia IDE assembles a selected subset of existing Theia features and extensions.
We provide installers for the Theia IDE to be downloaded (see links below).
Expand Down Expand Up @@ -57,7 +57,7 @@ However, as signing is highly dependent on your setup, see the [electron builder

## Adding/Removing Features

The Theia IDE is based on the Theia platform, which is a flexible and adaptable platform for build tools and IDEs. Therefore, you can adapt the feature set and general appearance of the Theia IDE to your custom requirements with almost no limits. The Theia platform provides two mechanism to add your custom extensions: VS Code extensions and Theia extensions. Please have a look at the [overview about Theia extension capabilities](/docs/extensions/) for details. When assembling a product such as the Theia IDE, you can freely decide, which VS Code extensions and Theia extensions are part of it and thereby influence the feature set of your custom product. The following two sections describe how to modify which [VS Code Extensions](#updating-bundled-vs-code-extensions) and which [Theia extensions](#customizing-theia-extensions) are part of your product. Please also note that you can allow users of a Theia-based tool to [install VS Code extensions at runtime](/docs/user_install_vscode_extensions/).
The Theia IDE is based on the Theia platform, which is a flexible and adaptable platform for build tools and IDEs. Therefore, you can adapt the feature set and general appearance of the Theia IDE to your custom requirements with almost no limits. The Theia platform provides two mechanism to add your custom extensions: VS Code extensions and Theia extensions. Please have a look at the [overview about Theia extension capabilities](../extensions/) for details. When assembling a product such as the Theia IDE, you can freely decide, which VS Code extensions and Theia extensions are part of it and thereby influence the feature set of your custom product. The following two sections describe how to modify which [VS Code Extensions](#updating-bundled-vs-code-extensions) and which [Theia extensions](#customizing-theia-extensions) are part of your product. Please also note that you can allow users of a Theia-based tool to [install VS Code extensions at runtime](../user_install_vscode_extensions/).

## Updating Bundled VS Code Extensions

Expand Down Expand Up @@ -161,7 +161,7 @@ To use another custom dialog widget, remove this code, extend Theia’s AboutDia

### Customizing the Preferences

The default preferences directory in Eclipse Theia IDE is `.theia-blueprint` and is located as described in the [Preferences documentation](https://theia-ide.org/docs/preferences/). You can customize this location by modifying [`theia-blueprint-variables-server.ts`](https://github.com/eclipse-theia/theia-blueprint/blob/master/theia-extensions/theia-blueprint-product/src/node/theia-blueprint-variables-server.ts).
The default preferences directory in Eclipse Theia IDE is `.theia-blueprint` and is located as described in the [Preferences documentation](../preferences/). You can customize this location by modifying [`theia-blueprint-variables-server.ts`](https://github.com/eclipse-theia/theia-blueprint/blob/master/theia-extensions/theia-blueprint-product/src/node/theia-blueprint-variables-server.ts).

### Customizing the Installer

Expand Down
2 changes: 1 addition & 1 deletion src/docs/blueprint_download.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ title: Eclipse Theia Blueprint

# Eclipse Theia Blueprint

Eclipse Theia Blueprint has been rebranded to "Theia IDE" and has moved to <a href="/#theiaide">this page</a>.
Eclipse Theia Blueprint has been rebranded to "Theia IDE" and has moved to <a href="../#theiaide">this page</a>.
6 changes: 3 additions & 3 deletions src/docs/breadcrumbs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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

Expand All @@ -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

Expand Down
6 changes: 3 additions & 3 deletions src/docs/commands_keybindings.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Commands are runnable actions defined by an ID and the function to be executed (

The following sections provide details about how to contribute commands, keybindings and menu items. The sections will describe how to connect the different contributions and how to use the corresponding services for managing these items.

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/).
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](../services_and_contributions/).

All the following code examples are from the [Theia extension generator](https://github.com/eclipse-theia/generator-theia-extension). You can get the same code set-up by installing the generator, selecting the “Hello World” example (see here) and choosing “helloworld” as the name.

Expand Down Expand Up @@ -50,7 +50,7 @@ Finally, by implementing `isToggle` a handler can optionally specify, whether me

### Binding the contribution to CommandContribution

To make our `CommandContribution` accessible to Theia, we need to bind the custom `HelloworldCommandContribution` to the respective contribution symbol `CommandContribution`. This is done in the `helloworld-frontend-module`, for more details see [Services and Contributions](https://theia-ide.org/docs/services_and_contributions/).
To make our `CommandContribution` accessible to Theia, we need to bind the custom `HelloworldCommandContribution` to the respective contribution symbol `CommandContribution`. This is done in the `helloworld-frontend-module`, for more details see [Services and Contributions](../services_and_contributions/).

**helloworld-frontend-module.ts**

Expand Down Expand Up @@ -93,7 +93,7 @@ export class HelloworldMenuContribution implements MenuContribution {
}
```

To make our `MenuContribution` accessible to Theia, we need to bind the custom `HelloWorldMenuContribution` to the respective contribution symbol `MenuContribution`. This is done in the `helloworld-frontend-module`, for more details see [Services and Contributions](https://theia-ide.org/docs/services_and_contributions/).
To make our `MenuContribution` accessible to Theia, we need to bind the custom `HelloWorldMenuContribution` to the respective contribution symbol `MenuContribution`. This is done in the `helloworld-frontend-module`, for more details see [Services and Contributions](../services_and_contributions/).

**helloworld-contribution.ts**

Expand Down
6 changes: 3 additions & 3 deletions src/docs/composing_applications.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ title: Build your own IDE/Tool

# Build your own IDE/Tool

This guide will teach you how to build your own Theia-based application. The guide will demonstrate how to configure your own application composed of existing or new Theia extensions, and any VS Code extensions you want bundled in your application by default. Please get familiar with the [extension mechanisms of Theia](https://theia-ide.org/docs/extensions/) in case you are not already.
This guide will teach you how to build your own Theia-based application. The guide will demonstrate how to configure your own application composed of existing or new Theia extensions, and any VS Code extensions you want bundled in your application by default. Please get familiar with the [extension mechanisms of Theia](../extensions/) in case you are not already.
This guide describes the manual steps to build a Theia-based product, there are two ways to avoid this manual set-up:

- [Theia Extension Yeoman generator](https://github.com/eclipse-theia/generator-theia-extension): Generates Theia-based products along with example extensions.
- [Theia IDE](/#theiaide): A tool based on the Theia Platform that can be used as a template for creating installable desktop applications based on Theia. [Learn how to extend and adapt the Theia IDE](/docs/blueprint_documentation/).
- [Theia IDE](../../#theiaide): A tool based on the Theia Platform that can be used as a template for creating installable desktop applications based on Theia. [Learn how to extend and adapt the Theia IDE](../blueprint_documentation/).

We still recommend reading the manual guide first, it allows you to understand the structure of a Theia-based project.

Expand Down Expand Up @@ -155,7 +155,7 @@ e.g. to open `/workspace` on all interfaces and port `8080`:

In the terminal, you should see that Theia application is up and listening:

<img class="doc-image" src="/docs-terminal.png" alt="Terminal" style="max-width: 750px">
<img class="doc-image" src="../../docs-terminal.png" alt="Terminal" style="max-width: 750px">

Open the application by entering the printed address in a new browser page.

Expand Down
Loading
Loading