Rebuild the site to the Claude Design drafts
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,247 @@
|
||||
/* ============================================================================
|
||||
MONTH GRID - the events calendar's "Month" view
|
||||
----------------------------------------------------------------------------
|
||||
PURE and client-safe: no Strapi, no `~/lib/env.server`, no React. The same
|
||||
helpers run in the loader (which decides which month to render) and in the
|
||||
component (which draws it), which is what keeps the URL and the grid in
|
||||
step.
|
||||
|
||||
The redesign draft ships a list/month switch for the calendar, and the
|
||||
approved review note asks for exactly that ("Events as a calendar/list
|
||||
toggle plus an individual event page"). The month is a URL parameter -
|
||||
?view=month&month=2026-03 - so a particular month is a shareable link and
|
||||
the arrows are ordinary <a>s that work with scripting off.
|
||||
|
||||
NOTHING HERE INVENTS A DATE. The grid is built from the entries the caller
|
||||
passes in, which come from Strapi; an empty CMS produces an empty month,
|
||||
never a sample event.
|
||||
|
||||
TIME ZONE: every calendar day is resolved in the zone the caller names
|
||||
(the calendar uses Libya time), so an evening event lands on the day it is
|
||||
actually held rather than on whatever day it is in the reader's browser.
|
||||
The arithmetic itself is done on "YYYY-MM-DD" strings through UTC, which has
|
||||
no daylight saving to fall through.
|
||||
========================================================================= */
|
||||
|
||||
/** "YYYY-MM". */
|
||||
export type CalendarMonthKey = string;
|
||||
|
||||
/** "YYYY-MM-DD". */
|
||||
export type CalendarDayKey = string;
|
||||
|
||||
const MONTH_PATTERN = /^(\d{4})-(0[1-9]|1[0-2])$/;
|
||||
const DAY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
|
||||
|
||||
/** Anything that can sit in a day cell. `href` is already localised. */
|
||||
export interface CalendarEntry {
|
||||
readonly id: string;
|
||||
readonly title: string;
|
||||
readonly href: string;
|
||||
/** ISO 8601 instant, or a date-only value when `allDay`. */
|
||||
readonly start: string;
|
||||
readonly end?: string;
|
||||
readonly allDay: boolean;
|
||||
}
|
||||
|
||||
export interface CalendarDay {
|
||||
readonly key: CalendarDayKey;
|
||||
/** 1-31. Padding cells from the neighbouring months keep their own number. */
|
||||
readonly dayNumber: number;
|
||||
readonly inMonth: boolean;
|
||||
readonly isToday: boolean;
|
||||
readonly entries: readonly CalendarEntry[];
|
||||
}
|
||||
|
||||
export interface CalendarMonth {
|
||||
readonly month: CalendarMonthKey;
|
||||
/** First day of the month, for formatting the month's own name. */
|
||||
readonly firstDay: CalendarDayKey;
|
||||
readonly previous: CalendarMonthKey;
|
||||
readonly next: CalendarMonthKey;
|
||||
/**
|
||||
* Weekday numbers in display order, 0 = Sunday, so the component can label
|
||||
* the header row with `Intl` instead of a hard-coded English list.
|
||||
*/
|
||||
readonly weekdays: readonly number[];
|
||||
readonly days: readonly CalendarDay[];
|
||||
/** How many of `entries` actually landed in this month. */
|
||||
readonly entryCount: number;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
PARSING AND ARITHMETIC
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/** "2026-03" from a query parameter, or undefined when it is not one. */
|
||||
export function parseMonthKey(value: string | null | undefined): CalendarMonthKey | undefined {
|
||||
if (typeof value !== "string") return undefined;
|
||||
const trimmed = value.trim();
|
||||
return MONTH_PATTERN.test(trimmed) ? trimmed : undefined;
|
||||
}
|
||||
|
||||
/** The calendar day an instant falls on, read in `timeZone`. */
|
||||
export function calendarDayIn(
|
||||
value: Date | string,
|
||||
timeZone: string,
|
||||
): CalendarDayKey | undefined {
|
||||
if (typeof value === "string" && DAY_PATTERN.test(value.trim())) {
|
||||
// A CMS `date` field is already a calendar day - re-reading it in a zone
|
||||
// would shift it by the offset.
|
||||
return value.trim();
|
||||
}
|
||||
|
||||
const date = value instanceof Date ? value : new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return undefined;
|
||||
|
||||
return new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
/** The month a calendar day belongs to. */
|
||||
export function monthKeyOf(day: CalendarDayKey): CalendarMonthKey {
|
||||
return day.slice(0, 7);
|
||||
}
|
||||
|
||||
function utcOf(day: CalendarDayKey): number {
|
||||
return Date.parse(`${day}T00:00:00Z`);
|
||||
}
|
||||
|
||||
function dayKeyOf(time: number): CalendarDayKey {
|
||||
return new Date(time).toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
/** "2026-03" plus `delta` months, rolling the year over. */
|
||||
export function shiftMonth(
|
||||
month: CalendarMonthKey,
|
||||
delta: number,
|
||||
): CalendarMonthKey {
|
||||
const match = MONTH_PATTERN.exec(month);
|
||||
if (!match) return month;
|
||||
|
||||
const index = Number(match[1]) * 12 + (Number(match[2]) - 1) + delta;
|
||||
const year = Math.floor(index / 12);
|
||||
const zeroBased = index - year * 12;
|
||||
|
||||
return `${String(year).padStart(4, "0")}-${String(zeroBased + 1).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
const MS_PER_DAY = 86_400_000;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
THE GRID
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export interface BuildCalendarOptions {
|
||||
readonly month: CalendarMonthKey;
|
||||
readonly entries: readonly CalendarEntry[];
|
||||
readonly timeZone: string;
|
||||
/** 0 = Sunday … 6 = Saturday. The column the header row starts on. */
|
||||
readonly weekStartsOn: number;
|
||||
/** "Today" as an instant - passed in so the loader and the grid agree. */
|
||||
readonly now: Date;
|
||||
}
|
||||
|
||||
/**
|
||||
* Six weeks of cells, always: a fixed grid never reflows as the reader pages
|
||||
* through the year, and the padding cells carry their real dates so a run of
|
||||
* events across a month boundary stays readable.
|
||||
*/
|
||||
export function buildCalendarMonth({
|
||||
month,
|
||||
entries,
|
||||
timeZone,
|
||||
weekStartsOn,
|
||||
now,
|
||||
}: BuildCalendarOptions): CalendarMonth {
|
||||
const first = `${month}-01`;
|
||||
const firstTime = utcOf(first);
|
||||
const today = calendarDayIn(now, timeZone);
|
||||
|
||||
/* Every day each entry occupies, so a two-day workshop appears twice. */
|
||||
const byDay = new Map<CalendarDayKey, CalendarEntry[]>();
|
||||
for (const entry of entries) {
|
||||
const from = calendarDayIn(entry.start, timeZone);
|
||||
if (!from) continue;
|
||||
|
||||
const to = entry.end ? (calendarDayIn(entry.end, timeZone) ?? from) : from;
|
||||
const start = utcOf(from);
|
||||
const end = Math.max(start, utcOf(to));
|
||||
// A month is 31 cells; a mis-entered end date cannot be allowed to spin.
|
||||
const last = Math.min(end, start + 62 * MS_PER_DAY);
|
||||
|
||||
for (let time = start; time <= last; time += MS_PER_DAY) {
|
||||
const key = dayKeyOf(time);
|
||||
const bucket = byDay.get(key);
|
||||
if (bucket) bucket.push(entry);
|
||||
else byDay.set(key, [entry]);
|
||||
}
|
||||
}
|
||||
|
||||
/* Back up from the first of the month to the column the week starts on. */
|
||||
const firstWeekday = new Date(firstTime).getUTCDay();
|
||||
const lead = (firstWeekday - weekStartsOn + 7) % 7;
|
||||
const gridStart = firstTime - lead * MS_PER_DAY;
|
||||
|
||||
const days: CalendarDay[] = [];
|
||||
let entryCount = 0;
|
||||
|
||||
for (let cell = 0; cell < 42; cell += 1) {
|
||||
const time = gridStart + cell * MS_PER_DAY;
|
||||
const key = dayKeyOf(time);
|
||||
const cellEntries = byDay.get(key) ?? [];
|
||||
const inMonth = monthKeyOf(key) === month;
|
||||
if (inMonth) entryCount += cellEntries.length;
|
||||
|
||||
days.push({
|
||||
key,
|
||||
dayNumber: new Date(time).getUTCDate(),
|
||||
inMonth,
|
||||
isToday: key === today,
|
||||
entries: cellEntries,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
month,
|
||||
firstDay: first,
|
||||
previous: shiftMonth(month, -1),
|
||||
next: shiftMonth(month, 1),
|
||||
weekdays: Array.from({ length: 7 }, (_, index) => (weekStartsOn + index) % 7),
|
||||
days,
|
||||
entryCount,
|
||||
};
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
LABELS
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/**
|
||||
* The day the reader's week starts on. Libya's week starts on Saturday, and
|
||||
* an Arabic calendar that opened on Monday would read wrong; English keeps the
|
||||
* Monday-first grid the draft draws.
|
||||
*/
|
||||
export function weekStartFor(locale: string): number {
|
||||
return locale === "ar" ? 6 : 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* "Mon", "Tue", … in the page's language. Built from a reference week that
|
||||
* happens to start on a Sunday (2024-01-07 was one), so no weekday name is
|
||||
* ever hard-coded in either language.
|
||||
*/
|
||||
export function weekdayLabel(
|
||||
weekday: number,
|
||||
intlLocale: string,
|
||||
width: "short" | "narrow" | "long" = "short",
|
||||
): string {
|
||||
const reference = new Date(Date.UTC(2024, 0, 7 + weekday));
|
||||
return new Intl.DateTimeFormat(intlLocale, {
|
||||
weekday: width,
|
||||
timeZone: "UTC",
|
||||
}).format(reference);
|
||||
}
|
||||
@@ -478,3 +478,32 @@ export async function fetchBySlug<T>(
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* How many entries match a filter, without pulling any of them back.
|
||||
*
|
||||
* Used by the knowledge hub, where each type card carries the number of items
|
||||
* actually published under it. The figure is the CMS's own count - the
|
||||
* redesign draft's "12 modules · EN / AR" was sample text and is not shipped -
|
||||
* and an unreachable collection counts as nothing rather than taking the page
|
||||
* down.
|
||||
*/
|
||||
export async function fetchCount(
|
||||
resource: string,
|
||||
locale: string,
|
||||
filters: Record<string, unknown>,
|
||||
): Promise<number> {
|
||||
try {
|
||||
const result = await getMany<{ readonly id?: number }>(resource, {
|
||||
locale,
|
||||
filters,
|
||||
fields: ["id"],
|
||||
pagination: { page: 1, pageSize: 1, withCount: true },
|
||||
});
|
||||
return result.pagination?.total ?? result.data.length;
|
||||
} catch (error) {
|
||||
if (!isStrapiError(error)) throw error;
|
||||
warn(resource, error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,9 +27,12 @@ import { ArrowIcon, Button } from "~/components/ui/Button";
|
||||
import { Input } from "~/components/ui/Input";
|
||||
import type { Translator } from "~/i18n";
|
||||
|
||||
import { Container, PageHero, type HeroWash } from "../_page-kit/sections";
|
||||
import type { PaginationModel, SelectOption } from "./listing";
|
||||
import { withParam } from "./listing";
|
||||
|
||||
import "../_page-kit/motion.css";
|
||||
|
||||
function cx(...parts: Array<string | false | null | undefined>): string {
|
||||
return parts.filter(Boolean).join(" ");
|
||||
}
|
||||
@@ -59,6 +62,57 @@ export function PageShell({
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The redesigned listing hero (2026 drafts): an accent eyebrow over the
|
||||
* headline, the standfirst, the two slow washes drifting behind it, the
|
||||
* staggered entrance, and a rule drawn on under the whole band.
|
||||
*
|
||||
* It is `PageHero` from the page kit, not a second hero: the same component
|
||||
* the home page uses, with `ambient` and `reveal` turned on, so every page on
|
||||
* the site arrives the same way and there is one hero to maintain.
|
||||
*
|
||||
* `children` is the slot under the headline row - the knowledge hub puts its
|
||||
* search box there; `actions` is the page kit's own inline-end slot.
|
||||
*/
|
||||
export function ListingHero({
|
||||
heading,
|
||||
intro,
|
||||
eyebrow,
|
||||
actions,
|
||||
ambient,
|
||||
children,
|
||||
}: {
|
||||
heading: string;
|
||||
intro?: string;
|
||||
eyebrow?: string;
|
||||
actions?: ReactNode;
|
||||
/** This page's own drifting wash - every draft positions its own. */
|
||||
ambient?: readonly HeroWash[];
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2xl">
|
||||
<PageHero
|
||||
title={heading}
|
||||
{...(eyebrow ? { eyebrow } : {})}
|
||||
{...(intro ? { lead: intro } : {})}
|
||||
{...(actions ? { actions } : {})}
|
||||
{...(ambient ? { ambient } : {})}
|
||||
reveal
|
||||
/>
|
||||
|
||||
{children ? <Container>{children}</Container> : null}
|
||||
|
||||
{/* The draft closes the hero with a hairline. Drawn on from the inline
|
||||
start rather than simply appearing - the `barGrow` of the drafts. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="sh-bar-grow h-px w-full bg-[var(--border-subtle)]"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PageHeader({
|
||||
heading,
|
||||
intro,
|
||||
@@ -261,8 +315,11 @@ export function EmptyState({
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
// The drafts draw the empty panel as a dashed outline on whatever band
|
||||
// it sits on - no fill of its own, so it is correct on the #0B0B0A
|
||||
// ground and inside a #1D1D1B band alike.
|
||||
"flex flex-col items-start gap-md rounded-card border border-dashed",
|
||||
"border-border-default bg-surface-sunken p-2xl",
|
||||
"border-border-default p-2xl",
|
||||
)}
|
||||
>
|
||||
<p className="heading-h3 text-text-primary">{title}</p>
|
||||
@@ -524,3 +581,454 @@ export function MetaLine({ items }: { items: readonly string[] }) {
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
PILL FILTERS
|
||||
----------------------------------------------------------------------------
|
||||
The 2026 drafts replace the underlined tab strip with a row of pills on the
|
||||
calendar, the calls list and the activities index: a dot marks the pill in
|
||||
force and the rest are outlined. They are LINKS, exactly as the tab strip
|
||||
was - each combination of filters is its own URL, so it survives a share, a
|
||||
bookmark, the back button and a crawler that only follows links.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export interface FilterPill {
|
||||
readonly id: string;
|
||||
readonly label: string;
|
||||
readonly href: string;
|
||||
readonly isCurrent: boolean;
|
||||
}
|
||||
|
||||
export function FilterPills({
|
||||
label,
|
||||
pills,
|
||||
shape = "pill",
|
||||
hideLabel = false,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
pills: readonly FilterPill[];
|
||||
/**
|
||||
* The drafts draw two shapes on the same row: the filters themselves are
|
||||
* fully rounded, while the calendar's List / Month switch is a pair of
|
||||
* square controls. Same markup, same behaviour, one radius token apart.
|
||||
*/
|
||||
shape?: "pill" | "control";
|
||||
/** The view switch carries no visible caption in the draft. */
|
||||
hideLabel?: boolean;
|
||||
/** Anything that belongs on the same row - a region select, a view switch. */
|
||||
children?: ReactNode;
|
||||
}) {
|
||||
const radius = shape === "pill" ? "rounded-pill" : "rounded-[var(--radius-control)]";
|
||||
|
||||
return (
|
||||
<nav aria-label={label} className="flex flex-wrap items-center gap-sm">
|
||||
<p
|
||||
className={cx(
|
||||
"label-md uppercase text-text-tertiary",
|
||||
hideLabel && "sr-only",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
|
||||
<ul className="flex flex-wrap items-center gap-xs">
|
||||
{pills.map((pill) => (
|
||||
<li key={pill.id}>
|
||||
<Link
|
||||
to={pill.href}
|
||||
prefetch="intent"
|
||||
aria-current={pill.isCurrent ? "page" : undefined}
|
||||
className={cx(
|
||||
"inline-flex items-center gap-xs border px-md py-xs",
|
||||
radius,
|
||||
"body-sm-bold transition-colors",
|
||||
"duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]",
|
||||
pill.isCurrent
|
||||
? "border-border-accent bg-surface-accent-subtle text-text-primary"
|
||||
: "border-border-default text-text-secondary hover:border-border-accent hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
{/* Decorative: `aria-current` already says which pill is on. */}
|
||||
{pill.isCurrent ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="size-[7px] shrink-0 rounded-pill bg-[var(--surface-accent)]"
|
||||
/>
|
||||
) : null}
|
||||
{pill.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{children}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A single `<select>` that navigates on change, styled as one of the pills
|
||||
* beside it. A real `<form method="get">`, so it still applies with scripting
|
||||
* off; `keep` carries the filters that are not this one, because a GET submit
|
||||
* replaces the whole query string.
|
||||
*/
|
||||
export function PillSelect({
|
||||
name,
|
||||
label,
|
||||
value,
|
||||
options,
|
||||
allLabel,
|
||||
applyLabel,
|
||||
action,
|
||||
keep,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
value: string;
|
||||
options: readonly SelectOption[];
|
||||
allLabel: string;
|
||||
/** Label of the fallback submit - shown because a <select> cannot submit. */
|
||||
applyLabel: string;
|
||||
action: string;
|
||||
/** Other query parameters to preserve, as [name, value] pairs. */
|
||||
keep?: readonly (readonly [string, string])[];
|
||||
}) {
|
||||
const submit = useSubmit();
|
||||
|
||||
return (
|
||||
<Form
|
||||
method="get"
|
||||
action={action}
|
||||
aria-label={label}
|
||||
onChange={(event) => {
|
||||
if (event.target instanceof HTMLSelectElement) {
|
||||
submit(event.currentTarget, { method: "get" });
|
||||
}
|
||||
}}
|
||||
className="flex items-center gap-xs"
|
||||
>
|
||||
{(keep ?? []).map(([key, kept]) => (
|
||||
<input key={key} type="hidden" name={key} value={kept} />
|
||||
))}
|
||||
|
||||
<label className="sr-only" htmlFor={`pill-${name}`}>
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
id={`pill-${name}`}
|
||||
name={name}
|
||||
defaultValue={value}
|
||||
className={cx(
|
||||
"body-sm-bold rounded-pill border border-border-default bg-surface-raised",
|
||||
"px-md py-xs text-text-secondary transition-colors",
|
||||
"duration-[var(--motion-duration-fast)] ease-[var(--motion-ease-standard)]",
|
||||
"hover:border-border-accent hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
<option value="">{allLabel}</option>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Kept for the case where scripting is off - the same bargain the
|
||||
filter bar strikes. A <select> alone cannot submit its form. */}
|
||||
<Button type="submit" variant="ghost" size="sm">
|
||||
{applyLabel}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FACET SIDEBAR - the resources listing
|
||||
----------------------------------------------------------------------------
|
||||
The draft draws the resources filters as checkbox groups in a sticky rail.
|
||||
They are rendered as LINKS with a checkbox-shaped marker: one click sets the
|
||||
facet, clicking the active option clears it, and the result is still one
|
||||
URL per view. A real <input type="checkbox"> would promise multi-select,
|
||||
which the Strapi query behind this listing does not offer.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export interface FacetOption {
|
||||
readonly value: string;
|
||||
readonly label: string;
|
||||
readonly href: string;
|
||||
readonly isCurrent: boolean;
|
||||
}
|
||||
|
||||
export function FacetGroup({
|
||||
heading,
|
||||
options,
|
||||
}: {
|
||||
heading: string;
|
||||
options: readonly FacetOption[];
|
||||
}) {
|
||||
if (options.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-sm border-t border-border-subtle pt-md">
|
||||
<p className="label-md uppercase text-text-tertiary">{heading}</p>
|
||||
<ul className="flex flex-col gap-2xs">
|
||||
{options.map((option) => (
|
||||
<li key={option.value}>
|
||||
<Link
|
||||
to={option.href}
|
||||
prefetch="intent"
|
||||
aria-current={option.isCurrent ? "true" : undefined}
|
||||
className={cx(
|
||||
"flex items-start gap-sm py-2xs text-start body-sm-bold",
|
||||
"transition-colors duration-[var(--motion-duration-fast)]",
|
||||
"ease-[var(--motion-ease-standard)]",
|
||||
option.isCurrent
|
||||
? "text-text-primary"
|
||||
: "text-text-secondary hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cx(
|
||||
"mt-2xs flex size-[0.875rem] shrink-0 items-center justify-center",
|
||||
"rounded-[var(--radius-control)] border",
|
||||
option.isCurrent
|
||||
? "border-border-accent"
|
||||
: "border-border-default",
|
||||
)}
|
||||
>
|
||||
{option.isCurrent ? (
|
||||
<span className="size-[7px] bg-[var(--surface-accent)]" />
|
||||
) : null}
|
||||
</span>
|
||||
<span>{option.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The rail the facet groups sit in - sticky from the large breakpoint up. */
|
||||
export function FacetRail({
|
||||
label,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<aside
|
||||
aria-label={label}
|
||||
className={cx(
|
||||
"flex min-w-0 flex-col gap-lg lg:sticky lg:top-[var(--layout-sticky-top)]",
|
||||
"lg:max-w-[20rem] lg:self-start",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
SEARCH
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/**
|
||||
* A standalone search box - the hub's hero field and the resources rail both
|
||||
* use it. `keep` preserves the filters that are not the query, so searching
|
||||
* inside a filtered view does not silently clear the filters.
|
||||
*/
|
||||
export function SearchForm({
|
||||
action,
|
||||
label,
|
||||
placeholder,
|
||||
defaultValue,
|
||||
submitLabel,
|
||||
keep,
|
||||
name = "q",
|
||||
className,
|
||||
}: {
|
||||
action: string;
|
||||
label: string;
|
||||
placeholder: string;
|
||||
defaultValue: string;
|
||||
submitLabel: string;
|
||||
keep?: readonly (readonly [string, string])[];
|
||||
name?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Form
|
||||
method="get"
|
||||
action={action}
|
||||
role="search"
|
||||
aria-label={label}
|
||||
className={cx("flex flex-wrap items-end gap-sm", className)}
|
||||
>
|
||||
{(keep ?? []).map(([key, value]) => (
|
||||
<input key={key} type="hidden" name={key} value={value} />
|
||||
))}
|
||||
|
||||
<Input
|
||||
type="search"
|
||||
name={name}
|
||||
label={label}
|
||||
placeholder={placeholder}
|
||||
defaultValue={defaultValue}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
|
||||
<Button type="submit" variant="primary" size="md">
|
||||
{submitLabel}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
CALLOUT BAND
|
||||
----------------------------------------------------------------------------
|
||||
The wide panel the drafts close a page with: a raised surface, an accent
|
||||
rule down the inline-start edge, a headline and one action. Used by the
|
||||
newsroom ("Are you a partner organisation?") and by the knowledge hub's
|
||||
repository note.
|
||||
|
||||
It is NOT Card.CTA: that card is a filled green field for a primary action,
|
||||
and the drafts draw this one as a quiet panel on the page surface.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export function CalloutBand({
|
||||
eyebrow,
|
||||
headline,
|
||||
body,
|
||||
action,
|
||||
headlineAs = "h2",
|
||||
}: {
|
||||
headline: string;
|
||||
action: { readonly to: string; readonly label: string };
|
||||
eyebrow?: string;
|
||||
body?: string;
|
||||
headlineAs?: "h2" | "h3";
|
||||
}) {
|
||||
const Headline = headlineAs;
|
||||
|
||||
return (
|
||||
<section
|
||||
className={cx(
|
||||
"sh-reveal flex flex-col gap-lg rounded-card border border-border-subtle",
|
||||
"border-s-4 border-s-[var(--border-accent)] bg-surface-raised p-xl",
|
||||
"md:flex-row md:items-center md:justify-between",
|
||||
)}
|
||||
>
|
||||
<div className="flex max-w-[var(--layout-prose-max)] flex-col gap-xs">
|
||||
{eyebrow ? (
|
||||
<p className="label-md uppercase text-text-accent">{eyebrow}</p>
|
||||
) : null}
|
||||
<Headline className="heading-h3 text-text-primary">{headline}</Headline>
|
||||
{body ? <p className="body-md text-text-secondary">{body}</p> : null}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
as={Link}
|
||||
to={action.to}
|
||||
variant="primary"
|
||||
size="md"
|
||||
iconEnd={<ArrowIcon />}
|
||||
className="shrink-0"
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
FORM CONTROLS
|
||||
----------------------------------------------------------------------------
|
||||
`FilterSelect` above is a GET filter: it has no error state and its id is
|
||||
namespaced for the filter bar. A select that is part of a POSTed form needs
|
||||
both, so it gets its own control here rather than a second set of props on
|
||||
the filter one.
|
||||
|
||||
It is native on purpose, for the same reasons `FilterSelect` is: correct in
|
||||
every browser with a keyboard and a screen reader, and usable before - and
|
||||
without - hydration. The visual treatment is the field treatment from
|
||||
~/components/ui/Input, spent through the same tier-2 tokens.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
export function FormSelect({
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
hint,
|
||||
error,
|
||||
defaultValue,
|
||||
options,
|
||||
required = false,
|
||||
className,
|
||||
}: {
|
||||
id: string;
|
||||
name: string;
|
||||
label: string;
|
||||
options: readonly SelectOption[];
|
||||
hint?: string;
|
||||
error?: string;
|
||||
defaultValue?: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const hintId = `${id}-hint`;
|
||||
const errorId = `${id}-error`;
|
||||
const describedBy =
|
||||
[hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") ||
|
||||
undefined;
|
||||
|
||||
return (
|
||||
<div className={cx("sh-field flex min-w-0 flex-col gap-xs", className)}>
|
||||
<label className="sh-field__label label-md" htmlFor={id}>
|
||||
{label}
|
||||
{required ? (
|
||||
<span className="sh-field__required ms-2xs" aria-hidden="true">
|
||||
*
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
|
||||
<select
|
||||
id={id}
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
required={required}
|
||||
aria-invalid={error ? true : undefined}
|
||||
aria-describedby={describedBy}
|
||||
className={cx(
|
||||
"body-md w-full rounded-[var(--radius-control)] border bg-field-bg",
|
||||
"border-field-border px-md py-sm text-[var(--field-fg)]",
|
||||
"transition-colors duration-[var(--motion-duration-fast)]",
|
||||
"ease-[var(--motion-ease-standard)] hover:border-[var(--field-border-hover)]",
|
||||
)}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{hint ? (
|
||||
<p id={hintId} className="sh-field__hint body-sm">
|
||||
{hint}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{error ? (
|
||||
<p id={errorId} role="alert" className="sh-field__error body-sm">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -227,3 +227,197 @@ export const NEWS_DETAIL_COPY: Localised<Pick<DetailCopy, "backToListing" | "abo
|
||||
aboutThis: "عن هذا المستجد",
|
||||
},
|
||||
};
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
LISTING CHROME - the redesign's page furniture
|
||||
----------------------------------------------------------------------------
|
||||
The strings the six listing pages gained with the 2026 redesign drafts:
|
||||
hero eyebrows, the pill and facet labels, the calendar's view switch, the
|
||||
knowledge hub's FAQ band and its repository callout.
|
||||
|
||||
EVERYTHING HERE IS FURNITURE, NOT CONTENT. Not one figure, date, name or
|
||||
commitment from the drafts is carried over: the drafts' sample entries,
|
||||
their "12 modules", their "Closes 15 August 2026", their "within four
|
||||
weeks" and their TBD counters are all absent by design (CLAUDE.md rule 5).
|
||||
The two places where a draft's sentence IS reproduced are traceable to an
|
||||
approved source and noted inline.
|
||||
|
||||
`ListingChrome` is derived from the English object, so a key added on one
|
||||
side and forgotten on the other is a compile error, not a blank label.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
const LISTING_CHROME_EN = {
|
||||
news: {
|
||||
/** Draft eyebrow over the §5 headline. */
|
||||
eyebrow: "Newsroom",
|
||||
/** The draft's lead card reads "Read the full update". */
|
||||
readFull: "Read the full update",
|
||||
/** Visually hidden heading over the lead article. */
|
||||
featuredLabel: "Latest update",
|
||||
/** Visually hidden heading over the rest of the grid. */
|
||||
moreLabel: "More updates",
|
||||
},
|
||||
events: {
|
||||
eyebrow: "Events calendar",
|
||||
/** Label of the list / month switch. */
|
||||
viewLabel: "View",
|
||||
viewList: "List",
|
||||
viewMonth: "Month",
|
||||
/** Accessible name of the month grid. */
|
||||
calendarLabel: "Events by month",
|
||||
previousMonth: "Previous month",
|
||||
nextMonth: "Next month",
|
||||
monthEmpty: "No events are scheduled in this month.",
|
||||
/** Announced before the day number of a cell that carries events. */
|
||||
dayLabel: "Events on {date}",
|
||||
},
|
||||
applications: {
|
||||
eyebrow: "Applications and opportunities",
|
||||
/**
|
||||
* The draft's three-step application form IS built (see
|
||||
* ../applications-and-opportunities.tsx), but its attachment limit, its
|
||||
* reference number and its "within four weeks" are not: none of the three
|
||||
* is true of this project, so the page states none of them. The wording
|
||||
* that replaced them lives in ../_events-opportunities/copy.ts under
|
||||
* `apply`, annotated key by key.
|
||||
*/
|
||||
pathwayAllLabel: "Ways to take part",
|
||||
},
|
||||
resources: {
|
||||
eyebrow: "Resources and publications",
|
||||
/** Accessible name of the filter sidebar. */
|
||||
facetsLabel: "Refine these results",
|
||||
searchPlaceholder: "Title, author, keyword",
|
||||
/** `resource.resourceLanguage`, spelled out for the card's language chip. */
|
||||
languageEn: "English",
|
||||
languageAr: "Arabic",
|
||||
languageBilingual: "English and Arabic",
|
||||
},
|
||||
knowledge: {
|
||||
eyebrow: "Knowledge hub",
|
||||
searchPlaceholder: "Search the hub — topic, module, or keyword",
|
||||
/**
|
||||
* The count under a type card. The number always comes from Strapi, and
|
||||
* the line is dropped entirely at zero rather than reading "0 published".
|
||||
*/
|
||||
itemCount: "{count} published",
|
||||
browseLabel: "Browse by type",
|
||||
faqEyebrow: "Plain-language basics",
|
||||
faqHeading: "Frequently asked questions",
|
||||
/** Expanded from the approved §7 line for the FAQ entry of the hub. */
|
||||
faqIntro:
|
||||
"Plain-language answers on rule of law, governance, and civic participation basics.",
|
||||
faqEmpty: "Answers are being prepared and will appear here.",
|
||||
repositoryEyebrow: "Long-term repository",
|
||||
/**
|
||||
* ToR §2 and §3.3: the site "acts as a long-term repository for knowledge
|
||||
* and resource sharing linked to SHARP-ER activities and outputs" "with
|
||||
* version control, DOI/handle readiness, and searchable metadata". The
|
||||
* draft's stronger claim - that every item already is versioned and kept
|
||||
* beyond the project's end - is not made here.
|
||||
*/
|
||||
repositoryHeadline:
|
||||
"A long-term repository for knowledge and resources linked to SHARP-ER activities and outputs, with version control and searchable metadata.",
|
||||
repositoryAction: "Browse publications",
|
||||
},
|
||||
activities: {
|
||||
partnerFilterLabel: "Filter by partner",
|
||||
allPartners: "All partners",
|
||||
/** Visually hidden heading over the two onward cards. */
|
||||
nextStepsLabel: "Where to go next",
|
||||
nextEventsEyebrow: "Next",
|
||||
nextApplicationsEyebrow: "Get involved",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export type ListingChrome = {
|
||||
readonly [Section in keyof typeof LISTING_CHROME_EN]: {
|
||||
readonly [Key in keyof (typeof LISTING_CHROME_EN)[Section]]: string;
|
||||
};
|
||||
};
|
||||
|
||||
const LISTING_CHROME_AR: ListingChrome = {
|
||||
news: {
|
||||
eyebrow: "غرفة الأخبار",
|
||||
readFull: "اقرأ المستجد كاملًا",
|
||||
featuredLabel: "أحدث مستجد",
|
||||
moreLabel: "مستجدات أخرى",
|
||||
},
|
||||
events: {
|
||||
eyebrow: "التقويم الزمني للفعاليات",
|
||||
viewLabel: "طريقة العرض",
|
||||
viewList: "قائمة",
|
||||
viewMonth: "شهر",
|
||||
calendarLabel: "الفعاليات حسب الشهر",
|
||||
previousMonth: "الشهر السابق",
|
||||
nextMonth: "الشهر التالي",
|
||||
monthEmpty: "لا توجد فعاليات مجدولة في هذا الشهر.",
|
||||
dayLabel: "فعاليات يوم {date}",
|
||||
},
|
||||
applications: {
|
||||
eyebrow: "طلبات وفرص المشاركة",
|
||||
pathwayAllLabel: "طرق المشاركة",
|
||||
},
|
||||
resources: {
|
||||
eyebrow: "الموارد والمنشورات",
|
||||
facetsLabel: "تصفية النتائج",
|
||||
searchPlaceholder: "العنوان أو الكاتب أو كلمة مفتاحية",
|
||||
languageEn: "الإنجليزية",
|
||||
languageAr: "العربية",
|
||||
languageBilingual: "الإنجليزية والعربية",
|
||||
},
|
||||
knowledge: {
|
||||
eyebrow: "مركز المعرفة",
|
||||
searchPlaceholder: "ابحث في المركز: موضوع أو وحدة أو كلمة مفتاحية",
|
||||
itemCount: "عدد المواد: {count}",
|
||||
browseLabel: "التصفح حسب النوع",
|
||||
faqEyebrow: "أساسيات بلغة مبسّطة",
|
||||
faqHeading: "الأسئلة الشائعة",
|
||||
faqIntro:
|
||||
"إجابات بلغة مبسّطة حول أساسيات سيادة القانون والحوكمة والمشاركة المدنية.",
|
||||
faqEmpty: "يجري إعداد الإجابات وستظهر هنا.",
|
||||
repositoryEyebrow: "مستودع طويل الأمد",
|
||||
repositoryHeadline:
|
||||
"مستودع طويل الأمد للمعرفة والموارد المرتبطة بأنشطة SHARP-ER ومخرجاته، مع ضبط الإصدارات وبيانات وصفية قابلة للبحث.",
|
||||
repositoryAction: "تصفّح المنشورات",
|
||||
},
|
||||
activities: {
|
||||
partnerFilterLabel: "التصفية حسب الشريك",
|
||||
allPartners: "جميع الشركاء",
|
||||
nextStepsLabel: "إلى أين بعد ذلك",
|
||||
nextEventsEyebrow: "التالي",
|
||||
nextApplicationsEyebrow: "شارك معنا",
|
||||
},
|
||||
};
|
||||
|
||||
const LISTING_CHROME: Localised<ListingChrome> = {
|
||||
en: LISTING_CHROME_EN,
|
||||
ar: LISTING_CHROME_AR,
|
||||
};
|
||||
|
||||
/** The listing chrome for a locale. Never returns "". */
|
||||
export function getListingChrome(locale: Locale): ListingChrome {
|
||||
return LISTING_CHROME[locale] ?? LISTING_CHROME_EN;
|
||||
}
|
||||
|
||||
/**
|
||||
* `resource.resourceLanguage` spelled out. Returns undefined for a value the
|
||||
* enumeration does not carry, so the chip is dropped rather than invented.
|
||||
*/
|
||||
export function resourceLanguageLabel(
|
||||
value: string | null | undefined,
|
||||
locale: Locale,
|
||||
): string | undefined {
|
||||
const copy = getListingChrome(locale).resources;
|
||||
|
||||
switch (value) {
|
||||
case "en":
|
||||
return copy.languageEn;
|
||||
case "ar":
|
||||
return copy.languageAr;
|
||||
case "bilingual":
|
||||
return copy.languageBilingual;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user