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
|
{# SPDX-License-Identifier: CC-BY-SA-4.0 #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Submit – Daily Bulletin</title>
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<header>
<h1>Submit to the Daily Bulletin</h1>
</header>
<article>
<p>
You may submit a <i>Daily Inspiration</i> here.
</p>
<p>You are logged in as {{display_name}}. You may choose to <a href="{{ url_for('identity.logout') }}">log out</a>.</p>
<div class="listofdetails">
<details><summary>Why don't we use Microsoft Forms?</summary>Because it sucks. It requires a lot of <a href="https://www.gnu.org/philosophy/javascript-trap.en.html">nonfree JavaScript</a> to work – more than what's required for a user to log in. It does not support the Microsoft Graph API commonly used to access data from Microsoft services. The only way to automatically access data from Microsoft Forms is by using <a href="https://powerautomate.com">Microsoft Power Automate</a> which seems extremely cumbersome to use from the perspective of a developer (and requires some "premium" license to call external HTTP(S) APIs so I'd have to use some hacky email sending and email interpretation or some sort of SharePoint list shared state for inter-service communication). I just don't want to mess with that, and building an entire site that's an alternative to Microsoft Forms seems to be easier</details>
<details><summary>What is the maximum submission size?</summary>Request bodies <strong>must not</strong> be larger than {{max_request_size}} bytes. Files <strong>should not</strong> be larger than {{max_file_size}} bytes (enforced client-side only – it's possible to override by not executing the JavaScript that checks it, or by submitting through cURL or a similar utility). You may create larger submissions by uploading them to a hosting service (e.g. Microsoft SharePoint Online) and providing the URL.</details>
<details><summary>What are the recommended image formats?</summary>Images should ideally be in the <a href="https://en.wikipedia.org/wiki/WebP">WebP</a> file format. <a href="https://en.wikipedia.org/wiki/ImageMagick">ImageMagick</a> may be used to convert images, for example, <code>magick axolotl.png -define webp:lossless=false axolotl.webp</code> or <code>cwebp -q 80 axolotl.png -o axolotl.webp</code>. <code>cwebp -lossless</code> may be used for lossless compression too, but unless lossless compression is really necessary, it's probably just a needless increase in file size.</details>
<details><summary>How is JavaScript used on this page?</summary>This page itself only has one internal script that checks your file uploads and rejects them if they're larger than {{max_file_size}} bytes. However, when accessing this page, unauthenticated users will be redirected to the Microsoft Active Directory authentication page which contains some nonfree JavaScript.</details>
<details><summary>Privacy warning regarding attachment metadata</summary>Files you upload <em>may</em> be put into the daily bulletin <em>as is</em>. For example, your images might contain EXIF data or other kinds of metadata that could be used to identify you, your location, and/or your devices; these may or may not be removed during the daily bulletin build process. You are responsible for ensuring that the images you upload contain no more metadata than you are willing to share.</details>
</div>
</article>
<form id="mainform" method="POST" enctype="multipart/form-data">
<div class="formgroup">
<label for="type"><strong>FIRSTLY</strong> please indicate the type of the submission:</label>
<br/>
<input type="radio" id="typetext" name="type" value="text" checked />
<label for="typetext">Text (Quote/Poem)</label>
<br/>
<input type="radio" id="typemedia" name="type" value="media" />
<label for="typemedia">Media (Image/Meme/Video)</label>
<br/>
<input type="radio" id="typecafe" name="type" value="canteen" />
<label for="typecafe">锐评食堂</label>
</div>
<div class="formgroup">
<label for="origin"><strong>AND</strong> state the source of your submission:</label>
<br/>
<textarea rows="5" cols="40" id="origin" name="origin" placeholder="Please provide a fully-qualified URL and state the known copyright condition if applicable."></textarea>
</div>
<div class="formgroup">
<label for="submitter"><strong>AND OPTIONALLY</strong>:</label>
<br/>
<input type="radio" id="anonno" name="anon" value="no" />
<label for="anonno">Submit as {{display_name}}</label>
<br/>
<input type="radio" id="anonyes" name="anon" value="yes" checked />
<label for="anonyes">Submit anonymously</label>
<br/>
<input type="radio" id="anonaxo" name="anon" value="axolotl" />
<label for="anonaxo">Submit as an axolotl</label>
</div>
<div class="formgroup">
<label for="text"><strong>THEN EITHER</strong> provide your submission as text:</label>
<br/>
<textarea rows="10" cols="50" id="text" name="text" placeholder="Insert some text here"></textarea><br/>
(Your browser may allow you to expand the text area.)
</div>
<div class="formgroup">
<label for="fileupload"><strong>OR</strong> submit a file:</label>
<input type="file" id="fileupload" name="file" />
</div>
<div class="formgroup">
<label for="submit"><strong>LASTLY</strong> please press</label>
<input type="submit" value="Submit">
</div>
</form>
<footer>
<p><a href="./">Home Page</a> · <a href="./arc">Archive</a> · <a href="mailto:sjdb@runxiyu.org">Contact</a></p>
</footer>
<script>
/* SPDX-License-Identifier: CC0-1.0 */
const uploadField = document.getElementById("fileupload");
uploadField.onchange = function() {
if(this.files[0].size > {{max_file_size}}) {
alert("File exceeds {{max_file_size}} bytes. Either submit a smaller file, or use a file hosting service and submit the URL.");
this.value = "";
}
};
</script>
</body>
</html>
|
