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
@@ -3,10 +3,11 @@
|
||||
----------------------------------------------------------------------------
|
||||
/{locale}/news-and-updates
|
||||
|
||||
§5 of docs/SHARPER_Website_Draft_Section_EN_AR.docx. Two streams, exactly as
|
||||
the draft describes them:
|
||||
§5 of docs/SHARPER_Website_Draft_Section_EN_AR.docx, laid out to the 2026
|
||||
redesign draft ("News-and-Updates"): an ambient hero, the two-stream tab
|
||||
strip, one wide lead card over a three-up grid, and the partner callout.
|
||||
|
||||
Tab 1 SHARP-ER News ?tab=sharper-news official project updates
|
||||
Tab 1 SHARP-ER News ?tab=sharper-news official project updates
|
||||
Tab 2 From the Network ?tab=from-the-network updates submitted by CSOs
|
||||
granted as part of the consortium,
|
||||
each card crediting the
|
||||
@@ -18,13 +19,30 @@
|
||||
The tabs are LINKS, not client-side state: each stream is its own URL, so it
|
||||
can be shared, bookmarked and crawled, and the server renders exactly what
|
||||
the address asks for. `aria-current="page"` marks the active one.
|
||||
|
||||
NOTHING FROM THE DRAFT'S SAMPLE FEED IS HERE. Every headline, date, tag,
|
||||
excerpt and byline it shows - the launch event, the Misrata sub-project, the
|
||||
fact sheet, "30 JUN 2026" - was sample content written for the mockup. Each
|
||||
card is built from a Strapi entry or the localised empty state renders
|
||||
instead (CLAUDE.md rule 5).
|
||||
========================================================================= */
|
||||
|
||||
import { Link, useLocation } from "react-router";
|
||||
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { formatDate, sectionPath, useTranslation, type Locale } from "~/i18n";
|
||||
import {
|
||||
CardActionHint,
|
||||
CardLink,
|
||||
CardMedia,
|
||||
CardShell,
|
||||
} from "~/components/ui/Card";
|
||||
import {
|
||||
formatDate,
|
||||
sectionPath,
|
||||
toIsoDate,
|
||||
useTranslation,
|
||||
type Locale,
|
||||
} from "~/i18n";
|
||||
import { buildBreadcrumbJsonLd, buildMeta } from "~/lib/seo";
|
||||
|
||||
import type { Route } from "./+types/news-and-updates";
|
||||
@@ -32,6 +50,7 @@ import {
|
||||
CMS,
|
||||
NEWS_CATEGORIES,
|
||||
fetchCollection,
|
||||
taxonomyNames,
|
||||
toImage,
|
||||
type CmsImage,
|
||||
type NewsCategory,
|
||||
@@ -48,15 +67,18 @@ import {
|
||||
withParam,
|
||||
} from "./_shared/listing";
|
||||
import {
|
||||
CalloutBand,
|
||||
EmptyState,
|
||||
PageHeader,
|
||||
ListingHero,
|
||||
PageShell,
|
||||
Pagination,
|
||||
ResultSummary,
|
||||
TabLinks,
|
||||
type TabLink,
|
||||
} from "./_shared/listing-ui";
|
||||
import { NEWS_COPY } from "./_shared/page-copy";
|
||||
import { NEWS_COPY, getListingChrome } from "./_shared/page-copy";
|
||||
|
||||
import "./_page-kit/motion.css";
|
||||
|
||||
/** Tab 1 is the default stream, matching the order of the draft. */
|
||||
const DEFAULT_TAB: NewsCategory = "sharper-news";
|
||||
@@ -70,7 +92,10 @@ interface NewsListItem {
|
||||
readonly title: string;
|
||||
readonly excerpt?: string;
|
||||
readonly organisation?: string;
|
||||
readonly date?: string;
|
||||
readonly dateLabel?: string;
|
||||
/** First topic of the entry - the draft's coloured chip. From the CMS only. */
|
||||
readonly tag?: string;
|
||||
readonly image?: CmsImage;
|
||||
}
|
||||
|
||||
@@ -95,6 +120,9 @@ export async function loader({ params, request }: Route.LoaderArgs) {
|
||||
},
|
||||
// A relation, not a string: without this the byline is simply absent.
|
||||
authorOrganisation: { fields: ["name", "slug"] },
|
||||
// Drives the draft's chip above the headline. Nothing is invented: a
|
||||
// card with no topic simply has no chip.
|
||||
topics: { fields: ["name", "slug"] },
|
||||
},
|
||||
pagination: { page, pageSize: PAGE_SIZE, withCount: true },
|
||||
});
|
||||
@@ -112,9 +140,10 @@ export async function loader({ params, request }: Route.LoaderArgs) {
|
||||
}
|
||||
|
||||
function toListItem(entry: NewsEntry, locale: Locale): NewsListItem {
|
||||
const image = toImage(entry.coverImage, "small");
|
||||
const image = toImage(entry.coverImage, "medium");
|
||||
const date = entry.publishDate ?? entry.publishedAt ?? undefined;
|
||||
const organisation = entry.authorOrganisation?.name;
|
||||
const tag = taxonomyNames(entry.topics)[0];
|
||||
|
||||
return {
|
||||
id: entry.documentId,
|
||||
@@ -122,7 +151,8 @@ function toListItem(entry: NewsEntry, locale: Locale): NewsListItem {
|
||||
title: entry.title,
|
||||
...(entry.excerpt ? { excerpt: entry.excerpt } : {}),
|
||||
...(organisation ? { organisation } : {}),
|
||||
...(date ? { dateLabel: formatDate(date, locale) } : {}),
|
||||
...(date ? { date, dateLabel: formatDate(date, locale) } : {}),
|
||||
...(tag ? { tag } : {}),
|
||||
...(image ? { image } : {}),
|
||||
};
|
||||
}
|
||||
@@ -166,6 +196,7 @@ export default function NewsAndUpdates({ loaderData }: Route.ComponentProps) {
|
||||
const params = new URLSearchParams(search);
|
||||
|
||||
const copy = NEWS_COPY[locale];
|
||||
const chrome = getListingChrome(locale).news;
|
||||
const empty = new URLSearchParams();
|
||||
|
||||
const tabs: TabLink[] = [
|
||||
@@ -183,71 +214,227 @@ export default function NewsAndUpdates({ loaderData }: Route.ComponentProps) {
|
||||
},
|
||||
];
|
||||
|
||||
/* The draft leads the page with one wide card. It is the newest entry of the
|
||||
stream, and only on page 1 - page 4 of an archive has no "lead story". */
|
||||
const isFirstPage = pagination.page === 1;
|
||||
const [lead, ...rest] = entries;
|
||||
const featured = isFirstPage ? lead : undefined;
|
||||
const grid = featured ? rest : entries;
|
||||
|
||||
const hrefOf = (entry: NewsListItem) =>
|
||||
`${sectionPath("news", locale)}/${entry.slug}`;
|
||||
|
||||
return (
|
||||
<PageShell>
|
||||
<PageHeader heading={copy.heading} intro={copy.intro} />
|
||||
|
||||
<section className="flex flex-col gap-lg" aria-label={copy.heading}>
|
||||
<TabLinks label={t("nav.sections.news")} tabs={tabs} />
|
||||
|
||||
<p className="body-md max-w-[var(--layout-prose-max)] text-text-secondary">
|
||||
{tab === "from-the-network" ? copy.networkBlurb : copy.projectBlurb}
|
||||
</p>
|
||||
|
||||
<ResultSummary pagination={pagination} t={t} />
|
||||
|
||||
{entries.length === 0 ? (
|
||||
<EmptyState title={copy.emptyTitle} body={copy.emptyBody}>
|
||||
{tab === "from-the-network" ? (
|
||||
<Button
|
||||
as={Link}
|
||||
to={sectionPath("contact", locale)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
{t("actions.submitYourUpdate")}
|
||||
</Button>
|
||||
) : null}
|
||||
</EmptyState>
|
||||
) : (
|
||||
<ul className="grid gap-lg sm:grid-cols-2 lg:grid-cols-3">
|
||||
{entries.map((entry) => (
|
||||
<Card.Content
|
||||
key={entry.id}
|
||||
as="li"
|
||||
href={`${sectionPath("news", locale)}/${entry.slug}`}
|
||||
title={entry.title}
|
||||
actionLabel={t("actions.readMore")}
|
||||
eyebrow={
|
||||
entry.organisation
|
||||
? t("news.postedBy", { organisation: entry.organisation })
|
||||
: entry.dateLabel
|
||||
}
|
||||
{...(entry.excerpt ? { excerpt: entry.excerpt } : {})}
|
||||
{...(entry.dateLabel && entry.organisation
|
||||
? { badge: entry.dateLabel }
|
||||
: {})}
|
||||
{...(entry.image ? { image: entry.image } : {})}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<Pagination model={pagination} pathname={pathname} params={params} t={t} />
|
||||
</section>
|
||||
|
||||
{/* "Are you a partner organisation? Submit your update ->" - §5 of the
|
||||
draft. It points at Contact, which is where a submission is handled
|
||||
until the CMS grows a submission form. */}
|
||||
<Card.CTA
|
||||
eyebrow={t("news.tabNetwork")}
|
||||
headline={t("news.partnerPrompt")}
|
||||
body={copy.networkBlurb}
|
||||
action={{
|
||||
href: sectionPath("contact", locale),
|
||||
label: t("actions.submitYourUpdate"),
|
||||
}}
|
||||
<>
|
||||
<ListingHero
|
||||
eyebrow={chrome.eyebrow}
|
||||
heading={copy.heading}
|
||||
intro={copy.intro}
|
||||
ambient={[{ top: -250, from: "start", offset: "8%", width: 720, height: 560, durationSeconds: 20 }]}
|
||||
/>
|
||||
</PageShell>
|
||||
|
||||
<PageShell>
|
||||
<section className="flex flex-col gap-lg" aria-label={copy.heading}>
|
||||
<TabLinks label={t("nav.sections.news")} tabs={tabs} />
|
||||
|
||||
<p className="body-md max-w-[var(--layout-prose-max)] text-text-secondary">
|
||||
{tab === "from-the-network" ? copy.networkBlurb : copy.projectBlurb}
|
||||
</p>
|
||||
|
||||
<ResultSummary pagination={pagination} t={t} />
|
||||
|
||||
{entries.length === 0 ? (
|
||||
<EmptyState title={copy.emptyTitle} body={copy.emptyBody}>
|
||||
{tab === "from-the-network" ? (
|
||||
<Button
|
||||
as={Link}
|
||||
to={sectionPath("contact", locale)}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
{t("actions.submitYourUpdate")}
|
||||
</Button>
|
||||
) : null}
|
||||
</EmptyState>
|
||||
) : (
|
||||
<>
|
||||
{featured ? (
|
||||
<>
|
||||
<h2 className="sr-only">{chrome.featuredLabel}</h2>
|
||||
<FeaturedNewsCard
|
||||
entry={featured}
|
||||
href={hrefOf(featured)}
|
||||
actionLabel={chrome.readFull}
|
||||
/>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{grid.length > 0 ? (
|
||||
<>
|
||||
<h2 className="sr-only">{chrome.moreLabel}</h2>
|
||||
<ul className="grid gap-lg sm:grid-cols-2 lg:grid-cols-3">
|
||||
{grid.map((entry) => (
|
||||
<NewsCard
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
href={hrefOf(entry)}
|
||||
creditLabel={
|
||||
entry.organisation
|
||||
? t("news.postedBy", {
|
||||
organisation: entry.organisation,
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Pagination model={pagination} pathname={pathname} params={params} t={t} />
|
||||
</section>
|
||||
|
||||
{/* "Are you a partner organisation? Submit your update ->" - §5 of the
|
||||
draft. It points at Contact, which is where a submission is handled
|
||||
until the CMS grows a submission form. */}
|
||||
<CalloutBand
|
||||
eyebrow={t("news.tabNetwork")}
|
||||
headline={t("news.partnerPrompt")}
|
||||
body={copy.networkBlurb}
|
||||
action={{
|
||||
to: sectionPath("contact", locale),
|
||||
label: t("actions.submitYourUpdate"),
|
||||
}}
|
||||
/>
|
||||
</PageShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
THE TWO CARDS
|
||||
Composed from the exported card primitives rather than Card.Content: the
|
||||
draft's newsroom cards carry a chip-and-date row above the headline and a
|
||||
credit line pinned to the foot, neither of which that card has a slot for.
|
||||
------------------------------------------------------------------------ */
|
||||
|
||||
/** The chip-and-date row. Both halves are optional and both come from Strapi. */
|
||||
function NewsMetaRow({ entry }: { entry: NewsListItem }) {
|
||||
if (!entry.tag && !entry.dateLabel) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-sm">
|
||||
{entry.tag ? (
|
||||
<span className="rounded-[var(--radius-control)] bg-surface-accent-subtle px-xs py-2xs label-md uppercase text-text-accent">
|
||||
{entry.tag}
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{entry.dateLabel ? (
|
||||
<time
|
||||
dateTime={toIsoDate(entry.date)}
|
||||
className="label-md text-text-tertiary"
|
||||
>
|
||||
{entry.dateLabel}
|
||||
</time>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The wide lead card: picture beside the story, stacked on a phone. */
|
||||
function FeaturedNewsCard({
|
||||
entry,
|
||||
href,
|
||||
actionLabel,
|
||||
}: {
|
||||
entry: NewsListItem;
|
||||
href: string;
|
||||
actionLabel: string;
|
||||
}) {
|
||||
return (
|
||||
<CardShell
|
||||
linked
|
||||
className="sh-reveal sh-reveal--in flex-col overflow-hidden md:flex-row"
|
||||
>
|
||||
{entry.image ? (
|
||||
<div className="relative md:w-1/2 md:shrink-0">
|
||||
<CardMedia image={entry.image} className="aspect-[16/10] w-full md:h-full" />
|
||||
{/* The highlight travelling across the picture - the draft's sheen. */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="sh-sheen pointer-events-none absolute inset-0 bg-[linear-gradient(100deg,transparent_35%,var(--overlay-veil)_50%,transparent_65%)]"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-1 flex-col justify-center gap-md p-xl">
|
||||
<NewsMetaRow entry={entry} />
|
||||
|
||||
<h3 className="sh-card-title heading-h3 text-text-primary">
|
||||
<CardLink href={href} className="sh-card-link">
|
||||
{entry.title}
|
||||
</CardLink>
|
||||
</h3>
|
||||
|
||||
{entry.excerpt ? (
|
||||
<p className="body-md text-text-secondary">{entry.excerpt}</p>
|
||||
) : null}
|
||||
|
||||
<CardActionHint label={actionLabel} />
|
||||
</div>
|
||||
</CardShell>
|
||||
);
|
||||
}
|
||||
|
||||
/** One card of the three-up grid. */
|
||||
function NewsCard({
|
||||
entry,
|
||||
href,
|
||||
creditLabel,
|
||||
}: {
|
||||
entry: NewsListItem;
|
||||
href: string;
|
||||
creditLabel?: string;
|
||||
}) {
|
||||
return (
|
||||
<CardShell
|
||||
as="li"
|
||||
linked
|
||||
className="sh-reveal sh-reveal--in flex-col overflow-hidden"
|
||||
>
|
||||
{entry.image ? (
|
||||
<CardMedia image={entry.image} className="aspect-[9/5] w-full" />
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-1 flex-col gap-md p-lg">
|
||||
<div className="flex flex-col gap-xs">
|
||||
<NewsMetaRow entry={entry} />
|
||||
|
||||
<h3 className="sh-card-title body-lg-bold text-text-primary">
|
||||
<CardLink href={href} className="sh-card-link">
|
||||
{entry.title}
|
||||
</CardLink>
|
||||
</h3>
|
||||
|
||||
{entry.excerpt ? (
|
||||
<p className="body-sm text-text-secondary line-clamp-3">
|
||||
{entry.excerpt}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* The draft closes the small card with the crediting byline and
|
||||
nothing else - the read-more affordance belongs to the lead card
|
||||
only, and the headline is already the link. */}
|
||||
{creditLabel ? (
|
||||
<p className="mt-auto label-md uppercase text-text-tertiary">
|
||||
{creditLabel}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</CardShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user