← back to Designer Line
public/community.html
64 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>community · designerline</title>
<style>
:root { --ink:#0e0e0c; --ink-mute:#6e6e68; --paper:#faf8f2; --line:#d9d4c5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: ui-serif, Georgia, serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid var(--line); }
header .mark { font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
header nav a { color:var(--ink-mute); text-decoration:none; font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-left:24px; }
header nav a:hover { color:var(--ink); }
main { max-width:840px; margin:48px auto 96px; padding:0 28px; }
h1 { font-weight:500; font-size:36px; letter-spacing:-0.01em; margin:0 0 12px; }
.lede { color:var(--ink-mute); font-size:15px; line-height:1.5; margin:0 0 40px; }
article.item { border-top:1px solid var(--line); padding:24px 0; display:flex; gap:20px; align-items:flex-start; }
article.item:last-child { border-bottom:1px solid var(--line); }
.kind { flex-shrink:0; width:96px; font-family:ui-sans-serif,system-ui,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); padding-top:4px; }
.kind.townhall { color:#7a1b1b; }
.body h2 { font-weight:500; font-size:20px; margin:0 0 6px; line-height:1.3; }
.body .ts { font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.08em; color:var(--ink-mute); }
footer { padding:32px 28px 48px; color:var(--ink-mute); font-size:11px; font-family:ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; text-align:center; border-top:1px solid var(--line); margin-top:48px; }
</style>
</head>
<body>
<header>
<a href="/" style="text-decoration:none;color:var(--ink);"><span class="mark">designerline</span></a>
<nav>
<a href="/commerce.html">commerce</a>
<a href="/advocacy.html">advocacy</a>
<a href="/community.html" style="color:var(--ink);">community</a>
</nav>
</header>
<main>
<h1>The trade feed.</h1>
<p class="lede">Vendor announcements, archive acquisitions, regulatory filings, monthly town halls. Curated from 30 years of trade history.</p>
<div id="feed"></div>
</main>
<footer>community · designerline v0.1 · feed scaffold (static seed)</footer>
<script>
async function load() {
const data = await (await fetch('/api/community/feed')).json();
document.getElementById('feed').innerHTML = (data.items||[]).map(i => `
<article class="item">
<div class="kind ${i.kind}">${i.kind}</div>
<div class="body">
<h2>${escapeHTML(i.title)}</h2>
<div class="ts">${fmtDate(i.ts)}</div>
</div>
</article>
`).join('');
}
function fmtDate(iso){ try { return new Date(iso).toLocaleString('en-US',{ month:'short', day:'numeric', year:'numeric', hour:'numeric', minute:'2-digit' }); } catch { return iso; } }
function escapeHTML(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));}
load();
</script>
</body>
</html>