add: templating

3 files changed, 55 insertions, 0 deletions

diff --git a/twt.gumx.cc/body.html b/twt.gumx.cc/body.html
new file mode 100644
index 0000000..7f3adc3
--- /dev/null
+++ b/twt.gumx.cc/body.html
@@ -0,0 +1,49 @@
+<p>
+<a href="/twtxt.txt">twtxt.txt</a> /
+follow: <code>twtxt follow gumx https://twt.gumx.cc/twtxt.txt</code>
+</p>
+<div id="feed"></div>
+
+<script>
+async function loadFeed() {
+    const feed = document.getElementById('feed');
+    try {
+        const res = await fetch('/twtxt.txt');
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        const text = await res.text();
+        const lines = text.split('\n')
+            .filter(l => l && !l.startsWith('#'))
+            .map(l => {
+                const tab = l.indexOf('\t');
+                if (tab === -1) return null;
+                return { time: l.slice(0, tab), text: l.slice(tab + 1) };
+            })
+            .filter(Boolean)
+            .reverse();
+
+        if (lines.length === 0) {
+            feed.innerHTML = '<p id="error">no twts yet.</p>';
+            return;
+        }
+
+        feed.innerHTML = lines.map(t => {
+            const d = new Date(t.time);
+            const dateStr = d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+            const timeStr = d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+            return `<div class="twt">
+<hr>
+<span class="twt-time">${dateStr} ${timeStr}</span>
+<span class="twt-text">${escapeHtml(t.text)}</span>
+</div>`;
+        }).join('');
+    } catch (e) {
+        feed.innerHTML = '<p id="error">could not load feed.</p>';
+    }
+}
+
+function escapeHtml(s) {
+    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+loadFeed();
+</script>
diff --git a/twt.gumx.cc/extra.css b/twt.gumx.cc/extra.css
new file mode 100644
index 0000000..39c27d7
--- /dev/null
+++ b/twt.gumx.cc/extra.css
@@ -0,0 +1,4 @@
+.twt { margin: 1.5em 0 0 0; }
+.twt-time { font-size: 0.85em; opacity: 0.6; display: block; }
+.twt-text { display: block; margin-top: 0.25em; }
+#error { opacity: 0.5; }
diff --git a/twt.gumx.cc/meta b/twt.gumx.cc/meta
new file mode 100644
index 0000000..1721f95
--- /dev/null
+++ b/twt.gumx.cc/meta
@@ -0,0 +1,2 @@
+TITLE="twt.gumx.cc"
+BREADCRUMB="twt"