forked from fediland/fediland.github.io
Merge pull request #2 from fediland/feature/content_pages
JavaScript refactoring and content pages.
This commit is contained in:
Alexey Skobkin
GitHub
commit
81bd160506
48
index.html
48
index.html
|
|
@ -15,9 +15,10 @@
|
||||||
|
|
||||||
<!-- Instances list -->
|
<!-- Instances list -->
|
||||||
<script type="text/javascript" src="js/servers.js" defer></script>
|
<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 -->
|
<!-- Choosing random instance -->
|
||||||
<script type="text/javascript" src="js/random-server.js" defer></script>
|
<script type="text/javascript" src="js/random-server.js" defer></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
@ -26,31 +27,44 @@
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</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">
|
<ul class="navbar-nav">
|
||||||
<li class="nav-item">
|
<li class="nav-item active">
|
||||||
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
|
<a class="nav-link" href="index.html">Главная<span class="sr-only"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
</li>
|
||||||
<!--
|
</ul>
|
||||||
|
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="https://www.fediverse.space">fediverse.space</a>
|
<a class="nav-link" href="https://joinmastodon.org">joinmastodon.org<span class="sr-only"></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="https://fediverse.network">fediverse.network</a>
|
<a class="nav-link" href="https://instances.social">instances.social</a>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -92,7 +106,7 @@
|
||||||
Если вы хотите ответственно подойти к выбору места, где будете вести свой блог - воспользуйтесь списками серверов.
|
Если вы хотите ответственно подойти к выбору места, где будете вести свой блог - воспользуйтесь списками серверов.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn" href="#">Выбрать самостоятельно »</a>
|
<a class="btn" href="servers.html">Выбрать самостоятельно »</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
|
|
@ -104,7 +118,7 @@
|
||||||
Проходите по ссылке ниже чтобы увидеть подборку ссылок на полезные материалы.
|
Проходите по ссылке ниже чтобы увидеть подборку ссылок на полезные материалы.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn" href="#">Полезные материалы »</a>
|
<a class="btn" href="info.html">Полезные материалы »</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
83
info.html
Normal file
83
info.html
Normal 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
33
js/functions.js
Normal 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
19
js/list-servers.js
Normal 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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 serverName = getRandomKey(instances);
|
||||||
let url = instances[serverName];
|
let url = instances[serverName];
|
||||||
|
|
@ -7,10 +7,4 @@ console.log('Randomly selected: ', serverName, url);
|
||||||
|
|
||||||
let linkElement = document.getElementById('reg-link');
|
let linkElement = document.getElementById('reg-link');
|
||||||
linkElement.setAttribute('href', url);
|
linkElement.setAttribute('href', url);
|
||||||
linkElement.innerHTML = 'Регистрация на ' + serverName;
|
linkElement.innerText = 'Регистрация на ' + serverName;
|
||||||
|
|
||||||
function getRandomKey(obj) {
|
|
||||||
let keys = Object.keys(obj);
|
|
||||||
|
|
||||||
return keys[ keys.length * Math.random() << 0 ];
|
|
||||||
};
|
|
||||||
|
|
|
||||||
86
servers.html
Normal file
86
servers.html
Normal 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>
|
||||||
Loading…
Reference in a new issue