1
0
Fork 0

ENERGIZE!

This commit is contained in:
smpl 2022-04-29 23:52:47 +02:00
commit 4875e09740
13 changed files with 1358 additions and 0 deletions

18
LICENSE Normal file
View file

@ -0,0 +1,18 @@
Copyright (C) 2022 smpl <smpl@slamkode.ml>
This software is provided 'as-is', without any express or implied
warranty. In no event will the authors be held liable for any damages
arising from the use of this software.
Permission is granted to anyone to use this software for any purpose,
including commercial applications, and to alter it and redistribute it
freely, subject to the following restrictions:
1. The origin of this software must not be misrepresented; you must not
claim that you wrote the original software. If you use this software
in a product, an acknowledgment in the product documentation would
be appreciated but is not required.
2. Altered source versions must be plainly marked as such, and must not
be misrepresented as being the original software.
3. This notice may not be removed or altered from any source
distribution.

70
README Normal file
View file

@ -0,0 +1,70 @@
Preparing the HTML embed
------------------------
If your handle on mastodon is @superman@fortitude.fortress the remote
follow portal page is this:
https://fortitude.fortress/users/superman/remote_follow
In the following HTML snippet to embed on your site replace {uri} with
your remote_follow link corresponding to what was just explained.
<div style="display: inline-block; position: relative;">
<a href="{uri}">
<img id="mastodonfollow" onclick="mastodon_follow_show()" style="height: 32px;" src="{icon}"/>
</a>
</div>
Next decide on the icon you want to use:
mastodon-follow-dark-da.svg
mastodon-follow-dark-en.svg
mastodon-follow-dark.svg
mastodon-follow-light-da.svg
mastodon-follow-light-en.svg
mastodon-follow-light.svg
This is the icon you upload to somewhere on your site. Replace {icon}
with the path to your icon in the above HTML snippet.
You can adjust the image size in the style attribute as appropriate for
your site.
Insert the HTML snippet in the place where you want the button on your
page.
I have prepared variants of the script to match the icons. Pick the
appropriate one and upload it to your site. Replace {script} in the
snippet below and insert it in the <head></head> of your website.
<script src="{script}" type="text/javascript"></script>
IMPORTANT: Remember to change the account and portal settings to point
to your mastodon account.
You can change the link that "Create account" points to in the
create_url setting and easily translate the strings to other languages.
Implementation notes
--------------------
The script reserves the following globals:
HTML/CSS:
#mastodonfollow
input[name="mastodon-handle"]
.mastodon-follow-container
.mastodon-follow-title
.mastodon-follow-input
.mastodon-follow-button
JS:
var mastodon_follow_settings
var mastodon_follow_strings
var mastodon_follow_container
function mastodon_follow_create_style
function mastodon_follow_go
function mastodon_follow_lookup
function mastodon_follow_show
Bugs
----
Report bugs to smpl@slamkode.ml
License: Zlib

210
mastodon-follow-dark-da.js Normal file
View file

@ -0,0 +1,210 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#282c37",
"color": "#9baec8",
"title": "#fff",
"input": {
"bordercolor": "#0a0b0e",
"background": "#131419",
"color": "#fff",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};
var mastodon_follow_strings =
{
"title": "Tast dit Mastodon id",
"button": "Følg",
"create": "Opret konto",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Forkert id" }
};
var mastodon_follow_container = null;
/* Remove nojs fallback link, when JS enabled. */
window.addEventListener("load", function(e) {
mastodonfollow.style.cursor = "pointer";
var a = mastodonfollow.parentNode;
var c = a.parentNode;
c.appendChild(mastodonfollow);
a.remove();
});
function mastodon_follow_create_style()
{
var style = document.createElement('style');
var d = mastodon_follow_settings.dialog;
style.innerHTML =
".mastodon-follow-container {" +
"display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"background: " + d.background + ";" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + d.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"color: " + d.color + ";" +
"line-height: 18px;" +
"}" +
".mastodon-follow-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"color: " + d.title + ";" +
"}" +
".mastodon-follow-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.input.background + ";" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.input.color + ";" +
"}" +
".mastodon-follow-input::placeholder {" +
"color: " + d.input.placeholder + ";" +
"}" +
".mastodon-follow-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.button.background + ";" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.button.color + ";" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(style);
}
/* Called when request to instance is complete.
* Parse the JSON response and find the subscribe uri.
* On error goes to the instances remote_follow url. */
function mastodon_follow_go(event)
{
var data;
if (this.readyState === this.DONE) {
if (this.status === 200) {
try {
data = JSON.parse(this.responseText);
} catch {
window.location = mastodon_follow_settings.portal;
return;
}
data.links.forEach( function(e) {
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
return;
}
});
}
}
window.location = mastodon_follow_settings.portal;
return;
}
/* Called when user click on follow button in dialog.
* Grab the mastodon handle from the input field and request the
* appropriate webfinger document from the users instance.
* Response is handled by mastodon_follow_go(). */
function mastodon_follow_lookup(event)
{
var handle_element = document.querySelector('input[name="mastodon-handle"]');
var handle = handle_element.value;
// remove any initial @
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
// split into nick and host
var uriparts = handle.split('@');
if(uriparts.length < 2) {
handle_element.value = '';
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
return;
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", mastodon_follow_go);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
}
/* Activated when icon is clicked.
* Create the follow dialog on first run, toggle visibility on further
* clicks. */
function mastodon_follow_show()
{
if(!mastodon_follow_container) {
mastodon_follow_create_style();
mastodon_follow_container = document.createElement('div');
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
var mastodon_title = document.createElement('p');
mastodon_title.setAttribute('class', 'mastodon-follow-title');
mastodon_title.innerHTML = mastodon_follow_strings.title;
var mastodon_follow_handle = document.createElement('input');
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
mastodon_follow_handle.setAttribute('type', 'text');
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
var mastodon_follow_follow = document.createElement('button');
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
var createaccount = document.createElement('div');
createaccount.style = "text-align: right;";
var createaccount_a = document.createElement('a');
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
createaccount_a.innerHTML = mastodon_follow_strings.create;
createaccount.appendChild(createaccount_a);
mastodon_follow_container.appendChild(mastodon_title);
mastodon_follow_container.appendChild(mastodon_follow_handle);
mastodon_follow_container.appendChild(mastodon_follow_follow);
mastodon_follow_container.appendChild(createaccount);
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
} else {
mastodon_follow_container.style.display =
mastodon_follow_container.style.display == "none" ? "block" : "none";
}
}

View file

@ -0,0 +1,33 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="45.014904mm"
width="85.691597mm"
viewBox="0 0 85.691597 45.014904">
<rect
ry="5.9620543"
y="1.0440584"
x="1.0440561"
height="42.926792"
width="83.603485"
style="fill:#282c37;stroke:#1b1d25;stroke-width:2.08811116;" />
<path
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<g style="fill:#3088d4;">
<path
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
<path
d="M 40.703998,36.83326 V 25.75843 h 7.408579 v 2.06132 h -4.738753 v 2.54812 h 4.305193 v 2.05371 h -4.305193 v 4.41168 z" />
<path
d="m 53.847757,36.98539 q -1.22462,0 -2.22105,-0.49441 l -0.60851,1.06488 h -1.58212 l 1.0725,-1.86355 q -1.51367,-1.51366 -1.51367,-4.23673 v -0.38032 q 0,-2.54052 1.34633,-4.00094 1.35393,-1.46802 3.49131,-1.46802 1.2018,0 2.19063,0.48681 l 0.46398,-0.80628 h 1.57452 l -0.92037,1.59734 q 1.54408,1.51366 1.54408,4.26715 v 0.37271 q 0,2.54052 -1.36153,4.00094 -1.35393,1.46042 -3.4761,1.46042 z m -2.13738,-5.46136 q 0,1.00404 0.20537,1.71904 l 2.9969,-5.21795 q -0.45638,-0.32708 -1.0801,-0.32708 -1.99286,0 -2.11456,2.96648 z m 4.25955,-0.46398 q 0,-1.01925 -0.22058,-1.74946 l -3.01211,5.25598 q 0.45638,0.33468 1.11052,0.33468 1.01165,0 1.5593,-0.85952 0.55527,-0.86712 0.56287,-2.47206 z" />
<path
d="m 67.280557,34.77955 v 2.05371 h -7.3173 V 25.75843 h 2.66983 v 9.02112 z" />
<path
d="m 76.993857,30.91553 v 4.54859 q -0.42595,0.47159 -1.52127,0.99643 -1.09531,0.52484 -2.8828,0.52484 -2.20584,0 -3.54456,-1.39196 -1.33111,-1.39957 -1.33111,-3.98572 v -0.61612 q 0,-2.58616 1.33111,-3.98572 1.33111,-1.40718 3.40004,-1.40718 2.28951,0 3.33158,1.05729 1.04207,1.05728 1.20941,2.71546 h -2.56334 q -0.1217,-0.82148 -0.54005,-1.27026 -0.41835,-0.44877 -1.34632,-0.44877 -0.9584,0 -1.52888,0.81387 -0.57047,0.81388 -0.57808,2.46446 v 0.67697 q 0,1.66578 0.58569,2.49488 0.59329,0.82909 1.76467,0.82909 1.03446,0 1.54409,-0.46399 v -1.71903 h -1.85595 v -1.83313 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

210
mastodon-follow-dark-en.js Normal file
View file

@ -0,0 +1,210 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#282c37",
"color": "#9baec8",
"title": "#fff",
"input": {
"bordercolor": "#0a0b0e",
"background": "#131419",
"color": "#fff",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};
var mastodon_follow_strings =
{
"title": "Enter your Mastodon handle",
"button": "Follow",
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Invalid handle" }
};
var mastodon_follow_container = null;
/* Remove nojs fallback link, when JS enabled. */
window.addEventListener("load", function(e) {
mastodonfollow.style.cursor = "pointer";
var a = mastodonfollow.parentNode;
var c = a.parentNode;
c.appendChild(mastodonfollow);
a.remove();
});
function mastodon_follow_create_style()
{
var style = document.createElement('style');
var d = mastodon_follow_settings.dialog;
style.innerHTML =
".mastodon-follow-container {" +
"display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"background: " + d.background + ";" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + d.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"color: " + d.color + ";" +
"line-height: 18px;" +
"}" +
".mastodon-follow-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"color: " + d.title + ";" +
"}" +
".mastodon-follow-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.input.background + ";" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.input.color + ";" +
"}" +
".mastodon-follow-input::placeholder {" +
"color: " + d.input.placeholder + ";" +
"}" +
".mastodon-follow-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.button.background + ";" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.button.color + ";" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(style);
}
/* Called when request to instance is complete.
* Parse the JSON response and find the subscribe uri.
* On error goes to the instances remote_follow url. */
function mastodon_follow_go(event)
{
var data;
if (this.readyState === this.DONE) {
if (this.status === 200) {
try {
data = JSON.parse(this.responseText);
} catch {
window.location = mastodon_follow_settings.portal;
return;
}
data.links.forEach( function(e) {
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
return;
}
});
}
}
window.location = mastodon_follow_settings.portal;
return;
}
/* Called when user click on follow button in dialog.
* Grab the mastodon handle from the input field and request the
* appropriate webfinger document from the users instance.
* Response is handled by mastodon_follow_go(). */
function mastodon_follow_lookup(event)
{
var handle_element = document.querySelector('input[name="mastodon-handle"]');
var handle = handle_element.value;
// remove any initial @
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
// split into nick and host
var uriparts = handle.split('@');
if(uriparts.length < 2) {
handle_element.value = '';
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
return;
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", mastodon_follow_go);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
}
/* Activated when icon is clicked.
* Create the follow dialog on first run, toggle visibility on further
* clicks. */
function mastodon_follow_show()
{
if(!mastodon_follow_container) {
mastodon_follow_create_style();
mastodon_follow_container = document.createElement('div');
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
var mastodon_title = document.createElement('p');
mastodon_title.setAttribute('class', 'mastodon-follow-title');
mastodon_title.innerHTML = mastodon_follow_strings.title;
var mastodon_follow_handle = document.createElement('input');
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
mastodon_follow_handle.setAttribute('type', 'text');
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
var mastodon_follow_follow = document.createElement('button');
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
var createaccount = document.createElement('div');
createaccount.style = "text-align: right;";
var createaccount_a = document.createElement('a');
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
createaccount_a.innerHTML = mastodon_follow_strings.create;
createaccount.appendChild(createaccount_a);
mastodon_follow_container.appendChild(mastodon_title);
mastodon_follow_container.appendChild(mastodon_follow_handle);
mastodon_follow_container.appendChild(mastodon_follow_follow);
mastodon_follow_container.appendChild(createaccount);
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
} else {
mastodon_follow_container.style.display =
mastodon_follow_container.style.display == "none" ? "block" : "none";
}
}

View file

@ -0,0 +1,37 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 85.691597 45.014904"
height="45.014904mm"
width="85.691597mm">
<rect
ry="5.9620543"
y="1.0440584"
x="1.0440561"
height="42.926792"
width="83.603485"
style="fill:#282c37;stroke:#1b1d25;stroke-width:2.08811116;" />
<path
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<g style="fill:#3088d4;">
<path
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
<path
d="m 38.77358,37.45718 v -7.18419 h 4.805906 v 1.33717 h -3.074004 v 1.65295 h 2.792754 v 1.33224 h -2.792754 v 2.86183 z" />
<path
d="m 50.378807,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87828,0.94736 -2.25492,0.94736 -1.386512,0 -2.269734,-0.94736 -0.878287,-0.94737 -0.878287,-2.59539 v -0.29112 q 0,-1.64802 0.873353,-2.59538 0.878287,-0.9523 2.264798,-0.9523 1.37664,0 2.25986,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75657,-0.30098 q 0,-1.08553 -0.3454,-1.63322 -0.34539,-0.5477 -1.04111,-0.5477 -1.292761,0 -1.371708,1.92434 l -0.0049,0.55756 q 0,1.05592 0.345398,1.62335 0.35032,0.56743 1.04111,0.56743 0.65625,0 1.01151,-0.55756 0.3602,-0.5625 0.36513,-1.60361 z" />
<path
d="m 56.013657,36.12495 v 1.33223 h -4.74669 v -7.18419 h 1.7319 v 5.85196 z" />
<path
d="m 61.500487,36.12495 v 1.33223 h -4.7467 v -7.18419 h 1.7319 v 5.85196 z" />
<path
d="m 68.003757,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87829,0.94736 -2.25493,0.94736 -1.38651,0 -2.26973,-0.94736 -0.87828,-0.94737 -0.87828,-2.59539 v -0.29112 q 0,-1.64802 0.87335,-2.59538 0.87828,-0.9523 2.26479,-0.9523 1.37664,0 2.25987,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75658,-0.30098 q 0,-1.08553 -0.34539,-1.63322 -0.34539,-0.5477 -1.04112,-0.5477 -1.29276,0 -1.3717,1.92434 l -0.005,0.55756 q 0,1.05592 0.34539,1.62335 0.35033,0.56743 1.04112,0.56743 0.65625,0 1.01151,-0.55756 0.36019,-0.5625 0.36513,-1.60361 z" />
<path
d="m 76.993857,30.27299 -1.52466,7.18419 h -1.79112 l -0.96217,-4.09538 -0.94243,4.09538 h -1.79604 l -1.52467,-7.18419 h 1.7171 l 0.82401,4.49505 0.98684,-4.49505 h 1.47039 l 1.00658,4.50986 0.82401,-4.50986 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4 KiB

24
mastodon-follow-dark.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="57.883163mm"
height="45.014904mm"
viewBox="0 0 57.883163 45.014904">
<rect
width="56.164337"
height="43.296078"
x="0.85941321"
y="0.85940945"
ry="6.0133438"
style="fill:#282c37;stroke:#1b1e25;stroke-width:1.71882558;" />
<path
d="m 36.173854,25.50177 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.8468 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 H 13.744559 V 17.8468 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<path
d="m 43.314163,32.1437 c 1.49508,0 2.70606,-1.21095 2.70606,-2.70606 0,-1.4951 -1.21098,-2.70606 -2.70606,-2.70606 -1.495103,0 -2.706063,1.21096 -2.706063,2.70606 0,1.49511 1.21096,2.70606 2.706063,2.70606 z m -6.088655,-1.35302 v -2.02955 h -1.353051 v 2.02955 h -2.02955 v 1.35302 h 2.02955 v 2.02955 h 1.353051 V 32.1437 h 2.029552 v -1.35302 z m 6.088655,2.70607 c -1.806313,0 -5.412155,0.90652 -5.412155,2.70606 v 1.35304 h 10.824279 v -1.35304 c 0,-1.79954 -3.605834,-2.70606 -5.412124,-2.70606 z"
style="fill:#3088d4;" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

210
mastodon-follow-light-da.js Normal file
View file

@ -0,0 +1,210 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#d9e1e8",
"color": "#282c37",
"title": "#282c37",
"input": {
"bordercolor": "#b3c3d1",
"background": "#f9fafb",
"color": "#000",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};
var mastodon_follow_strings =
{
"title": "Tast dit Mastodon id",
"button": "Følg",
"create": "Opret konto",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Forkert id" }
};
var mastodon_follow_container = null;
/* Remove nojs fallback link, when JS enabled. */
window.addEventListener("load", function(e) {
mastodonfollow.style.cursor = "pointer";
var a = mastodonfollow.parentNode;
var c = a.parentNode;
c.appendChild(mastodonfollow);
a.remove();
});
function mastodon_follow_create_style()
{
var style = document.createElement('style');
var d = mastodon_follow_settings.dialog;
style.innerHTML =
".mastodon-follow-container {" +
"display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"background: " + d.background + ";" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + d.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"color: " + d.color + ";" +
"line-height: 18px;" +
"}" +
".mastodon-follow-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"color: " + d.title + ";" +
"}" +
".mastodon-follow-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.input.background + ";" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.input.color + ";" +
"}" +
".mastodon-follow-input::placeholder {" +
"color: " + d.input.placeholder + ";" +
"}" +
".mastodon-follow-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.button.background + ";" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.button.color + ";" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(style);
}
/* Called when request to instance is complete.
* Parse the JSON response and find the subscribe uri.
* On error goes to the instances remote_follow url. */
function mastodon_follow_go(event)
{
var data;
if (this.readyState === this.DONE) {
if (this.status === 200) {
try {
data = JSON.parse(this.responseText);
} catch {
window.location = mastodon_follow_settings.portal;
return;
}
data.links.forEach( function(e) {
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
return;
}
});
}
}
window.location = mastodon_follow_settings.portal;
return;
}
/* Called when user click on follow button in dialog.
* Grab the mastodon handle from the input field and request the
* appropriate webfinger document from the users instance.
* Response is handled by mastodon_follow_go(). */
function mastodon_follow_lookup(event)
{
var handle_element = document.querySelector('input[name="mastodon-handle"]');
var handle = handle_element.value;
// remove any initial @
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
// split into nick and host
var uriparts = handle.split('@');
if(uriparts.length < 2) {
handle_element.value = '';
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
return;
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", mastodon_follow_go);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
}
/* Activated when icon is clicked.
* Create the follow dialog on first run, toggle visibility on further
* clicks. */
function mastodon_follow_show()
{
if(!mastodon_follow_container) {
mastodon_follow_create_style();
mastodon_follow_container = document.createElement('div');
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
var mastodon_title = document.createElement('p');
mastodon_title.setAttribute('class', 'mastodon-follow-title');
mastodon_title.innerHTML = mastodon_follow_strings.title;
var mastodon_follow_handle = document.createElement('input');
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
mastodon_follow_handle.setAttribute('type', 'text');
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
var mastodon_follow_follow = document.createElement('button');
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
var createaccount = document.createElement('div');
createaccount.style = "text-align: right;";
var createaccount_a = document.createElement('a');
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
createaccount_a.innerHTML = mastodon_follow_strings.create;
createaccount.appendChild(createaccount_a);
mastodon_follow_container.appendChild(mastodon_title);
mastodon_follow_container.appendChild(mastodon_follow_handle);
mastodon_follow_container.appendChild(mastodon_follow_follow);
mastodon_follow_container.appendChild(createaccount);
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
} else {
mastodon_follow_container.style.display =
mastodon_follow_container.style.display == "none" ? "block" : "none";
}
}

View file

@ -0,0 +1,33 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height="45.014904mm"
width="85.691597mm"
viewBox="0 0 85.691597 45.014904">
<rect
ry="5.9620543"
y="1.0440584"
x="1.0440561"
height="42.926792"
width="83.603485"
style="fill:#d9e1e8;stroke:#d1d1d1;stroke-width:2.08811116;" />
<path
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<g style="fill:#3088d4;">
<path
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
<path
d="M 40.703998,36.83326 V 25.75843 h 7.408579 v 2.06132 h -4.738753 v 2.54812 h 4.305193 v 2.05371 h -4.305193 v 4.41168 z" />
<path
d="m 53.847757,36.98539 q -1.22462,0 -2.22105,-0.49441 l -0.60851,1.06488 h -1.58212 l 1.0725,-1.86355 q -1.51367,-1.51366 -1.51367,-4.23673 v -0.38032 q 0,-2.54052 1.34633,-4.00094 1.35393,-1.46802 3.49131,-1.46802 1.2018,0 2.19063,0.48681 l 0.46398,-0.80628 h 1.57452 l -0.92037,1.59734 q 1.54408,1.51366 1.54408,4.26715 v 0.37271 q 0,2.54052 -1.36153,4.00094 -1.35393,1.46042 -3.4761,1.46042 z m -2.13738,-5.46136 q 0,1.00404 0.20537,1.71904 l 2.9969,-5.21795 q -0.45638,-0.32708 -1.0801,-0.32708 -1.99286,0 -2.11456,2.96648 z m 4.25955,-0.46398 q 0,-1.01925 -0.22058,-1.74946 l -3.01211,5.25598 q 0.45638,0.33468 1.11052,0.33468 1.01165,0 1.5593,-0.85952 0.55527,-0.86712 0.56287,-2.47206 z" />
<path
d="m 67.280557,34.77955 v 2.05371 h -7.3173 V 25.75843 h 2.66983 v 9.02112 z" />
<path
d="m 76.993857,30.91553 v 4.54859 q -0.42595,0.47159 -1.52127,0.99643 -1.09531,0.52484 -2.8828,0.52484 -2.20584,0 -3.54456,-1.39196 -1.33111,-1.39957 -1.33111,-3.98572 v -0.61612 q 0,-2.58616 1.33111,-3.98572 1.33111,-1.40718 3.40004,-1.40718 2.28951,0 3.33158,1.05729 1.04207,1.05728 1.20941,2.71546 h -2.56334 q -0.1217,-0.82148 -0.54005,-1.27026 -0.41835,-0.44877 -1.34632,-0.44877 -0.9584,0 -1.52888,0.81387 -0.57047,0.81388 -0.57808,2.46446 v 0.67697 q 0,1.66578 0.58569,2.49488 0.59329,0.82909 1.76467,0.82909 1.03446,0 1.54409,-0.46399 v -1.71903 h -1.85595 v -1.83313 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

210
mastodon-follow-light-en.js Normal file
View file

@ -0,0 +1,210 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#d9e1e8",
"color": "#282c37",
"title": "#282c37",
"input": {
"bordercolor": "#b3c3d1",
"background": "#f9fafb",
"color": "#000",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};
var mastodon_follow_strings =
{
"title": "Enter your Mastodon handle",
"button": "Follow",
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Invalid handle" }
};
var mastodon_follow_container = null;
/* Remove nojs fallback link, when JS enabled. */
window.addEventListener("load", function(e) {
mastodonfollow.style.cursor = "pointer";
var a = mastodonfollow.parentNode;
var c = a.parentNode;
c.appendChild(mastodonfollow);
a.remove();
});
function mastodon_follow_create_style()
{
var style = document.createElement('style');
var d = mastodon_follow_settings.dialog;
style.innerHTML =
".mastodon-follow-container {" +
"display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"background: " + d.background + ";" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + d.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"color: " + d.color + ";" +
"line-height: 18px;" +
"}" +
".mastodon-follow-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"color: " + d.title + ";" +
"}" +
".mastodon-follow-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.input.background + ";" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.input.color + ";" +
"}" +
".mastodon-follow-input::placeholder {" +
"color: " + d.input.placeholder + ";" +
"}" +
".mastodon-follow-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.button.background + ";" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.button.color + ";" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(style);
}
/* Called when request to instance is complete.
* Parse the JSON response and find the subscribe uri.
* On error goes to the instances remote_follow url. */
function mastodon_follow_go(event)
{
var data;
if (this.readyState === this.DONE) {
if (this.status === 200) {
try {
data = JSON.parse(this.responseText);
} catch {
window.location = mastodon_follow_settings.portal;
return;
}
data.links.forEach( function(e) {
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
return;
}
});
}
}
window.location = mastodon_follow_settings.portal;
return;
}
/* Called when user click on follow button in dialog.
* Grab the mastodon handle from the input field and request the
* appropriate webfinger document from the users instance.
* Response is handled by mastodon_follow_go(). */
function mastodon_follow_lookup(event)
{
var handle_element = document.querySelector('input[name="mastodon-handle"]');
var handle = handle_element.value;
// remove any initial @
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
// split into nick and host
var uriparts = handle.split('@');
if(uriparts.length < 2) {
handle_element.value = '';
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
return;
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", mastodon_follow_go);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
}
/* Activated when icon is clicked.
* Create the follow dialog on first run, toggle visibility on further
* clicks. */
function mastodon_follow_show()
{
if(!mastodon_follow_container) {
mastodon_follow_create_style();
mastodon_follow_container = document.createElement('div');
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
var mastodon_title = document.createElement('p');
mastodon_title.setAttribute('class', 'mastodon-follow-title');
mastodon_title.innerHTML = mastodon_follow_strings.title;
var mastodon_follow_handle = document.createElement('input');
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
mastodon_follow_handle.setAttribute('type', 'text');
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
var mastodon_follow_follow = document.createElement('button');
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
var createaccount = document.createElement('div');
createaccount.style = "text-align: right;";
var createaccount_a = document.createElement('a');
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
createaccount_a.innerHTML = mastodon_follow_strings.create;
createaccount.appendChild(createaccount_a);
mastodon_follow_container.appendChild(mastodon_title);
mastodon_follow_container.appendChild(mastodon_follow_handle);
mastodon_follow_container.appendChild(mastodon_follow_follow);
mastodon_follow_container.appendChild(createaccount);
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
} else {
mastodon_follow_container.style.display =
mastodon_follow_container.style.display == "none" ? "block" : "none";
}
}

View file

@ -0,0 +1,37 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 85.691597 45.014904"
height="45.014904mm"
width="85.691597mm">
<rect
ry="5.9620543"
y="1.0440584"
x="1.0440561"
height="42.926792"
width="83.603485"
style="fill:#d9e1e8;stroke:#c6d2dc;stroke-width:2.08811116;" />
<path
d="m 36.173854,25.50178 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.84681 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 h -3.131981 v -7.90543 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<g style="fill:#3088d4;">
<path
d="m 69.506087,14.94682 c 2.06847,0 3.74388,-1.67538 3.74388,-3.74388 0,-2.06851 -1.67541,-3.74389 -3.74388,-3.74389 -2.0685,0 -3.74388,1.67538 -3.74388,3.74389 0,2.0685 1.67538,3.74388 3.74388,3.74388 z m -8.42376,-1.87193 v -2.80792 h -1.87197 v 2.80792 h -2.80792 v 1.87193 h 2.80792 v 2.80792 h 1.87197 v -2.80792 h 2.80792 v -1.87193 z m 8.42376,3.74389 c -2.49906,0 -7.48781,1.2542 -7.48781,3.74389 v 1.87196 h 14.97558 v -1.87196 c 0,-2.48969 -4.98874,-3.74389 -7.48777,-3.74389 z" />
<path
d="m 38.77358,37.45718 v -7.18419 h 4.805906 v 1.33717 h -3.074004 v 1.65295 h 2.792754 v 1.33224 h -2.792754 v 2.86183 z" />
<path
d="m 50.378807,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87828,0.94736 -2.25492,0.94736 -1.386512,0 -2.269734,-0.94736 -0.878287,-0.94737 -0.878287,-2.59539 v -0.29112 q 0,-1.64802 0.873353,-2.59538 0.878287,-0.9523 2.264798,-0.9523 1.37664,0 2.25986,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75657,-0.30098 q 0,-1.08553 -0.3454,-1.63322 -0.34539,-0.5477 -1.04111,-0.5477 -1.292761,0 -1.371708,1.92434 l -0.0049,0.55756 q 0,1.05592 0.345398,1.62335 0.35032,0.56743 1.04111,0.56743 0.65625,0 1.01151,-0.55756 0.3602,-0.5625 0.36513,-1.60361 z" />
<path
d="m 56.013657,36.12495 v 1.33223 h -4.74669 v -7.18419 h 1.7319 v 5.85196 z" />
<path
d="m 61.500487,36.12495 v 1.33223 h -4.7467 v -7.18419 h 1.7319 v 5.85196 z" />
<path
d="m 68.003757,34.01311 q 0,1.64802 -0.87829,2.59539 -0.87829,0.94736 -2.25493,0.94736 -1.38651,0 -2.26973,-0.94736 -0.87828,-0.94737 -0.87828,-2.59539 v -0.29112 q 0,-1.64802 0.87335,-2.59538 0.87828,-0.9523 2.26479,-0.9523 1.37664,0 2.25987,0.9523 0.88322,0.94736 0.88322,2.59538 z m -1.75658,-0.30098 q 0,-1.08553 -0.34539,-1.63322 -0.34539,-0.5477 -1.04112,-0.5477 -1.29276,0 -1.3717,1.92434 l -0.005,0.55756 q 0,1.05592 0.34539,1.62335 0.35033,0.56743 1.04112,0.56743 0.65625,0 1.01151,-0.55756 0.36019,-0.5625 0.36513,-1.60361 z" />
<path
d="m 76.993857,30.27299 -1.52466,7.18419 h -1.79112 l -0.96217,-4.09538 -0.94243,4.09538 h -1.79604 l -1.52467,-7.18419 h 1.7171 l 0.82401,4.49505 0.98684,-4.49505 h 1.47039 l 1.00658,4.50986 0.82401,-4.50986 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4 KiB

24
mastodon-follow-light.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="57.883163mm"
height="45.014904mm"
viewBox="0 0 57.883163 45.014904">
<rect
width="56.164337"
height="43.296078"
x="0.85941321"
y="0.85940945"
ry="6.0133438"
style="fill:#d9e1e8;stroke:#c6d2dc;stroke-width:1.71882558;" />
<path
d="m 36.173854,25.50177 c -0.412679,2.12307 -3.696111,4.44656 -7.467135,4.89685 -1.966427,0.23464 -3.902531,0.4503 -5.96706,0.3556 -3.376344,-0.15469 -6.040514,-0.80589 -6.040514,-0.80589 0,0.32868 0.02027,0.64164 0.06081,0.93432 0.438947,3.33208 3.304025,3.53169 6.017975,3.62476 2.739247,0.0937 5.178349,-0.67536 5.178349,-0.67536 l 0.112534,2.47639 c 0,0 -1.915997,1.02886 -5.329151,1.2181 -1.882107,0.10345 -4.219053,-0.0474 -6.940949,-0.7678 -5.903334,-1.5625 -6.918572,-7.85516 -7.073914,-14.24009 -0.04735,-1.89573 -0.01816,-3.6833 -0.01816,-5.17835 0,-6.52892 4.277753,-8.44265 4.277753,-8.44265 2.156956,-0.99058 5.858093,-1.40716 9.705815,-1.43862 h 0.09453 c 3.847723,0.0315 7.551293,0.44804 9.708087,1.43862 0,0 4.27759,1.91373 4.27759,8.44265 0,0 0.05367,4.81707 -0.59656,8.16147"
style="fill:#3088d4;" />
<path
d="m 31.724706,17.8468 v 7.90543 h -3.131981 v -7.67307 c 0,-1.61747 -0.680555,-2.43845 -2.041827,-2.43845 -1.505102,0 -2.259437,0.97389 -2.259437,2.89962 v 4.19991 h -3.113495 v -4.19991 c 0,-1.92573 -0.754497,-2.89962 -2.259599,-2.89962 -1.361272,0 -2.041827,0.82098 -2.041827,2.43845 v 7.67307 H 13.744559 V 17.8468 c 0,-1.61569 0.411381,-2.89962 1.237712,-3.84951 0.852113,-0.94989 1.968048,-1.43683 3.353319,-1.43683 1.602719,0 2.816432,0.61602 3.618925,1.84822 l 0.780117,1.30776 0.780279,-1.30776 c 0.802332,-1.2322 2.016046,-1.84822 3.618926,-1.84822 1.385109,0 2.501044,0.48694 3.353319,1.43683 0.826168,0.94989 1.23755,2.23382 1.23755,3.84951"
style="fill:#ffffff;" />
<path
d="m 43.314163,32.1437 c 1.49508,0 2.70606,-1.21095 2.70606,-2.70606 0,-1.4951 -1.21098,-2.70606 -2.70606,-2.70606 -1.495103,0 -2.706063,1.21096 -2.706063,2.70606 0,1.49511 1.21096,2.70606 2.706063,2.70606 z m -6.088655,-1.35302 v -2.02955 h -1.353051 v 2.02955 h -2.02955 v 1.35302 h 2.02955 v 2.02955 h 1.353051 V 32.1437 h 2.029552 v -1.35302 z m 6.088655,2.70607 c -1.806313,0 -5.412155,0.90652 -5.412155,2.70606 v 1.35304 h 10.824279 v -1.35304 c 0,-1.79954 -3.605834,-2.70606 -5.412124,-2.70606 z"
style="fill:#3088d4;" />
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

242
mastodon-follow.js Normal file
View file

@ -0,0 +1,242 @@
/* SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
///* Light theme matching mastodon-follow-light.svg
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#d9e1e8",
"color": "#282c37",
"title": "#282c37",
"input": {
"bordercolor": "#b3c3d1",
"background": "#f9fafb",
"color": "#000",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};//*/
///*
var mastodon_follow_strings =
{
"title": "Enter your Mastodon handle",
"button": "Follow",
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Invalid handle" }
};//*/
/* Dark theme matching mastodon-follow-dark.svg
var mastodon_follow_settings = {
"account": "superman@fortitude.fortress",
"portal": "https://fortitude.fortress/users/superman/remote_follow",
"dialog": {
"width": "256px",
"background": "#282c37",
"color": "#9baec8",
"title": "#fff",
"input": {
"bordercolor": "#0a0b0e",
"background": "#131419",
"color": "#fff",
"placeholder": "#c83737"
},
"button": {
"background": "#2b90d9",
"color": "#fff"
}
}
};//*/
/*
var mastodon_follow_strings =
{
"title": "Tast dit Mastodon id",
"button": "Følg",
"create": "Opret konto",
"create_url": "https://joinmastodon.org/communities",
"error": { "handle": "Forkert id" }
};//*/
var mastodon_follow_container = null;
/* Remove nojs fallback link, when JS enabled. */
window.addEventListener("load", function(e) {
mastodonfollow.style.cursor = "pointer";
var a = mastodonfollow.parentNode;
var c = a.parentNode;
c.appendChild(mastodonfollow);
a.remove();
});
function mastodon_follow_create_style()
{
var style = document.createElement('style');
var d = mastodon_follow_settings.dialog;
style.innerHTML =
".mastodon-follow-container {" +
"display: block;" +
"z-index: 1;" +
"border: 0;" +
"border-radius: 5px;" +
"background: " + d.background + ";" +
"position: absolute;" +
"top:110%;" +
"left: 0;" +
"width: " + d.width + ";" +
'font-family: "Roboto",Roboto,sans-serif;' +
"margin: 0 auto;" +
"padding: 20px;" +
"font-weight: 400;" +
"font-size: 13px;" +
"color: " + d.color + ";" +
"line-height: 18px;" +
"}" +
".mastodon-follow-title {" +
"text-align: center;" +
"font-size: 18px;" +
"font-weight: 500;" +
"margin: 0;" +
"color: " + d.title + ";" +
"}" +
".mastodon-follow-input {" +
"border: 0;" +
"border-radius: 4px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.input.background + ";" +
"width: 100%;" +
"box-sizing: border-box;" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.input.color + ";" +
"}" +
".mastodon-follow-input::placeholder {" +
"color: " + d.input.placeholder + ";" +
"}" +
".mastodon-follow-button {" +
"display: block;" +
"width: 100%;" +
"border: 0;" +
"border-radius: 4px;" +
"margin-right: 10px;" +
"margin-top: 20px;" +
"padding: 10px;" +
"background: " + d.button.background + ";" +
"font-family: inherit;" +
"font-weight: 500;" +
"font-size: 18px;" +
"color: " + d.button.color + ";" +
"line-height: inherit;" +
"text-align: center;" +
"text-transform: uppercase;" +
"box-sizing: border-box;" +
"cursor: pointer;" +
"}";
document.head.appendChild(style);
}
/* Called when request to instance is complete.
* Parse the JSON response and find the subscribe uri.
* On error goes to the instances remote_follow url. */
function mastodon_follow_go(event)
{
var data;
if (this.readyState === this.DONE) {
if (this.status === 200) {
try {
data = JSON.parse(this.responseText);
} catch {
window.location = mastodon_follow_settings.portal;
return;
}
data.links.forEach( function(e) {
if(e.rel === "http://ostatus.org/schema/1.0/subscribe") {
window.location = e.template.replace('{uri}', encodeURIComponent(mastodon_follow_settings.account));
return;
}
});
}
}
window.location = mastodon_follow_settings.portal;
return;
}
/* Called when user click on follow button in dialog.
* Grab the mastodon handle from the input field and request the
* appropriate webfinger document from the users instance.
* Response is handled by mastodon_follow_go(). */
function mastodon_follow_lookup(event)
{
var handle_element = document.querySelector('input[name="mastodon-handle"]');
var handle = handle_element.value;
// remove any initial @
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
// split into nick and host
var uriparts = handle.split('@');
if(uriparts.length < 2) {
handle_element.value = '';
handle_element.setAttribute('placeholder', mastodon_follow_strings.error.handle);
return;
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", mastodon_follow_go);
oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
oReq.send();
}
/* Activated when icon is clicked.
* Create the follow dialog on first run, toggle visibility on further
* clicks. */
function mastodon_follow_show()
{
if(!mastodon_follow_container) {
mastodon_follow_create_style();
mastodon_follow_container = document.createElement('div');
mastodon_follow_container.setAttribute('class', 'mastodon-follow-container');
var mastodon_title = document.createElement('p');
mastodon_title.setAttribute('class', 'mastodon-follow-title');
mastodon_title.innerHTML = mastodon_follow_strings.title;
var mastodon_follow_handle = document.createElement('input');
mastodon_follow_handle.setAttribute('name', 'mastodon-handle');
mastodon_follow_handle.setAttribute('type', 'text');
mastodon_follow_handle.setAttribute('class', 'mastodon-follow-input');
var mastodon_follow_follow = document.createElement('button');
mastodon_follow_follow.innerHTML = mastodon_follow_strings.button;
mastodon_follow_follow.setAttribute('class', 'mastodon-follow-button');
mastodon_follow_follow.addEventListener('click', mastodon_follow_lookup);
var createaccount = document.createElement('div');
createaccount.style = "text-align: right;";
var createaccount_a = document.createElement('a');
createaccount_a.setAttribute('href', mastodon_follow_strings.create_url);
createaccount_a.innerHTML = mastodon_follow_strings.create;
createaccount.appendChild(createaccount_a);
mastodon_follow_container.appendChild(mastodon_title);
mastodon_follow_container.appendChild(mastodon_follow_handle);
mastodon_follow_container.appendChild(mastodon_follow_follow);
mastodon_follow_container.appendChild(createaccount);
mastodonfollow.parentElement.appendChild(mastodon_follow_container);
} else {
mastodon_follow_container.style.display =
mastodon_follow_container.style.display == "none" ? "block" : "none";
}
}