-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
97 lines (97 loc) · 4.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embed-a-Toot</title>
<script type="module" src="/src/index.ts"></script>
<script defer data-domain="uppajung.github.io" src="https://plausible.io/js/script.js"></script>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.form-element {
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
align-items: start;
}
.form-element-checkbox {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
/* .form-element label, .form-element-checkbox label {
font-size: 0.8rem;
} */
.form-element-checkbox label {
margin-left: 0.5rem;
}
#tootUrlTextInput {
background-color: yellow;
}
textarea, input[type=text] {
width: 50rem;
max-width: 80vw;
}
</style>
</head>
<body>
<div>
<h2>Embed-a-Toot: Content-Inclusive Embedding for Mastodon</h2>
<p>Open-source toot embedding by that you can contribute to on <a href="https://github.com/uppajung/embed-a-toot/">Github</a>.
<br/>If you want content-inclusive built into Mastodon, support my <a href="https://github.com/mastodon/mastodon/issues/27626">Mastodon feature request</a>.
</p>
<script id="tootScript"></script>
<div class="form-element" style="margin-bottom: 2rem; margin-top: 2rem;">
<label for="tootUrlTextInput">URL of Toot</label>
<input id="tootUrlTextInput" type="text"/>
</div>
<div class="form-element">
<label for="embeddedCssContainer">Style sheet</label>
<select id="selectStyleSheet"></select>
</div>
<div class="form-element">
<label for="embeddedCssContainer">CSS,
download from <a id="downloadCssLink"></a> or copy from below, add to <style> element above embedded post or link via a .css file</label>
<textarea id="embeddedCssContainer" cols="80" rows="2" readonly="true" spellcheck="false"></textarea>
</div>
<div class="form-element">
<label for="embeddedHtmlContainer">HTML to embed where you want the toot to appear
<select id="htmlFormatting">
<option value="none">no whitespace</option>
<option value="spaces2">indent with two spaces</option>
<option value="spaces4">indent with four spaces</option>
<option value="tabs">indent with tabs</option>
</select>
</label>
<textarea id="embeddedHtmlContainer" rows="4" readonly="true" spellcheck="false"></textarea>
</div>
<div class="form-element-checkbox">
<input id="noContentUpdates" type="checkbox" />
<label for="noContentUpdates">Do not update the content if edited</label>
</div>
<div class="form-element-checkbox">
<input id="noCounterUpdates" type="checkbox" />
<label for="noCounterUpdates">Do not update the counts of favorites, re-blogs, and responses</label>
</div>
<div class="form-element" id="embeddedScriptContainerBlock">
<label for="embeddedScriptContainer">JavaScript to automatically update toots (or download it <a href="./updated-embedded-posts.js">minified</a> or <a href="./updated-embedded-posts-debug.js">non-minified</a>)
</label>
<textarea id="embeddedScriptContainer" cols="80" rows="2" readonly="true" spellcheck="false"></textarea>
</div>
<div class="form-element" style="margin-top: 1rem;">
<style id="tootStyle"></style>
<label for="embeddedTootContainer">Renders as</label>
<div id="embeddedTootContainer" style="min-width: min(50rem, 80vw);"></div>
</div>
</div>
<footer style="margin-top: 2rem;">Brought to you by <a href="https://www.stuartschechter.org/">Stuart Schechter</a>
(<a href="https://mastodon.social/@MildlyAggrievedScientist">@[email protected]</a>)
</footer>
</body>
</html>