Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues Pull requests Releases Wiki Activity

Dynamic instances list

Browse source
This commit is contained in:
Chocobozzz 2018-03-15 16:12:18 +01:00
parent c49168250e
commit 651c10260f
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 75 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
content/home.en.md
View file

@ -118,32 +118,8 @@ or the entire fediverse.
Liste des instances
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Framatube</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
<div id="instances-list" class="list-group"></div>
<div class="alert alert-info">This is like picking an e-mail hosting provider: the domain will also be part of your username!</div>
{{% /grid %}}

28
content/home.fr.md
View file

@ -117,33 +117,9 @@ or the entire fediverse.
Liste des instances
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Framatube</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
<div id="instances-list" class="list-group"></div>
<div class="alert alert-info">This is like picking an e-mail hosting provider: the domain will also be part of your username!</div>
{{% /grid %}}
{{% /grid %}}

1
themes/hugo-bootstrap-premium/layouts/partials/base/scripts.html
View file

@ -17,6 +17,7 @@
{{ end }}
<script src="{{ "js/highlight.pack.js" | absURL }}"></script>
<script src="{{ "js/site.js" | absURL }}"></script>
<script src="{{ "js/instances.js" | absURL }}"></script>
<script>hljs.initHighlightingOnLoad();</script>
{{ with .Site.Params.googleAnalytics }}

23
themes/hugo-bootstrap-premium/static/css/style.css
View file

@ -197,3 +197,26 @@ body .medias .container {
.getting-started h2 {
color: #F1680D;
}
#instances-list {
max-height: 600px;
overflow-y: auto;
}
#instances-list .list-group-item {
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
}
#instances-list .list-group-item .list-group-item-heading {
margin-bottom: 0;
}
#instances-list .list-group-item .list-group-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 5px;
}

47
themes/hugo-bootstrap-premium/static/js/instances.js Normal file
View file

@ -0,0 +1,47 @@
$(function () {
const instancesApi = 'https://instances.peertu.be/api/v1/instances'
const data = {
start: 0,
count: 100,
signup: true,
healthy: true
}
$.get(instancesApi, data, function (res) {
const instances = res.data
const lis = []
instances.forEach(function (instance) {
const el = createInstanceElement(instance.host, instance.name, instance.shortDescription)
lis.push(el)
})
$('#instances-list').append(lis)
})
function createInstanceElement (host, name, description) {
const a = $('<a>', {
class: 'list-group-item',
href: 'https://' + host,
target: '_blank',
title: host
})
const h4 = $('<h4>', {
class: 'list-group-item-heading',
text: name
})
a.append(h4)
if (description) {
const p = $('<p>', {
class: 'list-group-item-text',
text: description
})
a.append(p)
}
return a
}
})