458 lines
15 KiB
TypeScript
458 lines
15 KiB
TypeScript
|
/* ============================================================================
|
||
|
|
RESOURCES AND PUBLICATIONS - listing
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
/{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.
|
||
|
|
|
||
|
|
THE AUTHOR FILTER IS NOT A TAXONOMY
|
||
|
|
`resource.authors` is a plain STRING field in the CMS - there is no author
|
||
|
|
content type and therefore no /api/authors to read. Its options are the
|
||
|
|
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.
|
||
|
|
|
||
|
|
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
|
||
|
|
combination therefore canonicalises to the unfiltered listing, which is the
|
||
|
|
behaviour we want from a facet.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
import { Link, useLocation } from "react-router";
|
||
|
|
|
||
|
|
import {
|
||
|
|
CardActionHint,
|
||
|
|
CardEyebrow,
|
||
|
|
CardLink,
|
||
|
|
CardMedia,
|
||
|
|
CardShell,
|
||
|
|
} from "~/components/ui/Card";
|
||
|
|
import { Button } from "~/components/ui/Button";
|
||
|
|
import {
|
||
|
|
formatDate,
|
||
|
|
formatFileSize,
|
||
|
|
sectionPath,
|
||
|
|
translate,
|
||
|
|
useTranslation,
|
||
|
|
type Locale,
|
||
|
|
type TranslationKey,
|
||
|
|
} from "~/i18n";
|
||
|
|
import { buildBreadcrumbJsonLd, buildMeta } from "~/lib/seo";
|
||
|
|
|
||
|
|
import type { Route } from "./+types/resources-and-publications";
|
||
|
|
import {
|
||
|
|
CMS,
|
||
|
|
RESOURCE_TYPES,
|
||
|
|
fetchCollection,
|
||
|
|
fetchDistinctValues,
|
||
|
|
fetchFilterOptions,
|
||
|
|
fetchYearOptions,
|
||
|
|
taxonomyNames,
|
||
|
|
toFile,
|
||
|
|
toImage,
|
||
|
|
type CmsFile,
|
||
|
|
type CmsImage,
|
||
|
|
type ResourceEntry,
|
||
|
|
type ResourceType,
|
||
|
|
} from "./_shared/cms";
|
||
|
|
import {
|
||
|
|
PAGE_SIZE,
|
||
|
|
buildPagination,
|
||
|
|
compactFilters,
|
||
|
|
enumOptions,
|
||
|
|
parseExactText,
|
||
|
|
parseOptionalEnum,
|
||
|
|
parsePage,
|
||
|
|
parseSlug,
|
||
|
|
parseSort,
|
||
|
|
parseYear,
|
||
|
|
readRootSeo,
|
||
|
|
SORT_ORDERS,
|
||
|
|
requireLocale,
|
||
|
|
sortFor,
|
||
|
|
yearFilter,
|
||
|
|
yearOptions,
|
||
|
|
type SelectOption,
|
||
|
|
type SortOrder,
|
||
|
|
} from "./_shared/listing";
|
||
|
|
import {
|
||
|
|
EmptyState,
|
||
|
|
FilterBar,
|
||
|
|
FilterSelect,
|
||
|
|
MetaLine,
|
||
|
|
PageHeader,
|
||
|
|
PageShell,
|
||
|
|
Pagination,
|
||
|
|
ResultSummary,
|
||
|
|
} from "./_shared/listing-ui";
|
||
|
|
import { RESOURCES_COPY } from "./_shared/page-copy";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The four publication kinds, as `resource.resourceType` publishes them,
|
||
|
|
* mapped to the message catalogue.
|
||
|
|
*/
|
||
|
|
const TYPE_LABEL: Readonly<Record<ResourceType, TranslationKey>> = {
|
||
|
|
"research-perception": "resources.categoryResearch",
|
||
|
|
"policy-article": "resources.categoryPolicy",
|
||
|
|
"project-report": "resources.categoryReports",
|
||
|
|
"visibility-factsheet": "resources.categoryVisibility",
|
||
|
|
};
|
||
|
|
|
||
|
|
const SORT_LABEL = {
|
||
|
|
newest: "filters.sortNewest",
|
||
|
|
oldest: "filters.sortOldest",
|
||
|
|
} as const satisfies Readonly<Record<SortOrder, TranslationKey>>;
|
||
|
|
|
||
|
|
/** The date the listing sorts and filters on. */
|
||
|
|
const DATE_FIELD = "publicationDate";
|
||
|
|
|
||
|
|
/* ---------------------------------------------------------------------------
|
||
|
|
LOADER DATA
|
||
|
|
------------------------------------------------------------------------ */
|
||
|
|
|
||
|
|
interface ResourceListItem {
|
||
|
|
readonly id: string;
|
||
|
|
readonly slug: string;
|
||
|
|
readonly title: string;
|
||
|
|
readonly summary?: string;
|
||
|
|
readonly typeLabel?: string;
|
||
|
|
readonly date?: string;
|
||
|
|
readonly dateLabel?: string;
|
||
|
|
/** Free text from the CMS, rendered as written. */
|
||
|
|
readonly authors?: string;
|
||
|
|
readonly partners: readonly string[];
|
||
|
|
readonly topics: readonly string[];
|
||
|
|
readonly image?: CmsImage;
|
||
|
|
readonly file?: CmsFile;
|
||
|
|
readonly fileLabel?: string;
|
||
|
|
readonly externalUrl?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------------------------------------------
|
||
|
|
LOADER
|
||
|
|
------------------------------------------------------------------------ */
|
||
|
|
|
||
|
|
export async function loader({ params, request }: Route.LoaderArgs) {
|
||
|
|
const locale = requireLocale(params.lang);
|
||
|
|
const search = new URL(request.url).searchParams;
|
||
|
|
|
||
|
|
const page = parsePage(search);
|
||
|
|
const type = parseOptionalEnum(search, "type", RESOURCE_TYPES);
|
||
|
|
const topic = parseSlug(search, "topic");
|
||
|
|
const author = parseExactText(search, "author");
|
||
|
|
const partner = parseSlug(search, "partner");
|
||
|
|
const year = parseYear(search);
|
||
|
|
const sort = parseSort(search);
|
||
|
|
|
||
|
|
const filters = compactFilters({
|
||
|
|
resourceType: type ? { $eq: type } : undefined,
|
||
|
|
topics: topic ? { slug: { $eq: topic } } : undefined,
|
||
|
|
// A string field, so an exact match - not a relation lookup.
|
||
|
|
authors: author ? { $eq: author } : undefined,
|
||
|
|
partnerOrganisations: partner ? { slug: { $eq: partner } } : undefined,
|
||
|
|
[DATE_FIELD]: year ? yearFilter(year) : undefined,
|
||
|
|
});
|
||
|
|
|
||
|
|
// One round trip per facet, all in flight together: the listing itself, the
|
||
|
|
// three taxonomies behind the ToR filters, and the years actually covered.
|
||
|
|
const [listing, topicOptions, authorOptions, partnerOptions, years] =
|
||
|
|
await Promise.all([
|
||
|
|
fetchCollection<ResourceEntry>(CMS.resources, {
|
||
|
|
locale,
|
||
|
|
filters,
|
||
|
|
sort: sortFor(DATE_FIELD, sort),
|
||
|
|
populate: {
|
||
|
|
thumbnail: {
|
||
|
|
fields: ["url", "alternativeText", "width", "height", "formats"],
|
||
|
|
},
|
||
|
|
file: { fields: ["url", "name", "ext", "mime", "size"] },
|
||
|
|
partnerOrganisations: { fields: ["name", "slug"] },
|
||
|
|
topics: { fields: ["name", "slug"] },
|
||
|
|
},
|
||
|
|
pagination: { page, pageSize: PAGE_SIZE, withCount: true },
|
||
|
|
}),
|
||
|
|
fetchFilterOptions(CMS.topics, locale),
|
||
|
|
fetchDistinctValues(CMS.resources, locale, "authors"),
|
||
|
|
fetchFilterOptions(CMS.partners, locale),
|
||
|
|
fetchYearOptions(CMS.resources, locale, DATE_FIELD),
|
||
|
|
]);
|
||
|
|
|
||
|
|
const entries: ResourceListItem[] = listing.entries.map((entry) =>
|
||
|
|
toListItem(entry, locale),
|
||
|
|
);
|
||
|
|
|
||
|
|
return {
|
||
|
|
entries,
|
||
|
|
pagination: buildPagination(page, PAGE_SIZE, listing.pagination.total),
|
||
|
|
available: listing.available,
|
||
|
|
filters: {
|
||
|
|
type: type ?? "",
|
||
|
|
topic: topic ?? "",
|
||
|
|
author: author ?? "",
|
||
|
|
partner: partner ?? "",
|
||
|
|
year: year === undefined ? "" : String(year),
|
||
|
|
sort,
|
||
|
|
},
|
||
|
|
facets: {
|
||
|
|
types: enumOptions(RESOURCE_TYPES, TYPE_LABEL, locale),
|
||
|
|
topics: topicOptions,
|
||
|
|
authors: authorOptions,
|
||
|
|
partners: partnerOptions,
|
||
|
|
years: yearOptions(years, locale),
|
||
|
|
sorts: enumOptions(SORT_ORDERS, SORT_LABEL, locale),
|
||
|
|
} satisfies Readonly<Record<string, readonly SelectOption[]>>,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
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();
|
||
|
|
|
||
|
|
return {
|
||
|
|
id: entry.documentId,
|
||
|
|
slug: entry.slug,
|
||
|
|
title: entry.title,
|
||
|
|
...(entry.description ? { summary: entry.description } : {}),
|
||
|
|
...(entry.resourceType
|
||
|
|
? { typeLabel: translate(locale, TYPE_LABEL[entry.resourceType]) }
|
||
|
|
: {}),
|
||
|
|
...(date ? { date, dateLabel: formatDate(date, locale) } : {}),
|
||
|
|
...(authors ? { authors } : {}),
|
||
|
|
partners: taxonomyNames(entry.partnerOrganisations),
|
||
|
|
topics: taxonomyNames(entry.topics),
|
||
|
|
...(image ? { image } : {}),
|
||
|
|
...(file
|
||
|
|
? {
|
||
|
|
file,
|
||
|
|
fileLabel: `${file.kind} · ${formatFileSize(file.sizeBytes, locale)}`,
|
||
|
|
}
|
||
|
|
: {}),
|
||
|
|
...(entry.externalUrl ? { externalUrl: entry.externalUrl } : {}),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------------------------------------------
|
||
|
|
META
|
||
|
|
------------------------------------------------------------------------ */
|
||
|
|
|
||
|
|
export function meta({ matches, loaderData }: Route.MetaArgs) {
|
||
|
|
const root = readRootSeo(matches);
|
||
|
|
const copy = RESOURCES_COPY[root.locale];
|
||
|
|
|
||
|
|
return buildMeta({
|
||
|
|
locale: root.locale,
|
||
|
|
pathname: root.pathname,
|
||
|
|
siteUrl: root.siteUrl,
|
||
|
|
title: copy.heading,
|
||
|
|
description: copy.metaDescription,
|
||
|
|
// If the CMS could not be reached the page is an empty shell, not an empty
|
||
|
|
// section - keep it out of the index rather than teaching a crawler that
|
||
|
|
// SHARP-ER has published nothing.
|
||
|
|
noIndex: loaderData?.available === false,
|
||
|
|
jsonLd: buildBreadcrumbJsonLd(root.siteUrl, [
|
||
|
|
{ name: "SHARP-ER", pathname: sectionPath("home", root.locale) },
|
||
|
|
{ name: copy.heading, pathname: sectionPath("resources", root.locale) },
|
||
|
|
]),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------------------------------------------------------------------------
|
||
|
|
PAGE
|
||
|
|
------------------------------------------------------------------------ */
|
||
|
|
|
||
|
|
export default function ResourcesAndPublications({
|
||
|
|
loaderData,
|
||
|
|
}: Route.ComponentProps) {
|
||
|
|
const { entries, pagination, filters, facets } = loaderData;
|
||
|
|
const { t, locale } = useTranslation();
|
||
|
|
const { pathname, search } = useLocation();
|
||
|
|
const params = new URLSearchParams(search);
|
||
|
|
|
||
|
|
const copy = RESOURCES_COPY[locale];
|
||
|
|
const isFiltered =
|
||
|
|
Boolean(filters.type) ||
|
||
|
|
Boolean(filters.topic) ||
|
||
|
|
Boolean(filters.author) ||
|
||
|
|
Boolean(filters.partner) ||
|
||
|
|
Boolean(filters.year);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageShell>
|
||
|
|
<PageHeader heading={copy.heading} intro={copy.intro} />
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<ResultSummary pagination={pagination} t={t} />
|
||
|
|
|
||
|
|
{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-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>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Pagination model={pagination} pathname={pathname} params={params} t={t} />
|
||
|
|
</section>
|
||
|
|
</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.
|
||
|
|
------------------------------------------------------------------------ */
|
||
|
|
|
||
|
|
function ResourceRow({
|
||
|
|
entry,
|
||
|
|
href,
|
||
|
|
readLabel,
|
||
|
|
downloadLabel,
|
||
|
|
}: {
|
||
|
|
entry: ResourceListItem;
|
||
|
|
href: string;
|
||
|
|
readLabel: string;
|
||
|
|
downloadLabel: string;
|
||
|
|
}) {
|
||
|
|
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>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap items-center gap-md">
|
||
|
|
<CardActionHint label={readLabel} />
|
||
|
|
|
||
|
|
{downloadHref ? (
|
||
|
|
// `sh-card-above` lifts it over the stretched title link, so the
|
||
|
|
// download stays its own target instead of opening the detail page.
|
||
|
|
<Button
|
||
|
|
as="a"
|
||
|
|
href={downloadHref}
|
||
|
|
variant="secondary"
|
||
|
|
size="sm"
|
||
|
|
className="sh-card-above"
|
||
|
|
{...(entry.file
|
||
|
|
? { download: entry.file.name }
|
||
|
|
: { target: "_blank", rel: "noopener noreferrer" })}
|
||
|
|
>
|
||
|
|
{downloadLabel}
|
||
|
|
</Button>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardShell>
|
||
|
|
);
|
||
|
|
}
|