Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild the site to the Claude Design drafts

Browse Source 
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:
Illusion
2026-09-16 20:32:56 +02:00
co-authored by Claude Opus 5
parent 8464c24fb1
commit aedef6daeb
63 changed files with 7276 additions and 1768 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/routes/resources-and-publications.tsx
+269 -141
View File
@@ -3,9 +3,23 @@
----------------------------------------------------------------------------
/{locale}/resources-and-publications
§6 of docs/SHARPER_Website_Draft_Section_EN_AR.docx, with the four filters
the ToR mandates - topic, date, author, partner organisation - plus the
type tabs the draft lists and a sort order.
§6 of docs/SHARPER_Website_Draft_Section_EN_AR.docx with the four filters
the ToR mandates - topic, date, author, partner organisation - plus the type
categories the draft lists, a sort order and a free-text search.
Laid out to the 2026 redesign draft ("Resources-and-Publications"): a sticky
facet rail on the inline-start side, and a column of wide result rows, each
with its format chip, its metadata line, its language chip and a direct
download.
THE FACETS ARE LINKS, NOT CHECKBOXES
The draft draws them as checkboxes, which promises multi-select; the Strapi
query behind this listing takes one value per facet, so each option is a
link that sets the facet and clicking the active one clears it. Every view
is therefore still an ordinary URL - ?topic=access-to-justice&year=2026 -
that can be shared, bookmarked, walked back and followed by a crawler, and
it renders identically on the server and the client because nothing about it
is component state.
THE AUTHOR FILTER IS NOT A TAXONOMY
`resource.authors` is a plain STRING field in the CMS - there is no author
@@ -13,17 +27,15 @@
distinct values the published resources actually carry, which is also why
the filter offers nothing at all while the CMS is empty instead of 404ing.
FILTER STATE LIVES IN THE URL
Every control is a field of one `<form method="get">`, so a filtered view is
an ordinary link: ?topic=access-to-justice&year=2026&sort=oldest. It can be
shared, bookmarked, walked back with the browser's Back button and followed
by a crawler, and it renders identically on the server and the client
because nothing about it is component state.
NOTHING THE DRAFT LISTS IS PUBLISHED HERE. Its six sample publications -
the "Nationwide Perception Study", the "SHARP I and II Closing Report",
their page counts and their file sizes - were mockup content. Every row is
a Strapi entry; an empty CMS renders the localised empty state.
The canonical URL and the en/ar/x-default hreflang set are emitted for this
route by the app shell (root.tsx `Layout`) from the pathname, which is why
`buildMeta` is called WITHOUT `alternates` here: a leaf `meta` replaces its
parents' wholesale, and passing it would emit each link twice. Every filter
route by the app shell (root.tsx `Layout`), which is why `buildMeta` is
called WITHOUT `alternates` here: a leaf `meta` replaces its parents'
wholesale, and passing it would emit each link twice. Every filter
combination therefore canonicalises to the unfiltered listing, which is the
behaviour we want from a facet.
========================================================================= */
@@ -34,7 +46,6 @@ import {
CardActionHint,
CardEyebrow,
CardLink,
CardMedia,
CardShell,
} from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
@@ -42,6 +53,7 @@ import {
formatDate,
formatFileSize,
sectionPath,
toIsoDate,
translate,
useTranslation,
type Locale,
@@ -59,9 +71,7 @@ import {
fetchYearOptions,
taxonomyNames,
toFile,
toImage,
type CmsFile,
type CmsImage,
type ResourceEntry,
type ResourceType,
} from "./_shared/cms";
@@ -73,6 +83,7 @@ import {
parseExactText,
parseOptionalEnum,
parsePage,
parseQuery,
parseSlug,
parseSort,
parseYear,
@@ -80,6 +91,7 @@ import {
SORT_ORDERS,
requireLocale,
sortFor,
withParam,
yearFilter,
yearOptions,
type SelectOption,
@@ -87,15 +99,23 @@ import {
} from "./_shared/listing";
import {
EmptyState,
FilterBar,
FilterSelect,
FacetGroup,
FacetRail,
ListingHero,
MetaLine,
PageHeader,
PageShell,
Pagination,
ResultSummary,
SearchForm,
type FacetOption,
} from "./_shared/listing-ui";
import { RESOURCES_COPY } from "./_shared/page-copy";
import {
RESOURCES_COPY,
getListingChrome,
resourceLanguageLabel,
} from "./_shared/page-copy";
import "./_page-kit/motion.css";
/**
* The four publication kinds, as `resource.resourceType` publishes them,
@@ -132,9 +152,10 @@ interface ResourceListItem {
readonly authors?: string;
readonly partners: readonly string[];
readonly topics: readonly string[];
readonly image?: CmsImage;
readonly file?: CmsFile;
readonly fileLabel?: string;
readonly fileKind?: string;
readonly fileSizeLabel?: string;
readonly languageLabel?: string;
readonly externalUrl?: string;
}
@@ -153,6 +174,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
const partner = parseSlug(search, "partner");
const year = parseYear(search);
const sort = parseSort(search);
const query = parseQuery(search);
const filters = compactFilters({
resourceType: type ? { $eq: type } : undefined,
@@ -161,6 +183,16 @@ export async function loader({ params, request }: Route.LoaderArgs) {
authors: author ? { $eq: author } : undefined,
partnerOrganisations: partner ? { slug: { $eq: partner } } : undefined,
[DATE_FIELD]: year ? yearFilter(year) : undefined,
/* The draft's "Title, author, keyword" box. The body of a document is not
searched - it is a file, not a field - so the three things a reader can
actually see on the card are what the query hits. */
$or: query
? [
{ title: { $containsi: query } },
{ description: { $containsi: query } },
{ authors: { $containsi: query } },
]
: undefined,
});
// One round trip per facet, all in flight together: the listing itself, the
@@ -172,9 +204,8 @@ export async function loader({ params, request }: Route.LoaderArgs) {
filters,
sort: sortFor(DATE_FIELD, sort),
populate: {
thumbnail: {
fields: ["url", "alternativeText", "width", "height", "formats"],
},
// No thumbnail: the listing row draws the format chip instead of a
// cover, so the image is fetched by the detail route, not here.
file: { fields: ["url", "name", "ext", "mime", "size"] },
partnerOrganisations: { fields: ["name", "slug"] },
topics: { fields: ["name", "slug"] },
@@ -202,6 +233,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
partner: partner ?? "",
year: year === undefined ? "" : String(year),
sort,
q: query ?? "",
},
facets: {
types: enumOptions(RESOURCE_TYPES, TYPE_LABEL, locale),
@@ -216,9 +248,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
function toListItem(entry: ResourceEntry, locale: Locale): ResourceListItem {
const file = toFile(entry.file);
const image = toImage(entry.thumbnail, "small");
const date = entry.publicationDate ?? entry.publishedAt ?? undefined;
const authors = entry.authors?.trim();
const language = resourceLanguageLabel(entry.resourceLanguage, locale);
return {
id: entry.documentId,
@@ -232,13 +264,14 @@ function toListItem(entry: ResourceEntry, locale: Locale): ResourceListItem {
...(authors ? { authors } : {}),
partners: taxonomyNames(entry.partnerOrganisations),
topics: taxonomyNames(entry.topics),
...(image ? { image } : {}),
...(file
? {
file,
fileLabel: `${file.kind} · ${formatFileSize(file.sizeBytes, locale)}`,
fileKind: file.kind,
fileSizeLabel: formatFileSize(file.sizeBytes, locale),
}
: {}),
...(language ? { languageLabel: language } : {}),
...(entry.externalUrl ? { externalUrl: entry.externalUrl } : {}),
};
}
@@ -281,108 +314,176 @@ export default function ResourcesAndPublications({
const params = new URLSearchParams(search);
const copy = RESOURCES_COPY[locale];
const chrome = getListingChrome(locale).resources;
const sortLabel =
facets.sorts.find((option) => option.value === filters.sort)?.label ?? "";
const isFiltered =
Boolean(filters.type) ||
Boolean(filters.topic) ||
Boolean(filters.author) ||
Boolean(filters.partner) ||
Boolean(filters.year);
Boolean(filters.year) ||
Boolean(filters.q);
/** One facet option: sets the value, or clears it when it is already on. */
const facetOptions = (
key: string,
current: string,
options: readonly SelectOption[],
): FacetOption[] =>
options.map((option) => {
const isCurrent = current === option.value;
return {
value: option.value,
label: option.label,
href: `${pathname}${withParam(
params,
key,
isCurrent ? undefined : option.value,
)}`,
isCurrent,
};
});
/* Everything except the search term, so submitting the box keeps the facets
the reader has already set. */
const keep = [...params.entries()]
.filter(([key]) => key !== "q" && key !== "page")
.map(([key, value]) => [key, value] as const);
return (
<PageShell>
<PageHeader heading={copy.heading} intro={copy.intro} />
<>
<ListingHero
eyebrow={chrome.eyebrow}
heading={copy.heading}
intro={copy.intro}
ambient={[{ top: -250, from: "end", offset: "6%", width: 720, height: 560, durationSeconds: 22 }]}
/>
<section className="flex flex-col gap-lg" aria-label={copy.heading}>
<FilterBar
legend={t("filters.heading")}
action={pathname}
applyLabel={t("filters.apply")}
clearLabel={t("filters.clear")}
clearHref={pathname}
showClear={isFiltered || filters.sort !== "newest"}
>
<FilterSelect
name="type"
label={t("filters.category")}
value={filters.type}
options={facets.types}
allLabel={t("filters.all")}
/>
<FilterSelect
name="topic"
label={t("filters.topic")}
value={filters.topic}
options={facets.topics}
allLabel={t("filters.all")}
/>
<FilterSelect
name="author"
label={t("filters.author")}
value={filters.author}
options={facets.authors}
allLabel={t("filters.all")}
/>
<FilterSelect
name="partner"
label={t("filters.partner")}
value={filters.partner}
options={facets.partners}
allLabel={t("filters.all")}
/>
<FilterSelect
name="year"
label={t("filters.date")}
value={filters.year}
options={facets.years}
allLabel={t("filters.all")}
/>
{/* No "All" option: sorting always has a value. */}
<FilterSelect
name="sort"
label={t("filters.sortBy")}
value={filters.sort}
options={facets.sorts}
/>
</FilterBar>
<PageShell>
<div className="grid gap-2xl lg:grid-cols-[minmax(0,17rem)_minmax(0,1fr)]">
<FacetRail label={chrome.facetsLabel}>
<SearchForm
action={pathname}
label={t("search.label")}
placeholder={chrome.searchPlaceholder}
defaultValue={filters.q}
submitLabel={t("search.submit")}
keep={keep}
className="flex-col items-stretch"
/>
<ResultSummary pagination={pagination} t={t} />
<FacetGroup
heading={t("filters.category")}
options={facetOptions("type", filters.type, facets.types)}
/>
<FacetGroup
heading={t("filters.topic")}
options={facetOptions("topic", filters.topic, facets.topics)}
/>
<FacetGroup
heading={t("filters.author")}
options={facetOptions("author", filters.author, facets.authors)}
/>
<FacetGroup
heading={t("filters.partner")}
options={facetOptions("partner", filters.partner, facets.partners)}
/>
<FacetGroup
heading={t("filters.date")}
options={facetOptions("year", filters.year, facets.years)}
/>
{/* Sorting always has a value, so its options never clear. */}
<FacetGroup
heading={t("filters.sortBy")}
options={facets.sorts.map((option) => ({
value: option.value,
label: option.label,
href: `${pathname}${withParam(params, "sort", option.value)}`,
isCurrent: filters.sort === option.value,
}))}
/>
{entries.length === 0 ? (
<EmptyState
title={isFiltered ? t("filters.noResults") : copy.emptyTitle}
body={isFiltered ? t("filters.noResultsHint") : copy.emptyBody}
>
{isFiltered ? (
<Button as={Link} to={pathname} variant="secondary" size="sm">
{isFiltered || filters.sort !== "newest" ? (
<Button
as={Link}
to={pathname}
variant="secondary"
size="sm"
className="self-start"
>
{t("filters.clear")}
</Button>
) : null}
</EmptyState>
) : (
<ul className="flex flex-col gap-lg">
{entries.map((entry) => (
<ResourceRow
key={entry.id}
entry={entry}
href={`${sectionPath("resources", locale)}/${entry.slug}`}
readLabel={t("actions.viewDetails")}
downloadLabel={t("actions.download")}
/>
))}
</ul>
)}
</FacetRail>
<Pagination model={pagination} pathname={pathname} params={params} t={t} />
</section>
</PageShell>
<section className="flex min-w-0 flex-col gap-lg" aria-label={copy.heading}>
<div className="flex flex-wrap items-baseline justify-between gap-md border-b border-border-subtle pb-md">
<div className="flex flex-wrap items-baseline gap-md">
<ResultSummary pagination={pagination} t={t} />
{filters.q ? (
<p className="body-sm text-text-secondary">
{t("search.resultsFor", { query: filters.q })}
</p>
) : null}
</div>
{/* "Sorted by date · newest first" in the draft. The order in
force is read back from the query string, never asserted. */}
<p className="label-md uppercase text-text-tertiary">
{t("filters.sortBy")}
<span aria-hidden="true"> · </span>
{sortLabel}
</p>
</div>
{entries.length === 0 ? (
<EmptyState
title={isFiltered ? t("filters.noResults") : copy.emptyTitle}
body={isFiltered ? t("filters.noResultsHint") : copy.emptyBody}
>
{isFiltered ? (
<Button as={Link} to={pathname} variant="secondary" size="sm">
{t("filters.clear")}
</Button>
) : null}
</EmptyState>
) : (
<ul className="flex flex-col gap-md">
{entries.map((entry) => (
<ResourceRow
key={entry.id}
entry={entry}
href={`${sectionPath("resources", locale)}/${entry.slug}`}
readLabel={t("actions.viewDetails")}
downloadLabel={t("actions.download")}
/>
))}
</ul>
)}
<Pagination
model={pagination}
pathname={pathname}
params={params}
t={t}
/>
</section>
</div>
</PageShell>
</>
);
}
/* ---------------------------------------------------------------------------
ONE RESULT
Composed from the exported card primitives rather than Card.Horizontal:
a publication carries a metadata line (date · author · partner · PDF · size)
and a direct download, neither of which that card has a slot for.
a publication carries a metadata line (date · author · partner), a format
chip, a language chip and a direct download, none of which that card has a
slot for.
------------------------------------------------------------------------ */
function ResourceRow({
@@ -399,40 +500,67 @@ function ResourceRow({
const downloadHref = entry.file?.url ?? entry.externalUrl;
return (
<CardShell as="li" linked className="flex-col overflow-hidden sm:flex-row">
{entry.image ? (
<CardMedia
image={entry.image}
className="aspect-[6/5] w-full sm:aspect-auto sm:w-60 sm:shrink-0"
/>
) : null}
<div className="flex flex-1 flex-col gap-md p-lg">
<div className="flex flex-col gap-xs">
{entry.typeLabel ? <CardEyebrow>{entry.typeLabel}</CardEyebrow> : null}
<h2 className="sh-card-title body-lg-bold text-text-primary">
<CardLink href={href} className="sh-card-link">
{entry.title}
</CardLink>
</h2>
<MetaLine
items={[
entry.dateLabel ?? "",
entry.authors ?? "",
entry.partners.join(", "),
entry.fileLabel ?? "",
]}
/>
{entry.summary ? (
<p className="body-sm text-text-secondary line-clamp-3">{entry.summary}</p>
<CardShell
as="li"
linked
className="sh-reveal sh-reveal--in flex-col overflow-hidden sm:flex-row"
>
{/* No thumbnail: the draft anchors the row on the format chip below and
keeps every result the same height, whether or not the CMS entry
carries a cover. The thumbnail still renders on the detail page. */}
<div className="flex flex-1 flex-col gap-md p-lg lg:flex-row lg:items-center lg:justify-between">
<div className="flex min-w-0 gap-md">
{/* The draft's document chip. Only drawn for a file we actually
hold - an externally hosted document has no format to name. */}
{entry.fileKind ? (
<span
aria-hidden="true"
className="flex h-14 w-11 shrink-0 items-center justify-center rounded-[var(--radius-control)] border border-border-default bg-surface-sunken label-md text-text-accent"
>
{entry.fileKind}
</span>
) : null}
<div className="flex min-w-0 flex-col gap-xs">
{entry.typeLabel ? <CardEyebrow>{entry.typeLabel}</CardEyebrow> : null}
<h2 className="sh-card-title body-lg-bold text-text-primary">
<CardLink href={href} className="sh-card-link">
{entry.title}
</CardLink>
</h2>
<MetaLine
items={[
entry.authors ?? "",
entry.dateLabel ?? "",
entry.fileSizeLabel ?? "",
entry.partners.join(", "),
]}
/>
{entry.date ? (
<time dateTime={toIsoDate(entry.date)} className="sr-only">
{entry.dateLabel}
</time>
) : null}
{entry.summary ? (
<p className="body-sm text-text-secondary line-clamp-3">
{entry.summary}
</p>
) : null}
<CardActionHint label={readLabel} />
</div>
</div>
<div className="flex flex-wrap items-center gap-md">
<CardActionHint label={readLabel} />
<div className="flex shrink-0 flex-wrap items-center gap-md">
{entry.languageLabel ? (
<span className="rounded-pill border border-border-default px-md py-2xs label-md uppercase text-text-primary">
{entry.languageLabel}
</span>
) : null}
{downloadHref ? (
// `sh-card-above` lifts it over the stretched title link, so the
@@ -440,7 +568,7 @@ function ResourceRow({
<Button
as="a"
href={downloadHref}
variant="secondary"
variant="primary"
size="sm"
className="sh-card-above"
{...(entry.file