Add Distributions Page

.gitignore

@@ -1,4 +1,4 @@
 /public
 .DS_Store
 gatsby
-
+.vscode

content/ecosystem/bridges/slack/bridges.toml

@@ -93,7 +93,7 @@ presence = false
 typing_notifications = false
 
 [[bridges]]
-name = "mx-puppet-slack"
+name = "mx-pupper-slack"
 maintainer = "Sorunome"
 summary = """
 

content/ecosystem/distributions/distributions.toml

@@ -0,0 +1,52 @@
+[[distributions]]
+name = "matrix-docker-ansible-deploy"
+description = "🐳 Matrix (An open network for secure, decentralized communication) server setup using Ansible and Docker"
+vendor = "Splanteev"
+maturity = "Stable"
+frameworks = ["Ansible", "Docker"]
+licence = "AGPL-3.0"
+repository = "https://github.com/spantaleev/matrix-docker-ansible-deploy"
+room = "#matrix-docker-ansible-deploy:devture.com"
+support_level = "Community"
+
+[[distributions]]
+name = "Ananace Helm Charts"
+description = "Kubernetes applications packaged into helm charts"
+vendor = "Ananace"
+maturity = "Stable"
+frameworks = ["Helm", "Kubernetes"]
+licence = "Apache-2.0"
+repository = "https://gitlab.com/ananace/charts"
+room = "#matrix-on-kubernetes:fiksel.info"
+support_level = "Community"
+
+[[distributions]]
+name = "Element Server Suite"
+description = "Element Server Suite (ESS) is a professional backend for Matrix-based communications that supports self-hosted and fully managed deployments."
+vendor = "Element"
+maturity = "Stable"
+frameworks = ["Kubernetes"]
+licence = "Proprietary"
+repository = "https://element.io/server-suite"
+support_level = "Commercial"
+
+[[distributions]]
+name = "synapse-operator"
+description = "The Synapse operator offers a convenient way to deploy and manage a Synapse server. It was built with operator-sdk."
+vendor = "Red Hat"
+maturity = "Stable"
+frameworks = ["Kubernetes"]
+licence = "Apache-2.0"
+repository = "https://github.com/opdev/synapse-operator"
+support_level = "Community"
+
+
+[[distributions]]
+name = "BundesMessenger"
+description = "The free & secure messenger for the public sector."
+vendor = "BWI GmbH"
+maturity = "Stable"
+frameworks = ["Helm", "Kubernetes"]
+licence = "Apache-2.0"
+repository = "https://gitlab.opencode.de/bwi/bundesmessenger/info"
+support_level = "Commercial"

content/ecosystem/distributions/index.md

@@ -0,0 +1,10 @@
++++
+title = "Distributions"
+template = "ecosystem/distributions.html"
+weight = 1
+extra.summary = """
+A Matrix distribution is a collection of software related to Matrix that are deployed and automatically configured to work together. The software deployed needs to be able to join and participate in the public federation if the administrator configures it for this purpose.
+"""
++++
+
+{{ all_distributions() }}

content/ecosystem/sdks/sdks.toml

@@ -595,4 +595,3 @@ featured_in = ["client", "bot", "bridge"]
 description = """
 A .NET 8 library for interacting with Matrix.
 """
-

sass/_distributions.scss

@@ -0,0 +1,59 @@
+.distributions {
+    p {
+        text-align: center;
+        font-weight: 400;
+        font-size: 1.125rem;
+        line-height: 120%;
+        margin: 0 auto 4rem auto;
+    }
+}
+
+.distribution-links {
+    margin-top: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: .7rem;
+
+    a {
+        display: flex;
+        align-items: center;
+        gap: .3rem;
+
+        border: 1px solid #777;
+        border-radius: 999px;
+        padding-inline: .5rem;
+
+        font-size: .8rem;
+
+        svg {
+            width: 1.2em;
+            height: 1.2em;
+
+            * {
+                fill: #777;
+            }
+
+            line {
+                stroke: #777;
+            }
+        }
+    }
+
+    a:hover {
+        color: #fff;
+        background-color: #777;
+
+        svg {
+
+            * {
+                fill: #fff;
+            }
+
+            line {
+                stroke: #fff;
+            }
+        }
+    }
+}

sass/_projects.scss

@@ -36,7 +36,7 @@
     }
 
     h3 {
-        margin: 0;
+        margin: 0 .2rem 0 0;
 
         font-style: normal;
         font-weight: 700;
@@ -190,6 +190,7 @@
     font-size: 1rem;
     font-weight: 400;
     max-width: fit-content;
+    justify-self: flex-end;
 
     &.stable {
         background-color: #DFF6D5;
@@ -223,6 +224,7 @@
     justify-content: space-between;
     gap: .2rem;
     align-items: start;
+    flex-wrap: wrap;
 }
 
 #filters-overlay {

sass/style.scss

@@ -10,6 +10,7 @@
 @import '_clients';
 @import '_bridges';
 @import '_servers';
+@import '_distributions';
 @import '_sdks';
 @import '_otwsu';
 @import '_guardians';

static/js/distributions.js

@@ -0,0 +1,20 @@
+import { AllOfFilter, AnyOfFilter, refreshCardsView } from "./projects.js";
+
+document.addEventListener('DOMContentLoaded', (event) => {
+
+    var filters = [];
+    let maturityFilter = new AnyOfFilter("filter-maturity", "all-distributions", filters);
+    let supportFilter = new AnyOfFilter("filter-support", "all-distributions", filters);
+    let licenceFilter = new AnyOfFilter("filter-licence", "all-distributions", filters);
+    let frameworkFilter = new AnyOfFilter("filter-framework", "all-distributions", filters);
+    filters.push(
+        maturityFilter,
+        supportFilter,
+        licenceFilter,
+        frameworkFilter
+    );
+    refreshCardsView("all-distributions", filters);
+    for (const filter of filters) {
+        filter.refreshActiveState();
+    }
+})

templates/ecosystem/distributions.html

@@ -0,0 +1,19 @@
+{% extends "page.html" %}
+{% block head_extra %}
+<meta name="description" content="{{ page.extra.summary }}">
+<noscript>
+    <link rel="stylesheet" href="/no-js.css" />
+</noscript>
+<script type="module" src="/js/distributions.js"></script>
+{% endblock head_extra%}
+{% block content %}
+<div class="page-header">
+    <div class="hero-block">
+        <h1>{{ page.title }}</h1>
+        <p>{{ page.extra.summary }}</p>
+    </div>
+</div>
+<div class="content distributions">
+    <p>{{ page.content | safe }}</p>
+</div>
+{% endblock content %}

templates/macros/distributions.html

@@ -0,0 +1,11 @@
+{% macro classes(distribution) %}
+maturity-{{ distribution.maturity | lower }}
+
+licence-{{ distribution.licence | slugify }}
+
+{% for framework in distribution.frameworks %}
+framework-{{ framework | slugify }}
+{% endfor %}
+
+support-{{ distribution.support_level | slugify }}
+{% endmacro %}

templates/shortcodes/all_distributions.html

@@ -0,0 +1,126 @@
+{% import "macros/distributions.html" as srvutils %}
+{% set distributions_data = load_data(path="content/ecosystem/distributions/distributions.toml") %}
+{% set licences = [] %}
+{% set frameworks = [] %}
+{% set support_levels = [] %}
+{% for distribution in distributions_data.distributions %}
+{% set_global licences = licences | concat(with=distribution.licence) %}
+{% set_global frameworks = frameworks | concat(with=distribution.frameworks) %}
+{% set_global support_levels = support_levels | concat(with=distribution.support_level) %}
+{% endfor %}
+{% set licences = licences | unique | sort %}
+{% set frameworks = frameworks | unique | sort %}
+{% set support_levels = support_levels | unique | sort %}
+
+<div class="filters">
+    <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 distribution 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 distribution 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-framework" class="filter">
+            Framework
+            <div class="divider"></div>
+            <img src="/assets/down-arrow.svg" alt="Downard facing arrow">
+        </button>
+        <div id="filter-framework-menu" class="filter-menu">
+            <p>The distribution is using any of the frameworks checked.</p>
+            {% for framework in frameworks %}
+            <div class="filter-option">
+                <input id="framework-{{ framework | slugify }}" type="checkbox" checked>
+                <label for="framework-{{ framework | slugify }}">{{ framework }}</label>
+            </div>
+            {% endfor %}
+            <div class="reset-links">Select <button>all</button> - <button>none</button></div>
+        </div>
+    </div>
+    <div class="filter-wrap">
+        <button id="filter-support" class="filter">
+            Support Level
+            <div class="divider"></div>
+            <img src="/assets/down-arrow.svg" alt="Downard facing arrow">
+        </button>
+        <div id="filter-support-menu" class="filter-menu">
+            <p>The distribution has any of these support levels.</p>
+            {% for support in support_levels %}
+            <div class="filter-option">
+                <input id="support-{{ support | slugify }}" type="checkbox" checked>
+                <label for="support-{{ support | slugify }}">{{ support }}</label>
+            </div>
+            {% endfor %}
+            <div class="reset-links">Select <button>all</button> - <button>none</button></div>
+        </div>
+    </div>
+</div>
+
+<div id="filters-overlay"></div>
+
+<div id="all-distributions" class="projects-card-deck">
+    {% for distribution in distributions_data.distributions | sort(attribute="maturity") | reverse %}
+    <div>
+        <div class="project-card {{ srvutils::classes(distribution=distribution) }}">
+            <div class="title-row">
+                <h3>{{ distribution.name }}</h3>
+                <div class="maturity {{ distribution.maturity | lower }}">{{ distribution.maturity }}</div>
+            </div>
+            <div>{{ distribution.licence }} &middot; {% for framework in distribution.frameworks | slice(end=2) %}{{
+                framework }}{% if not loop.last %} &ndash; {% endif %}{% endfor %}</div>
+            <span>{{ distribution.description | safe }}</span>
+            <div class="distribution-links">
+                {% if distribution.repository %}
+                <a href="{{ distribution.repository }}">
+                    {{ load_data(path="/assets/projects/repo.svg") | safe }}
+                    Repository
+                </a>
+                {% endif %}
+                {% if distribution.room %}
+                <a href="https://matrix.to/#/{{ distribution.room }}">
+                    {{ load_data(path="/assets/projects/matrix.svg") | safe }}
+                    Matrix Room
+                </a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>