Skip to content

Ecosystem Improvements Part 2#3518

Draft
MTRNord wants to merge 17 commits into
mainfrom
MTRNord/new-ecosystem
Draft

Ecosystem Improvements Part 2#3518
MTRNord wants to merge 17 commits into
mainfrom
MTRNord/new-ecosystem

Conversation

@MTRNord

@MTRNord MTRNord commented Jul 9, 2026

Copy link
Copy Markdown
Member

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.

MTRNord added 10 commits July 9, 2026 17:13
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>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 9, 2026

Copy link
Copy Markdown

Deploying matrix-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 761c1b7
Status: ✅  Deploy successful!
Preview URL: https://81331dbd.matrix-website.pages.dev
Branch Preview URL: https://mtrnord-new-ecosystem.matrix-website.pages.dev

View logs

@HarHarLinks HarHarLinks added ecosystem Adding and removing ecosystem projects aesthetic Visual inconsistencies or improvements labels Jul 9, 2026
Comment thread sass/_clients.scss
Comment on lines +893 to +897
& + &::before {
content: "·";
margin-right: 0.4rem;
color: #ccc;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

hmm

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread templates/ecosystem/client.html
Comment thread templates/ecosystem/client.html Outdated
Comment thread templates/ecosystem/client.html Outdated
Comment on lines +115 to +117
<div class="stores">
{{ clients::install_links(packages=page.extra.packages) }}
</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can feel a bit lost in cases such as

image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to improve other than adding screenshots more broadly again


{# Colored platform pills #}
{% macro platforms(packages) %}
{% if packages.apple_app_store %}<div class="platform-pill platform-pill--ios">iOS</div>{% endif %}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should sync the filter to these
image

also look into how we can add the color to the filter

Comment thread templates/macros/breadcrumb.html
Comment thread templates/macros/clients.html Outdated
{% 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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread templates/ecosystem/hosting.html
Comment thread templates/ecosystem/hosting.html
@@ -30,7 +32,3 @@ of the data of their organisation.
The following providers have been brought to the attention of The Matrix.org

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this text should interlink better with the different aspects of the /docs touched upon

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mayhaps fixed in 4c69327?

Comment thread templates/ecosystem/clients.html Outdated
</noscript>
<script type="module" src={{ get_url(path="/js/clients.js" , cachebust=true) }}></script>
<style>
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 1rem); }

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll-padding-top has no effect on this element since it doesn’t scroll.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That might be left over from branching this out of an early version of the try-matrix stuff.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm actually I checked. While firefox indeed complains both spec and mdn disagree with firefox and in fact it does function in firefox. It did have bugs though which I did fix in 14db4ea

{% set licences = licences | unique | sort %}
{% set features = features | unique %}
<div class="page-header">
{{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Clients") }}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's unfortunate these are in such different places on the first level compared to the client.html or bridge_implementations.html

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agreed but not sure how to solve this better currently.

MTRNord added 3 commits July 9, 2026 19:34
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
MTRNord added 4 commits July 9, 2026 20:16
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aesthetic Visual inconsistencies or improvements ecosystem Adding and removing ecosystem projects

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants