JavaScript refactoring. Simple server list page added. Info page added. Links on index replaced with working pages.
This commit is contained in:
Alexey Skobkin
parent
5f98217418
commit
1439581016
48
index.html
48
index.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue