[Docs Enhacement - New Feature]: Product Compatibility Matrix in the docs

[lucasvaltl]

Describe your feature request

WE want to make our Product Compatibility Matrix public. This was discussed in this (internal) RFC.

tl:dr: we want to make this public in order to premptively answer questions around what works with Gitpod, in order to help (somewhat) standardise the environments that Self-Hosted is running on more and in order to force ourselves to keep it up to date in a better way.

Specifically, we envision a table in the references docs section that looks somewhat like this wireframe: (taken from here)

WE cannot use a regular markdown table due to some specific features we are looking for:

1. Categories can span multiple rows: In order to be visually appealing and avoid repition, we'd like categories to be able to group different components (represented by rows)
2. Filtering / different views on the table: In order to avoid clutter and be more targeted to personas, we want to give the user the option to filter on relevance. Specifically filter on relevance towards different user personas (see user impact)
3. Implicitly assign Gitpod Engineering teams to categories: We want to assign teams to categories in a way that is transparent to the viewer of the actual page. This assignments are then used during a PR process to know which team needs to sign off on a change (e.g. a change to the supported version of Gitlab Enterprise).

User impact

This enables the following types of users to self-service answering the question "does Gitpod Support X":

• Developers: Developers can better understand the tools that they can use together with Gitpod (Browser, IDEs). Components that are used by the individual developer are relevant here.
• Self-Hosted Admins: Admins and installers can better understand if a component they usually use works with Gitpod (Registries, Databases etc.). Anything that is related to components required by a Gitpod Self-Hosted Installation are relevant here.

Related Context

• Basic version of this that just uses a markdown table - taken from this PR.

[chrifro]

Next steps:

• create a PR that introduces the new component for the compatibility matrix (no visible changes to the website) -> @nisarhassan12
• create a follow-up PR to publish the compatibility matrix -> @lucasvaltl

Mockup You can find the mockuphere, including a mobile mockup