jxherc · jxherc · May 6, 2026 · May 6, 2026 · May 6, 2026
diff --git a/_admin/guestbook.html b/_admin/guestbook.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>guestbook — admin</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<main>
+  <header style="display:flex;align-items:baseline;justify-content:space-between;">
+    <a href="index.html" style="font-size:0.72rem;color:var(--muted);">← admin</a>
+    <div class="brand" style="font-size:0.78rem;">guestbook</div>
+  </header>
+
+  <section>
+    <div class="label">pending <span id="pending-count" style="color:var(--faint);font-size:0.6rem;letter-spacing:0.05em"></span></div>
+    <div class="item-list" id="pending-list">
+      <div style="color:var(--muted);font-size:0.8rem;font-style:italic;">loading…</div>
+    </div>
+  </section>
+
+  <section>
+    <div class="label">approved <span id="approved-count" style="color:var(--faint);font-size:0.6rem;letter-spacing:0.05em"></span></div>
+    <div class="item-list" id="approved-list">
+      <div style="color:var(--muted);font-size:0.8rem;font-style:italic;">loading…</div>
+    </div>
+  </section>
+</main>
+
+<script type="module">
+  import { requireLogin, apiFetch, fmt, msg } from './admin.js';
+  requireLogin();
+
+  async function loadEntries() {
+    const res  = await apiFetch('/guestbook?all=1');
+    const data = await res.json();
+    const all  = data.entries || [];
+
+    const pending  = all.filter(e => !e.approved);
+    const approved = all.filter(e => e.approved);
+
+    document.getElementById('pending-count').textContent  = pending.length  + ' total';
+    document.getElementById('approved-count').textContent = approved.length + ' total';
+
+    renderList('pending-list',  pending,  false);
+    renderList('approved-list', approved, true);
+  }
+
+  function renderList(id, entries, isApproved) {
+    const el = document.getElementById(id);
+    if (!entries.length) {
+      el.innerHTML = `<div style="color:var(--muted);font-size:0.8rem;font-style:italic;">${isApproved ? 'none yet.' : 'nothing pending.'}</div>`;
+      return;
+    }
+    el.innerHTML = entries.map(e => `
+      <div class="item-row" id="row-${e.id}">
+        <div class="item-body">
+          <div class="item-title">${esc(e.name)}</div>
+          <div style="font-size:0.82rem;color:var(--muted);margin-top:0.2rem;line-height:1.55">${esc(e.message)}</div>
+          <div class="item-meta">${fmt(e.date)}</div>
+        </div>
+        <div class="item-actions">
+          ${!isApproved ? `<button class="btn primary" onclick="approve('${e.id}')">approve</button>` : ''}
+          <button class="btn danger" onclick="del('${e.id}')">delete</button>
+        </div>
+      </div>
+    `).join('');
+  }
+
+  function esc(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  window.approve = async id => {
+    await apiFetch(`/guestbook/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ approved: true }) });
+    loadEntries();
+  };
+
+  window.del = async id => {
+    if (!confirm('delete this entry?')) return;
+    await apiFetch(`/guestbook/${id}`, { method: 'DELETE' });
+    document.getElementById(`row-${id}`)?.remove();
+  };
+
+  loadEntries();
+</script>
+</body>
+</html>
diff --git a/_admin/index.html b/_admin/index.html
@@ -32,6 +32,7 @@
       <a class="section-card" href="status.html"><span>now status</span><span class="arrow">→</span></a>
       <a class="section-card" href="bookmarks.html"><span>bookmarks</span><span class="arrow">→</span></a>
       <a class="section-card" href="photos.html"><span>photos</span><span class="arrow">→</span></a>
+      <a class="section-card" href="guestbook.html"><span>guestbook</span><span class="arrow">→</span></a>
     </div>
   </section>
 </main>

diff --git a/_api/src/index.js b/_api/src/index.js
@@ -4,6 +4,7 @@ import { handleStatus }    from './routes/status.js';
 import { handleBookmarks } from './routes/bookmarks.js';
 import { handlePhotos }    from './routes/photos.js';
 import { handleDiscord }   from './routes/discord.js';
+import { handleGuestbook } from './routes/guestbook.js';
 import { cors, corsHeaders } from './lib/cors.js';
 
 export default {
@@ -27,6 +28,8 @@ export default {
       response = await handlePhotos(request, env, path);
     else if (path === '/discord' || path.startsWith('/discord/'))
       response = await handleDiscord(request, env);
+    else if (path === '/guestbook' || path.startsWith('/guestbook/'))
+      response = await handleGuestbook(request, env, path);
     else
       response = new Response('not found', { status: 404 });
 

diff --git a/_api/src/routes/guestbook.js b/_api/src/routes/guestbook.js
@@ -0,0 +1,53 @@
+import { requireAuth } from '../lib/auth.js';
+import { json } from '../lib/json.js';
+
+export async function handleGuestbook(request, env, path) {
+  const method = request.method;
+  const id     = path.split('/')[2] || null;
+
+  if (method === 'GET') {
+    const wantsAll = new URL(request.url).searchParams.get('all') === '1';
+    if (wantsAll) {
+      const denied = await requireAuth(request, env);
+      if (denied) return denied;
+    }
+    const list  = await env.GUESTBOOK_KV.list({ prefix: 'gb:' });
+    const items = await Promise.all(
+      list.keys
+        .sort((a, b) => b.name.localeCompare(a.name))
+        .map(k => env.GUESTBOOK_KV.get(k.name, 'json'))
+    );
+    const entries = items.filter(Boolean).filter(e => wantsAll || e.approved);
+    return json({ entries });
+  }
+
+  if (method === 'POST') {
+    const body    = await request.json().catch(() => ({}));
+    const name    = String(body.name    || '').trim().slice(0, 60);
+    const message = String(body.message || '').trim().slice(0, 500);
+    if (!name || !message) return json({ error: 'name and message required' }, 400);
+    const ts   = Date.now();
+    const entry = { id: `${ts}`, name, message, approved: false, date: new Date(ts).toISOString() };
+    await env.GUESTBOOK_KV.put(`gb:${ts}`, JSON.stringify(entry));
+    return json({ ok: true }, 201);
+  }
+
+  const denied = await requireAuth(request, env);
+  if (denied) return denied;
+
+  if (method === 'PUT' && id) {
+    const existing = await env.GUESTBOOK_KV.get(`gb:${id}`, 'json');
+    if (!existing) return json({ error: 'not found' }, 404);
+    const body  = await request.json().catch(() => ({}));
+    const entry = { ...existing, ...body, id: existing.id, date: existing.date };
+    await env.GUESTBOOK_KV.put(`gb:${id}`, JSON.stringify(entry));
+    return json(entry);
+  }
+
+  if (method === 'DELETE' && id) {
+    await env.GUESTBOOK_KV.delete(`gb:${id}`);
+    return json({ ok: true });
+  }
+
+  return json({ error: 'not found' }, 404);
+}
diff --git a/_api/wrangler.toml b/_api/wrangler.toml
@@ -18,6 +18,10 @@ id = "REPLACE_WITH_BOOKMARKS_KV_ID"
 binding = "PHOTOS_KV"
 id = "REPLACE_WITH_PHOTOS_KV_ID"
 
+[[kv_namespaces]]
+binding = "GUESTBOOK_KV"
+id = "REPLACE_WITH_GUESTBOOK_KV_ID"
+
 [[r2_buckets]]
 binding = "PHOTOS_R2"
 bucket_name = "jxherc-photos"

diff --git a/guestbook.html b/guestbook.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>guestbook — jxherc</title>
+<link rel="icon" type="image/svg+xml" href="favicon.svg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css?v=19">
+<script>const t=localStorage.getItem('theme');if(t)document.documentElement.dataset.theme=t;</script>
+<meta property="og:title" content="guestbook — jxherc">
+<meta property="og:description" content="leave a message">
+<meta property="og:image" content="og-image.png">
+<meta name="twitter:card" content="summary_large_image">
+</head>
+<body>
+<button class="theme-toggle" id="theme-toggle" aria-label="toggle light mode">◐</button>
+<div class="meme-overlay" id="meme-overlay">
+  <div class="meme-box">
+    <img class="meme-img" src="images/spongebob-eyes.jpg" alt="spongebob my eyes meme" />
+    <p class="meme-text">are you absolutely motherfucking sure you wanna switch to light mode</p>
+    <button class="meme-confirm" id="meme-confirm">yes i am sure</button>
+    <button class="meme-cancel" id="meme-cancel">nevermind</button>
+  </div>
+</div>
+
+<main>
+  <a class="home" href="index.html">jxherc</a>
+
+  <section>
+    <div class="label">leave a note</div>
+    <form class="gb-form" id="gb-form">
+      <div class="gb-field">
+        <label class="gb-label" for="gb-name">name</label>
+        <input class="gb-input" id="gb-name" type="text" placeholder="your name" maxlength="60" required autocomplete="off">
+      </div>
+      <div class="gb-field">
+        <label class="gb-label" for="gb-message">message</label>
+        <textarea class="gb-input gb-textarea" id="gb-message" placeholder="say something" maxlength="500" required></textarea>
+      </div>
+      <div class="gb-actions">
+        <button class="gb-submit" type="submit" id="gb-submit">leave a note →</button>
+        <span class="gb-status" id="gb-status"></span>
+      </div>
+    </form>
+  </section>
+
+  <section>
+    <div class="label">entries <span class="live-stamp" id="entry-count"></span></div>
+    <div id="gb-entries"><div style="color:var(--muted)">loading…</div></div>
+  </section>
+
+  <section class="page-edit-stamp" id="edit-stamp">—</section>
+</main>
+
+<script>
+const API = 'https://api.jxherc.com';
+
+function esc(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+async function loadEntries() {
+  const el = document.getElementById('gb-entries');
+  try {
+    const res = await fetch(API + '/guestbook');
+    const data = await res.json();
+    const entries = data.entries || data || [];
+    document.getElementById('entry-count').textContent = entries.length + ' total';
+    if (!entries.length) { el.innerHTML = '<div style="color:var(--muted)">no entries yet — be the first!</div>'; return; }
+    el.innerHTML = entries.map(e => {
+      const date = new Date(e.date).toLocaleDateString('en-CA', { month:'short', day:'numeric', year:'numeric' }).toLowerCase();
+      return `<div style="padding:0.85rem 0;border-bottom:1px solid var(--faint)">
+        <div style="display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:0.3rem">
+          <span style="font-size:0.8rem;font-weight:500">${esc(e.name)}</span>
+          <span style="font-size:0.65rem;color:var(--faint);letter-spacing:0.04em;flex-shrink:0">${date}</span>
+        </div>
+        <div style="font-size:0.85rem;color:var(--muted);line-height:1.55">${esc(e.message)}</div>
+      </div>`;
+    }).join('');
+  } catch { el.innerHTML = '<div style="color:var(--muted)">failed to load entries.</div>'; }
+}
+
+document.getElementById('gb-form').addEventListener('submit', async ev => {
+  ev.preventDefault();
+  const name    = document.getElementById('gb-name').value.trim();
+  const message = document.getElementById('gb-message').value.trim();
+  const btn     = document.getElementById('gb-submit');
+  const status  = document.getElementById('gb-status');
+
+  btn.disabled = true;
+  btn.textContent = 'sending…';
+  status.textContent = '';
+
+  try {
+    const res = await fetch(API + '/guestbook', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, message }),
+    });
+    if (!res.ok) throw new Error();
+    btn.textContent = 'sent!';
+    status.textContent = 'pending approval — thanks!';
+    document.getElementById('gb-name').value = '';
+    document.getElementById('gb-message').value = '';
+    setTimeout(() => { btn.disabled = false; btn.textContent = 'leave a note →'; status.textContent = ''; }, 5000);
+  } catch {
+    status.textContent = 'something went wrong. try again.';
+    btn.disabled = false;
+    btn.textContent = 'leave a note →';
+  }
+});
+
+loadEntries();
+fetch('https://api.github.com/repos/jxherc/website/commits?path=guestbook.html&per_page=1')
+  .then(r=>r.json()).then(data=>{const c=data[0]?.commit;if(!c)return;const d=new Date(c.committer?.date||c.author?.date);if(isNaN(d))return;const date=d.toLocaleDateString('en-CA',{month:'short',day:'numeric',year:'numeric'}).toLowerCase();const msg=(c.message||'').split('\n')[0].replace(/\s*https?:\/\/\S+/g,'').trim();document.getElementById('edit-stamp').textContent='page last edited '+date+(msg?' · '+msg:'');}).catch(()=>{});
+</script>
+<script src="theme.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -80,6 +80,10 @@
       <span class="title">bookmarks</span>
       <span class="enter">→</span>
     </a>
+    <a class="music-card" href="guestbook.html">
+      <span class="title">guestbook</span>
+      <span class="enter">→</span>
+    </a>
   </section>
 
   <section>

diff --git a/style.css b/style.css
@@ -383,6 +383,42 @@ a.kv-row:hover .arrow { transform: translate(3px, -3px); color: var(--muted); }
   line-height: 1.55;
 }
 
+/* =================== GUESTBOOK =================== */
+.gb-form { display: flex; flex-direction: column; gap: 1rem; }
+.gb-field { display: flex; flex-direction: column; gap: 0.35rem; }
+.gb-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; font-weight: 500; }
+.gb-input {
+  background: none;
+  border: 1px solid var(--faint);
+  border-radius: 2px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 0.875rem;
+  padding: 0.6rem 0.75rem;
+  transition: border-color 0.2s ease;
+  outline: none;
+  width: 100%;
+}
+.gb-input::placeholder { color: var(--faint); }
+.gb-input:focus { border-color: var(--muted); }
+.gb-textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
+.gb-actions { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
+.gb-submit {
+  background: none;
+  border: 1px solid var(--faint);
+  border-radius: 2px;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+.gb-submit:hover:not(:disabled) { border-color: var(--muted); color: var(--text); }
+.gb-submit:disabled { opacity: 0.5; cursor: default; }
+.gb-status { font-size: 0.72rem; color: var(--faint); }
+
 /* Page edit stamp */
 .page-edit-stamp {
   font-size: 0.62rem;