feat(page): /members — editorial masthead
Header: MEMBERS eyebrow, serif italic 'The council.', subtitle pitched at
'an invited circle of operators' — no number, no seat count anywhere.
One row per cab user, ordered by member_number asc. Three-column grid
(60px / 1fr / 130px, 18px gap) with 0.5px bottom borders. Avatar uses the
deterministic id-pigment palette; the same id always yields the same
colour across the portal.
Body column: serif italic name; if the row belongs to the signed-in user,
a small uppercase tracked 'You' tag in terracotta. One metadata line —
title · organisation · Member since {month year} — title is dropped if
null. The pull-quote block is only rendered when pull_quote is non-null;
its 2px left border is the user's pigment at 40% opacity (50% on the
signed-in user's own row).
Right column: up to 3 focus-tag pills, vertical right-aligned, tinted in
the same pigment family (15% bg / 100% colour). Empty focus_tags renders
nothing — no placeholder pills.
Signed-in user's row gets a 4% pigment tint and rounded corners; no border
between rows in that case.
No filters, no search, no sort, no header count, no empty-seat row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
243a456880
commit
58faeffbc2
1 changed files with 222 additions and 0 deletions
222
src/pages/members.astro
Normal file
222
src/pages/members.astro
Normal file
|
|
@ -0,0 +1,222 @@
|
||||||
|
---
|
||||||
|
import AppLayout from '../layouts/AppLayout.astro';
|
||||||
|
import Avatar from '../components/Avatar.astro';
|
||||||
|
import { getAllCabMembers } from '../lib/db';
|
||||||
|
import { pigmentForId, readFocusTags } from '../lib/format';
|
||||||
|
|
||||||
|
const user = Astro.locals.user;
|
||||||
|
const members = getAllCabMembers();
|
||||||
|
|
||||||
|
function memberSinceLabel(member: { cab_joined_date: string | null; created_at: string }): string {
|
||||||
|
const iso = member.cab_joined_date ?? member.created_at;
|
||||||
|
const normalised = iso.includes('T') ? iso : iso.replace(' ', 'T') + 'Z';
|
||||||
|
return new Intl.DateTimeFormat('en-GB', {
|
||||||
|
month: 'long', year: 'numeric', timeZone: 'Europe/Copenhagen',
|
||||||
|
}).format(new Date(normalised));
|
||||||
|
}
|
||||||
|
---
|
||||||
|
<AppLayout title="Members" user={user}>
|
||||||
|
<div class="page">
|
||||||
|
|
||||||
|
<header class="members-head">
|
||||||
|
<p class="label-sm members-eyebrow">Members</p>
|
||||||
|
<h1 class="members-title"><em>The council.</em></h1>
|
||||||
|
<p class="members-sub">
|
||||||
|
An invited circle of operators shaping what Project Bifrost becomes.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<hr class="members-rule" />
|
||||||
|
|
||||||
|
<ul class="members-list" aria-label="Council members">
|
||||||
|
{members.map(m => {
|
||||||
|
const pigment = pigmentForId(m.id);
|
||||||
|
const tags = readFocusTags(m.focus_tags);
|
||||||
|
const isMe = m.id === user.id;
|
||||||
|
const metaParts = [m.title, m.organisation, `Member since ${memberSinceLabel(m)}`].filter(Boolean);
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
class:list={['m-row', { 'm-row--me': isMe }]}
|
||||||
|
style={`--row-pigment: ${pigment.token}; --row-pigment-hex: ${pigment.hex};`}
|
||||||
|
>
|
||||||
|
<div class="m-col-avatar">
|
||||||
|
<Avatar id={m.id} name={m.name} size={52} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-col-body">
|
||||||
|
<h2 class="m-name">
|
||||||
|
<span class="m-name-text">{m.name}</span>
|
||||||
|
{isMe && <span class="m-you label-sm">You</span>}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="m-meta">{metaParts.join(' · ')}</p>
|
||||||
|
|
||||||
|
{m.pull_quote && (
|
||||||
|
<blockquote class="m-quote">{m.pull_quote}</blockquote>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tags.length > 0 && (
|
||||||
|
<ul class="m-tags" aria-label="Focus areas">
|
||||||
|
{tags.map(t => <li class="m-tag">{t}</li>)}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{members.length === 0 && (
|
||||||
|
<li class="m-empty body-md">The council is still being formed.</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.page {
|
||||||
|
padding: var(--space-12) var(--space-20) var(--space-16);
|
||||||
|
max-width: var(--content-max);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-head { margin-bottom: var(--space-6); max-width: 46rem; }
|
||||||
|
|
||||||
|
.members-eyebrow {
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-title {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: var(--text-display-md);
|
||||||
|
letter-spacing: var(--tracking-tight);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.members-title em { font-style: italic; }
|
||||||
|
|
||||||
|
.members-sub {
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
margin-top: var(--space-3);
|
||||||
|
max-width: 29rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-rule {
|
||||||
|
border: none;
|
||||||
|
height: 0.5px;
|
||||||
|
background: var(--surface-card-border);
|
||||||
|
margin: 0 0 var(--space-8) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 60px 1fr 130px;
|
||||||
|
gap: 18px;
|
||||||
|
padding: var(--space-5) var(--space-3);
|
||||||
|
border-bottom: 0.5px solid var(--surface-card-border);
|
||||||
|
align-items: start;
|
||||||
|
transition: background var(--duration-fast) var(--ease-standard);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-row--me {
|
||||||
|
background: color-mix(in oklab, var(--row-pigment) 4%, transparent);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-col-avatar { display: flex; justify-content: center; padding-top: 2px; }
|
||||||
|
.m-col-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
|
||||||
|
|
||||||
|
.m-name {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.375rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--on-surface);
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-you {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: var(--tracking-wider);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--pigment-terracotta);
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-meta {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-quote {
|
||||||
|
margin: var(--space-2) 0 0;
|
||||||
|
padding-left: 12px;
|
||||||
|
border-left: 2px solid color-mix(in oklab, var(--row-pigment) 40%, transparent);
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: var(--on-surface);
|
||||||
|
max-width: 38rem;
|
||||||
|
}
|
||||||
|
.m-row--me .m-quote {
|
||||||
|
border-left-color: color-mix(in oklab, var(--row-pigment) 50%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-tags {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.m-tag {
|
||||||
|
background: color-mix(in oklab, var(--row-pigment) 15%, transparent);
|
||||||
|
color: var(--row-pigment);
|
||||||
|
padding: 3px 9px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-size: var(--text-label-sm);
|
||||||
|
letter-spacing: var(--tracking-wide);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-empty {
|
||||||
|
color: var(--on-surface-muted);
|
||||||
|
padding: var(--space-6) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.m-row { grid-template-columns: 52px 1fr; }
|
||||||
|
.m-tags {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue