← back to Bubbesblock
public/post.html
87 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Post</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="hdr"></div>
<div class="wrap">
<div id="left"></div>
<main class="col-center" id="main"></main>
<div id="right"></div>
</div>
<script>window.__bbAutoInit = false;</script>
<script src="/chrome.js"></script>
<script src="/app.js"></script>
<script>
const parts = location.pathname.split('/').filter(Boolean);
const id = (parts[0]==='p' && parts[1]) ? parts[1] : new URLSearchParams(location.search).get('id');
// global so app.js can append a freshly-posted comment
window.renderComment = function (c){
return `<div class="cmt${c.reply?' reply':''}">
<span class="ava ${c.color}" style="width:36px;height:36px;font-size:${c.reply?13:14}px">${c.initials}</span>
<div>
<div class="bub"><b>${c.author}</b> <span class="nb">· ${c.nb||''}</span><p>${c.body}</p></div>
<div class="meta"><span>${c.time}</span><a data-react="comment:${c.id}">Thank <span class="cnt">${c.thanks||''}</span></a><a data-reply="${id}">Reply</a></div>
</div>
</div>`;
};
fetch('/api/posts/'+encodeURIComponent(id), { credentials:'same-origin' }).then(r=>{
if(!r.ok) throw new Error('not found'); return r.json();
}).then(d=>{
const p = d.post;
document.title = `BubbesBlock — ${p.author}`;
document.getElementById('hdr').innerHTML = topbar(d.me);
document.getElementById('left').innerHTML = leftRail(d.me);
document.getElementById('right').innerHTML = rightRail(d.me);
const cmts = (p.comments||[]).map(window.renderComment).join('');
document.getElementById('main').innerHTML = `
<div class="backbar"><a href="/">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
Back to Block Feed</a></div>
<article class="card">
<div class="post">${postHead(p)}${postBody(p)}</div>
${photoBlock(p.photo)}
${statRow(p, (p.comments?p.comments.length:0)+(p.moreComments||0))}
${actionBar(p.id, p.youThanked, p.thanks)}
<div class="comments">
<div class="compose">
<span class="ava ${d.me.color}" style="width:36px;height:36px;font-size:13px">${d.me.initials}</span>
<div class="field">
<input id="bb-comment-input" placeholder="Add a neighborly reply…" />
<button id="bb-comment-send" title="Send"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg></button>
</div>
</div>
<div id="bb-comments">${cmts}</div>
${p.moreComments ? `<div class="morecmt" id="bb-morecmt">View ${p.moreComments} more comments</div>` : ''}
</div>
</article>`;
// wire comment send (button + Enter)
const input = document.getElementById('bb-comment-input');
const send = () => BB.sendComment(id, input, false);
document.getElementById('bb-comment-send').onclick = send;
input.addEventListener('keydown', e => { if (e.key === 'Enter') send(); });
const mc = document.getElementById('bb-morecmt');
if (mc) mc.onclick = async () => {
const r = await BB.api.get(`/api/posts/${id}/comments`);
document.getElementById('bb-comments').innerHTML = r.comments.map(window.renderComment).join('');
mc.remove();
};
BB.init();
}).catch(()=>{
document.getElementById('hdr').innerHTML = '';
document.getElementById('main').innerHTML = '<div class="card"><div class="post"><b>Post not found.</b><br><a href="/" style="color:var(--green-dark);font-weight:700">← Back to the block feed</a></div></div>';
});
</script>
</body>
</html>