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

Land the third design drop, seed the CMS, and retire the figures band

Browse Source 
Three pieces of one session's work. They are in one commit because home.tsx
and _page-kit/copy.ts carry hunks from all three and splitting them by hand
would have meant committing intermediate states of those two files that were
never built or served.

THE THIRD DESIGN DROP

Only Home.dc.html and SiteFooter.dc.html differ from the second drop; the
other nine page drafts are byte-identical to what already ships.

The home page stops opening on a launch announcement dated to one day in
June. New headline, lead and primary call to action ("See open calls"), and
the launch band becomes "A nationwide project, delivered locally" -
launchEyebrow/Heading/Lead renamed approach*, LaunchShots renamed
GalleryShots, since the band is no longer about an event. Its Arabic reuses
the About page's already-approved wording for the coverage line and the body
heading; the new lead and headline are ar-draft like the rest of the Arabic
home copy and still want client sign-off.

Five motion classes in _page-kit/motion.css, tokens only, each with its RTL
form where the property has no logical one: sh-wipe (the headline uncovered
from the inline start), sh-pan (the hero picture on a view timeline), sh-zoom
(a picture closing in inside its frame), sh-rule-top (an accent rule drawn
across a hovered tile) and sh-marquee (the logo wall). sh-wipe fills
`backwards`, not `both`, so the clip is gone at rest - inset(0) would shave a
descender or an Arabic mark off a tight heading line - and it is removed
outright under prefers-reduced-motion, because a clip does not fade a
headline, it hides it.

The marquee carries each logo twice and slides exactly half the track, so its
spacing is a margin on the tile rather than a gap on the row: with a row gap
the seam lands half a gap short. The second half is aria-hidden with no link,
so the wall is neither read out nor tabbed through twice; it pauses on hover
and focus (WCAG 2.2.2) and unwraps to a plain row under reduced motion. Below
eight partners the wall stays a grid, because a half-track narrower than its
frame drifts a short row across empty space instead of looping.

SEEDING THE CMS

`pnpm seed` writes content through the document service. It opens no port, so
it runs happily beside `pnpm dev:cms`, and every write is matched on a slug
and written over the same document, so a second run changes nothing but the
fields the seed owns.

src/seed/approved.ts is transcribed from docs/ in both languages and is safe
to publish: site settings, the three consortium members, the topic taxonomy,
the five activity streams with their implementing partners, the launch
article in full, and the four pages. What docs/ withholds is not written -
no statistics, no project email, no Facebook URL, no consortium addresses,
all of which the source writes as bracketed placeholders. Two fields are
judgement calls and say so at the line: activityStatus, which the schema
requires and the source never states, and the launch article's year, which is
derived - the source says "Tuesday, June 30" and within December 2025 to
December 2027 that is 2026 and no other year.

src/seed/demo.ts is invented and kept apart three ways: opt-in behind --demo,
refused outright when NODE_ENV=production, and tagged in the data itself with
a demo- slug prefix that shows in every URL and is how --demo --clean finds
them again, with nothing remembered between runs.

Two things the Strapi 5 document service does not do by itself, both of which
leave Arabic rows behind that the next run then collides with on the unique
slug: delete({ documentId }) with no locale removes the DEFAULT locale only,
not the document, and findMany({ locale }) answers for one locale, so a
document whose English half has gone is invisible to a search in English. The
first --clean left six Arabic orphans and failed the next run partway.
deleteMatching now pools documentIds across both locales and deletes with
locale: '*'.

Knex aborts its pending pool acquisitions on teardown, and each abort rejects
a promise nothing awaits, so it arrives as an unhandled rejection rather than
as an error a try/catch would see. scripts/seed.js absorbs exactly that, for
the length of the shutdown only: a seed that worked must not report itself as
a seed that failed.

THE FIGURES BAND, AND THE BAND THAT REPLACED IT

The third draft deletes the figures band, so shared.stat and blocks.stats-grid
are deleted with it, home-page.stats is dropped, and blocks.stats-grid comes
out of all six dynamic zones. On the web side that takes CmsStat, StatsRow,
CountUpValue, StatStrip and Card.Stat - the last two were already dead, but
they existed only to draw figures. No approved document carries a number, so
there is now nowhere for one to be typed in, which is the point.

The "nationwide project, delivered locally" band was half editable and half
not: its pictures came from an image-gallery block down the Blocks dynamic
zone, and its words came from bundled fallback copy with no CMS field at all.
The new page.band-intro component (eyebrow, heading, lead, images) on
home-page.approach puts the whole band in one place in the admin. The page
still falls back to the bundled copy when the fields are empty, and still
reads an image-gallery block after the component's own images, so a gallery
built in Blocks keeps rendering.

VERIFIED

pnpm typecheck and both builds pass. Both rule greps are clean: no raw hex or
tier-1 token in components/ or routes/, no physical-direction utility in
apps/web/app.

Against a seeded CMS on the built server: / redirects 302 with
Vary: Accept-Language, and all ten sections plus the detail routes return 200
in both locales with lang/dir correct in the first bytes. The home page draws
the marquee from twelve partners, the hero pan, the three hovered card rules
and the status pill, and carries no figures band.

The seed is idempotent - two identical --demo runs give identical counts,
balanced across locales - and a clean/re-seed cycle leaves nothing behind.
The approach band was proved editable end to end: heading, eyebrow, lead and
images changed through the CMS all came through on /en while /ar stayed on
its own Arabic, then the seeded copy was restored.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Illusion
2026-09-20 14:16:53 +02:00
co-authored by Claude Opus 5
parent 2ed3a17914
commit 2e920a96e7
30 changed files with 2994 additions and 484 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/routes/home.tsx
+171 -179
View File
@@ -1,15 +1,18 @@
/* ============================================================================
HOME - /en and /ar
----------------------------------------------------------------------------
The redesigned home page (Claude Design "Home", second drop), carried onto
the project's own design system. Six bands, alternating the two dark
surfaces the way the draft alternates #0B0B0A and #1D1D1B:
The redesigned home page (Claude Design "Home page redesign with news and
FAQs", third drop), carried onto the project's own design system. Six bands,
alternating the two dark surfaces the way the draft alternates #0B0B0A and
#1D1D1B:
Hero EU badge, an optional status pill, the headline, the lead,
the CTA pair, the wide picture, the brand stripe and the
figures row. Two slow washes drift behind it.
Launch "An important start for the project": the launch lead and
three pictures from the CMS gallery.
the CTA pair, the wide picture and the brand stripe. Two
slow washes drift behind it.
Approach "A nationwide project, delivered locally": what the project
does, and up to three pictures. Heading, lead and pictures
are all `home-page.approach`, so the band is edited in one
place rather than half in a field and half in Blocks.
Work "Three areas of change" - the three approved pillars, with
a link through to What We Do.
Newsroom three cards from the newsroom, newest first.
@@ -20,25 +23,26 @@
--------------------------------------------
* The draft's FAQ column promises a reply "within five working days". That
commitment appears in no approved document, so it is not published
(CLAUDE.md rule 5). Everything else in the draft is verifiable: the four
figures, the ministries at the launch and the three pillars are all in
docs/ or in the bundled draft copy.
* Every list - news, questions, partner logos, launch pictures - is CMS
(CLAUDE.md rule 5). Everything else in the draft is verifiable against
docs/ or the bundled draft copy.
* The figures band the second drop carried is gone, as it is from the third
draft, and so is the `home-page.stats` component behind it: no approved
document carries a number, so there was never anything to put in it.
* Every list - news, questions, partner logos, band pictures - is CMS
data, never the draft's sample entries. Each band shows its localised
empty state instead of inventing content.
* The draft's own navigation and footer are ignored: the site ships
<Navigation /> and <Footer /> from the app shell.
MOTION: every animation in the draft is here, as classes from
_page-kit/motion.css, plus the figures counting up on arrival. The one
effect deliberately dropped is the coloured glow behind a hovered button or
card.
_page-kit/motion.css - the headline wipe, the hero picture's scroll-driven
drift, the gallery and card hovers, the logo marquee. The one effect
deliberately dropped is the coloured glow behind a hovered button or card.
There is no Arabic frame, so /ar is this same DOM under `dir="rtl"`, which
is why every inline edge below is logical (ps-/pe-/start-/end-).
========================================================================= */
import { useEffect, useLayoutEffect, useState } from "react";
import { Link } from "react-router";
import { ArrowIcon, Button } from "~/components/ui/Button";
@@ -74,6 +78,7 @@ import {
toImage,
toPartner,
type ResolvedImage,
type ResolvedPartner,
} from "./_page-kit/cms.server";
import { pageCopy } from "./_page-kit/copy";
import { routeLocale } from "./_page-kit/locale";
@@ -90,12 +95,21 @@ import "./_page-kit/motion.css";
/** The network logo wall - a wide but finite grid. */
const PARTNER_PAGE_SIZE = 36;
/**
* Below this many partners the wall stays a grid.
*
* The marquee loops by carrying the tiles twice and sliding exactly half the
* track, which only reads as a loop while the half is wider than the frame it
* slides through. Eight 178px tiles clear a desktop container; fewer would
* drift a short row across an empty band, so the grid keeps them still.
*/
const PARTNER_MARQUEE_MIN = 8;
/** The draft's newsroom band is a straight three-up row. */
const NEWS_PAGE_SIZE = 3;
/** More than a dozen questions is a page of its own, not a home page band. */
const FAQ_PAGE_SIZE = 12;
/** The draft's launch band shows three pictures. */
const LAUNCH_SHOTS = 3;
/** The draft's approach band shows three pictures. */
const GALLERY_SHOTS = 3;
/** A newsroom card, already localised and safe to serialise to the client. */
interface NewsCard {
@@ -131,7 +145,7 @@ export async function loader({ params }: Route.LoaderArgs) {
locale,
populate: {
hero: { populate: { media: true, ctas: true } },
stats: true,
approach: { populate: { images: true } },
// Strapi 5 populates a dynamic zone per component with `on`.
blocks: { on: { "blocks.image-gallery": { populate: { images: true } } } },
featuredNews: { populate: { coverImage: true, authorOrganisation: true } },
@@ -174,9 +188,15 @@ export async function loader({ params }: Route.LoaderArgs) {
pagination: { pageSize: FAQ_PAGE_SIZE },
});
const gallery = list(page?.blocks)
.filter(isImageGalleryBlock)
.flatMap((block) => list(block.images))
/* The band's own pictures come first. An `image-gallery` block is still
read after them, so a gallery an editor built in the Blocks zone before
the band had a media field of its own keeps rendering. */
const gallery = [
...list(page?.approach?.images),
...list(page?.blocks)
.filter(isImageGalleryBlock)
.flatMap((block) => list(block.images)),
]
.map((image) => toImage(image, "medium"))
.filter((image): image is ResolvedImage => image !== undefined);
@@ -193,12 +213,12 @@ export async function loader({ params }: Route.LoaderArgs) {
variant: cta.variant ?? "primary",
})),
},
/* Editor-owned figures win; the bundled four stand in until then. */
stats: list(page?.stats).map((stat) => ({
value: stat.value,
label: stat.label,
})),
gallery: gallery.slice(0, LAUNCH_SHOTS),
approach: {
eyebrow: page?.approach?.eyebrow ?? null,
heading: page?.approach?.heading ?? null,
lead: page?.approach?.lead ?? null,
},
gallery: gallery.slice(0, GALLERY_SHOTS),
partnersHeadline: page?.partnersHeadline ?? null,
partners: partners.map(toPartner),
news: news.slice(0, NEWS_PAGE_SIZE).map((article) => toNewsCard(article, locale)),
@@ -291,93 +311,17 @@ function StatusPill({ label }: { label: string }) {
);
}
/* `useLayoutEffect` would warn during SSR, and the count only exists in a
browser, so the effect is picked per environment. */
const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
/**
* A figure that counts up to its value on arrival, as the draft does.
*
* The server renders the FINAL value, so a reader without JavaScript - and a
* search engine - sees the real figure. In a browser the count is reset before
* the first paint (layout effect, not a plain effect), so the number never
* flashes its end state first. A value the CMS wrote as words rather than
* digits is simply printed.
*/
function CountUpValue({ value }: { value: string }) {
const parsed = /^(\d[\d,]*)([\s\S]*)$/.exec(value);
const target = parsed ? Number(parsed[1]!.replace(/,/g, "")) : null;
const suffix = parsed ? parsed[2]! : "";
const [shown, setShown] = useState<number | null>(target);
useBrowserLayoutEffect(() => {
if (target === null) return;
/* app.css collapses animation, but this one is script-driven, so the
preference has to be honoured here as well. */
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let frame = 0;
const started = performance.now();
const duration = 1500;
setShown(0);
const tick = (now: number) => {
const progress = Math.min(1, (now - started) / duration);
/* Ease out cubic - the draft's own curve. */
setShown(Math.round(target * (1 - Math.pow(1 - progress, 3))));
if (progress < 1) frame = requestAnimationFrame(tick);
};
frame = requestAnimationFrame(tick);
return () => cancelAnimationFrame(frame);
}, [target]);
if (target === null) return <>{value}</>;
return (
<>
{shown}
{suffix}
</>
);
}
/**
* The figures row that closes the hero: four cells divided by hairlines. The
* grid's own background paints the 1px gaps, which is how the draft draws the
* dividers without a border on each cell.
*/
function StatsRow({ stats }: { stats: readonly { value: string; label: string }[] }) {
if (stats.length === 0) return null;
return (
<dl className="grid grid-cols-1 gap-px border-y border-[var(--border-subtle)] bg-[var(--border-subtle)] sm:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => (
/* Source order is term-then-description, as the spec requires; the
reversed column paints the figure above its label without repeating
the label for a screen reader. */
<div
key={`${stat.value}-${stat.label}`}
className="flex flex-col-reverse gap-2xs bg-[var(--surface-sunken)] px-lg py-xl text-start transition-colors duration-[var(--motion-duration-base)] hover:bg-[var(--surface-raised)]"
>
<dt className="label-md uppercase text-[var(--text-tertiary)]">{stat.label}</dt>
<dd className="heading-h1 tabular-nums text-[var(--text-primary)]">
<CountUpValue value={stat.value} />
</dd>
</div>
))}
</dl>
);
}
/**
* The launch band's three pictures. The CMS alt text doubles as the visible
* The approach band's three pictures. The CMS alt text doubles as the visible
* caption - so the picture is described once, in the caption, and the <img>
* itself is marked decorative rather than having a screen reader read the same
* sentence twice.
*
* The frame and the picture hover apart, as the third draft has them: the
* frame lifts and takes the accent hairline (`sh-lift`) while the picture
* closes in inside it (`sh-zoom`, which also does the clipping).
*/
function LaunchShots({ images }: { images: readonly ResolvedImage[] }) {
function GalleryShots({ images }: { images: readonly ResolvedImage[] }) {
if (images.length === 0) return null;
return (
@@ -385,12 +329,14 @@ function LaunchShots({ images }: { images: readonly ResolvedImage[] }) {
{images.map((image) => (
<li key={image.src} className="sh-reveal">
<figure className="flex flex-col gap-xs">
<img
src={image.src}
alt=""
loading="lazy"
className="sh-lift h-[15rem] w-full rounded-control border border-[var(--border-subtle)] object-cover hover:border-[var(--border-accent)]"
/>
<div className="sh-lift sh-zoom rounded-control border border-[var(--border-subtle)] hover:border-[var(--border-accent)]">
<img
src={image.src}
alt=""
loading="lazy"
className="h-[15rem] w-full object-cover"
/>
</div>
{image.alt ? (
<figcaption className="body-sm-bold text-[var(--text-secondary)]">
{image.alt}
@@ -403,6 +349,74 @@ function LaunchShots({ images }: { images: readonly ResolvedImage[] }) {
);
}
/**
* One tile on the civil society logo wall.
*
* `decorative` renders the second half of the marquee track: the same tile,
* hidden from assistive technology, with no link and no alt text, so the loop
* repeats visually without repeating the wall for a screen reader or adding a
* second tab stop per partner.
*/
function PartnerTile({
partner,
fixedWidth = false,
decorative = false,
}: {
partner: ResolvedPartner;
fixedWidth?: boolean;
decorative?: boolean;
}) {
const href = decorative ? undefined : safeHref(partner.website);
/* The logo wall is a wall of equal tiles; the name is the tile's text when
there is no logo to draw, and always its accessible name. */
const inner = partner.logo ? (
<img
src={partner.logo.src}
alt={decorative ? "" : partner.name}
loading="lazy"
className="max-h-[3.5rem] w-auto max-w-full object-contain"
/>
) : (
<span className="body-sm-bold text-center text-[var(--text-secondary)]">
{partner.name}
</span>
);
return (
<li
{...(decorative ? { "aria-hidden": true } : {})}
className={cx(
"flex h-[5.5rem] items-center justify-center",
"rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md",
"transition-colors duration-[var(--motion-duration-base)]",
"hover:border-[var(--border-accent)]",
/* A still grid reveals tile by tile; a travelling track must not, or
each tile would ramp its own opacity while it moves.
The track's spacing is a margin on the tile rather than a `gap` on
the row: the loop slides exactly half the track, so each half has to
carry its own trailing space or the seam lands half a gap short. */
fixedWidth ? "me-md w-[11.125rem] shrink-0" : "sh-reveal sh-reveal--in",
decorative && "sh-marquee__clone",
)}
>
{href ? (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex h-full w-full items-center justify-center"
>
{inner}
</a>
) : (
inner
)}
</li>
);
}
/** The "see the whole section" link the draft puts opposite a band heading. */
function BandLink({ to, label }: { to: string; label: string }) {
return (
@@ -417,7 +431,7 @@ function BandLink({ to, label }: { to: string; label: string }) {
------------------------------------------------------------------------ */
export default function Home({ loaderData }: Route.ComponentProps) {
const { locale, hero, stats, gallery, partners, news, faqs } = loaderData;
const { locale, hero, approach, gallery, partners, news, faqs } = loaderData;
const t = createTranslator(locale);
const copy = pageCopy(locale).home;
/* The three pillars are the About page's approved copy - one source, so the
@@ -426,7 +440,6 @@ export default function Home({ loaderData }: Route.ComponentProps) {
const headline = hero.headline ?? copy.heroHeadline;
const lead = hero.subheading ?? copy.heroLead;
const figures = stats.length > 0 ? stats : copy.stats;
const consortiumHeading = loaderData.partnersHeadline ?? copy.consortiumHeading;
/* The frame draws one accent CTA and one white one. Editor-supplied CTAs go
@@ -462,7 +475,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
/>
<PageHero
className="bg-[var(--surface-sunken)] [--layout-hero-top:clamp(2.5rem,6vw,4.5rem)] [--layout-hero-bottom:var(--spacing-2xl)]"
className="bg-[var(--surface-sunken)] [--layout-hero-top:clamp(2.5rem,6vw,4.5rem)] [--layout-hero-bottom:var(--spacing-md)]"
title={headline}
lead={lead}
leadWithActions
@@ -500,28 +513,29 @@ export default function Home({ loaderData }: Route.ComponentProps) {
actions={heroCtas.map((cta) => (
<HeroCta key={`${cta.href}-${cta.label}`} {...cta} />
))}
below={<StatsRow stats={figures} />}
/>
{/* THE LAUNCH */}
{/* WHAT THE PROJECT IS, AND WHO DELIVERS IT */}
<PageSection
aria-labelledby="home-launch-heading"
aria-labelledby="home-approach-heading"
band
>
<div className="flex flex-col gap-3xl">
<div className="sh-reveal mx-auto flex max-w-[55rem] flex-col items-center gap-lg text-center">
<SectionHeader
id="home-launch-heading"
eyebrow={copy.launchEyebrow}
title={copy.launchHeading}
id="home-approach-heading"
eyebrow={approach.eyebrow ?? copy.approachEyebrow}
title={approach.heading ?? copy.approachHeading}
size="display"
align="center"
/>
<p className="body-lg text-[var(--text-secondary)]">{copy.launchLead}</p>
<p className="body-lg text-[var(--text-secondary)]">
{approach.lead ?? copy.approachLead}
</p>
</div>
<LaunchShots images={gallery} />
<GalleryShots images={gallery} />
</div>
</PageSection>
@@ -545,7 +559,9 @@ export default function Home({ loaderData }: Route.ComponentProps) {
{pillars.map((pillar) => (
<li
key={pillar.title}
className="sh-lift sh-reveal sh-reveal--in flex h-full flex-col gap-sm rounded-card border border-[var(--border-subtle)] bg-[var(--surface-card)] p-xl hover:border-[var(--border-accent)]"
/* `sh-rule-top` draws the draft's accent rule across the top
of the tile as the pointer arrives. */
className="sh-lift sh-reveal sh-reveal--in sh-rule-top flex h-full flex-col gap-sm rounded-card border border-[var(--border-subtle)] bg-[var(--surface-card)] p-xl hover:border-[var(--border-accent)]"
>
<h3 className="heading-h3 text-[var(--text-primary)]">{pillar.title}</h3>
<p className="body-md text-[var(--text-secondary)]">
@@ -680,59 +696,35 @@ export default function Home({ loaderData }: Route.ComponentProps) {
{copy.networkLabel}
</h3>
{partners.length > 0 ? (
<ul className="grid list-none grid-cols-2 gap-md sm:grid-cols-3 lg:grid-cols-4">
{partners.map((partner) => {
const href = safeHref(partner.website);
/* The logo wall is a grid of equal tiles; the name is the
tile's text when there is no logo to draw, and always its
accessible name. */
const inner = (
<>
{partner.logo ? (
<img
src={partner.logo.src}
alt={partner.name}
loading="lazy"
className="max-h-[3.5rem] w-auto max-w-full object-contain"
/>
) : (
<span className="body-sm-bold text-center text-[var(--text-secondary)]">
{partner.name}
</span>
)}
</>
);
return (
<li
key={partner.id}
className={cx(
"sh-reveal sh-reveal--in flex h-[5.5rem] items-center justify-center",
"rounded-control border border-[var(--border-subtle)] bg-[var(--surface-card)] p-md",
"transition-colors duration-[var(--motion-duration-base)]",
"hover:border-[var(--border-accent)]",
)}
>
{href ? (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="flex h-full w-full items-center justify-center"
>
{inner}
</a>
) : (
inner
)}
</li>
);
})}
</ul>
) : (
{partners.length === 0 ? (
<EmptyState message={copy.partnersEmpty} />
) : partners.length >= PARTNER_MARQUEE_MIN ? (
/* The wall drifts, as the third draft draws it. The track holds
the tiles twice so the loop is seamless; the mask fades it out
at both ends instead of cutting a tile in half. Both halves
come from one list, so the wall can never show a partner the
CMS does not hold. */
<div className="sh-marquee-mask relative overflow-hidden">
<ul className="sh-marquee flex list-none">
{partners.map((partner) => (
<PartnerTile key={partner.id} partner={partner} fixedWidth />
))}
{partners.map((partner) => (
<PartnerTile
key={`repeat-${partner.id}`}
partner={partner}
fixedWidth
decorative
/>
))}
</ul>
</div>
) : (
<ul className="grid list-none grid-cols-2 gap-md sm:grid-cols-3 lg:grid-cols-4">
{partners.map((partner) => (
<PartnerTile key={partner.id} partner={partner} />
))}
</ul>
)}
</div>
</div>