Central platform for European atproto.<cc> country community websites
Something went wrong. Try again.
3.8 kB · 95 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596---// The atproto.eu network: the sibling national sites this codebase builds (everything except the// .eu aggregate itself), each //atproto.<cc> wordmark in its own country accent. Shown only on the// aggregate (see HomePage). Each opens its national site in a new tab.import Wordmark from './Wordmark.astro';import { SCOPES, type AccentPack } from '../config/scopes';import { useTranslations, type Lang } from '../i18n/ui';
interface Props { lang: Lang;}const { lang } = Astro.props;const t = useTranslations(lang);
interface NetSite { cc: string; accent: AccentPack; // primary (slash 1 + dot) accent2: AccentPack; // secondary (slash 2) url: string; live: boolean; // false -> DNS not pointed yet: rendered as a dimmed, non-linked entry}
// Every atproto.<cc> site this codebase builds as a full scope, except the aggregate itself. Each// carries its own two-colour pair, resolved via data-accent/data-accent2 below.const built: NetSite[] = Object.values(SCOPES) .filter((s) => !s.aggregate) .map((s) => ({ cc: s.cc, accent: s.accent, accent2: s.accent2, url: s.site, live: true }));
// Family sites NOT built as full scopes here — friendly external communities on their own design,// or ours-but-not-yet-scoped. Given the two-colour lockup so they still read as one of us. `live`// gates a dimmed non-linked state for a domain whose DNS isn't pointed yet. Deduped against real// scopes, so an entry drops out automatically once its cc becomes a built scope.const PLANNED: NetSite[] = [ // atproto.fr — an existing, friendly French community (their own design). French flag blue + red. { cc: 'fr', accent: 'cobalt', accent2: 'red', url: 'https://atproto.fr/', live: true },];
const builtCcs = new Set(built.map((s) => s.cc));const sites: NetSite[] = [...built, ...PLANNED.filter((p) => !builtCcs.has(p.cc))];
// Fisher–Yates shuffle, once per build (same pattern as the member strip in home.ts): the order is// random per deploy so no country ever reads as ranked or featured.for (let i = sites.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [sites[i], sites[j]] = [sites[j], sites[i]];}---
<nav class="section network" aria-label={t('network.heading')}> <ul class="network-list"> {sites.map((s) => ( <li data-accent={s.accent} data-accent2={s.accent2}> {s.live ? ( <a class="network-item" href={s.url} target="_blank" rel="noopener"> <Wordmark cc={s.cc} class="network-mark" /> </a> ) : ( <span class="network-item is-soon" title="Coming soon"> <Wordmark cc={s.cc} class="network-mark" /> </span> )} </li> ))} </ul></nav>
<style> /* A single quiet band of the family, framed by the section rules above and below. */ .network { padding-block: var(--space-11); } .network-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-11); } .network-item { display: inline-flex; text-decoration: none; /* The wordmark's own accent (per-country via data-accent on the <li>) already carries the colour; the whole lockup lifts to inkstrong on hover/focus for the affordance. */ } .network-mark { font-size: clamp(1.5rem, 3.5vw, 2.25rem); transition: opacity 0.12s ease; } a.network-item:hover .network-mark, a.network-item:focus-visible .network-mark { opacity: 0.72; } .network-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } /* Not-yet-live sites (DNS unpointed): shown but visibly inert, no link. */ .is-soon { cursor: default; } .is-soon .network-mark { opacity: 0.4; }</style>