lew/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use prompt dialogs for guestbook instead of form

Browse source
This commit is contained in:
Lewis Wynne 2026-01-23 04:20:20 +00:00
parent 3600897f4b
commit d7b1dd365e
2 changed files with 19 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

38
apps/blog/src/pages/index.astro
View file

@ -89,42 +89,40 @@ function extractDomain(url: string): string {
<details open> <details open>
<summary>guestbook</summary> <summary>guestbook</summary>
<pre set:html={guestbookEntries.length > 0 <pre set:html={[
? guestbookEntries.map(e => `<span class="muted">${formatDate(e.createdAt)}</span> ${e.url ? `<a href="${e.url}">${e.name}</a>` : e.name}: ${e.message}`).join('\n') ...guestbookEntries.map(e => `<span class="muted">${formatDate(e.createdAt)}</span> ${e.url ? `<a href="${e.url}">${e.name}</a>` : e.name}: ${e.message}`),
: '<span class="muted">no entries yet</span>'} /> '',
<form id="guestbook-form"> '<a href="#" id="sign-guestbook">sign</a><span id="guestbook-status"></span>'
<input type="text" name="name" placeholder="name" required maxlength="100" /> ].join('\n')} />
<input type="text" name="url" placeholder="url (optional)" maxlength="200" />
<textarea name="message" placeholder="message" required maxlength="500"></textarea>
<button type="submit">sign</button>
</form>
<div id="guestbook-status"></div>
</details> </details>
<script> <script>
const form = document.getElementById('guestbook-form') as HTMLFormElement; document.getElementById('sign-guestbook')?.addEventListener('click', async (e) => {
e.preventDefault();
const status = document.getElementById('guestbook-status')!; const status = document.getElementById('guestbook-status')!;
form.addEventListener('submit', async (e) => { const name = prompt('name:');
e.preventDefault(); if (!name) return;
const data = Object.fromEntries(new FormData(form));
const message = prompt('message:');
if (!message) return;
const url = prompt('url (optional):');
try { try {
const res = await fetch('/api/guestbook', { const res = await fetch('/api/guestbook', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data), body: JSON.stringify({ name, message, url: url || null }),
}); });
if (res.ok) { if (res.ok) {
status.textContent = 'thanks! your message is pending approval.'; status.textContent = ' thanks! pending approval.';
form.reset();
} else { } else {
const err = await res.json(); status.textContent = ' error';
status.textContent = err.error || 'something went wrong';
} }
} catch { } catch {
status.textContent = 'failed to submit'; status.textContent = ' failed';
} }
}); });
</script> </script>

14
apps/blog/src/styles/global.css
View file

@ -46,17 +46,3 @@ summary::-webkit-details-marker {
details pre { details pre {
margin: 0; margin: 0;
} }
#guestbook-form {
margin-top: 0.5rem;
}
#guestbook-form input,
#guestbook-form textarea,
#guestbook-form button {
font: inherit;
}
#guestbook-status {
color: #888;
}