Skip to content

Commit 4699e3b

Browse files
thibaultamartinthibaultamartin
authored
Zola hosting (#1623)
* Init * Draft the layout of the hosting page * Fiddle with flex, with no great success * Align titles, operating date, and CTAs with hacky fixed heights * Make it responsive
1 parent 180c341 commit 4699e3b

File tree

10 files changed

+268
-0
lines changed

10 files changed

+268
-0
lines changed

Diff for: ‎content/ecosystem/hosting/index.md

+29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
11
+++
22
title = "Hosting"
3+
template = "hosting.html"
34
weight = 4
45
+++
6+
7+
## Why not matrix.org?
8+
9+
Matrix could be described as what happens when email, instant messaging and
10+
encryption meet. To be able to use Matrix, you need a Matrix account which is
11+
provided by... a provider! The matrix accounts identifiers look like
12+
`@username:example.com`. People on different providers can talk to one another,
13+
in the same way you can send emails to someone using another email provider.
14+
15+
Matrix.org is the largest, free provider of Matrix accounts. Many people have an
16+
identifier like `@username:matrix.org`. This also means that the Matrix.org
17+
servers are crowded. Using your own provider **as an individual** can not only
18+
make your Matrix experience snappier, but also give you access to a set of
19+
pre-configured [bridges](#) to talk to friends on other networks such as Signal
20+
or WhatsApp.
21+
22+
**Organisations and community managers** will be interested in providers for two
23+
main reasons: they can proudly display their identity with their own domain
24+
in username and rooms identifiers, and their administrators remain in control
25+
of the data of their organisation.
26+
27+
The following providers have been brought to the attention of the Matrix.org
28+
Foundation. Please note that the Matrix.org Foundation doesn't endorse them,
29+
nor provides any warranties for using them.
30+
31+
## Known providers
32+
33+
{{ hosting_providers() }}

Diff for: ‎content/ecosystem/hosting/providers.toml

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
[[providers]]
2+
name = "Element Matrix Services"
3+
image = "logo-ems-primary.svg"
4+
website = "https://ems.element.io"
5+
operating_since = "2018"
6+
description = """
7+
- Hosted Homeservers
8+
- [Hosted Integrations including Slack, IRC, Github bridging](https://element.io/element-matrix-store)
9+
10+
Brought to you by the creators of Matrix, who have been running the biggest homeserver in the network since 2014. Every homeserver comes with a custom instance of Element.
11+
"""
12+
13+
[[providers]]
14+
name = "Ungleich.ch"
15+
image = "ungleich_zerocarbonmatrix.jpg"
16+
website = "https://matrix.zerocarbon.shop"
17+
operating_since = "TBC"
18+
description = """
19+
- Hosted Homeservers
20+
21+
Service provided by [ungleich.ch](https://ungleich.ch/) in their own datacenter in Linthal, Switzerland. They use an old building, second-hand servers, passive cooling and are directly plugged into an on-site hydroelectric power plant!
22+
"""
23+
24+
[[providers]]
25+
name = "etke.cc"
26+
image = "etke.cc.png"
27+
website = "https://etke.cc"
28+
operating_since = "TBC"
29+
description = """
30+
- Setup of hosted Homeserver on any hosting by your choice
31+
- Setup of hosted integrations (full list available on website)
32+
- Setup of additional services (wireguard, languagetool, miniflux, etc.)
33+
- Ongoing maintenance of host & Matrix components
34+
- Email services for your domain
35+
36+
That service will create your Matrix Homeserver on your domain and server (doesn't matter if it's cloud provider or on an old laptop in the corner of your room), (optional) maintains it (server's system updates, cleanup, security adjustments, tuning, etc.; Matrix Homeserver updates & maintenance) and (optional) provide full-featured email service for your domain.
37+
38+
[Matrix Space](https://matrix.to/#/#service:etke.cc) | [Announcements on Matrix](https://matrix.to/#/#announcements:etke.cc)
39+
"""
40+
41+
[[providers]]
42+
name = "Ossrox"
43+
image = "ossrox.svg"
44+
website = "https://ossrox.org"
45+
operating_since = "TBC"
46+
description = """
47+
- Hosted Homeservers
48+
49+
Ossrox is a company from Germany dedicated to hosting open-source services. Not only has the company name been derived from the motto "Open-Source Software Rocks", but also their corporate culture. The three most important principles of the company are security, privacy and sustainability - thanks to open-source software. In addition to Matrix, Ossrox also provides many other solutions e.g. in the messaging, groupware and web meeting segments.
50+
"""

Diff for: ‎sass/_hosting.scss

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.hosting_page {
2+
margin: 0 auto;
3+
padding: 5.625rem 0 2rem 0;
4+
@media (max-width: 767px) {
5+
padding: 5.625rem 32px 2rem 32px;
6+
}
7+
8+
h2 {
9+
text-align: center;
10+
font-weight: 700;
11+
font-size: 2.5rem;
12+
margin-bottom: 1rem;
13+
}
14+
15+
.hosting_providers {
16+
display: flex;
17+
flex-direction: row;
18+
justify-content: center;
19+
flex-wrap: wrap;
20+
gap: 3.125rem;
21+
22+
.provider_card {
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: space-between;
26+
27+
padding: 24px;
28+
29+
flex: 1 0 400px;
30+
max-width: 400px;
31+
@media (max-width: 767px) {
32+
flex: 1 0 300px;
33+
max-width: 300px;
34+
}
35+
36+
37+
border: 1px solid #D2D2D2;
38+
border-radius: 16px;
39+
40+
.details {
41+
text-align: center;
42+
43+
.provider_logo_container {
44+
height: 10rem;
45+
}
46+
47+
h3 {
48+
height: 5rem;
49+
margin: 0;
50+
text-align: center;
51+
52+
font-style: normal;
53+
font-weight: 700;
54+
font-size: 2rem;
55+
line-height: 120%;
56+
}
57+
58+
.operating_since {
59+
height: 1.5rem;
60+
font-size: .9rem;
61+
}
62+
63+
}
64+
65+
.call-to-action {
66+
background-color: #000;
67+
color: #fff;
68+
border-radius: 1000px;
69+
padding: .4rem 2rem;
70+
align-self: center;
71+
}
72+
}
73+
}
74+
}

Diff for: ‎sass/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
@import '_legacy-docs';
1515
@import '_docs-home';
1616
@import '_security-hall-of-fame';
17+
@import '_hosting';

Diff for: ‎static/images/hosting/etke.cc.png

495 Bytes
Loading

Diff for: ‎static/images/hosting/logo-ems-primary.svg

+8
Loading

Diff for: ‎static/images/hosting/ossrox.svg

+72
Loading

Diff for: ‎static/images/hosting/ungleich_zerocarbonmatrix.jpg

31.9 KB
Loading

Diff for: ‎templates/hosting.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% extends "page.html" %}
2+
{% block content %}
3+
<div class="page-header">
4+
<div class="hero-block">
5+
<h1>Hosting</h1>
6+
<p>
7+
Everyone can host their Matrix server, but not everybody wants.
8+
Those are the providers the Matrix Foundation knows about.
9+
</p>
10+
</div>
11+
</div>
12+
13+
<div class="content hosting_page">
14+
15+
{{ page.content | safe }}
16+
17+
</div>
18+
{% endblock content %}

Diff for: ‎templates/shortcodes/hosting_providers.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{% set providers_data = load_data(path="content/ecosystem/hosting/providers.toml") %}
2+
<div class="hosting_providers">
3+
{% for provider in providers_data.providers %}
4+
<div class="provider_card">
5+
<div class="details">
6+
<div class="provider_logo_container">
7+
<img src="/images/hosting/{{ provider.image }}" alt="Logo of {{ provider.name }}" />
8+
</div>
9+
<h3>{{ provider.name }}</h3>
10+
<div class="operating_since">Operating since {{ provider.operating_since }}</div>
11+
</div>
12+
<p>{{ provider.description | markdown | safe }}</p>
13+
<a href="{{ provider.website }}" class="call-to-action">Try them</a>
14+
</div>
15+
{% endfor %}
16+
</div>

0 commit comments

Comments
 (0)