-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.fr.html
162 lines (147 loc) · 6.29 KB
/
index.fr.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Générateur de Bookmarklets : suivez, réagissez et publiez via votre instance Mastodon</title>
<link rel="alternate" hreflang="en" href="./index.html">
<style>
body {
font-family: sans-serif;
}
label {
display: block;
font-weight: bold;
}
button {
padding: 1em 2em;
font-size: 1.2rem;
font-weight: bold;
background: darkGreen;
color: white;
border: 0;
}
button:active {
background: white;
color: darkGreen;
}
header, footer {
color: #888;
font-size: 0.8rem;
}
form {
background: #eee;
padding: 0.5em 2em;
}
input {
font-size: 1rem;
width: 20em;
height: 2em;
line-height: 2;
}
body {
margin: 0 auto;
max-width: 50rem;
padding: 0.5rem 2rem;
}
h1 {
font-size: 1.3rem;
color: #000;
}
h2 {
font-size: 1.1rem;
color: #333;
}
.dump-area a:link {
font-size: 1.3rem;
font-weight: bold;
margin: 0.5rem 0.2rem 0.5rem 0rem;
color: darkGreen;
}
.dump-area:not(:empty)::after {
content: '(Faites glissez ce lien vers votre barre de signets)';
font-size: 0.7rem;
display:block;
}
.dump-area ::before {
content: attr(title) ': ';
font-weight: normal;
color: black;
}
</style>
</head>
<body>
<header>
<h1>Générateur de Bookmarklets Mastodon</h1>
<h2>Suivez, réagissez et publiez via votre instance Mastodon</h2>
<p>En raison de la structure décentralisée du Fediverse, vous risquez de ne voir qu'une partie d'une conversation parce que certaines des personnes qui y participent ne sont suivies par personne dans votre instance.</p>
<p>Pour être sûr de voir la totalité de la conversation et pas seulement la partie qui a atteint votre instance, vous devez lire la conversation sur l'instance de la personne qui l'a lancée.</p>
<p>Un navigateur web est donc beaucoup plus efficace qu'un client Mastodon dédié pour faire des découvertes intéressantes. Vous pouvez suivre les liens ouvrant de nouveaux onglets dans votre navigateur web pour découvrir l'ensemble de la conversation là où l'auteur initial est enregistré.</p>
<p>Mais vous découvrirez rapidement que réagir à un message ou suivre quelqu'un qui n'est pas dans votre instance est un peu fastidieux.</p>
<p>Et si vous pouviez cliquer sur un lien dans votre barre de signets, et que cela vous ramenait à votre propre instance, tout en voyant le profil de la personne que vous voulez suivre ou avec laquelle vous voulez interagir ?</p>
<p>Vous n'avez qu'à entrer le nom de domaine de votre instance dans le champ de saisie ci-dessous et nous générerons des liens que vous pourrez faire glisser vers votre barre de signets.</p>
</header>
<hr>
<main>
<p>En bref : saisissez le domaine de votre instance. Faites glisser les liens vers la barre de signets.</p>
<form action="javascript:;">
<p><label for="domain">Quel est l'addresse de votre instance ?</label>
<input type="text" name="domain" id="domain" placeholder="mastodon.example" required></p>
<button id="generate" type="submit">Générez les signets !</button>
<p><span aria-live="polite" class="dump-area" id="dump-area1"></span></p>
<p><span aria-live="polite" class="dump-area" id="dump-area2"></span></p>
<p><span aria-live="polite" class="dump-area" id="dump-area3"></span></p>
</form>
</main>
<footer>
<p>Outil assemblé par <a href="https://mastodon.mg/@barijaona">Barijaona Ramaholimihaso</a>.</p>
<p>Crédits au Mastodon Follow Bookmarklet d'<a href="https://toot.andr3.net/@me">André Luís</a> et au plugin <a href="https://github.com/bramus/mastodon-profile-redirect">mastodon-profile-redirect</a> de <a href="https://front-end.social/@bramus">Bramus Van Damme</a>.</p>
<a rel="license" href="https://github.com/barijaona/mastodon-bookmarklet-generator/blob/main/LICENSE">Licence MIT</a><p>
</footer>
<script>
const el = document.querySelector('form');
const generateLink = (domain) => {
let href1;
let link1;
fetch('./follow_bookmarklet.js').then(result => result.text().then(content => {
href1 = content.replace(/'example\.org'/, `'${domain}'`);
link1 = document.createElement('a');
link1.setAttribute('href', href1);
link1.id = 'bookmarklet1';
link1.innerText = `Suivre via ${domain}`;
link1.title = 'Pour suivre un utilisateur Mastodon ';
const previousLink1 = document.getElementById('bookmarklet1');
if (previousLink1) { previousLink1.parentNode.removeChild(previousLink1); }
document.getElementById('dump-area1').appendChild(link1);
}));
let href2;
let link2;
href2 = `javascript:window.location.href = 'https://${domain}/authorize_interaction?uri='+encodeURIComponent(window.location.href)`;
link2 = document.createElement('a');
link2.setAttribute('href', href2);
link2.id = 'bookmarklet2';
link2.innerText = `Réagir via ${domain}`;
link2.title = 'Pour amener un élément Mastodon (message, utilisateur…) vers votre propre instance ';
const previousLink2 = document.getElementById('bookmarklet2');
if (previousLink2) { previousLink2.parentNode.removeChild(previousLink2); }
document.getElementById('dump-area2').appendChild(link2);
let href3;
let link3;
href3 = `javascript:window.location.href = 'https://${domain}/share?text='+encodeURIComponent(document.title+(window.getSelection().toString() ? '\\n« '+window.getSelection().toString()+' »':'')+'\\n'+window.location.href)`;
link3 = document.createElement('a');
link3.setAttribute('href', href3);
link3.id = 'bookmarklet3';
link3.innerText = `Publier via ${domain}`;
link3.title = 'Pour initier un message Mastodon citant la page web actuellement affichée (et son texte sélectionné) ';
const previousLink3 = document.getElementById('bookmarklet3');
if (previousLink3) { previousLink3.parentNode.removeChild(previousLink3); }
document.getElementById('dump-area3').appendChild(link3);
};
if (el && 'addEventListener' in el) {
el.addEventListener('submit', (ev) => {
ev.preventDefault();
generateLink(document.querySelector('#domain').value);
})
}
</script>
</body>
</html>