smpl/mastodon-interact.js
1
0
Fork 0
Code Releases Activity
mastodon-interact.js/embed/index.html

658 lines
21 KiB
HTML
Raw Permalink Normal View History

ENERGIZE!
2022-05-03 01:34:37 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
SPDX-License-Identifier: Zlib
Copyright (C) 2022 smpl <smpl@slamkode.ml>
-->
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mastodon Interact Widget | Embed</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="">
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
<script type="text/javascript">
const icon_follow_template = color => `<?xml version="1.0" standalone="no"?>
ENERGIZE!
2022-05-03 01:34:37 +00:00
<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"
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
style="fill:${color[0]};stroke:${color[1]};stroke-width:1.71882558;" />
ENERGIZE!
2022-05-03 01:34:37 +00:00
<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;" />
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
</svg>`;
</script>
<script type="text/javascript">
const icon_share_template = color => `<?xml version="1.0" standalone="no"?>
ENERGIZE!
2022-05-03 01:34:37 +00:00
<svg
xmlns="http://www.w3.org/2000/svg"
width="57.883163mm"
height="45.014904mm"
viewBox="0 0 57.883163 45.014904"
version="1.1">
<rect
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
style="fill:${color[0]};stroke:${color[1]};stroke-width:1.71882558;"
ENERGIZE!
2022-05-03 01:34:37 +00:00
width="56.164337"
height="43.296078"
x="0.85941321"
y="0.85940945"
ry="6.0133438" />
<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 48.419887,25.72787 -9.710952,6.3391 11.059692,3.91135"
style="fill:none;stroke:#3088d4;stroke-width:2.11666656;" />
<g style="fill:#3088d4;">
<circle
cx="49.161694"
cy="25.12093"
r="3.5741699" />
<circle
r="3.5741699"
cy="32.134388"
cx="38.911243" />
<circle
cx="49.688114"
cy="36.044575"
r="3.5741699" />
</g>
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
</svg>`;
</script>
<script type="text/javascript">
const embed_follow_template = (settings, lang) => `<div class="ma-box">
<label for="ma-flw-toggle">
<img height="32px" src="mastodon-follow-${settings.theme}.svg" />
</label>
<input type="radio" name="ma-flw-control" id="ma-flw-toggle" class="ma-toggle" />
<input type="radio" name="ma-flw-control" class="ma-underlay" checked />
<div class="ma-flw ma-dialog ma-theme-${settings.theme}">
<form id="ma-flw-form">
<p class="ma-title ma-theme-light">${lang.follow.title}</p>
<input type="text" class="ma-input ma-theme-${settings.theme}">
<button class="ma-button">${lang.follow.button}</button>
<div class="ma-create ma-theme-${settings.theme}">
<a href="${lang.common.create_url}">${lang.common.create}</a>
</div>
</form>
</div>
</div>`;
</script>
<script type="text/javascript">
const embed_share_template = (settings, lang) => `<div class="ma-box">
<label for="ma-sha-toggle">
<img height="32px" src="mastodon-share-${settings.theme}.svg" />
</label>
<input type="radio" name="ma-sha-control" id="ma-sha-toggle" class="ma-toggle" />
<input type="radio" name="ma-sha-control" class="ma-underlay" checked />
<div class="ma-sha ma-dialog ma-theme-${settings.theme}">
<form id="ma-sha-form">
<p class="ma-title ma-theme-${settings.theme}">${lang.share.title}</p>
<input type="text" class="ma-input ma-theme-${settings.theme}">
<button class="ma-button" type="submit">${lang.share.button}</button>
<div class="ma-create ma-theme-${settings.theme}">
<a href="${lang.common.create_url}">${lang.common.create}</a>
</div>
</form>
</div>
</div>`;
</script>
<script type="text/javascript">
const script_template = (settings) => `/* SPDX-License-Identifier: Zlib
ENERGIZE!
2022-05-03 01:34:37 +00:00
Copyright (C) 2022 smpl <smpl@slamkode.ml> */
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
let MastodonInteract = {
sharetext: null,
account: null,
dialogs: {
follow: null,
share: null,
},
cbAction: function(e) {
var input = e.target.querySelector('input');
ENERGIZE!
2022-05-03 01:34:37 +00:00
var handle = input.value;
if(handle.charAt(0) == '@') {
handle = handle.substring(1);
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
var parts = handle.split('@');
if(parts.length < 2) {
ENERGIZE!
2022-05-03 01:34:37 +00:00
input.value = '';
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
input.setAttribute('placeholder', "Invalid handle");
ENERGIZE!
2022-05-03 01:34:37 +00:00
return;
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
if(e.target === this.dialogs.follow) {
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Ffollow%3Furi%3Dacct%3A" + encodeURIComponent(this.account);
} else if(e.target === this.dialogs.share) {
if(this.sharetext === null)
this.sharetext = window.location;
window.location = "https://" + parts[1] + "/intent?uri=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D" + encodeURIComponent(this.sharetext);
ENERGIZE!
2022-05-03 01:34:37 +00:00
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
},
init: function(account) {
var self = this;
window.addEventListener("DOMContentLoaded", function(e) {
self.dialogs.follow = document.getElementById('ma-flw-form');
if(self.dialogs.follow) {
self.dialogs.follow.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
ENERGIZE!
2022-05-03 01:34:37 +00:00
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
self.dialogs.share = document.getElementById('ma-sha-form');
if(self.dialogs.share) {
self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
}
});
ENERGIZE!
2022-05-03 01:34:37 +00:00
}
};
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
MastodonInteract.account = "${settings.account}";
MastodonInteract.init();`;
</script>
<script type="text/javascript">
const style_template = (settings) => `/* ----- DIALOG STYLE BEGIN ----- */
/* position the toggle radio control above the underlay */
.ma-toggle {
position: relative;
z-index: 200;
display: none;
}
/* position dialog above the underlay and don't display it */
.ma-dialog {
z-index: 200;
position: absolute;
display: none;
}
/* position the underlay radio control below the toggle radio
* control and the dialog, make it transparent and fill the
* view */
.ma-underlay {
z-index: 100;
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* when the underlay radio control is selected don't display
* it */
.ma-underlay:checked {
display: none;
}
/* when toggle radio control is selected move it below the
* underlay, so that another click on it will uncheck it */
.ma-toggle:checked {
z-index: 0;
}
.ma-box {
position: relative;
display: inline-block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-flw-toggle:checked ~ .ma-flw.ma-dialog {
display: block;
}
/* when the toggle radio control is selected display the
* dialog */
#ma-sha-toggle:checked ~ .ma-sha.ma-dialog {
display: block;
}
/* ----- DIALOG STYLE END ----- */
/* ----- VISUAL STYLE START ----- */
.ma-dialog {
border: 0;
border-radius: 5px;
width: ${settings.width};
font-family: "Roboto",Roboto,sans-serif;
margin: 2px auto;
padding: 20px;
font-weight: 400;
font-size: 13px;
line-height: 18px;
}
.ma-dialog.ma-theme-light {
background: #d9e1e8;
color: #282c37;
}
.ma-dialog.ma-theme-dark {
background: #282c37;
color: #9baec8;
}
.ma-title {
text-align: center;
font-size: 18px;
font-weight: 500;
margin: 0;
}
.ma-title.ma-theme-light {
color: #282c37;
}
.ma-title.ma-theme-dark {
color: #fff;
}
.ma-input {
border: 0;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-weight: 500;
font-size: 18px;
}
.ma-input.ma-theme-light {
background: #f9fafb;
color: #000;
}
.ma-input.ma-theme-dark {
background: #131419;
color: #fff;
}
.ma-input::placeholder {
color: #c83737;
}
.ma-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
margin-right: 10px;
margin-top: 20px;
padding: 10px;
background: #2b90d9;
font-family: inherit;
font-weight: 500;
font-size: 18px;
color: #fff;
line-height: inherit;
text-align: center;
text-transform: uppercase;
box-sizing: border-box;
cursor: pointer;
}
.ma-create {
text-align: right;
}
.ma-create a {
text-decoration: none;
}
.ma-create.ma-theme-light a:link,
.ma-create.ma-theme-light a:active,
.ma-create.ma-theme-light a:visited {
color: #282c37;
}
.ma-create.ma-theme-dark a:link,
.ma-create.ma-theme-dark a:active,
.ma-create.ma-theme-dark a:visited {
color: #9baec8;
}
/* ----- VISUAL STYLE END ----- */
`;
</script>
ENERGIZE!
2022-05-03 01:34:37 +00:00
<style>
body {
max-width: 800px;
margin: auto;
background: #282c37;
color: #9baec8;
font-family: "Roboto",Roboto,sans-serif;
}
#description h1, h2 {
color: #fff;
}
a[id$="download"], a[id$="download"]:hover, a[id$="download"]:active {
text-decoration: none;
color: #fff;
}
table, #output {
min-width: 600px;
max-width: 800px;
}
table,tr,td {
padding: 0; margin: 0; border: 0;
vertical-align: middle;
}
td:first-child {
white-space: nowrap;
width: 1%;
padding: 10px;
color: #fff;
font-weight: bold;
}
input[type="text"] {
border: 0;
border-radius: 4px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-weight: 500;
font-size: 18px;
background: #131419;
color: #fff;
}
textarea {
border: 0;
border-radius: 4px;
margin-top: 20px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background: #131419;
color: #9baec8;
}
select, button {
border: 0;
border-radius: 4px;
padding: 10px;
background-color: #2b90d9;
color: #fff;
box-sizing: border-box;
min-width: 200px;
font-family: inherit;
}
#embed-follow-output, #embed-share-output {
height: 200px;
}
#script-output {
height: 256px;
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
#style-output {
height: 256px;
}
ENERGIZE!
2022-05-03 01:34:37 +00:00
</style>
<script>
var defaults = {
settings: {
account: 'user@localhost',
width: '256px',
theme: 'light'
},
lang: {
da: {
"share": {
"title": "Tast dit Mastodon id",
"button": "Del"
},
"follow": {
"title": "Tast dit Mastodon id",
"button": "Følg"
},
"common": {
"create": "Opret konto",
"create_url": "https://joinmastodon.org/communities",
"error": {
"handle": "Forkert id"
}
}
},
en: {
"share": {
"title": "Enter your Mastodon handle",
"button": "Share"
},
"follow": {
"title": "Enter your Mastodon handle",
"button": "Follow"
},
"common": {
"create": "Create account",
"create_url": "https://joinmastodon.org/communities",
"error": {
"handle": "Invalid handle"
}
}
}
}
};
var settings;
var lang;
var elements;
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
var theme = {
dark: ['#282c37', '#1b1e25'],
light: ['#d9e1e8', '#c6d2dc']
};
ENERGIZE!
2022-05-03 01:34:37 +00:00
function generate()
{
var account = elements.handle.value;
if(account.charAt(0) == '@')
account = account.substring(1);
var uriparts = account.split('@');
var e = document.querySelector('select[name=theme]');
settings = {
account: account,
portal: "https://" + uriparts[1] + "/users/" + uriparts[0] + "/remote_follow",
width: defaults.settings.width,
theme: e.options[e.selectedIndex].value //defaults.settings.theme //TODO
};
var e = document.querySelector('select[name=lang]');
switch(e.options[e.selectedIndex].value) {
case 'en': {
lang = defaults.lang.en;
break;
}
case 'da': {
lang = defaults.lang.da;
break;
}
case 'custom': {
lang = {
"share": {
"title": document.querySelector('input[name="share.title"]').value,
"button": document.querySelector('input[name="share.button"]').value
},
"follow": {
"title": document.querySelector('input[name="follow.title"]').value,
"button": document.querySelector('input[name="follow.button"]').value
},
"common": {
"create": document.querySelector('input[name="common.create"]').value,
"create_url": document.querySelector('input[name="common.create_url"]').value,
"error": {
"handle": document.querySelector('input[name="common.error.handle"]').value
}
}
};
break;
}
}
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
var embed = script_template(settings);
ENERGIZE!
2022-05-03 01:34:37 +00:00
var script_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('script-download').setAttribute('href', script_file);
document.getElementById('script-download').setAttribute('download', 'mastodon-interact.js');
document.getElementById('script-output').innerHTML = embed;
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
var embed = style_template(settings);
var style_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
document.getElementById('style-download').setAttribute('href', style_file);
document.getElementById('style-download').setAttribute('download', 'mastodon-interact.css');
document.getElementById('style-output').innerHTML = embed;
ENERGIZE!
2022-05-03 01:34:37 +00:00
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
document.getElementById('embed-follow-output').innerHTML = embed_follow_template(settings, lang);
var icon_follow_file = URL.createObjectURL(new Blob(Array.from(icon_follow_template(theme[settings.theme])), {type: 'octet/stream'}));
ENERGIZE!
2022-05-03 01:34:37 +00:00
document.getElementById('follow-icon-download').setAttribute('href', icon_follow_file);
document.getElementById('follow-icon-download').setAttribute('download', 'mastodon-follow-' + settings.theme + '.svg');
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
document.getElementById('embed-share-output').innerHTML = embed_share_template(settings, lang);
ENERGIZE!
2022-05-03 01:34:37 +00:00
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
var icon_share_file = URL.createObjectURL(new Blob(Array.from(icon_share_template(theme[settings.theme])), {type: 'octet/stream'}));
ENERGIZE!
2022-05-03 01:34:37 +00:00
document.getElementById('share-icon-download').setAttribute('href', icon_share_file);
document.getElementById('share-icon-download').setAttribute('download', 'mastodon-share-' + settings.theme + '.svg');
}
function cb_select(e)
{
console.log(e.target.value);
if(e.target.value === 'custom') {
elements.custom.style.display = '';
} else {
elements.custom.style.display = 'none';
}
}
window.onload = function() {
elements = {
follow: document.querySelector('input[name=follow]'),
share: document.querySelector('input[name=share]'),
lang: document.querySelector('select[name=lang]'),
theme: document.querySelector('select[name=theme]'),
handle: document.querySelector('input[name=handle]'),
custom: document.getElementById('custom-lang')
};
elements.lang.onchange = cb_select;
};
</script>
</head>
<body>
<div id="description">
<h1>Mastodon Interact embedding</h1>
<p>Enter your Mastodon account, pick your settings and click on
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
generate. This page will generate a script and a style sheet
you need to insert in the <tt>&lt;head&gt;</tt> section of your
page.</p>
<pre>&lt;head&gt;
...
&lt;link rel="stylesheet" type="text/css" href="mastodon-interact.css"&gt;
&lt;script type="application/javascript" src="mastodon-interact.js"&gt;&lt;/script&gt;
&lt;/head&gt;</pre>
<p>You need to make sure the paths are correct in the
<tt>href</tt> and <tt>src</tt> attributes. Your account is
embedded in the script and can be changed by assigning a new
account to <tt>MastodonInteract.account</tt>. You can also
change the text for the share button with
<tt>MastodonInteract.sharetext</tt>.</p>
<p>The two HTML snippets need to be copy pasted to the part of
your page where you want to insert the buttons. Make sure that
the paths to the icons are correct and point to where you
uploaded the generated icons.</p>
ENERGIZE!
2022-05-03 01:34:37 +00:00
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
<p>This generator page is entirely selfcontained and can be
download to you computer.</p>
ENERGIZE!
2022-05-03 01:34:37 +00:00
</div>
<table>
<tr>
<td>Mastodon handle</td>
<td>
<input type="text" name="handle" />
</td>
</tr>
<tr>
<td>Language</td>
<td>
<select name="lang">
<option value="en">English</option>
<option value="da">Danish</option>
<option value="custom">Custom</option>
</select>
</td>
</tr>
<tr>
<td>Theme</td>
<td>
<select name="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</td>
</tr>
</table>
<div id="custom-lang" style="display: none;">
<table>
<tr>
<td>share.title:</td>
<td><input type="text" name="share.title" value="Enter your Mastodon handle" /></td>
</tr>
<tr>
<td>share.button:</td>
<td><input type="text" name="share.button" value="Share" /></td>
</tr>
<tr>
<td>follow.title:</td>
<td><input type="text" name="follow.title" value="Enter your Mastodon handle" /></td>
</tr>
<tr>
<td>follow.button:</td>
<td><input type="text" name="follow.button" value="Follow" /></td>
</tr>
<tr>
<td>common.create:</td>
<td><input type="text" name="common.create" value="Create account" /></td>
</tr>
<tr>
<td>common.create_url:</td>
<td><input type="text" name="common.create_url" value="https://joinmastodon.org/communities" /></td>
</tr>
<tr>
<td>common.error.handle:</td>
<td><input type="text" name="common.error.handle" value="Invalid handle" /></td>
</tr>
</table>
</div>
<div>
<button onclick="generate()">Generate embed</button>
</div>
<div id="output">
<h2>Script</h2>
<div><a id="script-download" href="#">Download script</a></div>
<textarea id="script-output"></textarea>
Rewrite By using a lot of CSS ninja, the script has been cut from 292 to 52 lines. The generator script has been updated to use ES6 backtick template strings.
2022-05-06 01:41:58 +00:00
<h2>Style</h2>
<div><a id="style-download" href="#">Download style</a></div>
<textarea id="style-output"></textarea>
ENERGIZE!
2022-05-03 01:34:37 +00:00
<h2>Follow Embed</h2>
<div><a id="follow-icon-download" href="#">Download icon</a></div>
<textarea id="embed-follow-output"></textarea>
<h2>Share Embed</h2>
<div><a id="share-icon-download" href="#">Download icon</a></div>
<textarea id="embed-share-output"></textarea>
</div>
<div style="padding: 64px; text-align:center">
<p>Copyright (C) 2022 smpl &lt;smpl@slamkode.ml&gt;</p>
<a style="text-decoration: none; color: #fff;" href="https://git.data.coop/smpl/mastodon-interact.js">Source code</a>
</div>
</body>
</html>
Copy permalink