Add support for a private notepad

1 files changed, 32 insertions, 0 deletions

diff --git a/templates/note.html.template b/templates/note.html.template
new file mode 100644
index 0000000..eac0e02
--- /dev/null
+++ b/templates/note.html.template
@@ -0,0 +1,32 @@
+{{define "head"}}
+<script src="/static/htmx.min.js"></script>
+<title>Notepad</title>
+
+<meta name="viewport" content="interactive-widget=resizes-content"> <!-- https://stackoverflow.com/q/76026292 -->
+{{end}}
+
+<form method="post">
+	<div class="save-indicator-container">
+		{{block "saveIndicator" ""}}
+		<span id="save-indicator">{{.}}</span>
+		{{end}}
+		<noscript><input type="submit" value="Save"></noscript>
+	</div>
+	<div class="content-container">
+		<textarea
+				name="content"
+				hx-post="/notepad/autosave"
+				hx-on:input="
+					const indicator = htmx.find('#save-indicator');
+					htmx.addClass(indicator, 'htmx-indicator');
+					indicator.innerHTML = 'Saving...';
+				"
+				hx-trigger="input delay:1s"
+				hx-indicator="#save-indicator"
+				hx-target="#save-indicator"
+				hx-swap="outerHTML"
+				autofocus>
+			{{- .Content -}}
+		</textarea>
+	</div>
+</form>