From 1808843e9ec27acf7594d90629990409c54fa684 Mon Sep 17 00:00:00 2001
From: smpl <smpl@slamkode.ml>
Date: Fri, 6 May 2022 03:41:58 +0200
Subject: [PATCH] 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.
---
 embed/index.html      | 659 ++++++++++++++++++------------------------
 mastodon-follow.html  |  17 ++
 mastodon-interact.css | 151 ++++++++++
 mastodon-interact.js  | 308 +++-----------------
 mastodon-share.html   |  17 ++
 5 files changed, 500 insertions(+), 652 deletions(-)
 create mode 100644 mastodon-follow.html
 create mode 100644 mastodon-interact.css
 create mode 100644 mastodon-share.html

diff --git a/embed/index.html b/embed/index.html
index 004f75d..cc5a1f2 100644
--- a/embed/index.html
+++ b/embed/index.html
@@ -11,7 +11,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="">
-<script id="icon-follow-template" type="text/plain"><?xml version="1.0" standalone="no"?>
+	<script type="text/javascript">
+const icon_follow_template = color => `<?xml version="1.0" standalone="no"?>
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	version="1.1"
@@ -24,7 +25,7 @@
 		x="0.85941321"
 		y="0.85940945"
 		ry="6.0133438"
-		style="fill:${color.0};stroke:${color.1};stroke-width:1.71882558;" />
+		style="fill:${color[0]};stroke:${color[1]};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;" />
@@ -34,8 +35,11 @@
 	<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></script>
-<script id="icon-share-template" type="text/plain"><?xml version="1.0" standalone="no"?>
+</svg>`;
+	</script>
+
+	<script type="text/javascript">
+const icon_share_template = color => `<?xml version="1.0" standalone="no"?>
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="57.883163mm"
@@ -43,7 +47,7 @@
 	viewBox="0 0 57.883163 45.014904"
 	version="1.1">
 	<rect
-		style="fill:${color.0};stroke:${color.1};stroke-width:1.71882558;"
+		style="fill:${color[0]};stroke:${color[1]};stroke-width:1.71882558;"
 		width="56.164337"
 		height="43.296078"
 		x="0.85941321"
@@ -72,310 +76,251 @@
 			cy="36.044575"
 			r="3.5741699" />
 	</g>
-</svg></script>
-<script id="embed-follow-template" type="text/plain"><div style="display: inline-block; position: relative;">
-	<a href="${portal}">
-		<img id="mastodon-widget-follow" style="height: 32px;" src="mastodon-follow-${theme}.svg"/>
-	</a>
-</div></script>
-<script id="embed-share-template" type="text/plain"><div style="display: inline-block; position: relative;">
-	<a href="#">
-		<img id="mastodon-widget-share" style="height: 32px;" src="mastodon-share-${theme}.svg"/>
-	</a>
-</div></script>
-<script id="script-template" type="text/plain">/* SPDX-License-Identifier: Zlib
+</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
    Copyright (C) 2022 smpl <smpl@slamkode.ml> */
 
-const MastodonInteract = function() {
-	settings = {
-		"account": "${account}",
-		"portal": "${portal}",
-		"width": "${width}",
-		"theme": "${theme}"
-	};
-	strings = {
-		"share": {
-			"title": "${share.title}",
-			"button": "${share.button}",
-			"text": window.location
-		},
-		"follow": {
-			"title": "${follow.title}",
-			"button": "${follow.button}"
-		},
-		"common": {
-			"create": "${common.create}",
-			"create_url": "${common.create_url}",
-			"error": { 
-				"handle": "${common.error.handle}"
-			}
-		}
-	};
-	
-	var widget = {
-		style: null,
-		dialogs: {
-			follow: null,
-			share: null
-		},
-		buttons: {
-			follow: null,
-			share: null
-		}
-	};
-	var CreateStyle = function() {
-		widget.style = document.createElement('style');
-		widget.style.id = "mastodon-widget-style";
-		
-		widget.style.innerHTML =
-			".mastodon-widget-container {" +
-//				"display: block;" +
-				"z-index: 1;" + 
-				"border: 0;" + 
-				"border-radius: 5px;" +
-				"position: absolute;" + 
-				"top:110%;" + 
-				"left: 0;" +
-				"width: " + settings.width + ";" +
-				'font-family: "Roboto",Roboto,sans-serif;' +
-				"margin: 0 auto;" +
-				"padding: 20px;" +
-				"font-weight: 400;" +
-				"font-size: 13px;" +
-				"line-height: 18px;" +
-			"}" +
-			".mastodon-widget-container.light {" +
-				"background: #d9e1e8;" +
-				"color: #282c37;" +
-			"}" +
-			".mastodon-widget-container.dark {" +
-				"background: #282c37;" +
-				"color: #9baec8;" +
-			"}" +
-			".mastodon-widget-title {" +
-				"text-align: center;" + 
-				"font-size: 18px;" +
-				"font-weight: 500;" + 
-				"margin: 0;" +
-			"}" +
-			".mastodon-widget-title.light {" +
-				"color: #282c37;" +
-			"}" +
-			".mastodon-widget-title.dark {" +
-				"color: #fff;" +
-			"}" +
-			".mastodon-widget-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;" +
-			"}" +
-			".mastodon-widget-input.light {" +
-				"background: #f9fafb;" +
-				"color: #000;" +
-			"}" +
-			".mastodon-widget-input.dark {" +
-				"background: #131419;" +
-				"color: #fff;" +
-			"}" +
-			".mastodon-widget-input::placeholder {" +
-				"color: #c83737;" +
-			"}" +
-			".mastodon-widget-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;" +
-			"}";
-		document.head.appendChild(widget.style);
-	};
-	var CreateDialog = function(o) {
-		var t;
-		if(o === widget.buttons.follow)
-			t = strings.follow;
-		else if(o === widget.buttons.share)
-			t = strings.share;
-		
-		obj = document.createElement('div');
-		obj.setAttribute('class', 'mastodon-widget-container ' + settings.theme);
-		
-		var title = document.createElement('p');
-		title.setAttribute('class', 'mastodon-widget-title ' + settings.theme);
-		title.innerHTML = t.title;
-		
-		var input = document.createElement('input');
-		input.setAttribute('name', 'mastodon-handle');
-		input.setAttribute('type', 'text');
-		input.setAttribute('class', 'mastodon-widget-input ' + settings.theme);
-		
-		var button = document.createElement('button');
-		button.innerHTML = t.button;
-		button.setAttribute('class', 'mastodon-widget-button');
-		button.onclick = cbAction;
-		
-		var create_div = document.createElement('div');
-		create_div.style = "text-align: right;";
-		var create_a = document.createElement('a');
-		create_a.setAttribute('href', strings.common.create_url);
-		create_a.innerHTML = strings.common.create;
-		create_div.appendChild(create_a);
-		
-		obj.appendChild(title);
-		obj.appendChild(input);
-		obj.appendChild(button);
-		obj.appendChild(create_div);
-		return obj;
-	};
-	var cbCreateDialog = function(e) {
-		var dialog;
-		if(widget.style == null)
-			CreateStyle();
-		dialog = CreateDialog(e.target);
-		e.target.parentElement.appendChild(dialog);
-		e.target.onclick = cbToggle;
-		if(widget.buttons.share &&  e.target === widget.buttons.share) {
-			widget.dialogs.share = dialog;
-		} else if(widget.buttons.follow &&  e.target === widget.buttons.follow) {
-			widget.dialogs.follow = dialog;
-		}
-		window.addEventListener('click', cbHide, true);
-	};
-	var cbHide = function(e) {
-		if(widget.dialogs.follow) {
-			if( e.target === widget.buttons.follow ||
-			    e.target === widget.dialogs.follow || 
-			    e.target.parentNode === widget.dialogs.follow ) {
-				return;
-			}
-			widget.dialogs.follow.style.display = 'none';
-		}
-		if(widget.dialogs.share) {
-			if( e.target === widget.buttons.share ||
-			    e.target === widget.dialogs.share ||
-			    e.target.parentNode === widget.dialogs.share ) {
-				return;
-			}
-			widget.dialogs.share.style.display = 'none';
-		}
-		window.removeEventListener('click', cbHide, true);
-	}
-	var cbToggle = function(e) {
-		if(e.target === widget.buttons.follow) {
-			if(widget.dialogs.follow.style.display === 'none') {
-				widget.dialogs.follow.style.display = '';
-				if(widget.dialogs.share)
-					widget.dialogs.share.style.display = 'none';
-				window.addEventListener('click', cbHide, true);
-			} else {
-				widget.dialogs.follow.style.display = 'none';
-			}
-		} else if(e.target === widget.buttons.share) {
-			if(widget.dialogs.share.style.display === 'none') {
-				widget.dialogs.share.style.display = '';
-				if(widget.dialogs.follow)
-					widget.dialogs.follow.style.display = 'none';
-				window.addEventListener('click', cbHide, true);
-			} else {
-				widget.dialogs.share.style.display = 'none';
-			}
-		}
-	};
-	var cbAction = function(e) {
-		var input = e.target.parentNode.querySelector('input[name="mastodon-handle"]');
+let MastodonInteract = {
+	sharetext: null,
+	account: null,
+	dialogs: {
+		follow: null,
+		share: null,
+	},
+	cbAction: function(e) {
+		var input = e.target.querySelector('input');
 		var handle = input.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) {
+		var parts = handle.split('@');
+		if(parts.length < 2) {
 			input.value = '';
-			input.setAttribute('placeholder', strings.common.error.handle);
+			input.setAttribute('placeholder', "Invalid handle");
 			return;
 		}
 		
-		if(e.target.parentNode === widget.dialogs.follow) {
-			var oReq = new XMLHttpRequest();
-			oReq.addEventListener("loadend", cbQueryResponse);
-			oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
-			oReq.send();
-		} else if(e.target.parentNode === widget.dialogs.share) {
-			window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
+		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);
 		}
-	};
-	// follow only
-	var cbQueryResponse = function(e) {
-		var data;
-		console.log(e.type);
-		if (e.readyState === e.DONE) {
-			if (e.status === 200) {
-				try {
-					data = JSON.parse(e.responseText);
-				} catch {
-					window.location = settings.portal;
-					return;
-				}
-				
-				data.links.forEach( function(l) {
-					if(l.rel === "http://ostatus.org/schema/1.0/subscribe") {
-						window.location = l.template.replace('{uri}', encodeURIComponent(settings.account));
-						return;
-					}
-				});
+	},
+	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(); };
 			}
-		}
-		window.location = settings.portal;
-		return;
-	};
-
-	widget.buttons.follow = document.getElementById('mastodon-widget-follow');
-	widget.buttons.share = document.getElementById('mastodon-widget-share');
-	
-	if(widget.buttons.follow) {
-		widget.buttons.follow.onclick = cbCreateDialog;
-		widget.buttons.follow.style.cursor = "pointer";
-		let a = widget.buttons.follow.parentNode;
-		let div = a.parentNode;
-		div.appendChild(widget.buttons.follow);
-		a.remove();
+			
+			self.dialogs.share = document.getElementById('ma-sha-form');
+			if(self.dialogs.share) {
+				self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
+			}
+		});
 	}
-	if(widget.buttons.share) {
-		widget.buttons.share.onclick = cbCreateDialog;
-		widget.buttons.share.style.cursor = "pointer";
-		let a = widget.buttons.share.parentNode;
-		let div = a.parentNode;
-		div.appendChild(widget.buttons.share);
-		a.remove();
-	}
-	
-	return this;
 };
 
-var mastodon_widget;
-window.addEventListener("load", function(e) {
-	mastodon_widget = MastodonInteract();
-});</script>
+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>
 	<style>
 		body {
 			max-width: 800px;
@@ -438,19 +383,20 @@ window.addEventListener("load", function(e) {
 			min-width: 200px;
 			font-family: inherit;
 		}
-		
 		#embed-follow-output, #embed-share-output {
 			height: 200px;
 		}
 		#script-output {
 			height: 256px;
 		}
+		#style-output {
+			height: 256px;
+		}
 	</style>
 	<script>
 		var defaults = {
 			settings: {
 				account: 'user@localhost',
-				portal: '#',
 				width: '256px',
 				theme: 'light'
 			},
@@ -493,63 +439,11 @@ window.addEventListener("load", function(e) {
 		};
 		var settings;
 		var lang;
-		
 		var elements;
-		
-		function replacer(match)
-		{
-			switch(match) {
-				case '${account}': {
-					return settings.account;
-				}
-				case '${portal}': {
-					return settings.portal;
-				}
-				case '${width}': {
-					return settings.width;
-				}
-				case '${theme}': {
-					return settings.theme;
-				}
-				case '${share.title}': {
-					return lang.share.title;
-				}
-				case '${share.button}': {
-					return lang.share.button;
-				}
-				case '${follow.title}': {
-					return lang.follow.title;
-				}
-				case '${follow.button}': {
-					return lang.follow.button;
-				}
-				case '${common.create}': {
-					return lang.common.create;
-				}
-				case '${common.create_url}': {
-					return lang.common.create_url;
-				}
-				case '${common.error.handle}': {
-					return lang.common.error.handle;
-				}
-			}
-		}
-		
-		function svg_replace(match)
-		{
-			var theme = {
-				dark: ['#282c37', '#1b1e25'],
-				light: ['#d9e1e8', '#c6d2dc']
-			};
-			switch(match) {
-				case '${color.0}': {
-					return theme[settings.theme][0];
-				}
-				case '${color.1}': {
-					return theme[settings.theme][1];
-				}
-			}
-		}
+		var theme = {
+			dark: ['#282c37', '#1b1e25'],
+			light: ['#d9e1e8', '#c6d2dc']
+		};
 		
 		function generate()
 		{
@@ -599,31 +493,27 @@ window.addEventListener("load", function(e) {
 				}
 			}
 			
-			var tmpl = document.getElementById('script-template');
-			var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
+			var embed = script_template(settings);
 			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;
 			
-			var tmpl = document.getElementById('embed-follow-template');
-			var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
-			document.getElementById('embed-follow-output').innerHTML = embed;
+			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;
 			
-			var tmpl = document.getElementById('icon-follow-template');
-			var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, svg_replace);
-			var icon_follow_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
+			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'}));
 			document.getElementById('follow-icon-download').setAttribute('href', icon_follow_file);
 			document.getElementById('follow-icon-download').setAttribute('download', 'mastodon-follow-' + settings.theme + '.svg');
 			
+			document.getElementById('embed-share-output').innerHTML = embed_share_template(settings, lang);
 			
-			var tmpl = document.getElementById('embed-share-template');
-			var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, replacer);
-			document.getElementById('embed-share-output').innerHTML = embed;
-			
-			var tmpl = document.getElementById('icon-share-template');
-			var embed = tmpl.innerHTML.replace(/\${[^}]*}/g, svg_replace);
-			var icon_share_file = URL.createObjectURL(new Blob(Array.from(embed), {type: 'octet/stream'}));
+			var icon_share_file = URL.createObjectURL(new Blob(Array.from(icon_share_template(theme[settings.theme])), {type: 'octet/stream'}));
 			document.getElementById('share-icon-download').setAttribute('href', icon_share_file);
 			document.getElementById('share-icon-download').setAttribute('download', 'mastodon-share-' + settings.theme + '.svg');
 		}
@@ -657,20 +547,30 @@ window.addEventListener("load", function(e) {
 		<h1>Mastodon Interact embedding</h1>
 		
 		<p>Enter your Mastodon account, pick your settings and click on 
-		generate. This page will generate a script to be embedded in 
-		the <tt>&lt;head&gt;</tt> section of your page and two HTML 
-		snippets you can insert where you want each button on your 
-		page. Also remember to download the icon files for the buttons 
-		unless you supply your own.</p>
+		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>
 		
-		<p>You can easily tweak the script after download. The settings 
-		and strings are in the beginning of the script. In the HTML 
-		snippets you can modify the size of the button in the 
-		<tt>style</tt> attribute of the <tt>&lt;img&gt;</tt> tag, which 
-		is set to <tt>height: 32px</tt> and change the <tt>src</tt> 
-		attribute to adjust the path to the button image. You can also 
-		adjust the fallback links, but you can't remove the 
-		<tt>&lt;a&gt;</tt> tags.</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>
+		
+		<p>This generator page is entirely selfcontained and can be 
+		download to you computer.</p>
 	</div>
 	<table>
 		<tr>
@@ -739,6 +639,9 @@ window.addEventListener("load", function(e) {
 		<h2>Script</h2>
 		<div><a id="script-download" href="#">Download script</a></div>
 		<textarea id="script-output"></textarea>
+		<h2>Style</h2>
+		<div><a id="style-download" href="#">Download style</a></div>
+		<textarea id="style-output"></textarea>
 		<h2>Follow Embed</h2>
 		<div><a id="follow-icon-download" href="#">Download icon</a></div>
 		<textarea id="embed-follow-output"></textarea>
diff --git a/mastodon-follow.html b/mastodon-follow.html
new file mode 100644
index 0000000..c0d84ee
--- /dev/null
+++ b/mastodon-follow.html
@@ -0,0 +1,17 @@
+<div class="ma-box">
+	<label for="ma-flw-toggle">
+		<img height="32px" src="mastodon-follow-light.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-light">
+		<form id="ma-flw-form">
+		<p class="ma-title ma-theme-light">Enter your Mastodon handle</p>
+		<input type="text" class="ma-input ma-theme-light">
+		<button class="ma-button">Follow</button>
+		<div class="ma-create ma-theme-light">
+			<a href="https://joinmastodon.org/communities">Create account</a>
+		</div>
+		</form>
+	</div>
+</div>
diff --git a/mastodon-interact.css b/mastodon-interact.css
new file mode 100644
index 0000000..2db9d07
--- /dev/null
+++ b/mastodon-interact.css
@@ -0,0 +1,151 @@
+/* SPDX-License-Identifier: Zlib
+   Copyright (C) 2022 smpl <smpl@slamkode.ml> */
+
+/* ----- 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: 256px;
+	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 ----- */
diff --git a/mastodon-interact.js b/mastodon-interact.js
index 7c80d8e..8f6758f 100644
--- a/mastodon-interact.js
+++ b/mastodon-interact.js
@@ -1,292 +1,52 @@
 /* SPDX-License-Identifier: Zlib
    Copyright (C) 2022 smpl <smpl@slamkode.ml> */
 
-const MastodonInteract = function() {
-	settings = {
-		"account": "superman@localhost",
-		"portal": "https://localhost/users/superman/remote_follow",
-		"width": "256px",
-		"theme": "light"
-	};
-	strings = {
-		"share": {
-			"title": "Enter your Mastodon handle",
-			"button": "Share",
-			"text": window.location
-		},
-		"follow": {
-			"title": "Enter your Mastodon handle",
-			"button": "Follow"
-		},
-		"common": {
-			"create": "Create account",
-			"create_url": "https://joinmastodon.org/communities",
-			"error": { 
-				"handle": "Invalid handle"
-			}
-		}
-	};
-	
-	var widget = {
-		style: null,
-		dialogs: {
-			follow: null,
-			share: null
-		},
-		buttons: {
-			follow: null,
-			share: null
-		}
-	};
-	var CreateStyle = function() {
-		widget.style = document.createElement('style');
-		widget.style.id = "mastodon-widget-style";
-		
-		widget.style.innerHTML =
-			".mastodon-widget-container {" +
-//				"display: block;" +
-				"z-index: 1;" + 
-				"border: 0;" + 
-				"border-radius: 5px;" +
-				"position: absolute;" + 
-				"top:110%;" + 
-				"left: 0;" +
-				"width: " + settings.width + ";" +
-				'font-family: "Roboto",Roboto,sans-serif;' +
-				"margin: 0 auto;" +
-				"padding: 20px;" +
-				"font-weight: 400;" +
-				"font-size: 13px;" +
-				"line-height: 18px;" +
-			"}" +
-			".mastodon-widget-container.light {" +
-				"background: #d9e1e8;" +
-				"color: #282c37;" +
-			"}" +
-			".mastodon-widget-container.dark {" +
-				"background: #282c37;" +
-				"color: #9baec8;" +
-			"}" +
-			".mastodon-widget-title {" +
-				"text-align: center;" + 
-				"font-size: 18px;" +
-				"font-weight: 500;" + 
-				"margin: 0;" +
-			"}" +
-			".mastodon-widget-title.light {" +
-				"color: #282c37;" +
-			"}" +
-			".mastodon-widget-title.dark {" +
-				"color: #fff;" +
-			"}" +
-			".mastodon-widget-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;" +
-			"}" +
-			".mastodon-widget-input.light {" +
-				"background: #f9fafb;" +
-				"color: #000;" +
-			"}" +
-			".mastodon-widget-input.dark {" +
-				"background: #131419;" +
-				"color: #fff;" +
-			"}" +
-			".mastodon-widget-input::placeholder {" +
-				"color: #c83737;" +
-			"}" +
-			".mastodon-widget-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;" +
-			"}";
-		document.head.appendChild(widget.style);
-	};
-	var CreateDialog = function(o) {
-		var t;
-		if(o === widget.buttons.follow)
-			t = strings.follow;
-		else if(o === widget.buttons.share)
-			t = strings.share;
-		
-		obj = document.createElement('div');
-		obj.setAttribute('class', 'mastodon-widget-container ' + settings.theme);
-		
-		var title = document.createElement('p');
-		title.setAttribute('class', 'mastodon-widget-title ' + settings.theme);
-		title.innerHTML = t.title;
-		
-		var input = document.createElement('input');
-		input.setAttribute('name', 'mastodon-handle');
-		input.setAttribute('type', 'text');
-		input.setAttribute('class', 'mastodon-widget-input ' + settings.theme);
-		
-		var button = document.createElement('button');
-		button.innerHTML = t.button;
-		button.setAttribute('class', 'mastodon-widget-button');
-		button.onclick = cbAction;
-		
-		var create_div = document.createElement('div');
-		create_div.style = "text-align: right;";
-		var create_a = document.createElement('a');
-		create_a.setAttribute('href', strings.common.create_url);
-		create_a.innerHTML = strings.common.create;
-		create_div.appendChild(create_a);
-		
-		obj.appendChild(title);
-		obj.appendChild(input);
-		obj.appendChild(button);
-		obj.appendChild(create_div);
-		return obj;
-	};
-	var cbCreateDialog = function(e) {
-		var dialog;
-		if(widget.style == null)
-			CreateStyle();
-		dialog = CreateDialog(e.target);
-		e.target.parentElement.appendChild(dialog);
-		e.target.onclick = cbToggle;
-		if(widget.buttons.share &&  e.target === widget.buttons.share) {
-			widget.dialogs.share = dialog;
-		} else if(widget.buttons.follow &&  e.target === widget.buttons.follow) {
-			widget.dialogs.follow = dialog;
-		}
-		window.addEventListener('click', cbHide, true);
-	};
-	var cbHide = function(e) {
-		if(widget.dialogs.follow) {
-			if( e.target === widget.buttons.follow ||
-			    e.target === widget.dialogs.follow || 
-			    e.target.parentNode === widget.dialogs.follow ) {
-				return;
-			}
-			widget.dialogs.follow.style.display = 'none';
-		}
-		if(widget.dialogs.share) {
-			if( e.target === widget.buttons.share ||
-			    e.target === widget.dialogs.share ||
-			    e.target.parentNode === widget.dialogs.share ) {
-				return;
-			}
-			widget.dialogs.share.style.display = 'none';
-		}
-		window.removeEventListener('click', cbHide, true);
-	}
-	var cbToggle = function(e) {
-		if(e.target === widget.buttons.follow) {
-			if(widget.dialogs.follow.style.display === 'none') {
-				widget.dialogs.follow.style.display = '';
-				if(widget.dialogs.share)
-					widget.dialogs.share.style.display = 'none';
-				window.addEventListener('click', cbHide, true);
-			} else {
-				widget.dialogs.follow.style.display = 'none';
-			}
-		} else if(e.target === widget.buttons.share) {
-			if(widget.dialogs.share.style.display === 'none') {
-				widget.dialogs.share.style.display = '';
-				if(widget.dialogs.follow)
-					widget.dialogs.follow.style.display = 'none';
-				window.addEventListener('click', cbHide, true);
-			} else {
-				widget.dialogs.share.style.display = 'none';
-			}
-		}
-	};
-	var cbAction = function(e) {
-		var input = e.target.parentNode.querySelector('input[name="mastodon-handle"]');
+let MastodonInteract = {
+	sharetext: null,
+	account: null,
+	dialogs: {
+		follow: null,
+		share: null,
+	},
+	cbAction: function(e) {
+		var input = e.target.querySelector('input');
 		var handle = input.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) {
+		var parts = handle.split('@');
+		if(parts.length < 2) {
 			input.value = '';
-			input.setAttribute('placeholder', strings.common.error.handle);
+			input.setAttribute('placeholder', "Invalid handle");
 			return;
 		}
 		
-		if(e.target.parentNode === widget.dialogs.follow) {
-			var oReq = new XMLHttpRequest();
-			oReq.addEventListener("loadend", cbQueryResponse);
-			oReq.open("GET", "https://" + uriparts[1] + "/.well-known/webfinger?resource=acct:" + encodeURIComponent(handle));
-			oReq.send();
-		} else if(e.target.parentNode === widget.dialogs.share) {
-			window.location = "https://" + uriparts[1] + "/share?text=" + encodeURIComponent(strings.share.text);
+		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);
 		}
-	};
-	// follow only
-	var cbQueryResponse = function(e) {
-		var data;
-		if (e.readyState === e.DONE) {
-			if (e.status === 200) {
-				try {
-					data = JSON.parse(e.responseText);
-				} catch {
-					window.location = settings.portal;
-					return;
-				}
-				
-				data.links.forEach( function(l) {
-					if(l.rel === "http://ostatus.org/schema/1.0/subscribe") {
-						window.location = l.template.replace('{uri}', encodeURIComponent(settings.account));
-						return;
-					}
-				});
+	},
+	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(); };
 			}
-		}
-		window.location = settings.portal;
-		return;
-	};
-
-	widget.buttons.follow = document.getElementById('mastodon-widget-follow');
-	widget.buttons.share = document.getElementById('mastodon-widget-share');
-	
-	if(widget.buttons.follow) {
-		widget.buttons.follow.onclick = cbCreateDialog;
-		widget.buttons.follow.style.cursor = "pointer";
-		let a = widget.buttons.follow.parentNode;
-		let div = a.parentNode;
-		div.appendChild(widget.buttons.follow);
-		a.remove();
+			
+			self.dialogs.share = document.getElementById('ma-sha-form');
+			if(self.dialogs.share) {
+				self.dialogs.share.onsubmit = function(e) { self.cbAction(e); e.preventDefault(); };
+			}
+		});
 	}
-	if(widget.buttons.share) {
-		widget.buttons.share.onclick = cbCreateDialog;
-		widget.buttons.share.style.cursor = "pointer";
-		let a = widget.buttons.share.parentNode;
-		let div = a.parentNode;
-		div.appendChild(widget.buttons.share);
-		a.remove();
-	}
-	
-	return this;
 };
 
-var mastodon_widget;
-window.addEventListener("load", function(e) {
-	mastodon_widget = MastodonInteract();
-});
+MastodonInteract.init();
+MastodonInteract.account = "smpl@norrebro.space";
diff --git a/mastodon-share.html b/mastodon-share.html
new file mode 100644
index 0000000..5d90444
--- /dev/null
+++ b/mastodon-share.html
@@ -0,0 +1,17 @@
+<div class="ma-box">
+	<label for="ma-sha-toggle">
+		<img height="32px" src="mastodon-share-light.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-light">
+		<form id="ma-sha-form">
+		<p class="ma-title ma-theme-light">Enter your Mastodon handle</p>
+		<input type="text" class="ma-input ma-theme-light">
+		<button class="ma-button" type="submit">Share</button>
+		<div class="ma-create ma-theme-light">
+			<a href="https://joinmastodon.org/communities">Create account</a>
+		</div>
+		</form>
+	</div>
+</div>