Merge pull request #55 from anadahz/feature/custom-riot-home
Enable support for custom HTML in riot-web homepage
This commit is contained in:
Slavi Pantaleev
GitHub
commit
ed2ae4b4d2
|
|
@ -323,6 +323,17 @@ matrix_riot_web_roomdir_servers: ['matrix.org']
|
|||
matrix_riot_web_welcome_user_id: "@riot-bot:matrix.org"
|
||||
|
||||
|
||||
# Riot home.html customizations
|
||||
# Default home.html template file
|
||||
matrix_riot_web_homepage_template: "{{ role_path }}/templates/riot-web/home.html.j2"
|
||||
# Show general discussion about Matrix and Riot row
|
||||
matrix_riot_web_homepage_template_general: true
|
||||
# Show Matrix technical discussions row
|
||||
matrix_riot_web_homepage_template_technical: true
|
||||
# Show building services on Matrix row
|
||||
matrix_riot_web_homepage_template_building: true
|
||||
# Show contributing code to Matrix and Riot row
|
||||
matrix_riot_web_homepage_template_contributing: true
|
||||
|
||||
# Matrix mautrix is a Matrix <-> Telegram bridge
|
||||
# Enable telegram bridge
|
||||
|
|
|
|||
|
|
@ -20,14 +20,15 @@
|
|||
|
||||
- name: Ensure Matrix riot-web configured
|
||||
template:
|
||||
src: "{{ role_path }}/templates/riot-web/{{ item }}.j2"
|
||||
dest: "{{ matrix_riot_web_data_path }}/{{ item }}"
|
||||
src: "{{ item.src }}"
|
||||
dest: "{{ matrix_riot_web_data_path }}/{{ item.name }}"
|
||||
mode: 0644
|
||||
owner: "{{ matrix_user_username }}"
|
||||
group: "{{ matrix_user_username }}"
|
||||
with_items:
|
||||
- "riot.im.conf"
|
||||
- "config.json"
|
||||
- {src: "{{ role_path }}/templates/riot-web/riot.im.conf.j2", name: "riot.im.conf"}
|
||||
- {src: "{{ role_path }}/templates/riot-web/config.json.j2", name: "config.json"}
|
||||
- {src: "{{ matrix_riot_web_homepage_template }}", name: "home.html"}
|
||||
when: matrix_riot_web_enabled
|
||||
|
||||
- name: Ensure matrix-riot-web.service installed
|
||||
|
|
|
|||
308
roles/matrix-server/templates/riot-web/home.html.j2
Normal file
308
roles/matrix-server/templates/riot-web/home.html.j2
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
<style type="text/css">
|
||||
|
||||
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
|
||||
* voodoo where we have to set display: none by default
|
||||
*/
|
||||
|
||||
.mx_HomePage_header h1 {
|
||||
margin-left: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.mx_HomePage_header h2 {
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.mx_HomePage_header h1 a {
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.mx_HomePage h3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mx_HomePage_header {
|
||||
border: 1px solid #76CFA6;
|
||||
background-color: #eaf5f0;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_HomePage_col {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mx_HomePage_toprow {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mx_HomePage_row {
|
||||
flex: 1 1 0;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mx_HomePage_logo {
|
||||
margin-top: 20px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 20px;
|
||||
display: inline;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.mx_HomePage_room {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.mx_HomePage_toprow .mx_HomePage_room {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_icon {
|
||||
border-radius: 50%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_HomePage_room .mx_HomePage_desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mx_HomePage_comment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 100px;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.mx_HomePage_container h3::after,
|
||||
.mx_HomePage_container h4::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.mx_HomePage_container {
|
||||
display: block ! important;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.mx_HomePage_container h1,
|
||||
.mx_HomePage_container h2,
|
||||
.mx_HomePage_container h3,
|
||||
.mx_HomePage_container h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mx_HomePage_container">
|
||||
<div class="mx_HomePage_col mx_HomePage_header">
|
||||
<a href="{{ hostname_riot }}"><img src="home/images/logo.svg" class="mx_HomePage_logo"></a>
|
||||
<div>
|
||||
<h1>_t("Welcome to {{ hostname_riot }}")</h1>
|
||||
<h2>_t("Decentralised, encrypted chat & collaboration powered by [matrix]")</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx_HomePage_col mx_HomePage_toprow">
|
||||
<div class="mx_HomePage_row">
|
||||
<div>
|
||||
<h3>_t("Search the room directory")</h3>
|
||||
<a class="mx_HomePage_room" href="#/directory">
|
||||
<img class="mx_HomePage_icon" src="img/icons-directory.svg">
|
||||
</a>
|
||||
<span class="mx_HomePage_comment">
|
||||
_t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if matrix_riot_web_welcome_user_id %}
|
||||
<div class="mx_HomePage_row">
|
||||
<div>
|
||||
<h3>_t("Chat with Riot Bot")</h3>
|
||||
<a class="mx_HomePage_room" href="#/user/{{ matrix_riot_web_welcome_user_id }}?action=chat">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot-bot.png">
|
||||
</a>
|
||||
<span class="mx_HomePage_comment">
|
||||
_t("Get started with some tips from Riot Bot!")
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if matrix_riot_web_homepage_template_general %}
|
||||
|
||||
<h3>_t("General discussion about Matrix and Riot")</h3>
|
||||
|
||||
<div class="mx_HomePage_row">
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#matrix:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/matrix.png">
|
||||
<span class="mx_HomePage_name">Matrix HQ</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Discussion of all things Matrix!")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#riot:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot.png">
|
||||
<span class="mx_HomePage_name">Riot</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Riot/Web & Desktop chat")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#riot-ios:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot-ios.png">
|
||||
<span class="mx_HomePage_name">#riot-ios</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Riot/iOS & matrix-ios-sdk chat")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#riot-android:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot-android.png">
|
||||
<span class="mx_HomePage_name">#riot-android</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Riot/Android & matrix-android-sdk chat")</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if matrix_riot_web_homepage_template_technical %}
|
||||
|
||||
<h3>_t("Matrix technical discussions")</h3>
|
||||
<h4>_t("Running Matrix services")</h4>
|
||||
|
||||
<div class="mx_HomePage_row">
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#matrix-docker-ansible-deploy:devture.com">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/matrix.png">
|
||||
<span class="mx_HomePage_name">Matrix Docker Ansible Deploy</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Support for Matrix Docker Ansible role")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#synapse:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/matrix.png">
|
||||
<span class="mx_HomePage_name">Synapse Support Community</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Community-run support for Synapse")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#dendrite:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/dendrite.png">
|
||||
<span class="mx_HomePage_name">#dendrite:matrix.org</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Admin support for Dendrite")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#homeowners:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/homeowners.png">
|
||||
<span class="mx_HomePage_name">Synapse Homeowners</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Announcements about Synapse releases")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#irc:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/irc.png">
|
||||
<span class="mx_HomePage_name">IRC Matrix Bridges</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Support for those using and running matrix-appservice-irc")</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if matrix_riot_web_homepage_template_building %}
|
||||
|
||||
<h4>_t("Building services on Matrix")</h4>
|
||||
|
||||
<div class="mx_HomePage_row">
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#matrix-dev:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/matrix-dev.png">
|
||||
<span class="mx_HomePage_name">#matrix-dev:matrix.org</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Support for those using the Matrix spec")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#e2e:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/e2e.png">
|
||||
<span class="mx_HomePage_name">End-to-end crypto in Matrix</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Design and implementation of E2E in Matrix")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#vr:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/vr.png">
|
||||
<span class="mx_HomePage_name">#vr:matrix.org</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Implementing VR services with Matrix")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#webrtc:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/webrtc.png">
|
||||
<span class="mx_HomePage_name">#webrtc:matrix.org</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Implementing VoIP services with Matrix")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#matrix-identity:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/identity.jpg">
|
||||
<span class="mx_HomePage_name">Matrix Identity</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Discussion of the Identity Service API")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#bridging:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/bridging.png">
|
||||
<span class="mx_HomePage_name">Matrix Bridging</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Support for those using, running and writing other bridges")</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if matrix_riot_web_homepage_template_contributing %}
|
||||
<h4>_t("Contributing code to Matrix and Riot")</h4>
|
||||
|
||||
<div class="mx_HomePage_row">
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#riot-dev:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot-dev.png">
|
||||
<span class="mx_HomePage_name">#riot-dev</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Dev chat for the Riot/Web dev team")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#dendrite-dev:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/dendrite-dev.png">
|
||||
<span class="mx_HomePage_name">#dendrite-dev</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Dev chat for the Dendrite dev team")</span>
|
||||
</div>
|
||||
<div class="mx_HomePage_room">
|
||||
<a href="#/room/#riotweb-translations:matrix.org">
|
||||
<img class="mx_HomePage_icon" src="home/rooms/riot-translations.png">
|
||||
<span class="mx_HomePage_name">Riot Translations</span>
|
||||
</a>
|
||||
<span class="mx_HomePage_desc">_t("Co-ordination for Riot translators")</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -11,6 +11,7 @@ ExecStart=/usr/bin/docker run --rm --name matrix-riot-web \
|
|||
--log-driver=none \
|
||||
--user={{ matrix_user_uid }}:{{ matrix_user_gid }} \
|
||||
-v {{ matrix_riot_web_data_path }}/config.json:/riot-web/webapp/config.json:ro \
|
||||
-v {{ matrix_riot_web_data_path }}/home.html:/riot-web/webapp/home.html:ro \
|
||||
-v {{ matrix_riot_web_data_path }}/riot.im.conf:/data/riot.im.conf:ro \
|
||||
--network={{ matrix_docker_network }} \
|
||||
{% if not matrix_nginx_proxy_enabled %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue