217 lines
9.3 KiB
HTML
217 lines
9.3 KiB
HTML
{% extends "section.html" %}
|
|
{% import "macros/clients.html" as clients %}
|
|
{% import "macros/client_details.html" as client_details %}
|
|
{% block head_extra %}
|
|
<meta name="description" content="{{ section.extra.summary }}">
|
|
<noscript>
|
|
<link rel="stylesheet" href={{ get_url(path="/no-js.css" , cachebust=true) }} />
|
|
</noscript>
|
|
<script type="module" src={{ get_url(path="/js/clients.js" , cachebust=true) }}></script>
|
|
{% endblock head_extra%}
|
|
{% block content %}
|
|
{% set clients = section.pages %}
|
|
{% set licences = [] %}
|
|
{% for client in clients %}
|
|
{% set_global licences = licences | concat(with=client.extra.licence) %}
|
|
{% endfor %}
|
|
{% set licences = licences | unique | sort %}
|
|
<div class="page-header">
|
|
<div class="hero-block">
|
|
<h1>{{ section.title }}</h1>
|
|
<p>{{ section.extra.summary }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content clients_page">
|
|
|
|
{# We have to put some content in the template because of a Zola bug in shortcodes #}
|
|
<h2>Featured clients</h2>
|
|
|
|
<p>
|
|
Clients are needed to chat using Matrix. Here is a selection of the most
|
|
mature ones you can safely use.
|
|
</p>
|
|
|
|
<div class="projects-card-deck">
|
|
{% for client in clients %}
|
|
{% if client.extra.featured %}
|
|
<div>
|
|
<a href="{{ client.path }}" class="project-card client {{ clients::classes(client=client.extra) }}">
|
|
{# We're not using placeholders as a fallback because we want showcased clients to have an actual icon
|
|
#}
|
|
<img src="{{ client.extra.thumbnail }}" alt="{{ client.title }} Logo">
|
|
<h3>{{ client.title }}</h3>
|
|
<span>{{ client.content | safe }}</span>
|
|
<div class="platform-links">
|
|
{{ clients::platforms(packages=client.extra.packages) }}
|
|
</div>
|
|
<p class="open-project">Open client details</p>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# We have to put some content in the template because of a Zola bug in shortcodes #}
|
|
<h2>All known clients</h2>
|
|
|
|
<p>
|
|
Here we list all the clients the Foundation is aware of, with a maturity
|
|
score and a list of important features they support or not to help you
|
|
pick the best for you.
|
|
</p>
|
|
|
|
<div class="filters">
|
|
<div class="filter-wrap">
|
|
<button id="filter-platform" class="filter">
|
|
Platform
|
|
<div class="divider"></div>
|
|
<img src="/assets/down-arrow.svg" alt="Downard facing arrow">
|
|
</button>
|
|
<div id="filter-platform-menu" class="filter-menu">
|
|
<p>The clients must support all of the platforms checked.</p>
|
|
<div class="filter-option">
|
|
<input id="platform-ios" type="checkbox">
|
|
<label for="platform-ios">Apple iOS</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-android" type="checkbox">
|
|
<label for="platform-android">Google Android</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-web" type="checkbox">
|
|
<label for="platform-web">Web</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-windows" type="checkbox">
|
|
<label for="platform-windows">Windows</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-macos" type="checkbox">
|
|
<label for="platform-macos">macOS</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-flathub" type="checkbox">
|
|
<label for="platform-flathub">Linux (Flatpak)</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="platform-linux" type="checkbox">
|
|
<label for="platform-linux">Linux (other)</label>
|
|
</div>
|
|
<div class="reset-links">Select <button>all</button> - <button>none</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="filter-wrap">
|
|
<button id="filter-maturity" class="filter">
|
|
Maturity
|
|
<div class="divider"></div>
|
|
<img src="/assets/down-arrow.svg" alt="Downard facing arrow">
|
|
</button>
|
|
<div id="filter-maturity-menu" class="filter-menu">
|
|
<p>The client can support any of the maturity levels checked.</p>
|
|
<div class="filter-option">
|
|
<input id="maturity-stable" type="checkbox" checked>
|
|
<label for="maturity-stable">Stable</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="maturity-beta" type="checkbox" checked>
|
|
<label for="maturity-beta">Beta</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="maturity-alpha" type="checkbox" checked>
|
|
<label for="maturity-alpha">Alpha</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="maturity-obsolete" type="checkbox">
|
|
<label for="maturity-obsolete">Obsolete</label>
|
|
</div>
|
|
<div class="reset-links">Select <button>all</button> - <button>none</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="filter-wrap">
|
|
<button id="filter-licence" class="filter">
|
|
Licence
|
|
<div class="divider"></div>
|
|
<img src="/assets/down-arrow.svg" alt="Downard facing arrow">
|
|
</button>
|
|
<div id="filter-licence-menu" class="filter-menu">
|
|
<p>The client can support any of the licences checked.</p>
|
|
{% for licence in licences %}
|
|
<div class="filter-option">
|
|
<input id="licence-{{ licence | slugify }}" type="checkbox" checked>
|
|
<label for="licence-{{ licence | slugify }}">{{ licence }}</label>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="reset-links">Select <button>all</button> - <button>none</button></div>
|
|
</div>
|
|
</div>
|
|
<div class="filter-wrap">
|
|
<button id="filter-features" class="filter">
|
|
Features
|
|
<div class="divider"></div>
|
|
<img src="/assets/down-arrow.svg" alt="Downard facing arrow">
|
|
</button>
|
|
<div id="filter-features-menu" class="filter-menu">
|
|
<p>The client must support all of the features checked.</p>
|
|
<div class="filter-option">
|
|
<input id="feature-e2ee" type="checkbox">
|
|
<label for="feature-e2ee">E2EE</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-spaces" type="checkbox">
|
|
<label for="feature-spaces">Spaces</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-voip-1to1" type="checkbox">
|
|
<label for="feature-voip-1to1">Native 1:1 calls</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-widgets" type="checkbox">
|
|
<label for="feature-widgets">Widgets</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-threads" type="checkbox">
|
|
<label for="feature-threads">Threads</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-sso" type="checkbox">
|
|
<label for="feature-sso">SSO (Enterprise login)</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-multi-account" type="checkbox">
|
|
<label for="feature-multi-account">Multi-account</label>
|
|
</div>
|
|
<div class="filter-option">
|
|
<input id="feature-multi-language" type="checkbox">
|
|
<label for="feature-multi-language">Multi-language</label>
|
|
</div>
|
|
<div class="reset-links">Select <button>all</button> - <button>none</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filters-overlay"></div>
|
|
|
|
<div id="all-clients" class="projects-card-deck clients">
|
|
{% for client in clients %}
|
|
{% if client.extra.thumbnail %}
|
|
{% set thumbnail = client.extra.thumbnail %}
|
|
{% else %}
|
|
{% set thumbnail = "client-placeholder.svg" %}
|
|
{% endif %}
|
|
<div>
|
|
<a href="{{ client.path }}" class="project-card client {{ clients::classes(client=client.extra) }}">
|
|
<img src="./{{ thumbnail }}" alt="{{ client.title }} Logo">
|
|
<h3>{{ client.title }}</h3>
|
|
<span>{{ client.content | safe }}</span>
|
|
<div class="platform-links">
|
|
{{ clients::platforms(packages=client.extra.packages) }}
|
|
</div>
|
|
<p class="open-project">Open client details</p>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
{% endblock content %}
|