Generate a per-response nonce for SSR scripts instead of permitting arbitrary inline scripts. Allow only required analytics and configured CMS media origins.
- Removed the sheen over the homepage hero image
- Animated the SHARP-ER logo in the navbar
- More padding on the bottom of the hero section in the homepage
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>
The previous commit made `pnpm --filter web start` load the repository-root
.env, which was the wrong file: Strapi reads a bare PORT as well
(apps/cms/config/server.ts uses env.int('PORT', 1337)), so one value there
would have moved the CMS onto the website's port the moment anyone exported
it - and the root .env is docker compose's file, whose WEB_PORT is a
published host port, not a listen port.
The web app now loads apps/web/.env, the way Strapi already loads
apps/cms/.env. PORT and HOST are per-application because they mean something
different to each server. apps/web/.env.example documents them together with
SITE_URL, STRAPI_URL and STRAPI_TOKEN, and warns against the VITE_ prefix,
which would inline a value into the client bundle - STRAPI_TOKEN lives in
that file.
Still no default port: with PORT unset, react-router-serve keeps its own
behaviour of taking the first free port from 3000 upwards. A real
environment variable wins over the file, so a systemd unit or a container
that injects PORT is unaffected.
.dockerignore now excludes .env at every depth, not only at the root.
`COPY apps/web ./apps/web` would otherwise have baked a developer's
apps/web/.env - STRAPI_TOKEN included - into the image.
Verified against the existing build: PORT=8140 HOST=127.0.0.1 in
apps/web/.env listens on 127.0.0.1:8140, and PORT=8141 in the environment
overrides the file while HOST still comes from it.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
react-router-serve only honours a port it is given: with PORT unset it calls
getAvailablePort(3000) and takes the first free port from 3000 upwards
(@react-router/serve cli.js). Nothing in the manual path set PORT, so a
busy 3000 silently moved the site to 3001, 3002 and so on, and a reverse
proxy configured against one upstream stopped matching. Docker never showed
this because apps/web/Dockerfile and docker-compose.yml both set PORT=3000.
The web start script now always passes a port - PORT if exported, else
WEB_PORT from .env, else 3000 - so the manual path is as deterministic as
the containerised one and .env's WEB_PORT finally reaches the process that
binds. HOST is deliberately left undefaulted: react-router-serve reads it
directly, unset means every interface (what the container needs) and
127.0.0.1 restricts the socket to a proxy on the same host.
Verified against the existing build: PORT=8123 listens on *:8123, and
WEB_PORT=8124 HOST=127.0.0.1 listens on 127.0.0.1:8124 and serves /en with
a 200 while the CMS is down.
.env.example documents both variables, and the deployment section of
README.md gains a systemd unit, since nothing sources .env there, and a
warning that WEB_PORT is the published host port under Docker but the
listen port in manual mode.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The bar carries the drafts' translucent ground with
`backdrop-filter: blur(14px)`, and a filtered element becomes the containing
block for every position:fixed descendant (CSS Filter Effects 1 s.6.1). The
drawer was rendered inside that header, so its `fixed inset-0` resolved
against the 64px bar rather than the viewport. Measured on the built page at
390x844, the panel came out 390x64: a strip of drawer background at the top,
the menu spilling over the hero with nothing painted behind it, and the page
underneath scroll-locked. The header is also a stacking context
(z-index: var(--layer-header)), so an aria-modal dialog nested inside it
could never rise above anything painted above the bar.
The drawer is now portalled to <body>, which resolves the containing block
and the stacking context at once, and is where a modal dialog belongs
regardless. The portal mounts one commit after hydration so the first client
render still matches the server's; nothing is lost, because the trigger is a
button with an onClick - without JavaScript the drawer could not be opened
at all - and every link in it already ships in the server-rendered
DesktopNav markup.
The inert walk benefits too. It inerts each ancestor's OTHER children up to
<body>, which previously could not reach the header without inerting the
drawer inside it; from the portal, body's other children are exactly the
header, main and footer.
Also gives the hamburger and its close twin a 44x44 hit area. They were
24x24, under the WCAG 2.5.5 target size; a logical negative inline-end
margin keeps the glyph on the same page gutter the wordmark opposite it
uses, so it still mirrors in Arabic.
Verified in a headless browser against the production build at 390x844: the
panel fills the viewport in both locales and mirrors under dir="rtl", focus
moves to Close on open and back to the trigger on Escape, the scroll lock
and the inert flags are set and cleared, and the desktop nav is unchanged -
three group triggers and a working dropdown at 1440px, the hamburger at
1279px.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
An audit of all twelve draft files against the build turned up a set of
mismatches, most of them in the tier-2 token layer rather than in any one
component. Tier 1 is untouched throughout - only the meanings moved.
SHAPE. The drafts draw three corners, not five: 2px for a tag, thumbnail,
flag or checkbox, 4px for anything with a box, and fully round for a filter
chip or status pill. Nothing in any draft is 8px or 12px. --radius-card and
--radius-surface therefore come down to radius/sm, a --radius-chip is added
for the 2px tier, and --radius-control-lg - a quirk of the Figma Button
frame's ghost cells - is retired along with its four consumers.
ELEVATION. A shadow is a fraction of the ground it falls on, and the ramp
was tuned for a white page: on the drafts' near-black ground a 12-28% black
is invisible. Tier 1 gains the two deep steps the drafts actually draw
(--shadow-dark-lg/xl), and --elevation-card/-popover/-modal move into the
per-surface blocks so the dark surface can take them while the light one
keeps the soft ramp. A resting card now has no shadow at all - the drafts
separate with a hairline - and the black is spent on what floats.
CARDS. The hover was a white-24% hairline and a faint glow; the drafts turn
the hairline accent green, lift the card 6px and land a deep black under it.
The lift is pointer-only and is dropped under prefers-reduced-motion.
GHOST IS A TEXT LINK. The drafts never fill a ghost control - every
"All updates ->" is plain text that turns green while the label-to-arrow gap
opens. The tokens carry no fill in any state and the variant opts out of the
3px lift, which also retires the WCAG workaround the old Figma hover forced
(green label on a green fill, 1.40:1).
NAVIGATION. A nav label rests in text/secondary and brightens to primary;
the current section stays primary and is marked by the accent rule, not by
green text.
HERO STRIPE. The middle block was painted near-black against a comment
claiming the redesign had dropped white; the drafts paint it #F8F9FA. Back
to background/inverse, and to the drafts' 390 : 495 : 363 split.
styles/README.md is updated to match, including a contrast table that still
described --surface-raised as the retired #2e2e2c.
Not changed, because each is a decision rather than a defect: the drafts set
every eyebrow, tag and meta line in IBM Plex Mono at 10-11px with 1.2-1.4px
tracking (a third typeface, and no Arabic counterpart); draft headings are
weight 800, which needs a font file we do not have; and the EU badge
statement stays at --text-primary, since the visibility lockup is
contractual.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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>
The page resembled the design but had drifted in every band. Ported it
section by section against the measured frame.
Hero (253:4800)
- Add the SHARP wordmark above the headline. The frame paints "SHARP"
only, not the full SHARP-ER lockup the navigation carries, so this is
the SHARP mark on its own, as vector (extracted from the brand
guideline artwork) at its true 273px rather than an upscaled PNG.
- Drop the leading project name from the headline in both locales: the
wordmark above now carries it, as the frame composes it.
- Stop the lead paragraph rendering by default. The frame's subheading
node is hidden, but the code fell back to the site description, so a
paragraph always appeared.
- Fallback CTAs become "Discover SHARP-ER" / "Explore Our Work", 24px
apart. Both the CMS and fallback paths now render through one HeroCta,
so an editor-authored secondary CTA gets the designed white treatment
instead of the dark-surface outline.
- The picture loses its radius and gains the frame's two flat washes and
wide band.
Figures band
- 253:4835 is hidden="true" in the frame, so the band and its "figures
still being confirmed" placeholder no longer render. It appears only
once the CMS supplies real numbers.
Launch (361:10853)
- Heading renders at Display/Small instead of Heading/H2. SectionHeader
gains `size` since display-sm was reachable only via titleAs="h1".
- The three-paragraph story becomes the frame's single centred lead with
its four bold runs, which needed a ProseRun copy shape - a flat string
cannot carry emphasis.
- The captions were Card.Content links with images and action labels;
the frame draws plain centred Heading/H2 text.
- Add the three-up photo strip that bleeds past the page and clips.
- Remove the funding line, which the frame does not draw in this band.
EU visibility still stands via the nav badge and footer statement.
Partners (393:14754)
- Heading moves from centred to start-aligned, up to Display/Small.
- Tiles move to the sunken surface (they were lighter than the page; the
design has them darker), lose their border, 8px -> 4px radius, padding
on the inline start only, logo 48 -> 70px, name to Body/Large Bold.
Footer
- Black ground via a new --surface-footer token, a top rule, links up to
Body/Large Bold 18/28 at 24px spacing, and column headings to
Body/Small Bold on --text-tertiary.
- Keeps the real IA from ROUTE_SLUGS rather than frame 140:7814's
labels, which name six pages that do not exist.
Tokens
- New tier-1 steps for values the design uses and the ramps lacked
(--color-black-a20, --color-green-200-a12, --opacity-50) and tier-2
--overlay-picture-shade / --overlay-picture-tint for the hero wash.
copy.ts now names the Figma frame as the source for the home strings.
The Arabic launch lead is rebuilt from the approved Arabic column to
carry the English frame's meaning and is marked (ar-draft) pending
client sign-off - the file has no Arabic home frame to work from.
Verified: typecheck and build green, no raw hex or tier-1 token in
components/routes, no physical-direction utility, 141 i18n keys at
parity, both locales rendered and checked for RTL mirroring.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Illusion
teledrisi