Ecosystem Improvements Part 2 by MTRNord · Pull Request #3518 · matrix-org/matrix.org

MTRNord · 2026-07-09T16:01:10Z

Description

This essentially is a followup on #3172 and #3239 which makes the ecosystem much closer to the try-matrix design language.

Its a massive redesign in comparison to #3172 hence it is separate.

Related issues

Role

Individual or Website & Content WG

Timeline

Any time but hopefully less than 6 months ;)

Signoff

Please sign off your individual commits.

cloudflare-workers-and-pages · 2026-07-09T16:04:17Z

Deploying matrix-website with Cloudflare Pages

Latest commit:	`1488e32`
Status:	✅ Deploy successful!
Preview URL:	https://89c311c9.matrix-website.pages.dev
Branch Preview URL:	https://mtrnord-new-ecosystem.matrix-website.pages.dev

View logs

HarHarLinks · 2026-07-09T16:19:31Z

+    & + &::before {
+        content: "·";
+        margin-right: 0.4rem;
+        color: #ccc;
+    }


Its due to the wrapping. I havent found a good way to fix that yet :/ open for ideas.

just hard code the line break and throw out the center dot thingy

HarHarLinks · 2026-07-09T16:57:33Z

+{% macro feature_description(feature_name) %}
+{% if feature_name == "dm" %}Bridge direct/private messages between users.
+{% elif feature_name == "channels" or feature_name == "channel" %}Bridge public or private channels to Matrix rooms.
+{% elif feature_name == "groups" or feature_name == "group_chats" or feature_name == "group_chat" %}Bridge group conversations to Matrix rooms.


I wonder if we should throw errors instead to enforce a consistent database?

HarHarLinks · 2026-07-12T10:11:23Z

+                {% for feature_level_name, features_in_level in client.extra.features %}
+                {% for feature_name, feature_state in features_in_level %}
+                {% if feature_state == "supported" %}
+                <span class="client-feat-pill">{{ self::feature_label(feature_name=feature_name) | trim }}</span>


this could explore the same tooltips for explanations that client.html currently has

I think that works well. See 1c909dc

How does this work on mobile?

Uhhhh not checked yet. Possibly: it doesnt

nvm tapping actually works but the left most ones are partially cut off.

I fixed this issue now. :)

i would like to have some ui hint. @weeman1337 wdyt on this?

Move hosting providers out of providers.toml into individual .md pages so each gets its own detail page. Rename index.md to _index.md to make the directory a Zola section and add page_template and sort_by. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Replace the old popup overlay with a shared .ecosystem-detail layout: two-column grid (main + features aside), logo wrap, meta row, screenshot panel with CSS-only lightbox and a CTA actions row. The all-clients card deck gains filter dropdowns (platform, maturity, licence, features) backed by a small JS module. Add pill colour families for licence and language, maturity badges and a .title-row helper. Move all .client-card*, .platform-pill* and lightbox rules from _try-matrix.scss into _clients.scss so both pages share one implementation. Enhance .call-to-action with inline-flex and SVG icon handling used by the new CTA buttons. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Replace the old full-width implementation list with bridge-card components that use the shared .ecosystem-detail-* layout. Each card has a two-column grid (description + access pills on the left, feature support list on the right). The bridge listing page gains a platforms-grid of clickable network tiles. Add a bridges macro for feature labels and descriptions. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Replace the shortcode-based hosting list with a card grid that reuses the .project-card / .hosting-provider-card pattern. Add a hosting-provider.html detail template using the shared .ecosystem-detail--single layout (no features aside). Update the hosting_providers shortcode formatting. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Minor template updates across the remaining ecosystem listing pages: consistent page-header hero markup, SDK pill classes now include licence and language slugs for colour coding matching the client card pill scheme. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Move .client-card*, .platform-pill*, screenshot and lightbox rules from _try-matrix.scss into _clients.scss so both pages share one source of truth. Extract shared .server-links / .distribution-links and intro paragraph styles into SCSS placeholders in _projects.scss, removing the duplicate blocks from _servers.scss and _distributions.scss. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Replace the back buttons on detail pages with a breadcrumb nav (Ecosystem > Section > Item) and add top-level breadcrumbs to all listing pages (Ecosystem > Section). Uses a shared Tera macro and two SCSS context variants: white-on-dark inside .page-header and grey on the light .ecosystem-detail-page background. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

…a bit. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Moves .breadcrumb out of _projects.scss into _breadcrumb.scss. Also renames .ecosystem-detail-page to .detail-page across the 3 ecosystem detail templates and _clients.scss, matching the same rename already done on a local branch which is further, so the shared component's light context (.detail-page &) applies without needing a second, ecosystem-only selector. Fixes a WCAG AA contrast bug along the way: the light-context breadcrumb text was #aaa on white (~2.3:1), now var(--color-text-light) as used everywhere else this pattern appears. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

HarHarLinks · 2026-07-15T22:37:24Z

centering borked

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

…dit text. Also shorten distributions hero Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

… agressively Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord · 2026-07-24T20:21:32Z

From #3498 (review) : we probably should also deal with Obsolete bridges better here and handle them similar like on the other pages (default hidden?) -> to be figured out.

…lt and marking networks with no active ones as "No active bridge" Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

HarHarLinks · 2026-08-23T18:39:41Z

    }

+    // Clamped to 4 lines with an ellipsis so cards with long descriptions
+    // stay a uniform height - skipped on integration cards, which don't


servers also don't link to a detail page

HarHarLinks · 2026-08-23T21:29:36Z

    }
 }

+// Only obsolete bridges exist - dimmed like no-bridge, but still clickable


suggestion: "There are only obsolete bridges for this platform - ..."

HarHarLinks

lgtm outside the open threads

HarHarLinks added ecosystem Adding, updating, and removing ecosystem projects aesthetic Visual inconsistencies or improvements labels Jul 9, 2026