fediland/fediland.github.io
1
0
Fork 1
mirror of https://github.com/fediland/fediland.github.io.git synced 2024-11-12 15:43:06 +00:00
Code Issues Projects Releases Activity

JavaScript refactoring. Simple server list page added. Info page added. Links on index replaced with working pages.

Browse source
This commit is contained in:
Alexey Skobkin 2021-03-20 19:40:38 +03:00
parent 5f98217418
commit 1439581016
6 changed files with 254 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
index.html
View file

@ -15,9 +15,10 @@
<!-- Instances list -->
<script type="text/javascript" src="js/servers.js" defer></script>
<!-- Common functions -->
<script type="text/javascript" src="js/functions.js" defer></script>
<!-- Choosing random instance -->
<script type="text/javascript" src="js/random-server.js" defer></script>
</head>
<body>
@ -26,31 +27,44 @@
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Fediland</a>
<a class="navbar-brand" href="index.html">Fediland</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
<li class="nav-item active">
<a class="nav-link" href="index.html">Главная<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://instances.social">instances.social</a>
<a class="nav-link" href="servers.html"><i class=""></i> Серверы<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.party">fediverse.party</a>
<a class="nav-link" href="info.html">Информация<span class="sr-only"></span></a>
</li>
<!--
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.fediverse.space">fediverse.space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.network">fediverse.network</a>
</li>
-->
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://instances.social">instances.social</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.party">fediverse.party</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="https://www.fediverse.space">fediverse.space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.network">fediverse.network</a>
</li>
-->
</ul>
</div>
</nav>
@ -92,7 +106,7 @@
Если вы хотите ответственно подойти к выбору места, где будете вести свой блог - воспользуйтесь списками серверов.
</p>
<p>
<a class="btn" href="#">Выбрать самостоятельно »</a>
<a class="btn" href="servers.html">Выбрать самостоятельно »</a>
</p>
</div>
<div class="col-md-4">
@ -104,7 +118,7 @@
Проходите по ссылке ниже чтобы увидеть подборку ссылок на полезные материалы.
</p>
<p>
<a class="btn" href="#">Полезные материалы »</a>
<a class="btn" href="info.html">Полезные материалы »</a>
</p>
</div>
</div>

83
info.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Into the Fediverse!</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="Alexey Skobkin">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">Fediland</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Главная<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="servers.html"><i class=""></i> Серверы<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="info.html">Информация<span class="sr-only"></span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://instances.social">instances.social</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.party">fediverse.party</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="https://www.fediverse.space">fediverse.space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.network">fediverse.network</a>
</li>
-->
</ul>
</div>
</nav>
<div class="content">
<h2>Полезное чтиво</h2>
<ul class="list-unstyled" id="info-list">
<li><a href="https://ru.wikipedia.org/wiki/Fediverse">"Федивёрс" на Википедии</a></li>
<li><a href="https://habr.com/ru/post/345402/">"Не ходи в Fediverse, там тебя ждут неприятности. — Ну как же туда не ходить? Они же ждут" — статья на Хабре</a></li>
<li><a href="https://habr.com/ru/users/s4n2a/posts/">"Мифы и легенды древней Fediverse" — статья на Хабре</a></li>
<li><a href="https://innereq.org/Возможно,_ты_используешь_Mastodon_неправильно">"Возможно, ты используешь Mastodon неправильно" — адаптация англоязычной статьи от Inex Code</a></li>
<li><a href="https://habr.com/ru/post/516144/">"«Дивный новый мир»: что такое Fediverse и как стать его частью" — статья на Хабре</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

33
js/functions.js Normal file
View file

@ -0,0 +1,33 @@
/**
* Returns random key from the object.
*
* @param {object} obj
* @returns {string}
*/
function getRandomKey(obj) {
let keys = Object.keys(obj);
return keys[ keys.length * Math.random() << 0 ];
};
/**
* Randomly sorts an array.
*
* @param {array} array
* @returns {array}
*/
function shuffleArray(array) {
return array.sort(function(a, b) {
return getRandomInt(1) ? 1 : -1;
});
}
/**
* Returns random number from 0 to max.
*
* @param {number} max
* @returns {number}
*/
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max + 1));
}

19
js/list-servers.js Normal file
View file

@ -0,0 +1,19 @@
// Should be included using 'defer' after servers.js and functions.js
let listGroup = document.getElementById('server-list');
let shuffledServerNames = shuffleArray(Object.keys(instances));
console.log('shuffled: ', shuffledServerNames);
for (serverName of shuffledServerNames) {
let url = instances[serverName];
// Creating list item
let item = document.createElement('a');
item.setAttribute('class', 'list-group-item');
item.setAttribute('href', url);
item.innerText = serverName;
listGroup.appendChild(item);
}

10
js/random-server.js
View file

@ -1,4 +1,4 @@
// Should be included using 'defer' after servers.js
// Should be included using 'defer' after servers.js and functions.js
let serverName = getRandomKey(instances);
let url = instances[serverName];
@ -7,10 +7,4 @@ console.log('Randomly selected: ', serverName, url);
let linkElement = document.getElementById('reg-link');
linkElement.setAttribute('href', url);
linkElement.innerHTML = 'Регистрация на ' + serverName;
function getRandomKey(obj) {
let keys = Object.keys(obj);
return keys[ keys.length * Math.random() << 0 ];
};
linkElement.innerText = 'Регистрация на ' + serverName;

86
servers.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Into the Fediverse!</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="Alexey Skobkin">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Instances list -->
<script type="text/javascript" src="js/servers.js" defer></script>
<!-- Common functions -->
<script type="text/javascript" src="js/functions.js" defer></script>
<!-- Choosing random instance -->
<script type="text/javascript" src="js/list-servers.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">Fediland</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Главная<span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="servers.html"><i class=""></i> Серверы<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="info.html">Информация<span class="sr-only"></span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://instances.social">instances.social</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.party">fediverse.party</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="https://www.fediverse.space">fediverse.space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fediverse.network">fediverse.network</a>
</li>
-->
</ul>
</div>
</nav>
<div class="content">
<h2>Рекомендованные русскоязычные серверы</h2>
<div class="list-group" id="server-list">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>