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
98
99
100
/** @jsxImportSource npm:hono@3/jsx */
import { Filter } from "https://esm.sh/content-checker@1.1.3";
import valTownBadge from "https://esm.town/v/jxnblk/valTownBadgeMiddleware";
import { Hono } from "npm:hono@3";
const app = new Hono();
const apiKey = Deno.env.get("OPEN_MODERATOR_API_KEY");
if (!apiKey) {
console.error("API key not set. Please set the OPEN_MODERATOR_API_KEY environment variable.");
} else {
console.log("API key is set.");
}
const filter = new Filter({ openModeratorAPIKey: apiKey });
app.get("/", (c) => {
const userIP = c.req.headers.get("x-forwarded-for") || c.req.headers.get("remote_addr") || "anonymous";
const messages = JSON.parse(localStorage.getItem(userIP) || "[]");
return c.html(
<>
<head>
<title>Safe(r) Message Board</title>
<script>
{`
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', async function(event) {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/', {
method: 'POST',
body: formData,
});
const text = await response.text();
document.body.innerHTML = text;
const newScript = document.createElement('script');
newScript.innerHTML = \`
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', async function(event) {
event.preventDefault();
const formData = new FormData(form);
const response = await fetch('/', {
method: 'POST',
body: formData,
});
const text = await response.text();
document.body.innerHTML = text;
});
});
\`;
document.body.appendChild(newScript);
});
// Load messages from localStorage and render them
const messages = JSON.parse(localStorage.getItem('${userIP}') || '[]');
const messageList = document.getElementById('message-list');
messageList.innerHTML = '';
messages.forEach((msg, index) => {
const li = document.createElement('li');
li.innerHTML = \`<p>\${msg.prompt}</p><p>\${JSON.stringify(msg.response)}</p>\`;
messageList.appendChild(li);
});
});
`}
</script>
</head>
<body>
<main>
<h1>Safe Message Board</h1>
<p>
This message board uses <a href="https://www.npmjs.com/package/content-checker">content-checker</a>{" "}
to sanitize your messages. Do your worst!
</p>
<form method="POST">
<label>
Your Message:
<input type="text" name="content" required />
</label>
<button type="submit">Submit</button>
</form>
<section>
<h2>Your Messages</h2>
<ul id="message-list">
{messages.map((msg, index) => (
<li key={index}>
<p>{msg.prompt}</p>
<p>{JSON.stringify(msg.response)}</p>
</li>
))}
</ul>
</section>
</main>
</body>
</>,
);
});