Something went wrong. Try again.
Central platform for European atproto.<cc> country community websites
Something went wrong. Try again.
3.0 kB · 90 lines
Astro
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091---import { localeHref } from '../../i18n/paths';import Base from '../../layouts/Base.astro';import MemberCard from '../MemberCard.astro';import { useTranslations, type Lang } from '../../i18n/ui';import { getCommunity } from '../../lib/atproto/home';import { getScope } from '../../config/scopes';
const { lang } = Astro.props as { lang: Lang };const t = useTranslations(lang);const { members } = await getCommunity();const loginHref = localeHref(lang, '/login');const buildersHref = localeHref(lang, '/builders');
// The .eu aggregate has no country of its own, so it can't auto-join: it lets the member pick which// of the communities we run they belong to (one or more). .eu is English-only, so these are inline.const scope = getScope(import.meta.env.PUBLIC_SITE_SCOPE);const pickCountries = [ { cc: 'nl', name: 'Netherlands' }, { cc: 'be', name: 'Belgium' }, { cc: 'no', name: 'Norway' },];---
<Base lang={lang} title={t('members.heading')}> <section class="hero"> <h1 class="display page-title">{t('members.heading')}</h1> <p>{t('members.subtitle')}</p> </section>
<section class="section members-info"> <div class="info-card" id="membership-card" data-label-member={t('members.member.yes')} data-label-leave={t('members.member.leave')} data-label-join={t('members.member.join')} data-pick-prompt="Pick at least one country to join."> <h2>{t('members.join.h')}</h2> <p class="membership-signedout">{t('members.join')}</p> <a class="btn ghost membership-signedout" href={loginHref}>{t('members.join.cta')}</a> {scope.aggregate && ( <fieldset class="membership-picker" hidden> <legend>Which community are you part of? You can pick more than one.</legend> {pickCountries.map((c) => ( <label class="membership-cc"> <input type="checkbox" name="member-cc" value={c.cc} /> {c.name} </label> ))} </fieldset> )} <p class="membership-status" hidden></p> <button class="btn ghost membership-toggle" type="button" hidden></button> </div> <div class="info-card"> <h2>{t('members.hire.h')}</h2> <p>{t('members.hire')}</p> <a class="btn ghost" href={buildersHref}>{t('members.hire.cta')}</a> </div> </section>
<section class="section"> <div class="member-grid"> {members.map((m) => <MemberCard member={m} lang={lang} />)} </div> </section></Base>
<style> .membership-picker { border: 1px solid var(--line, rgba(128, 128, 128, 0.3)); border-radius: 8px; padding: 0.75rem 1rem 1rem; margin: 0.5rem 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .membership-picker legend { padding: 0 0.4rem; font-size: 0.9rem; opacity: 0.85; } .membership-cc { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }</style>