-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
124 lines (105 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<title>Suomalaiset Mastodon-käyttäjät</title>
<meta name="description" content="Lista suomalaisista käyttäjistä eri instansseilta, käyttäjien itsensä suostumuksella. Listaa päivitetään säännöllisesti.">
<meta property="og:locale" content="fi">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:url" content="https://mementomori.social/suomalaiset-mastodon-kayttajat">
<meta property="og:title" content="Suomalaiset Mastodon-käyttäjät">
<meta property="og:description" content="Lista suomalaisista käyttäjistä eri instansseilta, käyttäjien itsensä suostumuksella. Listaa päivitetään säännöllisesti.">
<meta property="og:image" content="https://mementomori.social/suomalaiset-mastodon-kayttajat/og-image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="756">
<meta property="og:type" content="website">
<meta name="twitter:description" content="Lista suomalaisista käyttäjistä eri instansseilta, käyttäjien itsensä suostumuksella. Listaa päivitetään säännöllisesti.">
<meta name="twitter:site" content="@rolle">
<meta name="twitter:creator" content="@rolle">
<meta property="twitter:image" content="https://mementomori.social/suomalaiset-mastodon-kayttajat/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer data-domain="mementomori.social" src="https://analytics.dude.fi/js/plausible.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js"
integrity="sha384-32KMvAMS4DUBcQtHG6fzADguo/tpN1Nh6BAJa2QqZc6/i0K+YPQE+bWiqBRAWuFs" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<body>
<section>
<h1>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="currentColor" d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
Suomalaiset Mastodon-käyttäjät
</h1>
<p><a href="https://www.rollemaa.fi/nain-aloitat-mastodonin-kayton-mihin-rekisteroitya-keta-seurata/">Mikä Mastodon? Lue lisää.</a> Koska Mastodonin käyttäjiä on alkuun hieman hankala löytää palvelun hajautuksen vuoksi, olen kasannut tähän listan suomalaisista käyttäjistä eri instansseilta, käyttäjien itsensä suostumuksella. Listaa päivitetään säännöllisesti.</p>
<h2>Seuraa kaikkia kerralla</h2>
<p>Lataa CSV-tiedosto alta ja tuo se asetuksiisi kohdasta <b>Asetukset → Tuo / Vie → Tuo → Seurattujen lista</b>.</p>
<p>
<a href="following_accounts.csv" class="button">Lataa CSV</a>
</p>
<div class="integration-functionality">
<h2>Seuraa nappia painamalla</h2>
<p>Jotta voit seurata ihmisiä suoraan listalta, sinun täytyy ensin sallia lupa sovelluksen käyttöön. Tämän jälkeen voit seurata yksittäistä käyttäjää painamalla <b>Seuraa</b>-nappia.</p>
<div class="label_input">
<label for="auth-instance">Instanssisi URL-osoite</label>
<div class="label_input__wrapper">
<input type="url" class="auth-input" id="auth-instance" placeholder="https://mastodon.social">
<button class="button" id="button-auth">Ladataan...</button>
</div>
</div>
</div>
<!-- Accessible show instructions toggle -->
<button class="button" id="show-instructions" aria-expanded="false" aria-controls="instructions"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/></svg>Haluatko listalle? Kuinka seurata? Katso ohjeet</button>
<div id="instructions" aria-hidden="true" hidden>
<h2>Ilmoita itsesi listalle</h2>
<p>Lista toimii suostumusperiaatteella. En lisää ketään ilman käyttäjän itsensä lupaa. Haluatko listalle? Lähetä käyttäjälle <a href="https://mementomori.social/@rolle">@rolle@mementomori.social</a> yksityisviesti tai julkinen vastaus <a href="https://mementomori.social/@rolle/109489389453580937">postaukseen</a>. Tätä listaa ei jaeta missään muualla kuin tässä URL-osoitteessa ja listan käyttäminen muuhun kuin Mastodonissa seuraamiseen on kielletty.</p>
<h2>Kuinka seurata listan käyttäjiä</h2>
<p>Seuraaminen tämän listan avulla on helppoa!</p>
<h3>Jos haluat seurata kaikkia käyttäjiä kerralla</h3>
<p>Lataa <a href="following_accounts.csv">CSV-tiedosto</a> ja tuo se asetuksiisi kohdasta <b>Asetukset → Tuo / Vie → Tuo → Seurattujen lista</b>.</p>
<h3>Jos haluat seurata käyttäjiä yksitellen</b></h3>
<p>Syötä yllä olevaan kenttään instanssisi osoite ja kirjaudu sisään. Tämän jälkeen voit seurata nappia painamalla. Jos et halua antaa lupaa datasi käyttöön, kopioi valitsemasi käyttäjän profiilin osoite leikepöydälle ja liitä se Mastodonisi hakuun (Selaa/Explore-välilehden alla). Näin pääset seuraamaan käyttäjää käsin.</p>
</div>
<div class="heading">
<h2 id="heading-users"><span id="heading-users-title">Käyttäjät</span> (<span class="user-count" id="user-count" aria-live="polite">...</span>)</h2>
<input type="search" class="search" id="search" placeholder="Suodata sanalla">
</div>
<!-- Filter checkbox for followed users -->
<div id="filter-followed-container" class="input with_label boolean optional" hidden>
<div class="label_input">
<label class="boolean optional" for="account_bot">Piilota käyttäjät, joita seuraan</label>
<div class="label_input__wrapper">
<label class="checkbox">
<input class="boolean optional" type="checkbox" name="filter-followed" id="filter-followed">
</label>
</div>
</div>
</div>
<!-- Skeleton user list for loading animation -->
<ul class="user-list skeleton" id="skeleton" aria-hidden="true">
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
<li><a href="#" class="status__display-name"><div class="add-skeleton status__avatar"><div class="account__avatar" style="width: 46px; height: 46px;"></div></div><span class="display-name"><bdi ><strong class="add-skeleton display-name__html">Roni Laukkarinen</strong></bdi><span class="add-skeleton display-name__account">@rolle@mementomori.social</span></span></a><a href="#" class="add-skeleton button">Seuraa</a></li>
</ul>
<!-- The real list -->
<ul class="user-list" id="user-list" aria-live="polite"></ul>
</section>
<footer>
<p>Käsin koodattu ja <a href="https://github.com/ronilaukkarinen/finnish-mastodon-users">avointa lähdekoodia</a>. <span class="updated">Päivitetty viimeksi <time id="updated"></time>.</span></p>
</footer>
<script src="app.js"></script>
<script src="auth.js"></script>
<script src="last-updated.js"></script>
<script src="toggle-instructions.js"></script>
<script src="logged-in.js"></script>
</body>
</html>